Jonathon's AI Wiki

Claude Design (Anthropic Labs)

16 min read

Source: Anthropic Labs announcement — Claude Design, Claude Design getting-started support article, Ryan Mather @Flomerboy X thread — insider tips (Apr 17 2026). 2026-07-14 addition: raw/FULL_Claude_Course_for_Beginners_in_2026_Become_a_PRO.md (beginner-course transcript — the getdesign.md DESIGN.md-reference resource; added to Key Takeaways). 2026-07-24 addition: raw/A_Complete_Guide_to_the_New_Claude_Design.md (full-platform video walkthrough, 2026-07-21 — template expansion, usage-limit merge confirmation, and the production animation workflow; see Recent updates)

Claude Design is Anthropic’s first Anthropic Labs product — a visual-creation surface at claude.ai/design where users generate designs, prototypes, slides, and marketing collateral by conversation. Launched April 17, 2026 (research preview), powered by Claude Opus 4.7’s vision model. It imports from text prompts, images, documents, codebases, and website captures; exports to Canva, PDF, PPTX, standalone HTML; and hands off finished work to Claude Code for development. Available to Pro, Max, Team, and Enterprise plans (Enterprise is off by default — admins enable in Organization settings).

Key Takeaways

  • July 2026 — templates expanded from 5 to ~13, and the separate usage pool is gone. [creator walkthrough, 2026-07-21] The two things that made Claude Design hard to recommend at launch — a thin template set and a small separate weekly cap — are both reported fixed: usage is now bundled into your existing Claude usage credits on any paid plan, and the template picker now spans mobile-app design, slides, document, wireframe, animation, UI mockup, resume, 3D object, research report, HTML email, color + type pairing, diagram, and flyer. Animation is the standout — the walkthrough’s author now ships Claude-Design-generated motion graphics in production YouTube videos. Details in Recent updates below.
  • June 2026 beta — now bidirectional + on all paid plans. [X signal, @claudeai 2026-06-17, @ClaudeDevs 2026-06-18] Claude Design moved to beta on all paid plans (web + desktop), gaining bidirectional Claude Code sync — run /design-sync to pull your design system into your repo and build against your real components, or push what you’ve built back into Claude Design and keep editing on the canvas, superseding the one-way “Handoff to Claude Code” described below — plus a redesigned canvas editor with direct drag/resize/align and design-system self-checking for brand consistency across projects. (Sources: raw/x-account-claudeai-2067325887909884315.md, raw/x-bookmarks-recent-digest-2026-06-19.md — the latter names the /design-sync command.)
  • Anthropic Labs is now a product line. Claude Design is the first launch. “Labs” frames it as research-preview territory, not a GA product.
  • Two-pane interface. Chat on the left, design canvas on the right — the same pattern Claude Design’s competitors (Figma AI, v0, Vercel Design) converged on.
  • Powered by Claude Opus 4.7’s vision model. Marketing claim: complex pages that took 20+ prompts in competing tools “only required 2 prompts” in Claude Design. ^[ambiguous — customer testimonial, not benchmarked across tools]
  • Team design systems applied automatically. When a project is created inside an org that has loaded a design system, new outputs respect its tokens and components by default.
  • Import sources: text prompts, images, documents, codebases, website captures. Website-capture is the differentiator vs. pure text-to-design tools.
  • Two iteration modes. Chat for broad changes (color schemes, layout restructuring, adding sections). Inline comments for targeted edits (button padding, component type, single-color swap).
  • Export footprint: .zip, PDF, PPTX, standalone HTML, Canva, shareable links (view / comment / edit), and a “Handoff to Claude Code” action for local or web Claude Code projects.
  • Access: Pro, Max, Team, Enterprise. Included in subscription limits; extra usage is an optional add-on. Enterprise default is OFF.
  • Launch partners at announcement: Canva (bidirectional import/export), Brilliant (cited speed on interactive prototypes), Datadog (cited prototyping acceleration).
  • Known limitations. Inline comments can disappear pre-processing; Compact view triggers save errors; large repositories degrade performance; some chat errors require a fresh tab.
  • Natural handoff to Claude Code. The “Handoff to Claude Code” action closes the design → engineering loop inside the Anthropic ecosystem without a separate Figma bridge.

