So I've never tried 'vibe coding' though I do kinda love using these modern AI models to help me code. But a non programmer friend was asking for tips on a project he's considering 'vibe coding'. I don't have 'great' tips, but I do have some decent guesses. Here's my thoughts (writen as a gist to be possibly useful for others).
I really don't know how well 'vibe coding' works but hopefully this helps. Please let me know how it goes - I'm curious what you find!
- no programming experience
- wants to make a webapp that someday might work pretty good as a mobile app
- no web UI design experience
- Create an account on github (you'll use this to store versioned copies of your code - also most modern dev things can let you login with your github acct). The 'free' plan is fine
- Install "vscode" on your PC, the first time you run it you can login with your github acct. I think it probably installs the "github copilot chat" extension automatically, but if it doesn't you'll need to install it
- Just to get familar with the tools you might try going to https://github.com/new and create a new project. VERY IMPORTANT on that screen make sure to change the project from public to private BEFORE CREATING. Never make a 'sekrit' project public even briefly or bots will probably find it.
- At the bottom of that page in the "Jumpstart your project with Copilot (optional)" you might try saying: "I'm a non programmer trying to make an app to do '(a few sentences here)' it will eventually need to have a webapp. But for now I want you to help build an initial project scaffolding which I'll later extend with a different AI. Include a README.md and an CLAUDE.md file with your guess at initial contents.'
That will make a basic project which you can open and look at using your PC install of vscode. (Sorry I don't remember how do that via the GUI but it should be pretty straightforward). Or you can ask an AI "how do I open my new github project inside of VScode"
Once you have the project open in VS code. Open a "copilot chat" window or tab (icon in upper right of vscode). This will be your new best buddy.
It is very important to set two options that are in little drop-down menus at the bottom of the vscode copilot chat window:
- Agent vs Ask vs Plan. Most of the time you want this to be "Agent" - so the AI can act on your behalf. It should ask before doing anything 'dangerous'. Use 'ask' if you just want to chat with it about ideas, you don't want it do do anything on its own. 'plan' is awesome for big things. I'll describe that below.
- There is a second drop down to choose which AI agent you want. By default it will be using a cheap version of ChatGPT which is 'meh'. IMO as a beginner you should instead choose "Claude Sonnet 4.5" or "Claude Opus 4.6". Use Sonnet for 'easy things/general questions' - it is cheap and fast. Use Opus for anything 'big' (i.e. 'implement this new feature X'). It is slow and 3x more expensive.
But the main next steps are to make your real README.md and CLAUDE.md. Take a look at what github guessed for you but then edit based on the following recommendations.
This will serve as the top level documention/spec for what your project/product is. Initially it should be about one or two pages long written as a 'spec'. what is your product? who are your intended users? will it eventually work on mobile? do you need to have a user database? etc... The AI (and you) will refer to this lots in the future.
Recommended first text:
This is my app to do blah... Then keep filling in a mini spec as if you were emailing it to an enginner.
Put this file at the top directory of the project (same dir as README.md). This file should stay fairly short (one type written page ish?). The AI reads this every time it starts a session. You can give it absolute rules for how the AI should behave. (Other AIs read AGENTS.md instead - but its contents would be identical)
Recommended first text:
About the user:
* The user is a non software engineer doing 'vibe coding'. Please explain what you are doing with that in mind.
* If I need to make accounts/setup new services (firebase/supabase/web page hosting) either do that for me or walk me through how to do that myself.
Rules:
* Always make unit tests for any new code
* When making changes make sure linting and unit tests keep passing
* If you need to use a database use a 'cloud hosted' solution like firebase or supabase.
* Structure my app where almost the entire app is in the 'front-end' but any security relevant validation must somehow be done server side (consider client code untrusted) inside firebase/supbase.
AIs can make mistakes. It is very important to do frequent 'check-ins' of of your current workspace code to github. ask your AI "explain to me how to use github to checkin my latest code" and it will walk you through what to click in vscode. After each time you or the AI complete a feature, check in so you have a clean slate and keep going.
Okay now you are about to do the first real big things. I'd recommend chatting with claude opus and do a series of things:
- "Please read the README.md and CLAUDE.md, update these based on best practices to make them more useful for our future work"
- "Based on my readme, please recommend a series of sub deliverables. What do you think v0.1 features should be, v0.2 and v0.3" (then edit what the AI made and make it more like what you want)
- "Implement v0.1, I want to be able to run it locally for now but eventually it will need to be hosted on a public web server." (hopefully the AI gets something running for you that you can look at and try)
- (Iterate on that v0.1 locally a bit ask the AI to make changes, run, critique, checkin repeat.)
- "Okay, please help me select a web provider - what is the best way to get this webapp hosted on the web"
- While the AI is thinking you can see its comments. If it begins to go the wrong way, totally okay to hit stop and say "that's not quite right, I want more like blah..."
- Possibly try lovable.dev or one of their competitors to make the pretty UI (if claude does a less than great version of that? But I bet you can give claude feedback and it will do pretty well.