Copied to clipboard!
Module 6 Level 2: Applied AI Design Systems & Skills intermediate 30 min

Prototyping Fundamentals

Brief to clickable prototype: structure, states, wiring.

What you'll be able to do

  • Reduce a brief to one job and one success moment
  • Map the minimum screens and states for a clickable prototype
  • Wire the interactions into a build-ready prototype spec

Turn a Brief into a Clickable Prototype Plan

You have a brief for a small app or landing flow and you need a clickable prototype, not a wall of text. You plan the screens, the states, and the wired interactions so it can be clicked through and tested. AI structures the prototype plan fast. You stay the art director who decides what the experience should feel like and what gets cut.

Recommended tool

claude

Strong at decomposing a brief into screens, states, and wired flows, and at writing the build-ready prototype spec. Paste your DESIGN.md so the plan stays on-brand.

Bring to the exercise

  • The brief: who it is for, the one job it must do, and the single success moment
  • Your DESIGN.md (or at least the brand principles and tokens)
  • Any must-have screens or steps you already know you need
Step 1

Pin the One Job

Force the prototype down to a single job and a single success moment before any screens.

What to substitute before pasting

  • [PASTE THE BRIEF] The brief: audience, the one job, the success moment.
  • [PASTE YOUR DESIGN.md] Your DESIGN.md from the brand-system exercise, or at least principles + tokens.
Here is my brief:
[PASTE THE BRIEF]

Here is my DESIGN.md (or brand principles + tokens):
[PASTE YOUR DESIGN.md]

Before any screens: in one sentence each, tell me back the ONE job this prototype must do and the ONE success moment the user should reach. If the brief is trying to do more than one job, say so and recommend what to cut for a first clickable prototype.
What good output looks like
  • One-sentence job and one-sentence success moment.
  • Flags scope creep and recommends cuts for v1.
  • Stays anchored to your brief, not an idealized app.

Verify before using AI's output

Step 2

Map the Screens and the Happy Path

List the minimum screens and the click-by-click path to the success moment.

Map the minimum set of screens to reach the success moment, and the happy path through them, click by click.

For each screen: a name, its single purpose, and the one primary action that moves the user forward.

Keep it minimal. If a screen does not move the user toward the success moment, cut it and tell me why.
What good output looks like
  • A short, ordered list of screens with one purpose each.
  • A click-by-click happy path to the success moment.
  • Anything non-essential is cut with a reason.

Verify before using AI's output

Step 3

Add the States

Cover the empty, loading, error, and success states that make a prototype real.

For each screen, add the states that make a prototype believable, not just the happy path:
- Empty state (nothing entered yet)
- Loading / in-progress
- Error or invalid input
- Success / confirmation

Describe what changes on screen in each state, in plain words tied to my DESIGN.md tokens (use the state color for errors and success).
What good output looks like
  • Empty, loading, error, and success states per screen.
  • State descriptions reference your DESIGN.md tokens.
  • Errors and success use the right state colors.

Verify before using AI's output

Step 4

Wire the Interactions

Specify what each action does so the prototype can be clicked and tested.

Now wire the interactions. For every primary action and every state transition, write it as:

ON [trigger] -> GO TO [screen/state] (and what the user should see).

Make it complete enough that I (or a no-code prototyping tool) could wire a clickable prototype from this alone. Flag any interaction the brief is silent on as a DECISION I need to make.
What good output looks like
  • Every action and transition written as ON ... -> GO TO ...
  • Complete enough to wire in a prototyping tool.
  • Open questions parked as DECISION items for you.

Verify before using AI's output

Step 5

Assemble the Prototype Spec

Produce one build-ready spec a tool or teammate could turn into a clickable prototype.

Assemble everything into one PROTOTYPE SPEC:
1. The one job + success moment
2. Screen list (purpose + primary action)
3. States per screen
4. Wired interactions (the ON ... -> GO TO ... list)
5. Open DECISIONS

Clean and build-ready. Someone should be able to open a no-code tool and build a clickable prototype straight from this.
What good output looks like
  • One build-ready prototype spec with all five sections.
  • Self-contained and skimmable.
  • Open decisions clearly listed for you to settle.

Verify before using AI's output