Skip to content
Agentic Prototyping

Get from brief to a running prototype you can defend in critique.

A workflow-led course on getting from intent and reference material to working prototypes that can be tested, critiqued, and handed over honestly. It covers the prototype-first mindset, turning references and research into briefs, exploring multiple directions in parallel, holding the running screen to the brief, running visual QA loops, and finishing a prototype sprint with a handoff that does not overstate what was built.

Pay once. Yours to keep, with updates.

US$39One-time purchase

Buying for a team? Team seats

Modules
6 modules
Total time
≈4h 30m
Last updated
2026-10-09

Curriculum

6 modules

Slides are the lesson; study guide and transcript come with each module.

Time commitment

≈4h 30m

About ≈5 hours across the full outline — work at your pace.

Access

US$39

Pay once. Yours to keep, with updates.

What you will build / 01

Artefacts you can take back to the team.

Prototype-first practice: references to briefs, parallel directions, visual QA, and an honest handoff that does not overstate what was built.

01

Scoped prototypes with an explicit prototype-vs-production line

02

Briefs derived from references, research, and constraints

03

Multi-direction explorations that are not five skins of one idea

04

Visual QA loops for state, density, and responsive failures

05

Handoffs that name what was built, faked, and still unknown

Three cream direction cards with cobalt geometric marks, mustard accent card, and yellow pencil on warm paper
Curriculum / 02

Module outline

Open the first module you have not finished. The slides are the lesson. The study guide and the transcript are the same module if you would rather read.

01

Prototype First, Production Later

Why prototypes are the natural first agentic workflow, what changes when prototypes are built in the product's real materials, and the discipline that stops a convincing prototype quietly becoming unreviewed production code.

02

From Reference to Brief

References are the richest input designers have and the easiest to misuse. This module covers turning screenshots, competitor flows, and research findings into briefs that borrow behaviour rather than cloning surfaces.

03

Multi-Direction Concept Exploration

Using agents to explore genuinely different directions in parallel — not five fonts on the same layout — and converging through structured comparison rather than whichever one looked best at the standup.

04

Screenshot to Implementation Parity

When the design exists and the implementation must match it: parity checks with screenshot evidence, the spacing and state details agents reliably miss, and an iteration loop that converges instead of oscillating.

05

Visual QA Loops

Making visual quality checkable: screenshot sweeps across states and breakpoints, regression comparisons against a baseline, and findings that arrive with evidence a designer can act on in minutes.

06

Interactive Prototype Sprint and Handoff

Putting the course together in a timed sprint: from brief to a tested interactive prototype, then a handoff that records what was built, what was faked, what was learned, and what production would actually require.

Inside the materials / 03

Sample lesson & slide previews

Titles and diagrams from early modules — the same materials you open after checkout.

Two-track diagram comparing the prototype track and the production track. The prototype track is built to answer a question and be thrown away: it optimises for speed of learning, lives in a scratch branch or prototypes folder, allows labelled fake data and hard-coded states, skips integrations, and outputs screenshots, learning notes, and a promotion plan. The production track optimises for correctness and maintainability, lives in product architecture with shared components, requires real states, accessibility, and QA gates, and is rebuilt from approved decisions. Between them, a green card lists what carries across through the promotion review — validated decisions, approved patterns, learning notes and named risks — and an ink card lists what must not carry across: pasted prototype files, fake data, look-alike local components, and deferred accessibility.Diagram with four rows showing how inputs become brief content. A reference screenshot yields density, spacing rhythm, and hierarchy, landing in the brief's design direction. A competitor flow yields step order, navigation pattern, and the states it handles, landing in the user job and states. Research findings yield what users struggled with, stated as observations with confidence levels, landing in the user job and review criteria. Product context yields components, tokens, constraints, and real content, landing in the constraints and content lines. A bottom strip lists what is never extracted: brand, copy, colour palette, logos, and proprietary illustrations — the clone trap.Flow diagram showing one shared brief with three named stances fanning out to three direction agents — guided linear, progressive disclosure, and template-first — each drafted in parallel and in isolation, never seeing the others. The three direction packages converge into an adversarial critique stage that produces a comparison board with rubric scores backed by evidence, the strongest objection per direction, disqualifying constraint violations, blend candidates, and open questions, but no winner. The board feeds a human decision to pick, blend, or send a direction back, with rejected directions recorded on file.Loop diagram of the parity check workflow. A reference screenshot with its extracted spec and a scripted capture of the built implementation both feed an agent-run parity check, which compares them side by side and logs observable mismatches with severities from P0 to P3 and the smallest patch for each. A verdict gate decides the outcome: a pass or pass with accepted differences goes to a human sign-off where the parity report is kept with the build, while a fail sends the work to an agent patch pass that fixes one layer per round — structure, then spacing and type, then colour and states — recaptures at the same widths, and re-runs the check.

