DNXAI

Vibe Coding From Scratch: How to Do It the Right Way

By the DNX AI editors4 min read

Vibe coding is not about rushing. It's about using AI the right way, step by step, to build something that lasts and helps people. Here's what I learned this week while building my new websites.

What vibe coding really is

Vibe coding means building websites and apps by talking to AI instead of writing every line of code yourself. You explain what you want, the AI builds it, and you test and improve it.

Some people say vibe coding is bad. I don't agree. It's about how you use it. One person rushes and gets a broken website. Another person uses the same tools carefully, step by step, and gets a better result. The tool is the same; the method is different.

I went back to ChatGPT, and it changed my vibe coding

This week I tried ChatGPT again, not to code, but to ask questions. I realized many of us have left ChatGPT behind, forgetting how good it is.

For learning about the structure of a website, ChatGPT is very strong. It gives you clear information with facts, and it humbles you so you build better. Even the free version is very good, so imagine the paid one.

The most important thing ChatGPT told me: I don't need to rush. It gave me a process to take time and build properly. That changed how I vibe code.

My step-by-step vibe coding process

1. Plan with ChatGPT

Start here, before you build anything. Ask ChatGPT about:

  • Your domain name and what you can build with it
  • Who your customers are and what they need
  • The structure of the website: pages, features and how users move around

2. Create your logo with Gemini

Use Google Gemini to design your logo. Then ask Gemini to give you prompts to:

  • Make a mobile version of the logo
  • Animate the logo, using a tool like Midjourney, or by asking Claude to animate it in code

3. Research your market with Gemini

Use Gemini for market research and for planning the content you are building.

4. Redesign your user interface with Gemini

Gemini is very good at modifying designs. If your user interface is giving you trouble, or you want your blog or SaaS website to look different from everyone else's, give it to Gemini:

  1. Brainstorm with Gemini. Show it your design, or a startup design you like as inspiration, and ask for new ideas.
  2. Let Gemini modify the design. I used Gemini to redesign a nutrition blog website, and it gave it a completely fresh look.
  3. Ask Gemini for the prompt. Have it describe the new design as a prompt.
  4. Give that prompt to Claude and continue building in code.

That's how we do it: Gemini designs, Claude builds.

5. Build with Claude

Now use Claude, and its skills, to understand your niche and build the website. Take the information from ChatGPT step by step and add it to your prompts in Claude. One feature at a time.

6. SEO: mix all three

For SEO, I use Gemini and ChatGPT for research, then Claude to put it into the website. Learn SEO as you build. It's how people find you.

Test your website 100 times

This is the biggest lesson I learned this week.

Today I was working on my classified website, listing items for my customers. While I was using it, I found a lot of mistakes and missing features. The more I tested, the more problems I solved.

Even my own security features caught me. My website's security blocked me, the owner. Imagine if that happened to a customer after launch. I would lose them.

So my advice: test your product yourself, 100 times. Test it when it's live too, not only on your computer. Use it like a real customer would.

Be a user of your own product. Many people sell things they never use. Use your website every day, find what's wrong, and fix it. That's how you build something people enjoy. If people get a bad experience, they won't come back.

Security: learn it before you launch

A customer asked me to check his website this week. When I logged in, his website emailed me my password and admin login in plain text. That's a serious security mistake. A website should never send your password by email.

That's why I say: learn security. If you don't know about security, ask ChatGPT to explain how to protect your website, then ask Claude to build it. In my experience, Claude is very good at security work.

My real example: this week, hacker robots tried to break into dnxai.com. They looked for password files, server keys and backup files. They didn't get anything, because I had already done my security:

  • My website logs every attack, so I could see exactly what they were looking for
  • It blocks attackers automatically, and I can block any address myself
  • It trusts my own address, so the security system can never lock me out of my own admin by mistake

If I hadn't built that, I wouldn't even have known someone was trying.

What vibe coding is all about

Vibe coding is about learning. It's about building something that lasts, helps people and solves problems.

Don't jump into building without research. We don't vibe code like that. Research first, plan, build step by step, then test, test and test again.

Let's use AI to build websites that load fast, that users enjoy using, and that make life easier for people.

Final words

I have built a lot of websites, and I'm still building. I'm learning with AI every day, and I'm able to achieve what I want to achieve. I'm not saying I'm a big person, but I'm proud of what I'm doing.

All we need is to stay focused, keep learning and solve problems.

So here's what I learned this week: use your own product, test everything, and get it done.

More guides