See it before it's built

Before Claude builds anything, ask it for a mockup of the main screens. A mockup is a picture of your app with nothing working behind it. Changing a mockup is quick. Changing a built app is not.

Why a mockup first

You thought "a list of bookings" was obvious. Then you see one and realise you wanted a calendar. Better to find that out now.

Most "that's not what I meant" moments can happen here, where they cost a sentence. And when Claude builds, it has real screens to work from instead of a paragraph of description.

Ask for one

In the same conversation where you planned the app, send this:

Before you build anything, make me a mockup of the main screens
of this app, as a page I can open in my browser.
Include every page in the first version, and show what each page
looks like before anything has been added.
Tell me how to open it. Don't build anything in NodeGX yet.

Go through it like a visitor

Open the mockup and pretend you're someone using the app for the first time. Sign up, do the main job, come back the next day. Look at:

• Every page a visitor will see in the first version.
• What happens when they click the main buttons.
• The empty pages. What does the list look like before anything is in it? A new person sees that first.
• A phone, if people will use it on one.

Every time you think "hmm, where would I…", that's a gap. Tell Claude, and fix it in the mockup.

Change it until you'd be happy

Tell Claude what to change in plain words: "Move the search box to the top", "Put the date first on each booking". A screenshot with an arrow on it helps too.

If you're not sure what you want, ask for choices:

Show me two or three different layouts for this page.

For help putting a look into words, see Describing how it should look.

Then ask yourself one question: if this were the finished app, would I be happy? If the honest answer is "mostly, but…", keep going. The "but" is easier to fix now than at any later point.

When you're happy

Ask Claude to keep the mockup with your project and start building:

I'm happy with this mockup. Save it in the project folder
so you can check your work against it. Then build the app in NodeGX.

What happens next is in Building with Claude.

Other ways to make a mockup

• Sketch on paper and send Claude a photo. It reads sketches well.
• Screenshots of apps you like, with notes on what to copy and what to change.
• Claude Design, Anthropic's separate tool for drawing designs. You don't need it. If you use it, paste in your plan first, because it doesn't know what you agreed with Claude. Bring the finished design back into your NodeGX conversation.

The tool matters less than the rule: settle the screens before anything is built.

Quick reference

• Ask for a mockup of every page before Claude builds.
• Include the empty pages, the way a first-time visitor sees them.
• Click through it like a visitor. Every "where would I…" is a gap.
• "Mostly, but…" means keep going.
• When you're happy, save the mockup in the project folder and build in NodeGX.