Skip to content
Sign in
Claude Code for Designers

Open Claude Code on a real project — not a sandbox demo.

A hands-on course built from the book of the same name. It takes a designer from never having opened a terminal to running Claude Code on real design work: turning mockups into code, building prototypes, maintaining design systems, automating repetitive design chores, and connecting the agent to the rest of the design toolchain over MCP. Every module ends with a task run against a real project rather than a sandbox.

Pay once. Yours to keep, with updates.

US$49One-time purchase

Buy courseDesigner TrackEverything bundle

Buying for a team? Team seats

Modules
7 modules
Total time
≈5h 25m
Last updated
2026-10-09

Curriculum

7 modules

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

Time commitment

≈5h 25m

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

Access

US$49

Pay once. Yours to keep, with updates.

What you will build / 01

Artefacts you can take back to the team.

From first install to mockup-to-code, prototypes, system maintenance, automation, and MCP — every module ends on your work.

01

A working Claude Code setup (Desktop, VS Code, or CLI) with deliberate permissions

02

Mockup-to-code runs you can compare against the brief

03

Interactive prototypes on real components and data shapes

04

A maintenance or automation skill the team can rerun

05

An MCP connection plan that does not become a security mess

Open ruled black notebook, yellow pencil, closed black notebook, and cream card with a cobalt chevron 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

The Design–Code Gap

Why the gap between design intent and shipped product exists, what it costs in handoff loss, and why a coding agent — not another plugin — is the realistic bridge for designers.

02

Getting Set Up Without Terminal Fear

The three ways into Claude Code — Desktop, the VS Code extension, and the CLI — what permission modes actually control, and a setup path that starts safe and earns trust before granting more access.

03

From Mockup to Code

The core skill: giving the agent a mockup, a screenshot, or a reference and getting back working front-end code that respects the design — plus the review habits that catch where it does not.

04

Prototyping and Building

Moving from single sections to working prototypes: multi-screen flows, realistic data, interaction states, and the discipline of keeping prototypes honest about what they are.

05

Design Systems and Component Libraries

Using the agent on the system itself: building and documenting components, enforcing tokens, finding drift, and handling the long tail of system maintenance that teams never staff.

06

Automation and Maintenance

Turning one-off wins into repeatable runs: skills for recurring procedures, scheduled audits, asset production, and the maintenance work that keeps a design codebase healthy.

07

MCP Integrations and Team Workflows

Connecting Claude Code to the rest of the toolchain over MCP — canvases, browsers, tickets, analytics — and making the whole approach work for a team rather than one enthusiastic designer.

Inside the materials / 03

Sample lesson & slide previews

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

Diagram comparing two paths from design intent to shipped product. The top handoff path runs from design intent in a design tool, through handoff specs and redlines, to a hand-rebuilt implementation, to a shipped product that has drifted; dashed leak markers under the arrows note where spacing and type drift, states get dropped, and empty states get invented. The bottom agent path runs from a designer brief with a mockup, to Claude Code working directly in the product's real components and tokens, through a designer review gate of diffs and screenshot comparisons, to a shipped product built from the same materials end to end.Three cards comparing the Claude Code Desktop app, the VS Code extension, and the terminal CLI as entry points. The Desktop card suits designers who never want a terminal and offers visual folder selection, side-by-side diffs, an app preview pane, and a connectors UI, but is not available on Linux and is weaker for scripting. The VS Code card suits designers already working in VS Code, with inline diffs, @-mentions, and checkpoints, but assumes editor comfort and has no app preview. The CLI card suits power users and later automation, with the full feature set and scriptable runs, but the steepest learning curve. A green band underneath shows what is shared: the same engine, the same CLAUDE.md and settings, the same permission modes, and the same MCP connections.Pipeline diagram of the mockup-to-code workflow. The designer supplies a reference screenshot or mockup plus tokens and components, the agent analyses the structure and returns an annotation, which passes a human annotation gate before any code exists. The agent then generates the section against existing components and tokens, runs a parity check by capturing screenshots and comparing them to the reference, and the designer reviews the result. Mismatches return to the agent as a new run via a dashed line, and the section is accepted only by a final human decision. Reference, the annotation gate, designer review, and accept are marked human-led; structure analysis, generate, and the parity check are marked agent-run.Six-step diagram of a single prototyping session. Step one, the designer briefs the screen: the question, the riskiest assumption, the happy path, and the out-of-scope list. Step two, the agent builds the happy path from existing tokens, components, and sample data inside a marked prototype folder. Step three is a checkpoint where the designer screenshots the result, walks the flow, and either fixes and loops or clears and re-briefs, shown with a dashed feedback line back to the build step. Step four, the agent adds states and the next screen with realistic data and hard-coded navigation. Step five is a blocker-only QA pass that fixes dead ends and logs polish without fixing it. Step six is the session output: a clickable artifact behind an index page, labelled as a prototype and not promoted to production.

