Skip to content

Instantly share code, notes, and snippets.

@andrzj
Last active April 13, 2025 23:23
Show Gist options
  • Save andrzj/cfd2dd14dcffbd7751715b3225ada2c0 to your computer and use it in GitHub Desktop.
Save andrzj/cfd2dd14dcffbd7751715b3225ada2c0 to your computer and use it in GitHub Desktop.
Vibe Coding tips

AI / Vibe Coding / Prompt Driven Development Tips

Add Tests

I see a lot of posts about "getting stuck", "burning through tokens" and "going around in circles" etc. To prevent this you need to add tests and get them to pass. Aim at 60% test coverage. Otherwise when your app or program because more complicated, bringing in a new change will break an already working feature. The app does not know what to consider when making changes as it doesn't have the context from all of your previous conversations. Whereas if you add tests, they will fail and when this occurs and the app will understand the purpose of the test, and that you need to maintain that functionality. It will add a bit of time in the beginning but save you from a world of hurt later on. You may not need to write the code anymore, but you still need to think like an engineer because you're still engineering.

Source: Reddit


A Practical Guide

Why it works

  • Faster prototyping
  • Lower barrier to entry
  • Easier experimentation
  • Less time on boilerplate
  • Faster feedback cycles

It works because you get to move ideas into working form quickly without slowing down to fight syntax or look up documentation constantly.

Who it’s for

  • Beginners who want to learn by doing
  • Designers and artists who want to build tools or interfaces
  • Developers who want to move faster
  • People who want to test ideas before investing in them

If you can describe it clearly, you can build it.

What you need

  • A chat-based AI that can code (ChatGPT, Claude, Copilot, Cursor)
  • A code editor or runtime environment (Replit, VS Code, Cursor, etc.)
  • A way to run and test your code (browser, terminal, sandbox)
  • Optionally, version control (Git)

Starting workflow

  1. Open your assistant
  2. Open your editor
  3. Decide what you want to build
  4. Write it in plain language: “I want to build a tool that lets users upload a CSV file and generates a chart.”
  5. Let the AI generate the first version
  6. Test it
  7. Say what’s wrong, unclear, broken, or missing
  8. Ask for changes
  9. Keep going

How to structure a project

Use a minimal but clean structure. Avoid overbuilding early.

  • Start a new folder
  • Make a README describing the idea in 2–3 sentences
  • Decide your stack and tools (HTML/CSS/JS, Flask, React, etc.)
  • Ask the AI to scaffold it: “Set up a basic Flask app with routing and templates.”
  • Build it one feature at a time
  • Prompt clearly and keep track of what was added
  • Use version control if it gets bigger than a few files

Prompting effectively

Don’t ask for everything at once. Be specific, but let the AI choose how.

Examples:

  • “Create a form that lets the user enter a list of expenses and displays a total.”
  • “Add error handling if the form is submitted with empty fields.”
  • “Refactor this into separate functions and explain why.”
  • “Change the color scheme to use shades of green and make buttons rounded.”
  • “Use async/await instead of callbacks.”

You can also say:

  • “List three ways to do this and choose the cleanest one.”
  • “Show me how to do it without using jQuery.”
  • “Only use vanilla JS. No frameworks.”

When it doesn’t work:

  • “This throws an error: [paste error]. Fix it.”
  • “This code works but feels messy. Clean it up.”
  • “The layout breaks on mobile. Make it responsive.”

How to iterate

Vibe coding is iterative by design. You don’t have to plan everything in advance, but you do need to move clearly.

  1. Start with a working version of something
  2. Test it
  3. Fix what’s broken
  4. Add one thing
  5. Repeat

Each loop should produce visible progress. If it doesn’t, clarify the prompt or back up a step.

Debugging

When the AI gives you broken code:

  • Paste the exact error into the chat
  • Say what you expected to happen
  • Ask for a fix and an explanation

If it breaks again, ask:

  • “Why might this error still be happening?”
  • “Is there something missing from the dependencies or import statements?”
  • “Rewrite this in smaller pieces and test each one.”

The AI can often write tests too:

  • “Write three test cases for this function.”
  • “Add unit tests for edge cases.”
  • “Mock the database so I can test without it.”

Code review

If the AI gives you code that works but you don’t understand:

  • “Explain what this function does.”
  • “Why did you choose this structure?”
  • “What would be a simpler way to do this?”
  • “What’s the downside of this approach?”

You’re not just using the AI to write. You’re using it to teach.

Best practices

  • Keep prompts short and clear
  • Test early and often
  • Save working checkpoints
  • Name files and variables with purpose
  • Ask the AI to comment or document the code
  • Avoid complex chains of logic unless needed
  • Don’t chase cleverness—ask for clarity
  • Stay involved; don’t autopilot

