Coding with Vibes Only

All prompts

Get set up

Your first prompt

Say hello, and tell me which folder you're working in. Don't change anything.

Build a habit tracker

Plan the habit tracker

Plan mode
I'm learning to build apps by making a simple habit tracker. Don't ask me questions and don't write any code. Save a one-page plan as docs/product.md:

Who it's for: someone who wants to keep a few daily habits.
Problem: it's easy to forget a habit and lose track of how long you've kept it up.
Version 1: add a habit, check it off for today, see how many days in a row, delete a habit.
Later: reminders and charts.
Not doing: accounts and payments.

Design the screen

Plan mode
Read docs/product.md. Don't ask me questions and don't write any code. Save a short design as docs/design.md:

Screen: one screen, and its main action is checking off a habit.
Each habit shows its name, a large checkbox and how many days in a row.
Empty: when there are no habits, show a friendly line and the box to add one.
Look: calm and clean, one accent color, plenty of space, large text. It works on phones and computers.

Set the architecture and rules

Plan mode
Read everything in docs/. Don't ask me questions and don't write any app code yet.

Save docs/architecture.md: one index.html file using plain HTML, CSS and JavaScript, with no packages to install. Habits are saved in the browser with localStorage.

Save docs/plan.md with two milestones: 1) add, check off and delete habits, 2) days in a row.

Create a short CLAUDE.md that says what this app is, points to the files in docs/, and says to read them before changing anything, follow the design, and keep the code simple.

Build the app

Plan mode
Read CLAUDE.md and everything in docs/. Build both milestones from docs/plan.md in index.html, and follow docs/design.md. Then tell me how to open it.

Save your work

Set up Git in this project, and make a commit called "First working version." If Git isn't installed, walk me through installing it, one step at a time.

Product

The product interview

Plan mode
I have an idea for an app and I'm not technical. Act as a senior product manager and interview me, one question at a time:
- who it's for, and the problem they have today
- how they deal with that problem now
- what success looks like three months after launch

Push back if I'm vague. Don't write any code. When we're done, save a one-page summary as docs/product.md.

Find an idea

Plan mode
Help me find a good first app to build. Ask me one question at a time about my work, my routines and what annoys me. Then suggest three small ideas I could finish in a weekend, and tell me which you'd pick and why.

Cut the scope

Plan mode
Read docs/product.md. List every feature this app could have, and sort them into Version 1, Later and Not doing.

Version 1 is the smallest version that solves the core problem for one kind of person. For anything I want to keep in it, ask what breaks if we leave it out. Add the lists to docs/product.md.

Design

Map the screens

Plan mode
Act as a senior product designer. Read docs/product.md and map the shortest path from a person's first visit to the moment they get value.

For each screen, write its one job, its one main action, and what it shows when it's empty, loading or has an error. Tell me if a screen can go. Save this as docs/design.md.

Set the design rules

Plan mode
Act as a senior product designer. Read docs/product.md and docs/design.md, and look at the screenshots I attached. Ask me how the app should feel, one question at a time.

Then write simple rules: a few colors, a few text sizes, a spacing scale, one button, and how it adapts to phones. Every word, button and visual has to earn its place. Add the rules and a short review checklist to docs/design.md.

Make a mockup

Plan mode
Read docs/product.md and docs/design.md. Make a throwaway mockup of the main screen in one file, mockups/main.html, with fake data. Don't start the real app.

When I'm happy with it, add what we decided to docs/design.md.

Architecture

Choose the architecture

Plan mode
Act as a senior software architect. I'm not technical, so use plain language. Read docs/product.md and docs/design.md. Ask me what you need to know, one question at a time: accounts, what data we store, payments, expected users, and budget.

Recommend the simplest architecture that meets these goals, using popular tools. Include a simple diagram, the monthly cost now and at 1,000 users, how people's data stays safe, and what would change if we grew 100 times.

Then challenge your own recommendation: what's most likely to cause pain in six months? Don't write any app code. Save this as docs/architecture.md.

Write the rules and the plan

Plan mode
Read everything in docs/. Don't build anything yet.

Create a short CLAUDE.md that says what this app is, points to each file in docs/, and sets these rules:
- read the docs before changing anything
- follow docs/design.md and reuse what exists
- ask me before adding a new tool or service
- only build what's in Version 1
- keep the code simple, and explain things in plain language
- when a decision changes, update the docs

Then break Version 1 into 3 to 6 small milestones I can see and test, in docs/plan.md.

Build

Build milestone 1

Plan mode
Set up Git in this project, and walk me through installing it if needed. Make sure passwords and keys are never saved. Commit what we have.

Then read CLAUDE.md and docs/, and build milestone 1 from docs/plan.md and nothing else. Show me your plan first. When you're done, open the app in the preview and tell me what to check.

Build the next milestone

Plan mode
Read CLAUDE.md and docs/plan.md, and look at what's built. Propose how to build the next milestone, reusing what exists. Build nothing else. Open the preview and tell me what to check.

When I say it works, mark it done in docs/plan.md and commit.

Fix a bug

Plan mode
Something's wrong.

What I did: [WHAT YOU DID]
What I expected: [WHAT SHOULD HAVE HAPPENED]
What happened: [WHAT HAPPENED]

Find the cause before changing anything. Explain it in plain language, then propose the smallest fix.

Ship

Audit the project

Plan mode
Audit this project as a senior designer and engineer. Don't change anything yet. I'm not technical, so use plain language.

Testing: list the main things a person does in this app, try each one, and tell me what breaks.
Design: check every screen against docs/design.md, at phone and desktop size. Is it consistent? Does every word, button and visual earn its place?
Code: is it clean, and easy to change and grow? Look for duplication, dead code and drift from docs/architecture.md.
Security: look for exposed keys, data people shouldn't see, and outdated packages.

Rank what you find by how much it matters, and recommend the top three.

Put it on GitHub

Manual mode
Put this project on GitHub as a private repository. If the GitHub CLI isn't installed, walk me through installing it and logging in, one step at a time.

Before uploading, check that no passwords or keys would be included, and tell me what you found. Then give me the link.

Check the launch

Manual mode
My app is live at [YOUR LINK]. Check that every push to GitHub will deploy automatically, tell me if the host needs any private keys and where they go, and add basic security headers. Then give me a short list of things to test on my phone and computer.

Connect a domain

Manual mode
I bought the domain [YOUR DOMAIN]. Walk me through connecting it to this app, one step at a time, including the exact DNS settings. Then check that it works.

Grow

Start a session

Plan mode
Read CLAUDE.md and docs/plan.md, and check the recent commits. Tell me where we left off and the one thing to do today. Don't change anything yet.

Plan what's next

Plan mode
Here's what I learned from users: [YOUR NOTES]

Read CLAUDE.md and docs/. Group this by the underlying problem, then recommend one thing to build next and one thing not to build. Interview me, one question at a time, about who needs it and why.

Update the docs and add small milestones to docs/plan.md. Don't build anything yet.