How to start vibe coding

Vibe coding means describing what you want in plain words and letting an AI write the code. Get Claude Code or Codex, pick one small thing to make, tell the AI, run it and ask for fixes, then publish. Where people get stuck most is the unwritten rules of wherever they submit or publish.

What vibe coding is

Instead of writing code line by line, you tell an AI what to build, look at what it made and ask for changes until it is right. Andrej Karpathy coined the term in 2025. You can start without reading code, but checking the result is still your job.

What you need

An AI coding tool: Claude Code (Anthropic) or Codex (OpenAI). Follow each one's official guide for setup and pricing
A working folder: one per thing you make. Do not mix projects
Somewhere to publish: only if you will show it to others. Vercel is a common choice

How to do it (5 steps)

Pick one small thing: “one booking form screen”, not “a booking system”. Start with something that handles no personal data
Start the AI in the folder and say what you want: who uses it and why, the look you like, and any fixed numbers (sizes, character limits)
Run it and say what to fix: “where a thumb can reach on a phone” fixes faster than “make the button bigger”
Check the rules of where it goes: review specs and device-only bugs are what AIs most often do not know (next section)
Publish or submit: keep keys (API keys) out of the code and check that nothing is open to everyone

Where people get stuck (real cases)

AIs know the general way to build things, but often not review rules or bugs that only show on real devices. These are cases kit makers on nice to have actually hit at work.

LINE stickers：Removing a green background by colour leaves invisible holes inside the character, and the review rejects it for “transparent areas inside the illustration”. Removing only the green connected to the outer edge passes. (LINE Sticker Kit)
Image generation：Ask for a “transparent PNG” and you may get a picture of a checkerboard that only looks transparent. Use it as-is and the background stays. (Pixel Motion Kit)
YouTube games (Playables)：Setting Time.timeScale = 0 in Unity does not really pause: per-frame code and audio keep running. Hit the memory limit and it runs on your machine but silently crashes on iPhone. (YouTube Game Kit)
Slides：Symbols that show in your browser can vanish on the published URL. Opening the URL after publishing, as a step, saves you from finding out after printing. (Deck Builder Kit)
Instruction files for the AI：Claude Code reads CLAUDE.md and Codex reads AGENTS.md. If you use both, keep two entry files with the same content. (Kit-Making Kit)

Do not start from zero every time: kits

If you make the same kind of thing again, starting from a template of steps that worked plus fixes for the pitfalls gives consistent results. nice to have is a shelf of those templates (kits). Paste one line into Claude Code or Codex and the AI pulls in the kit and starts.

Deck Builder Kit: Polished decks, in the same format every time
LINE Sticker Kit: From artwork to a submittable sticker set (animated too)
Pixel Motion Kit: Hand it one drawing, get 16 animated frames
Vertical Reel Factory Kit: Turn raw footage into vertical product shorts, each one built to test a single question
Furniture-to-3D Kit: Spec drawings and product photos into an AR-ready 3D model
YouTube Game Kit: Bring your game up to YouTube's requirements, all the way to applying
Pet Naming Kit: Turn photos and info into name candidates, then decide by saying them aloud
X Auto-Post Kit: Post saved drafts to X automatically, one per day at a set time
Admin UI Tidy Kit: Tidies up an existing admin screen so it reads clearly and works by keyboard
Contract Review Kit: Hand it a contract, get flagged issues and a redline request
OSS License Check Kit: Hand it your app folder, it finds every OSS license and writes the notice
Service Landing Page Kit: Build a service landing page after measuring real ones
Year-End Tax Adjustment Kit: Hand it the forms, it checks and calculates year-end tax adjustment
Employment Notice Kit: Just talk, and get an employment notice checked against minimum wage
Invoice & Receipt Kit: Talk it through to get invoices and receipts, tracked until paid
Asset Rights & Credit Check Kit: Point it at a site folder to learn each asset's source and required credit

Browse the shelf →

FAQ

Can I do it without knowing how to program?

Yes. But checking that it works and is safe to publish is still on you. Always check that no keys (API keys) are written in the code and that nothing is open to everyone by mistake.

Is it free?

Claude Code and Codex each need a paid plan or API access from their provider. Many kits on nice to have are free.

Claude Code or Codex: which is better?

Either works for vibe coding. Kits on nice to have are made to run in both from the same one line.

What should I make first?

Start small, with something that handles no personal data or money. Things you can check by eye, like a landing page, slides or LINE stickers, are easy first projects.