Common prompt types

  • “Build a login form with username and password.”
  • “Create a navbar with dropdowns.”
  • “Store submitted form data to a JSON file.”
  • “Add client-side validation.”
  • “Deploy this to Vercel.”
  • “Make it work on mobile.”
  • “Rewrite this without React.”
  • “Add loading indicators.”

Creative projects

You can build creative tools, not just utility apps.

Examples:

  • “Create a random pattern generator in p5.js that uses mouse input.”
  • “Build a browser-based drum machine with keyboard shortcuts.”
  • “Make a web page that displays procedurally generated poetry.”
  • “Use the Web Audio API to create sound from typed input.”
  • “Create a canvas where drawing speed affects color and thickness.”

You can mix code and design:

  • “Create a landing page with soft gradients and floating buttons.”
  • “Add animations to each section when scrolled into view.”
  • “Use Tailwind to build a card layout for three product features.”

Let the AI help generate layout, content, copy, and interactivity.

When to take control

Vibe coding works best when you:

  • Know your goal
  • Can recognize when output is wrong
  • Can break the problem into smaller parts
  • Know what “done” looks like

If the AI starts to hallucinate, wander, or stack errors:

  • Stop
  • Rephrase the goal
  • Copy only what worked
  • Refresh the context with a clean prompt

When not to use it

Don’t rely on vibe coding for:

  • Complex algorithms with safety-critical edge cases
  • Sensitive systems without human review
  • Long-term architecture decisions you don’t understand
  • Anything you can’t test or verify directly

If it has to be precise, review everything. If it has to be scalable, test under pressure. If it has to be secure, bring in another set of eyes.

How to get better

  • You learn by doing. But here’s how to accelerate:
  • Ask the AI to explain code
  • Try rewriting its code manually
  • Build small clones of real apps
  • Copy working examples and remix them
  • Keep a library of useful prompts and code snippets
  • Study the patterns that come up in the code
  • Ask what you’re unsure about
  • Stay skeptical but curious

You don’t have to memorize syntax. You just have to understand the moving parts, how to change them, and when to ask for help.

What to avoid

  • Prompting for huge features in one go
  • Copying code you don’t understand
  • Stacking too many edits without testing
  • Letting the AI overwrite working code
  • Letting the project grow without any checkpoints
  • Blindly trusting any generated code
  • Asking for too many unrelated things at once

Good vibe coding feels fast, but it's not careless. You’re still driving.

Sample project flow

Say you want to build a personal journal web app.

You start with:

“Create a basic web app where users can write journal entries and view them later. Use Flask.”

Then you say:

  • “Add a timestamp to each entry.”
  • “Store the entries in a file, not in memory.”
  • “Make the design minimal and clean.”
  • “Add a dropdown to filter by date.”
  • “Add a button to export all entries as CSV.”
  • “Make the UI mobile-friendly.”
  • “Deploy it to Replit.”
  • “Add login with username and password.”
  • “Make the passwords hashed.”

Each step is just one prompt. Test as you go. Clean as you go.

By the end, you’ve got a working journal app—built by guiding the AI, not grinding through syntax.

Closing advice

Be clear. Stay in control. Use the AI as a tool, not a crutch. Break work into steps. Test constantly. Own your ideas.

This isn’t just about getting code written. It’s about building with speed, intention, and control—on your terms.

Source: Reddit


5 principles of vibe coding

Pick a popular tech stack (zero effort, high reward)

If you are building a generic website, just use Wix or any landing page builder. You really don’t need that custom animation or theme, don’t waste time.

If you need a custom website or web app, just go with nextjs and supabase. Yes svelte is cool, vue is great, but it doesn't matter, just go with Next because it has the most users = most code on internet = most training data = best AI knowledge. Add python if you truly need something custom in the backend.

If you are building a game, forget it, learn Unity/Unreal or proper game development and be ready to make very little money for a long time. All these “vibe games” are just silly demos, nobody is going to play a threejs game.

⚠️ If you dont do this, you will spend more time fixing the same bug compared to if you had picked a tech stack AI is more comfortable with. Or worse, the AI just won’t be able to fix it, and if you are a vibe coder, you will have to just give up on the feature/project.

Use a product requirement document (medium effort, high reward)

It accomplishes 2 things:

  • it makes you to think about what you actually want instead of giving AI vague requirements. Unless your app literally does just one thing, you need to think about the details.
  • break down the tasks into smaller steps. Doesn’t have to be technical - think of it as “acceptance criteria”. Imagine you actually hired a contractor. What do you want to see by the end of day 1? week 1? Make it explicit.

