Jonathon's AI Wiki

Claude Design (Anthropic Labs)

10 min read

Source: Anthropic Labs announcement — Claude Design, Claude Design getting-started support article, Ryan Mather @Flomerboy X thread — insider tips (Apr 17 2026)

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

  • 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.
  • 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. ^[inferred]

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. ^[extracted]

  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 repoClaude Code design skills
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.

Open Questions

  • What are the actual usage limits per plan? The announcement says “subscription limits” without numbers.
  • 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.
  • 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