From taste words to design direction
Turn “modern” and “premium” into decisions an AI can act on. Build a design brief, compare directions, and critique the result with a 36-term field guide.
Give the AI a direction.
Turn an intended feeling into a brief you can use. Begin with an example, replace its context, and watch your prompt take shape.
Jump to your promptInterface example context — replace these details with your own project.
Your draft is saved in this browser when storage is available. Your text stays on this device until you copy it into another tool.
Your direction prompt
Ready to discuss, compare, and refine in your chosen AI tool.
Create a responsive web interface. Purpose: Help a busy operations lead identify anomalies and open the highest-risk report without hunting. Audience: Operations leads checking a dashboard on a laptop at the start of the day. Visual hierarchy: Critical exceptions first, daily summary second, report controls third. Composition: A restrained 12-column grid with a narrow summary rail and a wide report region; compact rows with generous separation between task regions. Typography: One neutral sans-serif family; compact labels; tabular figures; a clear but limited display-to-body scale contrast. Color: Neutral surfaces; red, amber, and green for status with text or icon cues; cobalt for the primary action. Verify readable contrast. Imagery or graphics: No decorative imagery; use simple line icons only where they improve scanning. Preserve: Keep the current information architecture, report names, and export workflow. Avoid: Avoid a card around every value, oversized dashboard headlines, decorative gradients, and color without a text or icon cue. Constraints: Prioritize laptop use; stack task regions at narrow widths. Support keyboard access and 200% text zoom; reuse existing tokens and components. Measure text contrast against WCAG AA requirements. Before producing the final, propose two materially different visual directions. Explain how each supports the purpose, then recommend one. Identify assumptions and any accessibility or production checks that still need human verification.
Once you have two directions, use the comparison and critique steps below to decide what to keep.
Spot the visible lever.
Which instruction gives the AI an observable design decision?
Choose an instruction to check your reasoning.
Describe the effect, then the evidence.
“Modern,” “clean,” and “premium” express taste, but they do not tell an AI what to change. Two people can hear “premium” and imagine completely different results. Begin with the intended effect, then name the visible decisions that would create it. This keeps style in service of a human outcome.
Scroll sideways to see all columns.
| Instruction | What it gives the AI |
|---|---|
| Make it feel clean, modern, and premium. | A taste signal, with no audience, reading order, or observable visual choices. |
| Create a quiet, high-trust composition with one dominant message, generous negative space, restrained color, and precise typographic contrast. | An intended perception, a focal point, and specific controls to adjust. |
Turn the four visible design levers.
Purpose tells the AI what success means. Hierarchy, composition, typography, and color describe how to get there. Specify relationships before isolated details: a larger heading only helps if it deserves more attention than its neighbors.
Scroll sideways to see all columns.
| Lever | What it controls | Try saying |
|---|---|---|
| Hierarchy | What should be noticed first, second, and third. | Lead with the outcome; make the product proof secondary. |
| Composition | Alignment, grid, density, scale, balance, and negative space. | Use an asymmetric grid with a large quiet area around the headline. |
| Typography | Text roles, scale, weight, line spacing, and voice. | Use a restrained sans serif with strong display-to-body scale contrast. |
| Color | Palette roles, saturation, lightness, mood, and readable contrast. | Use warm neutrals with one saturated blue reserved for actions. |
Same vocabulary, different artifact.
A dashboard and a campaign image can use the same design vocabulary while making very different decisions. These are illustrative directions: borrow the reasoning, then replace the context with your own.
Scroll sideways to see all columns.
| Lever | Operations dashboard example | Carousel opener example |
|---|---|---|
| Hierarchy | Exceptions first, summary second, controls third. | Provocation first, series label second, brand mark last. |
| Composition | Compact data rows with generous separation between task regions. | An oversized statement, a strong left edge, and a deliberate empty corner. |
| Typography | Compact sans serif, tabular figures, two clear emphasis levels. | Bold grotesk display, compact leading, small monospaced metadata. |
| Color | Neutral UI; color for status and action, paired with other cues. | A coral field with near-black type and no competing accent colors. |
Build a direction you can evaluate.
Start with purpose and audience. Order the message. Choose visible design decisions, then state what to preserve, avoid, and verify. The builder above combines these 11 fields into a prompt. Its interface and campaign presets are examples, not recommended defaults for every project.
- Name the output and its use context so the AI knows what it is designing.
- Give hierarchy an explicit order instead of making every element prominent.
- Describe composition, typography, color, and imagery as related decisions.
- Preserve the useful parts of the existing design and name specific failure modes.
- Set constraints before generation, then compare two materially different directions against the same purpose.
Critique decisions, not the whole design.
“I don’t like it” restarts the conversation without teaching the AI what to change. Use keep, change, because. Retain the successful decisions, isolate the weak one, and explain its effect on the intended outcome. Review the revised artifact before requesting another round.
- Keep: the strong left edge and the current headline scale.
- Change: reduce the accent colors from four to one.
- Because: the current colors compete with the primary action.
Design Language Field Guide
The following 36 terms give you language for what should change, what should stay, and why. They are grouped by attention, composition, typography, color and imagery, and systems and behavior. Replace the bracketed text in the sentence stems with your own context. Choose only terms that clarify the intended outcome; more terminology does not automatically make a better prompt.
Field guide: attention
Use these terms to describe the intended reading order. Hierarchy is not simply “make it bigger”; it is the relationship among levels of importance.
Scroll sideways to see all columns.
| Term | Meaning | Try saying |
|---|---|---|
| Visual hierarchy | The ordered levels of importance created by scale, position, contrast, spacing, and repetition. | “Establish three hierarchy levels: [primary], [secondary], and [tertiary].” |
| Focal point | The element designed to receive attention first. | “Make [element] the single focal point; subordinate [other elements].” |
| Emphasis | The use of contrast or placement to increase an element’s importance. | “Emphasize [element] through [scale/weight/color], not extra decoration.” |
| Scan path | The sequence the eye is likely to follow through the composition. | “Create a scan path from [first] to [second] to [action].” |
Field guide: composition
Use these terms to describe the structure of space, not just individual objects.
Scroll sideways to see all columns.
| Term | Meaning | Try saying |
|---|---|---|
| Grid | A system of columns, rows, and key lines used to organize and align content. | “Use a [number]-column grid with [wide/narrow] gutters and align type to shared key lines.” |
| Alignment | The visible relationship created when elements share an edge, center, or baseline. | “Strengthen the left alignment across the title, copy, and action.” |
| Negative space | Intentionally unoccupied space that separates, groups, or emphasizes content. | “Increase negative space around [element] so it reads as the focal point.” |
| Density | The amount of information or number of elements within a given area. | “Use compact density inside data rows, with low density between task regions.” |
| Rhythm | A repeated pattern of spacing, scale, shape, or content that creates continuity. | “Create vertical rhythm with a consistent spacing scale and repeated metadata position.” |
| Balance | How visual weight is distributed. Balance can be symmetrical or asymmetrical. | “Use asymmetrical balance: one large image offset by a compact type block.” |
| Scale | The size of an element, especially relative to surrounding elements. | “Increase the scale contrast between the claim and supporting copy.” |
| Proportion | The size relationship among elements or regions of a composition. | “Give the content region roughly twice the width of the navigation rail.” |
Field guide: typography
Typography carries both information hierarchy and voice. Describe roles and relationships before requesting a specific font.
Scroll sideways to see all columns.
| Term | Meaning | Try saying |
|---|---|---|
| Typeface / font | A typeface is the design family; a font is a particular implementation or style within it. | “Use one humanist sans-serif typeface with regular and semibold fonts.” |
| Display / body | Display type is optimized for prominent short text; body type is optimized for continuous reading. | “Use an expressive display face with a quiet, highly legible body companion.” |
| Weight | The apparent stroke thickness of letterforms, such as regular, medium, or bold. | “Use semibold for headings and regular for body; avoid light weights at small sizes.” |
| Leading | The vertical distance from one line of text to the next. | “Use compact display leading and more open leading for multi-line body copy.” |
| Tracking | The overall spacing applied across a range of letters. | “Use slightly tighter tracking in the large headline; keep body tracking neutral.” |
| Kerning | The spacing adjustment between a particular pair of letters. | “Optically refine kerning in the wordmark, especially around [letter pair].” |
| Measure | The length of a line of text, usually discussed by characters or width. | “Keep paragraph measure comfortable; do not stretch body copy across the full screen.” |
| Typographic scale | A deliberate set of text sizes and roles that creates consistent hierarchy. | “Use a restrained type scale with clearly distinct display, heading, body, and label roles.” |
Field guide: color & image
Separate color’s visual properties from its job in the system. Then specify how imagery should behave, not merely what it depicts.
Scroll sideways to see all columns.
| Term | Meaning | Try saying |
|---|---|---|
| Hue | The color family, such as red, blue, or green. | “Shift the accent hue from violet toward a cooler cobalt blue.” |
| Saturation / chroma | Related ways of describing color intensity, defined differently across color models. Specify the model when precise values matter. | “Reduce saturation in the supporting palette; reserve high chroma for the focal point.” |
| Value / lightness | Related descriptions of how light or dark a color appears, with definitions that depend on the color model. | “Increase value contrast between text and surface without changing the hue family.” |
| Palette role | A color named by function—background, text, action, status—rather than appearance alone. | “Use warm white for canvas, near-black for text, and cobalt only for primary actions.” |
| Contrast ratio | A computed luminance relationship between foreground and background colors. | “Verify at least 4.5:1 for normal web text and 3:1 for qualifying large text.” |
| Art direction | The unifying creative choices that determine how imagery, type, color, composition, and mood work together. | “Use documentary art direction: candid subjects, natural light, close crops, and visible context.” |
| Image treatment | The repeatable processing or presentation applied to imagery. | “Use full-bleed monochrome crops with one consistent duotone overlay.” |
| Texture | Visible surface character such as grain, paper fibers, noise, or smoothness. | “Add subtle print grain to large color fields; keep type edges crisp.” |
Field guide: systems & behavior
Use these terms when a design must survive beyond one attractive frame.
Scroll sideways to see all columns.
| Term | Meaning | Try saying |
|---|---|---|
| Visual identity | The coordinated system of recognizable visual elements associated with a brand. | “Extend the identity beyond the mark through repeatable type, color, image, and composition rules.” |
| Visual language | The recurring relationships among visual elements that make different artifacts feel related. | “Use the diagonal crop and compact metadata strip as recurring visual-language devices.” |
| Wordmark / symbol / lockup | A wordmark renders the name; a symbol is a nonverbal mark; a lockup specifies how identity elements are arranged together. | “Use the horizontal lockup at full size and the symbol alone below [minimum width].” |
| Design token | A named, reusable design decision such as a color, spacing step, radius, or type style. | “Use existing color and spacing tokens; do not introduce one-off values.” |
| Component | A reusable interface unit with defined structure, behavior, and variations. | “Build this from existing button, field, and alert components.” |
| State | A distinct condition of an interface element, such as default, hover, focus, disabled, loading, error, or success. | “Show default, focus, error, loading, and success states—not only the ideal state.” |
| Responsive | A design that adapts its structure and behavior to available space and user context. | “At narrow widths, stack the regions and keep the primary action visible after the summary.” |
| Affordance | A possible action suggested by an object or interface; visible cues that communicate it are often called signifiers. | “Strengthen the button’s action affordance with a familiar shape, label, and visible focus state.” |
The complete guide.
Read every step, prompt, and review check in one place. The examples use the context below; use the interactive workflow above to make them your own.
Example context
- Output
- responsive web interface
- Purpose
- Help a busy operations lead identify anomalies and open the highest-risk report without hunting.
- Audience
- Operations leads checking a dashboard on a laptop at the start of the day.
- Visual hierarchy
- Critical exceptions first, daily summary second, report controls third.
- Composition
- A restrained 12-column grid with a narrow summary rail and a wide report region; compact rows with generous separation between task regions.
- Typography
- One neutral sans-serif family; compact labels; tabular figures; a clear but limited display-to-body scale contrast.
- Color
- Neutral surfaces; red, amber, and green for status with text or icon cues; cobalt for the primary action. Verify readable contrast.
- Imagery or graphics
- No decorative imagery; use simple line icons only where they improve scanning.
- Preserve
- Keep the current information architecture, report names, and export workflow.
- Avoid
- Avoid a card around every value, oversized dashboard headlines, decorative gradients, and color without a text or icon cue.
- Constraints
- Prioritize laptop use; stack task regions at narrow widths. Support keyboard access and 200% text zoom; reuse existing tokens and components. Measure text contrast against WCAG AA requirements.
1. Translate taste into a visible direction
Replace the example context with your own purpose, audience, and output. Use hierarchy, composition, typography, and color to explain the intended effect. Copy the finished direction into your chosen AI tool and ask for two alternatives before a final artifact.
Example prompt Create a responsive web interface. Purpose: Help a busy operations lead identify anomalies and open the highest-risk report without hunting. Audience: Operations leads checking a dashboard on a laptop at the start of the day. Visual hierarchy: Critical exceptions first, daily summary second, report controls third. Composition: A restrained 12-column grid with a narrow summary rail and a wide report region; compact rows with generous separation between task regions. Typography: One neutral sans-serif family; compact labels; tabular figures; a clear but limited display-to-body scale contrast. Color: Neutral surfaces; red, amber, and green for status with text or icon cues; cobalt for the primary action. Verify readable contrast. Imagery or graphics: No decorative imagery; use simple line icons only where they improve scanning. Preserve: Keep the current information architecture, report names, and export workflow. Avoid: Avoid a card around every value, oversized dashboard headlines, decorative gradients, and color without a text or icon cue. Constraints: Prioritize laptop use; stack task regions at narrow widths. Support keyboard access and 200% text zoom; reuse existing tokens and components. Measure text contrast against WCAG AA requirements. Before producing the final, propose two materially different visual directions. Explain how each supports the purpose, then recommend one. Identify assumptions and any accessibility or production checks that still need human verification.
Review checklist
- The purpose names a useful outcome for a specific audience.
- The hierarchy tells the AI what should be noticed first, second, and third.
- Each style adjective is supported by a visible design decision.
- Preserve, avoid, and constraints describe the real project rather than the example.
2. Compare two directions against the same purpose
Evaluate the proposed directions before polishing one. Compare the reading order, visual relationships, and fit for the audience. Ask the AI to explain tradeoffs and identify unresolved assumptions; keep the final choice grounded in the brief.
Example prompt Compare the two proposed directions for this responsive web interface. Purpose: Help a busy operations lead identify anomalies and open the highest-risk report without hunting. Audience: Operations leads checking a dashboard on a laptop at the start of the day. Required hierarchy: Critical exceptions first, daily summary second, report controls third. Preserve: Keep the current information architecture, report names, and export workflow. Constraints: Prioritize laptop use; stack task regions at narrow widths. Support keyboard access and 200% text zoom; reuse existing tokens and components. Measure text contrast against WCAG AA requirements. For each direction, explain the first thing a viewer notices, the relationship between type and space, the role of each color, and the production or accessibility risks to verify. Identify which decisions support the purpose and which compete with it. Recommend one direction with a concrete tradeoff, rather than combining every feature from both. Ask for missing project information instead of inventing it.
Review checklist
- The directions differ in meaningful visual decisions, not just accent colors.
- The recommendation refers to purpose, audience, and hierarchy.
- Tradeoffs and assumptions are visible before production begins.
- One direction has been selected for a focused revision.
3. Revise with keep, change, because
Inspect the actual design and give a focused revision using keep, change, because. Replace the bracketed observations with evidence from the artifact. Verify the output at its intended size and in the states people will encounter.
Example prompt Revise the selected direction for this responsive web interface. Purpose: Help a busy operations lead identify anomalies and open the highest-risk report without hunting. Keep: [the specific decisions that are already working] Change: [one observable visual decision] Because: [how the current decision affects the purpose or reading order] Preserve: Keep the current information architecture, report names, and export workflow. Avoid: Avoid a card around every value, oversized dashboard headlines, decorative gradients, and color without a text or icon cue. Constraints: Prioritize laptop use; stack task regions at narrow widths. Support keyboard access and 200% text zoom; reuse existing tokens and components. Measure text contrast against WCAG AA requirements. Explain the revision without silently redesigning the parts marked keep. Provide the updated artifact and a short list of checks that require verification in the real output: legibility at intended size, measured contrast where applicable, responsive behavior, keyboard and focus states for interfaces, and production format. Do not claim these checks passed unless they were performed.
Review checklist
- Feedback names an observable change and explains why it matters.
- Successful parts of the selected direction remain intact.
- The result has been checked at its actual viewing size and relevant widths.
- Accessibility and production requirements were verified rather than assumed.
What you’re working toward.
A reusable design direction, a reasoned choice between alternatives, and focused revision notes tied to the intended outcome. Keep the brief and the verified decisions together so the next artifact can follow the same visual language.