Once you have the PRD, give it to the AI and tell it to implement 1 step at a time. I don’t mean saying “do it one step at a time” in the prompt. I mean multiple prompts/chats, each focusing on a single step. For example.

Here is the project plan, start with Step 1.1: Add feature A

Once that’s done, test it! If it doesn’t work, try to fix it right away. Bugs & errors compound, so you want to fix them as early as possible.

Once Step 1.1 is working as expected, start a new chat,

Here is the project plan, implement Step 2: Add feature B

⚠️ If you don’t do this, most likely the feature won’t even work. There will be a million errors, and attempting to fix one error creates 5 more.

Use version control (low effort, high reward)

This is to prevent catastrophe where AI just nukes your codebase, trust me it will happen.

Most tools already have version control built-in, which is good. But it’s still better to do it manually (learn git) because it forces you to keep track of progress. The problem of automatic checkpoints is that there will be like a million of them (each edit creates a checkpoint) and you won’t know where to revert back to.

⚠️ if you don’t do this, AI will at some point delete your working code and you will want to smash your computer.

Provide references of docs/code samples (medium effort, high reward)

Critical if you are working with 3rd party libraries and integrations. Ideally you have a code sample/snippet that’s proven to work. I don't mean using the “@docs” feature, I mean there should be a snippet of code that YOU KNOW will work. You don’t have to come up with the code yourself, you can use AI to do it.

For example, if you want to pull some recent tickets from Jira, don’t just @ the Jira docs. That might work, but it also might not work. And if it doesn’t work you will spend more time debugging. Instead do this:

  • Ask your AI tool of choice (agentic ideally) to write a simple script that will retrieve 10 recent Jira tickets (you can @ jira docs here)
  • Get that script working first and test it, once its working save it in a file jira-test.md
  • Provide this script to your main AI project as a reference with a prompt to similar to:

Implement step 4.1: jira integration. reference jira-test.md

This is slower than trying to one shot it, but will make your experience so much better.

⚠️ if you don’t do this, some integrations will work like magic. Others will take hours to debug just to realized the AI used the wrong version of the docs/API.

Start new chats with bigger model when things don't work. (low effort, high reward)

This is intended when the simple "Copy and paste error back to chat" stops working.

At this point, you should be feeling like you want to curse at the AI for not fixing something. it’s probably time to start a new chat, with a stronger reasoning model (o1, o3-mini, deepseek-r1, etc) but more specificity. Tell the AI things like

  • what’s not working
  • what you expect to happen
  • what you’ve already tried
  • console logs, errors, screenshots etc.

⚠️ if you don’t do this, the context in the original chat gets longer and longer, and the AI will get dumber and dumber, you will get madder and madder.

But what about lovable, bolt, MCP servers, cursor rules, blah blah blah.

Yes, those things all help, but its 80/20. They will help 20%, but if you don’t do the 5 things above, you will still be f*cked.

Finally, mega tip: learn programming basics.

The best vibe coders are… just coders. They use AI to speed up development. They have the ability to understand things when the AI gets stuck. Doesn’t mean you have to understand everything at all times, it just means you need to be able to guide the AI when the AI gets lost.

That said, vibe coding also allows the AI to guide you and learn programming gradually. I think that’s the true value of vibe coding. It lowers the fiction of learning, and makes it possible to learn by doing. It can be a very rewarding experience.

I’m working on an IDE that tries to solve some of problems with vibe coding. The goal is to achieve the same outcome of implementing the above tips but with less manual work, and ultimately increase the level of understanding. Check it out here if you are interested: easycode.ai/flow

Source: Reddit


Standard Operating Procedure (SOP): Software Development

AI-Assisted Software Development: A Comprehensive Guide with Practical Prompts (Part 1/3)

AI-Assisted Software Development: A Comprehensive Guide with Practical Prompts (Part 2/3)

AI-Assisted Software Development: A Comprehensive Guide with Practical Prompts (Part 3/3)

7 Lessons I Learned While Writing Code With AI


12 Rules to Vibe Code Without Frustration

Planejamento

  1. Comece com o PMing de Vibe (Requisitos)
  2. Mantenha sua pilha de tecnologia simples
  3. Dê à IA as regras e a documentação corretas

Codificação

  1. Peça à IA para NÃO codificar
  2. Peça à IA opções e escolha a mais simples
  3. Divida as tarefas em pequenas etapas
  4. Inclua imagens para contextualizar a IA

Depuração

  1. Teste implacavelmente após cada alteração
  2. Não hesite em reverter
  3. Use o GitHub para controle de versão

Vibing

  1. Use sua voz para sentir as vibrações
  2. Peça à IA para explicar o código

Source: Creator Economy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment