Designing with the Agent

Lesson 2 gave you a repeatable way to phrase requests. This lesson uses those patterns for the fuzziest kind of change: how things look. Design isn't a single prompt — it's a short conversation where you name a direction, react to a draft, and lock in what works. By the end of this lesson your researcher portfolio should feel like yours, not like a template.

Part 1 · Design is a conversation

A common trap is to treat the agent like a design menu — "make it modern" — and hope. The result is usually the same beige defaults everyone else gets. Instead, art-direct: pick a mood, name a palette, choose a type feel, decide on density. The agent is fast at drafting; you're the one holding the taste.

"Bold but calm. Muted navy palette with one warm accent. Editorial serif headings on a clean sans body. Give the layout room to breathe."

Four short sentences and the agent already has more to go on than most design briefs.

Part 2 · Setting a design direction

Before you touch a single component, spend one prompt establishing the system: primary color, accent, background, heading font, body font, and spacing scale. Ask the agent to store them as design tokens so every later change reuses the same vocabulary.

A direction prompt that works

"Set up a design system for the site. Primary background #0e1a2b, accent #ff6b4a, paper #e8ecf2. Headings in Fraunces (serif, weight 600), body in Inter. Store as tokens in the global stylesheet and use them throughout — no hardcoded colors."

Part 3 · Reference-driven prompts

Words describe design badly. A single reference — a screenshot, a URL, or a section of your own site you already like — is worth a paragraph of adjectives. Attach it, then say exactly what to borrow.

Part 4 · Iterating on details

Once the direction lands, the rest of design is small, boring adjustments — a little more spacing, a slightly heavier weight, a hover state that reads. Do them one at a time. Each pass should be smaller than the last until nothing else bothers you.

Follow-ups that stay small

• The headline is right. Increase its size by one step and tighten the line height.
• Buttons feel heavy. Reduce vertical padding by 4px and use the accent only on hover.
• Section spacing is inconsistent. Standardise to 96px top / 64px bottom across all landing sections.
• Dark mode: keep the same tokens; only swap Ink and Paper. Don't invent new colors.

Part 5 · Avoiding generic AI aesthetics

Left unguided, most AI drafts converge on the same look: Inter everywhere, a purple-to-blue gradient hero, rounded cards with soft shadows, and an emoji or two in the pricing table. There's nothing wrong with any single ingredient — the problem is that everyone gets the same plate. Steer away on purpose.

Prompts that break the default

• Name a font that isn't Inter or Poppins — e.g. Fraunces, Space Grotesk, Instrument Serif, IBM Plex.
• Ban purple gradients on white unless that's genuinely the brand.
• Ask for one distinctive layout move: split hero, oversized numbers, editorial captions, marquee — pick one, not all.
• Prefer one warm accent on a considered neutral over three colors of equal weight.

Part 6 · Accessibility & lock-in

A design that looks great but fails a contrast check isn't done. Ask the agent to test text-on-background pairs against WCAG AA (4.5:1 for body, 3:1 for large text) and to adjust the token — not the individual component — when a pair fails. Then lock the system so later prompts can't quietly drift.

Locking the system

• Freeze tokens in the global stylesheet; forbid hardcoded hex values in components.
• Ask the agent to reject any future prompt that introduces a new color or font without adding a token first.
• Cap animation: define one easing curve and one duration; reuse across the site.
• Add a short "design rules" note in the project so later sessions inherit the taste.

Design prompt cheat sheet

A pocket version of the six moves. Glance at it before you ask for a visual change.

• Conversation — art-direct, don't order from a menu.
• Direction — palette, type, density in one prompt; store as tokens.
• Reference — attach one; say exactly what to copy and what to skip.
• Iterate — smaller passes each round; name 2–3 things at a time.
• Anti-generic — pick a non-default font, one accent, one distinctive layout move.
• Lock — check contrast, freeze tokens, cap animation.