Build a high-craft interface from a reference
Extract hierarchy and atmosphere from visual references while keeping the result specific to the current product.
Use when
You have screenshots or inspiration and need the agent to translate principles rather than mimic surface styling.
Outcome
A working, responsive interface that feels authored for the product instead of copied from the reference.
The sequence
4 deliberate steps
- 01Open prompt
Establish product intent
Name the audience, task, primary action, information hierarchy, and emotional tone.
- 02Open skill
Use a coherent design discipline
Install a durable design language for shaping and reviewing the work.
- 03Open prompt
Protect hierarchy
Review the attention path and remove competing emphasis.
- 04Open prompt
Finish across widths and states
Polish rhythm, typography, controls, overflow, empty states, and mobile behavior.