AI in public

AI in public

Vibe Coding The Complete Claude's Beginner Guide 2026

No code knowledge. No tutorials. Just vibe coding - and here’s every prompt I used.

Hamza Khalid's avatar
Hamza Khalid
Jun 16, 2026
∙ Paid

What if you could build a tool your audience actually wants - in under an hour - without touching a single line of code?

Not a concept.

Not a mockup.

A working app, live on the internet, with a link you can share.

I did it this week.

I built an AI Tool Comparison Card Generator - you input two AI tools, Claude compares them, and it spits out a clean shareable card.

The kind of thing creators post on X and LinkedIn every day.

I used a method called vibe coding.

I’ll build an simple app and show you every prompt I used, in order, copy-paste ready.

You’re the reason this newsletter exists. What AI tool or workflow should I test next? Drop your topic in the comments - the most-requested one becomes the next issue.

If this is useful, share it with one person who needs it. Takes 10 seconds.

Share


Two weeks ago, I was manually writing AI tool comparisons for LinkedIn posts.

Claude Sonnet vs ChatGPT-4o.

Gemini vs Perplexity.

I’d spend 20-30 minutes formatting each one - making it look clean enough to screenshot and post.

Then I thought: what if I just built the tool instead?

I opened Claude.

I described what I wanted in plain English.

I had a working version in 52 minutes.

I documented every single prompt along the way.

This issue is with the documentation.


I’ll be honest with you about something.

Six months ago, I had a list of 14 app ideas sitting in a Notion doc.

Every single one of them was still just an idea.

Not because I lacked motivation.

Because every time I tried to build one, I’d spend 3 hours watching tutorials, get lost in installation errors, and close my laptop feeling worse than when I started.

I wasn’t a developer. I didn’t want to become one.

I just wanted my ideas to exist in the world.

Then I found vibe coding. I built my first working app in 47 minutes.

I’ve built 9 more since.

This issue is everything I wished I had when I started.


What Is Vibe Coding?

AI researcher Andrej Karpathy coined the term in early 2025.

His framing: “fully giving in to the vibes, embracing exponentials, and forgetting that the code even exists.”

The practical version: you describe what you want to build.

Claude writes the code.

You test it, describe what broke, and Claude fixes it.

You never need to read a line of code unless you’re curious.

This is not a developer shortcut.

It’s a different path - built for people with ideas and zero interest in spending 6 months learning syntax.


The old way of building a tool:

→ Have an idea

→ Learn to code

→ Get stuck

→ Watch YouTube tutorials

→ Abandon it.

The vibe coding way:

→ Have an idea

→ Describe it to Claude

→ Test it

→ Describe what broke

→ Ship it.

If this is useful, share it with one person who has an app idea they’ve been sitting on. Takes 10 seconds.

Share


Here's the shift that changes everything.

Most people believe there are two kinds of people in tech: those who can build things, and those who can't.

Vibe coding breaks that.

There's a third kind now.

People who can describe things precisely enough that the right tool builds them.

That's it.

That's all you need to be


The Live Build: AI Tool Comparison Card Generator

Here’s what I wanted to build:

A simple interactive app.

You type in two AI tools - say, Claude and ChatGPT.

You hit a button.

Claude compares them across 5 categories and displays a clean visual card.

You screenshot it and post it.

No API key.

No installs.

No browser tab.

The whole thing lives inside Claude’s artifact panel - free tier included.

Here are the exact prompts I used, in the exact order I used them.


Step 1: Set the Context Before You Write a Single Spec

The first thing most beginners do wrong: they jump straight into describing the app.

Claude builds something overengineered, and half the time it doesn’t even run.

One setup message prevents all of that.

Quick setup:

  1. Open claude.ai

  2. Start a fresh conversation

  3. Paste this prompt first - before describing anything:

I want to build an interactive app inside Claude as an artifact.
Build it as a self-contained React component.
The app should work entirely inside the artifact panel — 
no API keys, no installs, no external calls needed.

I'll describe what I want in plain English. You build it.
When something looks wrong, I'll tell you what I saw and you fix it.
Always return the complete updated component — not just the changed part.

Ready? I'll describe the app now.

No API keys, no installs, no external calls - this is the constraint that makes it free.

Claude becomes both the builder and the brain.

You get a working app with zero setup.

If this is useful, share it with one person who needs it. Takes 10 seconds.

Share

The rest of this guide is for the person who ships the idea instead of saving it. Steps 2 through 7 cover the complete build: how to describe your app, fix the layout, make the logic dynamic, make it screenshot-worthy, and add a copy button - all without touching a line of code. Plus all 7 prompts from my live session, copy-paste ready, in exact order. Vibe coding is still early. The creators building personal tools with it now are ahead of most people who will discover this method six months from now. This is the part built for someone who is actually going to open Claude and build something today.

User's avatar

Continue reading this post for free, courtesy of Hamza Khalid.

Or purchase a paid subscription.
© 2026 Hamza Khalid · Privacy ∙ Terms ∙ Collection notice
Start your SubstackGet the app
Substack is the home for great culture