See it before you build it
A mockup is a picture of a screen that you can click, with nothing behind it.
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.
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.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 mockup.
Click mockups/main.html in the chat. It opens in the app's browser.
Tell Claude what to change. Be specific, because it can't guess what's in your head.
Hard to act on
- Make it pop
Easy to act on
- The Save button gets lost. Make it the strongest thing on the screen.