Coding with Vibes Only

Design the habit tracker

This app needs one screen with one job: checking off today's habits. Writing that down keeps the design simple.

In the Claude app, click + New. Check that your project folder is selected, and set the mode to Plan.

Click Copy, paste into the prompt box and press Enter.

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.

Read the plan Claude shows you. To change it, keep planning and type what you'd change. When it looks right, approve it, and choose Yes when Claude asks to make changes. Claude creates the document.

Click docs/design.md in the chat to read it. If something's wrong, tell Claude what to change.