🏄

an introduction to vibe coding

Vibe coding is an unfortunate name.

It makes you believe its simple but this skill is perhaps the most powerful thing you can learn in the AI domain, as it allows you to describe what you want in everyday language to write production ready code.

The trick here is to craft prompt in natural language with the level of precision necessary for the AI to know precisely what you want.

A vibe code prompt runs in two axes:

  • Conceptual:
    • What you want to build conceptually - “Include a call to action button that feels playful”; and
  • Technical
    • Exactly how it must look to behave - E.g. “and I want you to make it look like this: “Tailwind class: bg-indigo-500 hover:bg-indigo-600, padding py-2 px-4, rounded 2xl, with a drop shadow.” If you have an exact idea what it should look like.

An example of how to do this, structured and broken down

  1. Role and intent
    • “You’re a React/Tailwind expert who crafts playful, modern UI components.”
    • Anchors the model in the correct domain.
  2. Describe the button
    • “This button should feel energetic and joyful, like a confetti pop.”
    • Conveys aesthetic and emotional goals.
  3. Specify its function
    • “It will be used on the signup form, so needs clear accessibility labels and focus states.”
  4. Give it style constraints if you have a specific look you want
    • “Use Tailwind classes: bg-pink-400 with hover:bg-pink-500, rounded-2xl, shadow-md, font size lg, and transition-transform duration-200.”
  5. Include interaction details
    • “On click, scale up to 1.05 and then back over 150ms.”

Remember this is just a single component:

You’re a React/Tailwind expert.
Create a playful “Sign Up” button for a signup form.
Vibe: joyful and energetic, like confetti bursting.
Accessibility: include `aria-label="Sign up now"` and focus outline.
Style constraints:
- Background: `bg-pink-400`, hover `bg-pink-500`
- Rounded corners: `rounded-2xl`
- Shadow: `shadow-md`
- Padding: `py-3 px-6`
- Font: `text-lg font-semibold`
- Transition: `transition-transform duration-200 ease-out`
Interaction: on click, animate scale to `1.05` then back over 150ms.
Provide complete JSX and comment each Tailwind class.

And remember, this is just a prompt for a single button, you can do this at much greater scale and build whole applications which is what we’ll cover later.

The common pitfalls with vibe coding

With vibe coding, you need to understand the limits of your context window in the following ways:

  • Underspecification:
    • If you are not specific enough about what you want to build, provide no contextual or technical detail you could end up with outputs you don’t like. On the flip side - sometimes this isn’t a bad strategy if you hadn’t thought about what to do. Vibe coding will often do things that absolutely delight you and fill in gaps you may not fully understand.
  • Overspecification:
    • If your requests are too long, too detailed, and include too many features, you max out the context window. For example. If you were building a house - you might want to start with the high order requirements (land size, building materials, rooms, orientation etc) - let the model complete a version, and then go about making changes in subsequent prompts. You can also isolate core vibe vs. optional nice to haves.
  • Models can miss context if you don’t provide it:
    • Don’t assume models know what you want. It could guess the wrong use-case - and create something completely off topic. If this happens you might need to start again rather than trying to modify back.
  • Inconsistent terminology:
    • It’s often good to name concepts in your application, so when you want to make changes you can accurately hone the model in on what it’s trying to fix. You only want the AI to work on the code and features it needs to work out. If you are imprecise with your language it may go and alter something else.

The logical frame to vibe coding

Vibe coding can feel like 2 steps forward, 1 steps back at times. Here are some other tips:

  • When you craft your first prompt, do the research and think it through. You’re trying to be as accurate as you can about what you want to build from a conceptual and technical point of view.
  • You are trying to balance the context window between being under-specified and overspecified.
  • Before you start building most vibe coding tools will read back to you what they’ve been instructed to do and give you instructions for extra features. This is a critical step to review. Don’t just approve it. If you think it could be improved tell it. It’ll adjust - and then approve.
  • Once the model starts building - it’ll get to work, and create a massive amount of the application on the first prompt. Sit and pay attention to what it’s doing.
  • Once the first draft is complete, note down what you like, what you dont like, and observe what has been built.
  • Then think through step by step how you want to work through the app to iterate what you want to do. Write that out as a list. Patience here is key.
  • Then you want to start working through the features, keeping in mind there may be dependencies between features. If your application needs a database get it put it at the first instance. Changing data structures later introduces a lot of errors. If you have specific ideas of what the data structures are - you should specify them up front - by adding a file and referring to it. Let the AI do the work to implement it. It’s easier to get it right up front rather than having to go back.
  • Then you work through each component of the app, and get it right. For each new feature I reset the prompt window. This maximises the prompt context. If a change needs a couple of changes or adjustments it’s better not to reset it each time so it has that context.
  • If the prompt screws up the application, just reset it back to the checkpoint, consider your approach and try again.
  • Periodically you might want to ‘branch’ your application, so you can go back to an old version if you liked a version at a point, or you want to create a number of versions of an app.
  • Don’t be afraid to feed ‘code’ to an app, to get it to use the colour pallet you like, or you want buttons to look a certain way. Often just referring the AI to real content or code is the best way of executing that way.
  • Make sure to test your application end to end at the end.

Conclusion

  • Vibe coding merges natural language with code precision.
  • Split your prompt into vibe, function, and technical sections.
  • Use explicit constraints and reference examples to eliminate guesswork.
  • Iterate quickly: generate, test, refine.
  • Build a reusable library of vibe-code prompts for rapid development.

With precise natural language prompts, “vibe coding” becomes a powerful way to sculpt UI components fast, consistently, and at scale.