Claude Design
Chapter 02 ← Home

The workflow

Six moves, in order — from the ten minutes of design-system onboarding that pays back on every project to the exit you should have picked first.

  1. Set your brand in during onboarding

    When given access, Claude reads your codebase and design files and builds a design system — your colours, typography and components. Every project after that applies it automatically. You refine the system over time, and teams can maintain more than one.

    Ten minutes here pays back on every project after. On-brand by default beats on-brand by correction, and a thin design system produces confidently wrong branding at speed — which is worse than obviously generic branding. Once per team · the highest-leverage step on this page

  2. Import from anywhere

    Start from a text prompt, upload images and documents (DOCX, PPTX, XLSX), or point Claude at a codebase. The web capture tool pulls elements directly from your live website.

    That last one matters more than it sounds. A prototype that looks like your product gets you feedback about the idea; one that looks generic gets you feedback about the styling.

  3. Get the first version

    Describe what you need. Claude produces a working design on the canvas. Do not over-specify — the refinement tools are where precision lives. Give it the intent, the audience, and the one constraint that matters most.

    Name the exit in this prompt. If it is ending as a PPTX, say so now — that single sentence prevents most export disappointment, and you cannot retrofit it later.

  4. Refine through four channels

    This is what separates Design from prompting in a chat window: conversation for structural moves, inline comments pinned to specific elements, direct text edits on the canvas, and adjustment sliders Claude generates itself for spacing, colour and layout.

    Then the highest-leverage move in the product: fix one instance and ask Claude to apply it across the design. Showing the answer beats describing it.

  5. Share and collaborate

    Sharing is organisation-scoped: keep a document private, share a view link, or grant edit access so colleagues can modify the design and chat with Claude together in a group conversation.

    Feedback happens on the artefact rather than in a thread about the artefact — which is the whole point.

  6. Export or hand off

    Six destinations: Claude Code handoff, standalone HTML, Canva, PPTX, PDF, or a downloadable folder — plus an internal URL for sharing in place. When a design is ready to build, Claude packages everything into a handoff bundle you pass to Claude Code with a single instruction.

    Which one to choose, and what each costs you, is Chapter 06.

The field guides

Seven guides, one method. Roughly in the order a reader meets them: how the field got here, how to work across models, then the tools themselves.

Forward Pass How modern AI systems get built, from the 1956 Dartmouth workshop to today’s agents. forwardpass.guide AI Triangulation Running Claude, ChatGPT and Grok as a deliberative ensemble — identical briefs, independent outputs. ai-triangulation-guide.com LoopForge AI loop engineering — anatomy, patterns, timescales and failure modes. Conducted, not just prompted. loopforge-fieldguide.com Cowork: A Field Guide Anthropic’s Claude Cowork for working professionals: decision tree, task patterns, safety. coworkfieldguide.com
Claude Design Anthropic Labs’ visual work surface: how to brief it, and which of the three surfaces it belongs on. You are here
SUNO · Moises · Logic SUNO and Moises AI Studio alongside Logic Pro — stem separation, AI parts, and the gotchas. moises-suno-logic-guide.com GitHub Onramp GitHub in plain English: your first commit, the branch-and-pull-request loop, real collaboration. githubonramp.com