Brief to Build

From a brief to something that runs.

There is no single workflow. Agents can help at each step from brief to build, and each step still needs a person to decide it is right before the next one starts.

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

In 30 seconds

Start by asking what the brief leaves out
Use it to list edge cases and states
Explore several structures before any visuals
A prototype that renders is not a design that works
Check responsive behaviour and states yourself

Good use

Finding gaps and contradictions in a brief
Extracting requirements and edge cases
Exploring several flows or structures quickly
First-pass wireframes to react to
Listing component states you forgot
Code-backed prototypes for testing

Weak use

Final visual design inside your system
Deciding the flow for you
Anything where the brief itself is wrong

What to give the agent

The brief
The design system
Existing flows
Technical constraints
What done looks like

You still own

The flow
The hierarchy
What ships

What to verify

Every state exists: empty, loading, error
It works at narrow widths
It uses your components, not lookalikes
It can be used by keyboard

Common failureA polished screen for the happy path, built from invented components, that breaks at 375 px.

The steps

Brief
Requirements
Flows
Structure
Wireframes
UI
Prototype
QA
Build

In order. A person decides each step is right before the next begins.

Where each kind of tool fits

Tools change quickly. Check the AI Tools page for what each one currently says it does.

Chat assistants: Reading a brief, requirements, edge cases, critique. For example Claude or ChatGPT.
Inside the design tool: First drafts and variations where your file already lives. For example Figma's AI features and Figma Make.
Prompt to app: A working prototype from a description. For example v0, Lovable or Replit Agent.
In the codebase: Prototypes that belong in real code. For example Cursor.

Go deeper in Shortcut

Where each kind of tool fits

Tools change quickly. Check the AI Tools page for what each one currently says it does.

Chat assistants: Reading a brief, requirements, edge cases, critique. For example Claude or ChatGPT.
Inside the design tool: First drafts and variations where your file already lives. For example Figma's AI features and Figma Make.
Prompt to app: A working prototype from a description. For example v0, Lovable or Replit Agent.
In the codebase: Prototypes that belong in real code. For example Cursor.