🏇

natural language vibe coding

In vibe coding your natural language description is the source of truth but rather than being technically specific you want to convey what you want - rather than being absolutely precise about appearance, behaviour and context. This section walks through how to master description precision and let the AI handle code precision.

Why description precision matters here

  • In vibe coding you need to get good at appropriate levels of abstraction:
    • Talk to the AI at the conceptual level, and let it do the work. Avoid boilerplate and low level syntax to maximise quality.
    • E.g. You could actually provide the URL to a website you like - and let the AI go and look at it for style and just instruct it to do that. That’s probably a better approach than trying to be holistically specific about the low level syntax.
  • You want to be flexible in your approach:
    • By defining clearly what you want, abstracts you from the framework / styles necessary to make an application work holistically. Let the AI do the implementation so you don’t limit it’s creativity.
  • Intent trumps precision when dealing with errors:
    • If you write a specific prompt and you’re wrong, the AI will implement something that is wrong (at your instruction). By specifying intent instead - you allow the AI to implement what you’re trying to achieve but giving it enough latitude to implement it correctly because it’s not being limited by your dumb prompt.

The first shot prompt is the most important

  1. If you accurately and vividly describe your application - the first instantiation of the application will be the most powerful prompt
    • It’s worth taking the time to focus on intent, context, UX, and edge cases on your first prompt. Think of it like laying the slab on a house. The closer you get to what you want to build the better. It’s also the most powerful prompt - so the architecture and structure at this step is super important.
  2. Once it’s complete you want to look closely at functionality, naming conventions and the code to see what it’s done
    • Understanding what’s been built is a critical step to working out what to do next.
    • When you follow up with the next prompts, you want to be precise about the area of the app, the functionality and logic you want to change, and most importantly WHY you cant it to change. Reset the vibe coder, and go again building on top. If you do this section by section, you’ll accurately complete your app super fast.

What prompts should be built up of

Here is a list of elements you may want to consider when creating prompts in vibe code:

Element
Guiding Question
Example
Purpose
Why does this exist?
“A button to submit user feedback form.”
Context
Where does it live?
“Appears at bottom of a modal dialog.”
Appearance
How should it look?
“Rounded corners, gradient from blue to green.”
Behavior
How does it respond?
“Disabled until all fields are valid.”
States
What states?
“Hover: lighten gradient; loading: spinner.”
Accessibility
Who else?
“Keyboard focus ring; ARIA label ‘Submit’.”
Edge cases
What if?
“On mobile, full-width; on desktop, 120px.”

Pro tip: Taking the time to write out each prompt considering each of these elements will rapidly expand the accuracy, and speed of your development. Going slow really does make you go fast. You may want to record each prompt as you go through as well. So if you have to replicate the app a second time, you know what to work off.

Guidance on how to maximise the description precision

You dont need to be a software developer to be a good vibe coder, but some understanding of how code is written precisely is a fantastic enabler. Here are some tips on how to craft prompts.

  1. Use concrete adjectives:
    1. Avoid “nice” or “clean”—opt for “rounded-full” or “drop shadow-md.”
  2. Quantify when possible:
    1. Specify durations (“150ms”), sizes (“24px”), or thresholds (“min-width 320px”).
  3. Prioritise clarity over brevity:
    1. A longer, precise sentence beats a short, vague one.
  4. Reference standards:
    1. Invoke your design system names or utility classes (“Twilio’s primary button style”).
  5. Iterate on the description:
    1. If the generated code doesn’t match, refine the description—add missing details or constraints.

Also, remember, you can use AI to enhance your prompts. You could write a prompt out in plain english and ask AI to make it more precise for a certain programming language. It’s often good to observe the development framework you’re working in, and even specify it - then ask the AI to improve a prompt based on that standard. You might do 2-5 prompts pre-work to craft your vibe prompt.

Here are some common pitfalls and how to avoid them:

Pitfall
Symptom
Solution
Vague Adjectives
“Make it look cool.”
Replace with “use 8px border radius,” etc.
Missing context
Code ends up generic and misplaced.
Specify location: “in header nav,” etc.
Over-specifying Code
Prompt contains raw syntax errors.
Remove code; focus on intent only.
Ignoring states
No hover or disabled styling generated.
List all interactive states explicitly.
Skipping accessibility
Missing ARIA roles or labels.
Always include “ARIA label,” “keyboard focus,” etc.

Conclusion

By honing your natural language descriptions, and being precise about you why, where, and how and for whom - you empower the AI to produce precise code. You should maintain the focus on the vibe and requirements, and let it handle the coding. That’s the point of this technology.

Don’t assume programmers can do this better than you. Ironically, a lot of programmers weren’t trained to think this way, and abjectly don’t like the technology. LOL. It is one arena - you can probably win at computers over computer experts. It does take technique and deep throught through. Don’t assume it’s easy.