Design workflow / 5 prompts

Stop prompting
‘make it pretty’.

The prompts behind the process. Copy one, add your references, and make it yours.

01 / Visual directionGive the work a point of view.

Give the work a point of view.

Act as a senior digital art director.
Use the attached references to propose three distinct visual directions for [project].
For each, define typography, spacing, color, image treatment, and one signature detail.
Explain how the direction supports the audience and the content.
Recommend the strongest option before moving into layout.

Replace [project] and attach your references.

02 / ReferencesFind the details worth borrowing.

Find the details worth borrowing.

Analyze the attached references for [project].
Identify what makes each one work: hierarchy, typography, spacing, color, composition, and interaction.
Separate reusable design principles from brand-specific decoration.
Suggest five concrete decisions we can adapt to our content, and explain why.
Do not copy the original branding or layout wholesale.

Attach two or three references with a clear visual direction.

03 / Page structureMake every section earn its place.

Make every section earn its place.

Plan the page structure for [project] for [audience].
The primary action is [action].
Start with the visitor’s main question, then arrange the content in the order they need it.
For every section, give its purpose, headline, required content, and next action.
Remove repetition and anything that does not help the visitor decide.
Describe the mobile reading order before proposing the desktop layout.

Replace [project], [audience], and [action].

04 / BuildTurn the direction into a real page.

Turn the direction into a real page.

Build [project] using the approved visual direction and page structure.
Use real content, semantic HTML, and responsive layouts.
Define a small set of typography, spacing, and color tokens.
Make all buttons, links, and forms work. Include keyboard focus, accessible labels, and useful empty or error states.
Check the page at narrow mobile and wide desktop sizes.
Keep the implementation simple and explain how to edit the content.

Include your approved direction and the final content.

05 / PolishReview it like a designer.

Review it like a designer.

Review the implemented page against the approved references and the needs of [audience].
Check visual hierarchy, line lengths, spacing, contrast, image quality, and mobile behavior.
Test every interaction and keyboard navigation.
Identify the five changes that would most improve clarity and craft.
Explain each change, then implement it.
Do not add decoration or animation unless it serves a specific purpose.

Use this after the first working build, with screenshots attached.

MAKE IT YOURS

Good prompts start a conversation.
Your context makes the difference.