Start with one screen that has one job. For example: a newsletter sign-up page for small-business owners. Write the audience, desired action, required content, and anything that must not appear before you ask for a design.
Real content, goal, audience, and approved brand assets.
Legal language, prices, testimonials, or performance claims.
Keyboard, contrast, narrow width, and error messages.
Write a brief for one screen
Add real copy, the approved logo, colours, font choices, and two examples of the existing brand. State the required parts: headline, short explanation, email field, privacy note, and confirmation state. Do not ask the tool to invent legal text or customer claims.
Do it step by step
Give it one main action.
Add content, constraints, and required states.
Fix hierarchy before decoration.
Check desktop, phone, keyboard, and text.
Generate the first version in grayscale if possible. Check the order of information, labels, button wording, empty state, error state, and keyboard focus. Only then refine colour, spacing, and imagery. Ask for one change at a time so you can see what improved.
First review: content order, labels, and states
Before you finish
- The most important action is obvious.
- All text is accurate and approved.
- Focus and contrast remain visible.
- No content disappears at a narrow width.
Open the prototype at desktop and phone widths. Try it without a mouse and read every sentence aloud. Export only after the content, accessibility, and mobile layout work together.