Scoped prototypes with an explicit prototype-vs-production line
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.
- 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.
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.
Briefs derived from references, research, and constraints
Multi-direction explorations that are not five skins of one idea
Visual QA loops for state, density, and responsive failures
Handoffs that name what was built, faked, and still unknown

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.
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.
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.
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.
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.
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.
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.
Sample lesson & slide previews
Titles and diagrams from early modules — the same materials you open after checkout.
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
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.
Scope prototypes deliberately, with an explicit line between prototype quality and production claims.
Turn reference screenshots, competitor flows, and research findings into briefs an agent can execute.
Run multi-direction concept exploration without producing five versions of the same idea.
Hold the running screen to the brief. A screenshot is the record of that check, not the whole method.
Run visual QA loops that catch state, density, and responsive failures before review.
Close a prototype sprint with an honest handoff: what was built, what was faked, what is unknown.
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
This is not for you if…
- Absolute beginners who have never briefed an agent — take Fundamentals first
- Teams that only need production engineering pipelines
The practice compounds. Waiting does not.
Correcting agent output often costs more than the time saved — this course attacks that loop.
Stakeholders already ask for running screens; the craft is the brief and the QA, not the demo.
Pairs cleanly with Claude Code for Designers when you want the tooling depth underneath.
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.
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.
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 courseVague 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 articleVisual 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 articleScreenshot 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 articlePrototype First, Production Later
A designer-friendly operating model for using agents to explore quickly without accidentally shipping rough prototypes as fragile production code.
Read articleClaude 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