Why It Matters

  • Displaces part of the Figma + Claude Code dance. The existing Figma MCP workflow is “design in Figma, read into Claude Code via MCP.” Claude Design collapses that into “design and ship inside claude.ai.” Good for non-Figma teams; complementary, not a replacement, for teams already committed to Figma as the design source of truth.
  • Pitch deck and one-pager velocity. Marketing collateral and internal strategy docs are the kind of artifacts Claude Design targets explicitly.
  • Website capture + design-system import is a landing-page refresh accelerator. “Capture competitor page → reinterpret in our design system → export HTML” as a single conversation.
  • Competes in the same space as UX Pro Max and Claude design skills. The skills are still the system that applies in Claude Code; Claude Design is the visual canvas that applies in claude.ai. Different surfaces, overlapping intent.

Implementation

Tool/Service: Claude Design (Anthropic Labs) — claude.ai/design

Setup:

  1. Pro / Max: available immediately on rollout, no enable step.
  2. Team: available immediately on rollout.
  3. Enterprise: organization admin opens Organization settings and enables Claude Design. Off by default.
  4. Visit claude.ai/design. Create a new project — if the org has a design system loaded, it’s applied automatically.
  5. Describe the goal in the chat pane. Attach reference context: screenshots, existing design files, a codebase, or a URL.
  6. Canvas renders on the right. Iterate via chat (broad changes) or inline comments (targeted edits).
  7. Export: .zip, PDF, PPTX, Canva, HTML, or “Handoff to Claude Code.”

Prompt structure that works: goal + layout preferences + content specifications + target audience. Example: “Create a dashboard showing monthly revenue with region/product filters, grid layout, dark theme, intended for finance leads.”

Cost: Included in Pro / Max / Team / Enterprise subscription limits. Extra usage available as an optional add-on at a tier not disclosed in the announcement page. ^[ambiguous — pricing page not fetched in this ingest]

Integration notes:

  • Canva integration is bidirectional: import Canva files, export polished outputs back to Canva.
  • Claude Code handoff supports both local and web Claude Code instances — so a design can move from claude.ai/design into an IDE-attached agent without a file copy.
  • Design system ingestion is the highest-leverage move for teams with an established brand — load the system once per org and every new project starts on-brand.
  • No brand book yet? Seed one from getdesign.md. [community tip, via a 2026 beginner-course transcript] The site getdesign.md catalogs 300+ analyzed DESIGN.md design-system references (Vercel, Linear, Stripe, Notion, and other AI-platform / dev-tool / fintech / e-commerce brands) — structured briefs of colors, type, spacing, components, and the reasoning behind them, written for AI coding agents. Download one (or request a private DESIGN.md for a specific site) and drop it into Claude Design’s design-system field to start on-brand instead of defaulting to the generic AI look — even without an established brand system of your own. (raw/FULL_Claude_Course_for_Beginners_in_2026_Become_a_PRO.md; site verified live 2026-07-14.)
  • Large repositories degrade performance and chat errors can force a new-tab restart. Don’t run a month of design work from a single never-refreshed tab.
  • The announcement name is “Claude Design by Anthropic Labs” — any future Labs products will likely share the claude.ai/<labs-product> URL pattern.

Practical Tips from Inside Anthropic

Source: Ryan Mather (@Flomerboy), Anthropic verticals team, 2026-04-17 (~8h after launch). Mather serves 7 internal products with Claude Design — these are the patterns he uses daily.

  1. Spend an hour up front on design system + core screens. Tip #1 in the thread. This is higher leverage than any single prompt. The system + a baseline of canonical screens becomes the implicit reference for everything generated afterward.
  2. Design live with engineers in a single meeting. Fast mockups make high-level riffing productive. “Because Claude is super fast at mockups, we can stay high level in our conversation, riffing on concepts and constraints and watching them come to life.” This works as a new-feature design session without a separate handoff.
  3. Use the Comment tool for surgical edits — don’t describe verbally. After a rough first draft, “point and crit.” Dozens of details are faster to mark up inline than to list in a chat message. Treat the Comment tool as the primary refinement surface, not a secondary option.
  4. Ask Claude to generate video demos of ideas. Not just static designs. Video demos are a first-class output — useful for stakeholder reviews and async communication. Complements Hyperframes but via agent-generated video (direct) vs HTML-composed video (Hyperframes path).
  5. Use connectors — especially docs and Slack. Example prompt (verbatim): “Please read the meeting notes from the product roast and create a deck exploring different design solutions for everything that came up.” Kick it off, step away, come back with fresh eyes. This is a meeting-notes-to-deck workflow that collapses prep time to zero.
  6. Ask for bespoke on-the-fly tools. Claude Design can generate interactive tools, not just static artifacts. “Don’t try to use Claude Design the way you would use a canvas-based tool. It’s a different animal with different superpowers.” Experiment past the deck/mockup use cases.
  7. Know when to slow down. Icons, spot illustrations, and naming have outsized impact and often need hand-craft. “It can be easy to get sucked into the hyper speed of agentic designing.” Treat the rapid output as draft material for the 80% of the surface where speed wins — and protect the 20% where craft matters.

