DEV Community

Cover image for Fiday Night, VibeCoding and Leadership
NewCapital.in
NewCapital.in

Posted on

Fiday Night, VibeCoding and Leadership

Friday. End of day. The smell of afternoon coffee was already a distant memory. I needed to leave, but my colleague who would give me a ride had been “kidnapped” by a last‑minute meeting with the director. With an intense week behind me and fatigue setting in, the obvious option was just to wait. But why not use the extra time to make a small product adjustment?

I had a pending CSS/responsiveness issue on the frontend — something that wasn’t the business “core” but was annoying. I thought to myself: we have Cursor (the AI tool) at our disposal, no one’s watching (what a shame!)... why not indulge in a bit of VibeCoding?

VibeCoding activated:

Configuration Status
VibeCoding Mode ON
Strong Descriptive Capacity 'lazy-beast'
Locate PrintScreen Button Check
Slightly funny podcast Check

Let’s vibecode.

My first interaction with the tool was straightforward:

First Prompt:

Consider the Refresh button. It disappears as we switch between breakpoints. Keep it with position: absolute with a margin of 12px for TOP and RIGHT, regardless of the user's screen dimension.

(I attached a screenshot of the current situation)

The result wasn’t good. Too tired to be articulate, I took another screenshot, pasted it into Cursor’s chat, typed not good, and hit Enter.

I felt a slight satisfaction watching the code get corrected while I was distracted by the podcast.

It was wrong again. I took another screenshot. This time, I went a step further: I inspected the button, selecting it so the screenshot clearly showed which element in the tree I meant and which CSS classes were affecting it. Enter again.

Error.

This happened about six more times. My initial laziness started turning into a mix of anger and curiosity. I thought: how could my direct, contextual description not be enough for Cursor to debug?

That word — debug — was essential to finding the solution. How does a frontend developer debug an element’s behavior?

CSS:

border: 1px solid red;
Enter fullscreen mode Exit fullscreen mode

Inspired by the motto “Don’t work hard, work smart” — or maybe just by the week’s fatigue — I gave the AI the order:

Prompt:

In these elements of this (new) screenshot, add colored borders so I can debug this button that is not in the correct place.

Borders inserted. Everything colorful. I didn’t even pay attention to the elements. I just took another screenshot of the colorful screen, pasted it into Cursor, and typed: Can you see the problem now?

The response was immediate and perfect:

Cursor Response:

Yes, I know exactly where to make changes to position the button correctly. I will implement the modification and then remove the borders we inserted for 'debugging'.

Perfect. commit and push to my branch.


The leadership lesson in the AI interaction

I was struck again because the approach that worked isn’t very different from what I usually do with the development team I lead. Here lies the main leadership lesson: the key to guiding a team is not just giving the correct instruction, but diagnosing current understanding and perspective. Just as Cursor was “blind” to the visual context of a wayward CSS, a developer can be stuck in a limited view of a requirement or component.

My job as a leader, inspired by this AI debugging session, is to provide the “visual step” — the “colored border” — that is, a new piece of data, a different contextual question, or a metaphor that allows the person, or the AI, to see the problem in a new light. Leadership is more about diagnostic clarity and context adjustment than it is about direct commands.


From debugging to the Finite Element Method

The key to unblocking Cursor and solving the problem was forcing discretization. When my initial prompt failed to resolve the macro responsiveness issue, I needed to divide the analysis domain (the entire screen) into finite elements that were simpler to process. The colored borders forced the AI to delineate and focus on small portions of the problem — the parent element, the button, the viewport — isolating the failure that analyzing the complete image could not perceive.

This approach is not only effective in code debugging or people leadership; it is the fundamental principle of the Finite Element Method (FEM): to solve a complex, continuous problem (like a material’s behavior under stress or complex CSS), it is necessary to subdivide it into simple subdomains (the elements) that can be solved individually and then combined to form the global solution. That Friday night, I wasn’t just coding — I was applying an advanced engineering method to persuade an AI to see the reality of the frontend.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.