The Design–Code Gap · concept

Where intent leaks: handoff, redlines, and rebuilt screens

The Design–Code Gap · diagram

The design–code gap, drawn

The Design–Code Gap · concept

What the gap costs: rework, drift, and dropped states

The Design–Code Gap · comparison

Why plugins and exporters never closed it

The Design–Code Gap · concept

What a coding agent changes

The Design–Code Gap · concept

Claude Code in one slide

Audience and outcomes / 04

By the end of this course you can…

Product designers and prototypers who want to work directly with a coding agent without becoming engineers — including those who have actively avoided the terminal until now.

01

Set up Claude Code through Desktop, VS Code, or the CLI and configure permission modes deliberately rather than accepting defaults.

02

Turn a design into working front-end code, then compare the running screen with the brief. A screenshot is evidence, not the whole method.

03

Build interactive prototypes that use real components and real data shapes.

04

Maintain a component library with the agent doing the mechanical work and the designer holding review.

05

Automate recurring design tasks — audits, documentation, asset production — as repeatable runs.

06

Connect Claude Code to design tools and team systems over MCP without creating a security mess.

Who it is for

This is for you if…

  • Product designers and prototypers who want a coding agent without becoming engineers
  • Designers who have avoided the terminal and need a safe first path
  • Leads who want a shared on-ramp before a wider Claude Code pilot
Who should skip it

This is not for you if…

  • Engineers looking for deep systems programming content
  • Anyone who only wants prompt trivia with no project to run against
Why register now

The practice compounds. Waiting does not.

01

The book and course share one practice path — start once, keep the artefacts.

02

Permission modes and harness habits are cheaper to learn before a team rollout.

03

MCP and tooling move fast; the course teaches the durable pattern, not a one-week tip.

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$49One-time purchase

Buy courseDesigner TrackEverything bundle

Buying for a team? Team seats

FAQ

Before you register

Do I need to be a developer?

No. The course assumes design craft, not engineering. You will touch the terminal or Desktop app, with permission modes explained before anything destructive.

Is this the same as the book?

It is built from Claude Code for Designers. The course is the taught path with modules, slides, and exercises; the book remains the long-form reference.

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.

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

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

Design Skills: Packaging Taste and Procedure into SKILL.md

When a design procedure deserves to become a SKILL.md, what goes inside one, and how to build, trigger, trust, and share it — with a real skill built for this site's own editorial pipeline, including the part that went wrong.

Read article

MCP for Designers: Connecting Figma, Miro and Your Canvas to an Agent

A plain-language guide to the Model Context Protocol for designers: what it is, which design servers are worth connecting, how to configure them on Claude Code, Codex CLI, OpenCode, and Antigravity CLI, and the permission hygiene that keeps a write tool behind a prompt. Re-read 9 October 2026.

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

Pricing and Plan Selection for Design Teams

How to choose an agent plan for design work, plus the US list prices that were still on the vendors' own pages on 9 October 2026. Figures that could not be re-read that day are left out on purpose.

Read article