Prototype First, Production Later · concept

What changes: working materials, minutes per iteration

Prototype First, Production Later · example

Traced run: zero to a working prototype in one session

Prototype First, Production Later · concept

Write the learning goal before the prompt

Prototype First, Production Later · comparison

Fidelity is a set of decisions, not a dial

Prototype First, Production Later · checklist

The trap: convincing prototypes treated as production

Prototype First, Production Later · diagram

Two tracks: built to learn, built to last

Audience and outcomes / 04

By the end of this course you can…

Product designers and prototypers who already run basic agent sessions and want to make prototyping their fastest, most reliable agentic workflow — including those who currently lose more time correcting agent output than they save.

01

Scope prototypes deliberately, with an explicit line between prototype quality and production claims.

02

Turn reference screenshots, competitor flows, and research findings into briefs an agent can execute.

03

Run multi-direction concept exploration without producing five versions of the same idea.

04

Hold the running screen to the brief. A screenshot is the record of that check, not the whole method.

05

Run visual QA loops that catch state, density, and responsive failures before review.

06

Close a prototype sprint with an honest handoff: what was built, what was faked, what is unknown.

Who it is for

This is for you if…

  • Product designers and prototypers who already run basic agent sessions
  • Designers who lose more time fixing agent output than they save
Who should skip it

This is not for you if…

  • Absolute beginners who have never briefed an agent — take Fundamentals first
  • Teams that only need production engineering pipelines
Why register now

The practice compounds. Waiting does not.

01

Correcting agent output often costs more than the time saved — this course attacks that loop.

02

Stakeholders already ask for running screens; the craft is the brief and the QA, not the demo.

03

Pairs cleanly with Claude Code for Designers when you want the tooling depth underneath.

Price and checkout

Pay once. Keep the course, with updates.

Prefer the full designer catalogue, or designer plus leadership? Upsell paths use the same checkout you already trust.

Pay once. Yours to keep, with updates.

US$39One-time purchase

Buying for a team? Team seats

FAQ

Before you register

Does this replace Claude Code for Designers?

No. This course is the prototyping workflow. Claude Code for Designers is the tooling and setup path. Many designers take both.

Is this a subscription?

Pay once. Yours to keep, with updates. There is no renewing membership for new purchases.

What do updates cover?

All edits and new lessons in an owned course, for the life of the course. Bundles include new courses added to that track for 12 months.

What if a course is retired?

Course retirement gives access to its replacement.

Related material / 05

The sources behind this course.

The course teaches the practice; the books and articles carry the depth, sources, and worked runs it draws on.

The Agentic Designer

The operating model for product designers, design leads, and builders who need to understand what changes when agents join design work.

Claude Code for Designers

A practical guide for designers who want to work directly with coding agents without turning it into a programming manual.

Leading a Design Organization with Agents

The three leadership courses are sold together for US$300. Designer courses and bundles don't include them, except the Everything bundle, which does. This purchase doesn't open the designer courses.

View course

Vague Prompt vs Specific Design Prompt

A prompt teardown with the receipts: the same pricing-page request run twice — once vague, once specific — with the generated code, audit output, iteration counts, the residual failure neither prompt fixed, and the rewrite patterns that made the difference.

Read article

Visual QA With Agents

A long-form workflow for using agents to inspect screenshots, compare implementation against intent, run accessibility checks, and produce fix-ready review notes — traced against a real review of this site's own article page.

Read article

Screenshot to Implementation Without Losing the Design

A deep workflow for using screenshots as implementation evidence while preserving hierarchy, spacing, states, accessibility, and design-system intent.

Read article

Prototype First, Production Later

A designer-friendly operating model for using agents to explore quickly without accidentally shipping rough prototypes as fragile production code.

Read article

Claude Code for Designers: Zero to First Prototype in One Session

A field note for designers who have never opened Claude Code: install it, log in, write one specific brief, and walk out of the session with a real hero.html you can open in a browser. The walkthrough was executed for this article — including the things the first pass got wrong — and every command carries a verify-before-running caveat because onboarding steps move fast.

Read article