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.
Modules6 modules
Last updated2026-06-02
Audience and outcomes
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 implementations to visual parity with the reference using screenshot evidence.
- 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.
Modules
Modules marked Available have full slide decks with speaker notes and narration scripts. The rest show their planned outline until production catches up.
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.
- Explain what agentic prototyping changes about speed, fidelity, and review.
- Scope a prototype with explicit fidelity decisions per layer: visual, data, interaction.
- Set the prototype-to-production boundary before building, not after.
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.
- Annotate references so the agent borrows the right things: density, rhythm, hierarchy.
- Combine research findings and references into a single executable brief.
- Avoid the copy-this-screenshot failure and the legal and taste problems behind it.
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.
- Define direction axes that produce meaningfully different concepts.
- Run parallel generation without the directions collapsing into each other.
- Converge using a comparison board with named criteria and evidence.
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.
- Set up a parity workflow: reference, implementation, and diff evidence side by side.
- Identify the failure classes agents repeat: spacing drift, font fallbacks, missing states.
- Run a convergent iteration loop with one named gap per round.
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.
- Define a screenshot matrix of routes, states, and breakpoints worth checking.
- Run agent-driven visual QA sweeps and read the results efficiently.
- Establish baselines so regressions are caught against something real.
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.
- Plan and run a prototype sprint as a sequence of bounded agent runs with gates.
- Test the prototype with users or stakeholders and capture findings against the brief.
- Write a handoff that distinguishes built, faked, and unknown.
Books and articles behind this course
The course teaches the practice; the books and articles carry the depth, the sources, and the worked runs it draws on.
The operating model for product designers, design leads, and builders who need to understand what changes when agents join design work.
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.
- 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.
- 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.
- Prototype First, Production Later
A designer-friendly operating model for using agents to explore quickly without accidentally shipping rough prototypes as fragile production code.
- 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.