Dorris01 How I work
Mock it up before you build it
Have Claude make a clickable mockup of a screen, with made-up data, and get it right before your agent writes any real code.
- Free
Before your agent builds a screen, have Claude make a mockup of it: a page you can click through, filled with made-up data, that you comment on and change in minutes. When it's right, hand it to your agent as the thing to build.
Moving a button in a mockup is one sentence. In real code it's a round trip of edits, restarts and checking.
What it saved me
This kit's screens went through a dozen mockup versions over two evenings, each minutes instead of an afternoon in real code. Pasting in a real customer's email caught a real flaw: the app could have answered with a made-up order. Finding that in a mockup cost nothing.
Where to make one
Claude builds a clickable page like this right inside a conversation; Anthropic calls these artifacts. Its newer product for this, Claude Design, is early, so ask your agent what it does today. Any other agent can do the same: the habit matters more than the tool.
Start tonight
Pick one screen you want to change or add. Paste this and answer its questions. Nothing in it touches your app.
Mock it up before we build it
Your agent makes a clickable mockup of one screen, filled with made-up data, and changes it with you before any real code exists.
I want to see a screen before anything is built. I am not a programmer.
The screen: <what it is for, who uses it, and what they do on it>
What I want: <in plain words, as much or as little as you know>
Make me a clickable mockup of it: one page I can open and click through, filled with made-up data that looks like my business. Invent every name and order number, and use example.com for every email address.
Do not change my app. If you are working in my project folder, put the mockup in a new folder called mockups and touch nothing else.
Show me how to open it, then take my comments one round at a time. After each round, tell me in one sentence what you changed, then stop and wait for my next comment.
When I say it is right, write a short description of the finished screen that my agent could build from, and stop there.Show the whole prompt (12 lines)Show less
When it looks right, try it with a message a customer actually sent, name and details taken out. A mockup is allowed to make things up; your real app is not.
Then hand the mockup to your agent with plan before you build, and ask: where does each thing on this screen come from in the real app?