Three Common Pitfalls When Starting Vibe Coding and How to Handle Them
About This Article
When I started Vibe Coding, there were several situations where I did not get the results I expected. This article organizes three problems I encountered early on, covering “what situation caused it,” “why it happened,” and “how I addressed it.” I hope this serves as a useful reference for anyone who runs into the same situations.
Problem 1: Vague Instructions Led to Unexpected Implementation
The Situation
I gave the instruction “make the header look cool,” and the AI enlarged the font, changed the background to a dark color, and added animation effects. What I had in mind was “adjust the spacing to make it cleaner,” so the result was entirely different from my intent.
Why It Happens
The AI fills in information that is not included in the instruction and implements accordingly. The phrase “look cool” allows many interpretations, and the AI picks one and acts on it. There is no way for the AI to know in advance which interpretation is correct, so the more vague the instruction, the more the result tends to diverge from the requester’s intent.
How I Addressed It
I started including the desired “state” in my instructions. Instead of “make it look cool,” I write something like “double the top and bottom padding of the header, keep the background color white, and leave the font size unchanged.” Specifically naming what to change and what to leave alone. The instructions get longer at first, but because the results come closer to what I intended, the number of correction rounds decreases.
Problem 2: AI-Generated Design Did Not Match My Intent
The Situation
I gave the instruction “change to a simple, easy-to-read design,” and it did become simpler, but there was too little information left — the navigation I needed disappeared. What I wanted was “make the appearance cleaner,” not “reduce the features.”
Why It Happens
The word “simple” encompasses both visual simplicity and functional simplicity. The AI may implement based on one meaning of the instruction. Also, “change it” does not limit the scope of the change, so the AI sometimes modifies related elements broadly.
How I Addressed It
I started limiting the target and scope of changes. For example: “change the sidebar design. Keep the navigation items as they are, and only adjust the background color and text color.” I also started organizing “what to change and what not to change” in my own head before giving the instruction. Without that organization, I cannot accurately convey to the AI what I want changed and how.
Problem 3: Context Was Lost as the Session Grew Longer
The Situation
After many rounds of revisions within the same session, there came a point where I felt “this implementation is the opposite of the approach we discussed earlier.” When I checked, the AI was responding as if it had forgotten the policy set at the beginning of the conversation.
Why It Happens
There is an upper limit to the amount of conversation an AI can reference at once (the context window). As a conversation grows longer, early information becomes harder to reference. In particular, implicit premises like “the design policy for this site is X” or “this page should not do Y” are not retained by the AI unless they are stated explicitly.
How I Addressed It
I started restating important policies periodically. Premises like “this site maintains a simple design; navigation should not be expanded” get included at the beginning of instructions at key points in the work. I also started each new session by summarizing the necessary context at the top of my first instruction.
Summary
What the three problems have in common is this: “The AI implements the content of the instruction, but does not automatically understand the intent behind the instruction.”
Making instructions specific, limiting the scope of changes, and periodically restating important premises. Keeping these three points in mind significantly improves the accuracy of working with AI.