Designing with Agents

The mindset shift.

Working with an agent is not asking AI to design something. It is briefing a capable colleague who knows nothing about your product and will never say so.

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

In 30 seconds

Give context before you give a task
Hand over source material, not a description of it
Say what done looks like
Decide how you will check the result
Iterate on purpose, not by re-rolling

What changes

Not this: "Design me a dashboard."
This: Context, sources, constraints, the task, the output you expect, and how it will be checked.

What you are doing each time

Giving context
Providing source material
Setting constraints
Defining the task
Defining the expected output
Setting validation rules
Reviewing assumptions
Checking sources
Iterating intentionally

The nine context files

A starting framework, not a universal requirement. Most tasks need three or four of them.

1Product brief
What the product is, who pays for it, and what this piece of work is for.
Why, when and an example
Why it matters
Without it, every answer is about a generic product.
When to use it
Every task.
Example
"A scheduling tool for clinics. This work: let patients reschedule without calling."
2User and audience context
Who the users are, what they are trying to do, and what you know from research.
Why, when and an example
Why it matters
It stops the agent designing for an imagined average person.
When to use it
Research, flows, copy and critique.
Example
"Mostly over 50, on phones, often rescheduling for a parent."
3Design system
Tokens, components, variants and the rules for using them.
Why, when and an example
Why it matters
An agent that cannot see your system invents one.
When to use it
Any interface work.
Example
Token names with values, and a list of components with their variants.
4Content and tone guide
Voice, terminology, and words you never use.
Why, when and an example
Why it matters
Default AI copy sounds like every other product.
When to use it
Any text a user will read.
Example
"Say appointment, not booking. No exclamation marks."
5Accessibility requirements
The standard and level you work to, and the checks you run.
Why, when and an example
Why it matters
Agents state accessibility claims confidently and often wrongly.
When to use it
Interface, copy, handoff and review.
Example
"WCAG 2.2 AA. Targets at least 24 by 24 CSS px. Every input has a visible label."
6Technical constraints
Platform, framework, what is already built, and what cannot change.
Why, when and an example
Why it matters
It keeps suggestions inside what can ship.
When to use it
Flows, prototypes and handoff.
Example
"Web only. The calendar component is third-party and cannot be restyled."
7Existing flows and structure
The current screens, navigation and information architecture.
Why, when and an example
Why it matters
New work has to fit what is there.
When to use it
Flows, structure and critique.
Example
A list of screens in order, or screenshots with one line each.
8Product principles and UX rules
The decisions your team has already made and does not want reopened.
Why, when and an example
Why it matters
It saves arguing the same point with a machine.
When to use it
Strategy, interface and review.
Example
"One primary action per screen. Never hide price until checkout."
9Output and QA checklist
The format you want back, and what the output must pass before you use it.
Why, when and an example
Why it matters
It turns a vague request into something you can check.
When to use it
Every task.
Example
"Return a table. Mark every assumption. Cite the file each fact came from."

The nine context files, as a checklist

CONTEXT FILES FOR AN AGENT
A starting set. Use the ones the task needs.

1. Product brief
   What the product is, who it is for, what this work is for.
2. User and audience context
   Who the users are, their goals, what research says.
3. Design system
   Tokens, components, variants, usage rules.
4. Content and tone guide
   Voice, terminology, words to avoid.
5. Accessibility requirements
   Standard and level, checks to run.
6. Technical constraints
   Platform, framework, what cannot change.
7. Existing flows and structure
   Current screens, navigation, information architecture.
8. Product principles and UX rules
   Decisions already made.
9. Output and QA checklist
   Format wanted, and what the output must pass.

Go deeper in Shortcut

CONTEXT FILES FOR AN AGENT A starting set. Use the ones the task needs. 1. Product brief What the product is, who it is for, what this work is for. 2. User and audience context Who the users are, their goals, what research says. 3. Design system Tokens, components, variants, usage rules. 4. Content and tone guide Voice, terminology, words to avoid. 5. Accessibility requirements Standard and level, checks to run. 6. Technical constraints Platform, framework, what cannot change. 7. Existing flows and structure Current screens, navigation, information architecture. 8. Product principles and UX rules Decisions already made. 9. Output and QA checklist Format wanted, and what the output must pass.