Mather’s one-line framing

“It’s honestly more like Claude Code than a canvas-based design tool.”

This is the mental-model pivot that isn’t obvious from the announcement copy. If you approach Claude Design as “Figma with a chatbot,” you’ll under-use it. If you approach it as “Claude Code for visual artifacts,” the on-the-fly tools, video demos, and connector workflows start to make sense.

Claude Design vs Claude Code Design Skills — When to Use Which

NeedUse
Build a UI in code inside your repo[[claude-ai/frontend-design-deep-dive
Generate a pitch deck or one-pagerClaude Design
Prototype a landing page for stakeholder reviewClaude Design → export HTML → Claude Code for production
Refactor an existing React component’s designClaude Code design skills
Capture a competitor page and reinterpretClaude Design (website capture)
Wire the design into a CI/CD pipelineClaude Code design skills

Rule of thumb: if the artifact is destined for a shareable URL or a file outside the codebase (PDF, PPTX, Canva), Claude Design. If it’s destined for git commit, Claude Code design skills.

Try It

  1. Log into claude.ai/design (Pro / Max / Team) — or have your admin enable it on Enterprise. Confirm the two-pane interface renders.
  2. Run the “website capture” pattern: feed a competitor URL, ask for “reinterpret this landing page in our design system, 2 variations.” Export both to HTML.
  3. Rebuild a recent internal one-pager in Claude Design from an existing draft. Compare final quality and time-to-deliver against the current process.
  4. Test the Canva round-trip: export a Claude Design artifact to Canva, edit, and re-import. Note any fidelity loss.
  5. Test the “Handoff to Claude Code” action on a prototype that should ship as a real page. Evaluate how much implementation work remains after the handoff.
  6. Read the getting-started support article once end-to-end — it’s the authoritative reference for exact iteration semantics (chat vs inline comments).
  7. Run Mather’s connector-driven workflow: feed a recent meeting transcript into Claude Design via a docs/Slack connector, prompt for “a deck exploring different design solutions for everything that came up,” compare against the manual deck you’d build from the same notes.
  8. Test tip #6 explicitly: ask Claude Design for an interactive on-the-fly tool (e.g., a live ROI calculator for a cost breakdown). Evaluate whether “bespoke on-the-fly tools” is a real capability or an edge case.

Recent updates

[Reddit signal — r/ClaudeAI 2026-05-28] Source: raw/reddit-1tpl9t9.md (121 score / 55 comments, OP Diligent-Meat-1677, News flair, “Antropic has now integrated Claude Design usage into the existing Claude usage”). Anthropic has merged Claude Design usage into the standard Claude weekly-usage ledger (previously tracked separately with its own much smaller weekly cap). Operationally significant: heavy Claude Design users will now see their general Claude rate-limit budget consumed by design work — and conversely, a quiet design-only month no longer “saves” a separate Claude budget. Implication for the Implementation/cost section above: extra-usage add-ons that previously needed to be purchased per-surface should now be one combined add-on. Verify against the current pricing page before relying on this — the post is a community-reported observation, not an Anthropic announcement post.

[YouTube walkthrough — 2026-07-21] Source: raw/A_Complete_Guide_to_the_New_Claude_Design.md, a full-platform video tour. Two independent changes since the April/May coverage above, plus the first documented production workflow for the animation template.

1. Usage limits — corroborates the Reddit signal above. The author states he deliberately did not cover Claude Design at launch because “even though the product was cool,” the usage limits meant he “didn’t want to send people to a site they could barely use” — and that this is now fixed: usage is bundled into your existing Claude usage credits and available on any paid Claude account. This is a second, independent report of the same merge the 2026-05-28 Reddit signal describes, so the separate-weekly-pool behavior documented in the April walkthrough should be treated as superseded. Still not an Anthropic announcement — verify against the current pricing page.

2. Template expansion (5 → ~13). The picker previously offered five templates. The walkthrough demonstrates one generation from each of: mobile app design, slides, document, wireframe, animation, UI mockup, resume, 3D object, research report, HTML email, color + type pairing, diagram, flyer. Two behave unlike the rest:

  • 3D object — parametric sliders for customization and export in multiple 3D asset formats. It is effectively a separate feature: an attempt to generate a 3D model of an existing product from a reference image “didn’t work great,” and it does not inherit the design system the way the 2D templates do.
  • Animation — see below.

3. The animation → production-video workflow. The most useful new material in the source, and the author’s own highest-frequency use (motion graphics in his own published videos):

  1. Pick the animation template and select a design system.
  2. Prompt simply — the author reports short prompts performing as well as long instructions in his testing so far. ^[creator’s ongoing experiment, explicitly flagged as not yet settled]
  3. Paste the video transcript with timestamps. (He gets these by dropping the video into Gemini and asking for a timestamped transcript.) The animation comes back synced to the narration.
  4. Claude asks where to leave space for the talking head; answer, or let it decide.
  5. Refine with timestamped natural-language notes plus a screenshot — e.g. “at around 30 seconds the animation should turn most of the person icons green, since it’s referring to most users” and “the arrow is slightly overlapping the icons underneath, move it a bit to the right.”
  6. Share → export MP4, drop into the editing timeline.

Where it works and where it doesn’t: the sweet spot is motion graphics that sit behind or beside talking-head footage. It is explicitly not the tool for faceless-YouTube-style animated explainers. Photoreal or specific-landmark elements (his Eiffel Tower example) needed dropped-in reference images and substantial back-and-forth; the abstract/diagrammatic parts (a map zoom-and-highlight) came from a text prompt alone.

4. Smaller confirmations from the same source.

  • Design systems can be created from the + button, the Design Systems tab, or from Claude Code. Import via GitHub, Figma, or uploaded assets/logos/screenshots plus free-text notes — one logo image and a one-sentence description produced a full system (brand definition, voice and tone, iconography, landing-page concept, buttons, hero product, monogram + wordmark, color palettes, slide style, badges), each element editable by hand or by asking Claude.
  • The Tweaks panel is promptable, not just a fixed toggle set. “Add a bunch of different tweaks for me to experiment with across the site” returns a generated set of experiment toggles (colors, shapes, sizes) — an ideation surface for when you can’t name what you want changed.
  • Annotate/draw on the canvas is a third edit channel alongside inline editing and chat.
  • Media drop-in works: an MP4 dropped onto the canvas plus “replace the hero background with that video” produced a working looping-video hero.
  • Handoff to Claude Code offers two paths from the Share menu — copy a generated prompt, or download the zip and open it as the Claude Code project (the author prefers the zip). His rule of thumb for when to hand off: anything needing a database, payments, or deployment.
  • Inline editing is the reason to iterate in Design rather than Claude Code — changing a word, size, font, or spacing and hitting save commits without a prompt-and-build round trip.
  • Documents (invoices, contracts, legal forms) come out on-brand, with the author’s caveat that they are fine as electronic artifacts but not laid out for print.

Open Questions

  • What are the actual usage limits per plan? The announcement says “subscription limits” without numbers. Partially resolved 2026-07-24: two independent community reports (Reddit 2026-05-28, video walkthrough 2026-07-21) agree the separate Claude Design pool has been merged into the standard Claude usage credits and the caps relaxed — but neither quotes a number, and neither is an Anthropic source.
  • How does the optional add-on pricing work for heavy Claude Design users?
  • What file-size or repo-size thresholds trigger the “large repositories may cause performance issues” degradation?
  • Does the design-system import support Figma libraries directly, or only pre-exported tokens/JSON? Not specified in the sources.
  • How does “Handoff to Claude Code” compare mechanically to the existing Figma MCP import path — is it a superset, or a parallel channel?
  • Is there an API for Claude Design? The announcement implies UI-first — needs verification against the Anthropic docs.
  • Does the design canvas render arbitrary third-party component libraries (e.g., shadcn/ui, Radix), or is it closed to Claude’s internal primitives?
  • Which connectors does Claude Design support at launch beyond docs and Slack? Mather’s tip #5 names those two specifically — full list not confirmed.
  • Video demo output format and length limits? Mather mentions video demos as a first-class output but doesn’t specify format, resolution, or duration cap. Partially resolved 2026-07-24: the 2026-07-21 walkthrough confirms MP4 export via the Share menu and shows intro-length clips (tens of seconds) used in production. Resolution and any duration cap are still unstated.
  • The “bespoke on-the-fly tools” capability from Mather’s tip #6 — is this a dedicated UI mode, or does the design surface accept arbitrary interactive JS/React that happens to render as a tool?

Graph View

Backlinks