Vibe Code Like a Developer

I’m not fond of the term “vibe coding”

While the term “vibe coding” makes me a little sick because I take coding seriously (it feels very Bill and Ted’s Excellent Adventure!), until we have another term that one fits for now. It’s slipped into our normal speech as a viable term so I’ll use it here.

I’ve been using vibe coding in a couple of different ways with the underlying purpose of thinking like a developer while iterating quickly. My hope is when I put the application out into the world that it will work properly. It will be accessible, be modular and be estensible into the future.

It’s important that whatever you build has a strong foundation and is maintainable and testable. To me this means limiting code bloat (which can easily happen in a React app, for example) and designing from a human-centred perspective.

As a designer who codes, I think I’ll get the best result if the code does what it says on the tin, no more no less and the user is the ultimate judge of that. I also want AI to challenge me on my assumptions so I can do this better.

First there’s the idea: How do you want to help someone get a job done? Then, go through the Design Thinking steps so you can validate the problem and uncover opportunities.

I’m not suggesting a full on business plan but something much simpler: I got the idea from conversations then I validated it by talking to real end users.

There are quite a few options for vibe coding now and the two I use are:

1. Claude AI
2. Visual Studio Code Copilot (Cursor Extension)

Claude.ai

I find Claude to be an amazing companion in many ways, even more than ChatGPT because it feels empathetic and it makes suggestions rather than being a know-it-all. It gets smarter with more context, so I make sure to build a Project rather than starting fresh with a new chat prompt each time then I benefit from past interactions and AI learns as I go.

(Note: I’m using Claude.ai latest free version)

It’s smart enough to look back at past conversations for insights, and when you need it, it can help you with your design confidence and your belief in your idea, and also it’s very pragmatic. Make sure to tell it to ask clarifying questions so what it produces is from your head and your plan.

I use it to start an idea in code and it’s really good at doing this as long as you give it enough context. I have found, though, that I need to tell it some things in order to get the best, error free results:

1. Code like a senior developer
2. Ask me any clarifying questions, one by one, before you start
3. Test your own code
4. I give it modern frameworks to use:
   • React
   • Tailwind
   • ShadCDN
5. I tell it that anything I enter into the app should be retained if I refresh the page, to simulate the existence of a database (I’m really asking for it to use the browser’s Local or SessionStorage to retain the data I enter so context is retained).

Once I give it these parameters what comes out is usually pretty workable and I can run the code locally and tweak it from there. This brings me to VS Code’s Cursor Extension which connects to Copilot on GitHub. The benefit here is your AI agent has access to all your code, and this is important for keeping it all working together.

Visual Studio CodeCursor Extension

One thing to keep in mind that this extension is a little bit poorly named because it connects to Copilot on GitHub. Don’t let that worry you. Once you create an account it can access online, you can then get it to test your code and optimise it. As it learns it becomes more helpful.

Here’s some things I got it to do for me:

1. Install Storybook (a UI management tool for your components)
2. Review and test all code for functionality (it found instances where React components were being called incorrectly or as duplicated code)
3. Fix bugs resulting from earlier Claude prompts that were insufficiently executed
4. Update ReadMe.md file with all node script commands
5. Set up deploy to GitHub and manage commits after AI requests

Think like a developer

I know the above steps because I’ve worked with code before so I am able to apply them and get good results. I can also fix issues. To find out more about this you should make sure to research how developers work; you don’t need to be one to get started. It does help to think like one.

Developers “talk to the duck” meaning when there’s an issue sometimes talking to yourself about it is the best way to solve it. Talking walks also helps. Development can be frustrating, so don’t let your emotions get the better of you.

In fact, read about how developers are like surgeons here. Be brave and know that you might need to break and redo things to fix them.

The biggest benefit here for users is the ability AI gives us to iterate VERY quickly. You should ground these iterations in reality (does the application help users get their job done faster?) and live in a design structure like Design Thinking so you can be productive.

How do you use vibe coding? I’d love to hear in the comments.