01
Scope prototypes deliberately, with an explicit line between prototype quality and production claims.
Course / Intermediate
Agentic Prototyping
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 implementations to screenshot parity, 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-06-02
- Your progress
- 0/6 modules completed
Audience and outcomes / 01
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.
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 implementations to visual parity with the reference using screenshot evidence.
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.
Curriculum / 02
Modules
Every module has a full slide deck with speaker notes and a narration script.
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.
Related material / 03
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.
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 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