Design generation

Bring the AI references, examples, and code patterns so it has something real to work from.

The useful move is not asking AI to invent in a vacuum. The useful move is to bring in references, screenshots, existing layouts, and code patterns as examples, then have the model pull style, structure, and direction from those inputs while adapting them to your own product and constraints.

1core move: give the AI concrete references instead of vague prompts
3strong inputs: references, code patterns, and product constraints
5workflow stages: collect, describe, generate, adapt, verify
Bad input

Do not give the model only a vague adjective stack and expect a precise result. Weak prompts produce generic layouts and random style decisions.

Good input

Bring references for layout, hierarchy, density, and tone, then explain what you want the AI to learn from each example.

How to use the tool well

Treat the model like a fast style reader and drafting partner. It should pull cues from examples and code, then you refine the result into something that fits the actual product.

Skills are optional

Skills, templates, or specialized helpers can be added when you want tighter guidance, but they should be brought in deliberately when needed, not loaded automatically every time.

01

The distinction that matters

RAW

Prompting in the dark

If you give the model no real examples, it falls back to generic patterns and surface-level guesses.

  • Purely abstract prompts with no visual anchor.
  • No explanation of what style signals matter.
  • Results that look polished but are disconnected from the product.
REF

Reference-driven generation

Bring in examples so the model can learn from concrete patterns rather than guessing what you mean.

  • Show examples of hierarchy, navigation, spacing, and rhythm.
  • Describe exactly what should be borrowed from each reference.
  • Use multiple references so the result is synthesized, not copied blindly.
COD

Pull style from code

The AI should also read the codebase when style already exists in components, spacing systems, typography, and interaction patterns.

  • Use existing components as concrete style evidence.
  • Mirror patterns that already exist in markup and CSS.
  • Extend the system instead of inventing a disconnected new one.
02

A practical reference-first workflow

1. Collect

Gather screenshots, layouts, product examples, and nearby code that represent the style or structure you want.

2. Describe

Tell the AI what matters in those references: spacing, component density, navigation model, copy tone, or interaction rhythm.

3. Generate

Have the model produce directions using those references as examples rather than as targets for duplication, and add specialized skills only when the task actually benefits from them.

4. Adapt

Pull the best parts back into your own product, aligning the output to existing components, CSS, and content structure.

5. Verify

Check that the result fits the codebase, supports the real product, and is not just a shallow imitation of the reference.

Rule of thumb: the more specific the references and the clearer the explanation of what to learn from them, the better the AI can produce useful design work.
03

How references and code should be used

REF

Reference for patterns

Use references to identify the patterns you want the model to understand, then restate those patterns in your own system.

  • Document what you like: density, navigation, tone, spacing, rhythm, or content grouping.
  • Translate those observations into explicit instructions for the model.
  • Mix multiple references so the AI is learning a pattern set, not reproducing one artifact.
AI

Use the AI as a style interpreter

Feed it reference notes and code context so it can infer the design language that should carry into the next page or feature.

  • Ask it to explain which cues it is taking from which examples.
  • Use it to accelerate translation from reference to implementation.
  • Bring the output back into the real repo and refine from there.
SYS

Make it fit the system

The final output should look like it belongs to the product you already have, not like an isolated concept image detached from the code.

  • Reuse or extend existing component logic where possible.
  • Align spacing, typography, and interaction behavior with nearby code.
  • Replace generic AI filler with intentional product decisions.
04

Design skills AI still depends on

  • Choosing the right references instead of feeding the model random inspiration.
  • Judging whether the generated layout supports the real user task flow.
  • Recognizing which existing code patterns should be preserved or extended.
  • Adapting generated ideas to real content, real constraints, and real implementation limits.
  • Reviewing clarity, consistency, accessibility, and fit before shipping.
05

Reference checklist

  • Bring examples that show the style or structure you want the AI to learn from.
  • Point to existing code when the current product already contains the right design language.
  • Explain what should be pulled from each reference: layout, density, type scale, tone, or flow.
  • Add skills or helper patterns only when you want extra guidance for a specific problem.
  • Ask for adaptation into your own content and system rather than blind reproduction.
  • Keep a brief and reference log so the next iteration starts from concrete context instead of guesswork.
Sample pages Back to development method Open current applications What this process solves Problem statement AI iteration