4 Essential Lessons for New Vibe Coders (from a non-developer)

I've been vibe coding more and more in recent times. Since I'm not a developer, I made a lot of mistakes. A lot of things that can go wrong when you vibe code.

I have used many tools to actually vibe code. I used tools like, Vercel, Lovable, Replit or even Windsurf that seemed very complicated. Lately, I've been using Google AI Studio and Claude Code. I have to say that Claude Code is the tool that works best for me at the moment. I have a pro account and it gives me the best results.

As I said I'm a noob, I am a non-developer and I would like to share some tips that I think are worth following when you start out with vibecoding. The tools that you use matter but they work all in a similar fashion. Not all of them are free to use. There are some free usage tiers with Google AI Studio. I could suggest starting there to get your first experiences.

What language to use

Before starting to code anything it's important to know some facts. Most of the tools that you use for vibe coding actually produce something that is in react.js or vite.js which are great and work very well. The AIs love them but the problem that comes with that is that it's a challenge to deploy the code that is generated. I honestly don't know how to deploy it.
The solution that I found is that I let the tool develop something in the language of it's choice and then ask another AI to translate it into pure HTML and JavaScript. This allows me to open the code with a simple browser and I can easily upload the html file to a dedicated server. Of course, it's not always working; sometimes there is a need for a database but you can also go around that with files, with spreadsheets. These are often enough for the first prototypes.

Start with a plan

The one rule before you start any type of vibe coding is to figure out what you want to create. This is sometimes more complicated than it seems. A good way to figure out what you want to build is to brainstorm your idea with an AI like chatgpt, gemini, deepseek or any other. Ask it how it would build your idea and then refine it until you think that you have a solid project. This can take quite some time but it's really worth to do this well. Once you think you have more or less what you want, you ask the AI to generate a PRD (a product requirement document), which is actually the prompt that you will feed to the AI that we finally code your project.

Now, if you take your PRD and you feed it to Google AI Studio or Claude Code, I would suggest that you first ask it to make a plan that you then revise and refine before getting started.

Version control – your friend while vibe coding

The second very important point is that once you start coding you should learn GitHub and Git commits. Why? Because I started without that. I created a thing and then I asked AI to change some aspects of it and suddenly nothing was working anymore. It was broken beyond repair. What GitHub allows you to do is to have a kind of sequence of the versions that you have. It's called version control. Each time you change your code you make a commit or you ask AI to create a commit. It's often possible to link your coding tool to your GitHub repository and then it will simply create a snapshot of your code when you make a commit. You can then break it and come back to an older working version if necessary.

Be careful with your API keys

Now a very important point when you do vibe coding is that you have to take very good care of your API keys. Whenever you use an external service with an API key, you should be very conscious that these keys can be stolen, that the APIs can be used by somebody badly intentioned, and that it actually opens the door to financial risk. Never put your API keys in a GitHub repository; never show them online; always make sure that they are very well hidden and that you don't leak them by mistake.

What I do, for example, if I include an API of an AI for the tools I create for myself, is to create a setting for a settings page for the API. It is then stored in local storage and it is only living on my computer. The advantage is I can give the template, send it to a friend, and he can use the same using his own API keys.

Vibe coding opens amazing opportunities, and the best is to actually start by doing, try things out, try to create your little app, your little page. Make sure that you learn how to use the tools because they are really powerful. Once you started Vibe coding, you see that a world of opportunities lies in front of you.

Coder's Toolkit:
Brainstorming: Gemini / ChatGPT / DeepSeek (free tiers)
Planning: The PRD (Product Requirement Document) using the same AI's
Coding: Claude Code (paid version)/ Google AI Studio (free tiers)
Safety: GitHub (Commits are your "Save Points")
Deployment: Pure HTML/JS (you save on your desktop and double click to open your app)
Security: create a settings page and use localStorage for the API keys.

---

With @ph1102, I'm running the @liotes project.

Please consider supporting our Witness nodes:

• Liotes Hive Witness
• Liotes Hive-Enginge Witness