Claude Design Integration Guide

Technology: claude-design · Category: design · Last reviewed: 2026-08-23

Source: https://tech-stack.codeamanilabs.org/guide/claude-design

Insight:

Claude Design is a canvas, not an API — an Anthropic Labs research preview where Claude drafts a multi-artboard visual design you then refine by hand and export or hand off to code. There is no SDK and no public endpoint: you reach it at claude.ai/design or through the /design skill in Claude Code, which rides on Artifacts. For codeAmani it is the fastest brief→shareable-mockup path; Figma still owns production design, and nothing sensitive belongs on an artboard.

 ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗
██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝
██║     ██║     ███████║██║   ██║██║  ██║█████╗
██║     ██║     ██╔══██║██║   ██║██║  ██║██╔══╝
╚██████╗███████╗██║  ██║╚██████╔╝██████╔╝███████╗
 ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝

██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝

Claude Design Integration Guide

Focus: Getting a multi-artboard visual design out of Claude — UI mockups, screen flows, landing pages, posters and one-pagers — from claude.ai/design or the /design skill in Claude Code, then exporting it or handing it back to code.

Overview

Claude Design is Anthropic Labs' visual workspace: you describe what you want, Claude drafts it onto a canvas of artboards, and you refine it by talking, commenting, or editing directly on the canvas. It launched 17 April 2026 as a research preview on the Pro, Max, Team, and Enterprise plans, powered by Claude Opus 4.7, and lives at claude.ai/design and in the Claude Desktop sidebar.

The important structural fact: designs are generated as code, not pixels. Every artboard is a rendered HTML document. That is what makes the export and the handoff-to-Claude-Code path work at all — and it is also why the whole feature has no public API, no npm package, and no REST endpoint. You reach it through the product surfaces, not a client library.

There are two surfaces, and they are not the same product:

flowchart LR
  A["Brief<br/>'a few options for the rider check-in screen'"] --> B{"Which surface?"}
  B -->|"claude.ai/design"| C["Project canvas<br/>artboards + comments<br/>+ attached design system"]
  B -->|"/design in Claude Code"| D["Artboards drafted in-session<br/>published as an Artifact"]
  C --> E["Refine: chat · inline comments<br/>· direct canvas edits"]
  D --> E
  E --> F{"Ship it how?"}
  F -->|"stakeholders"| G["Export: PDF · PPTX · ZIP<br/>· standalone HTML"]
  F -->|"engineering"| H["Handoff bundle → Claude Code<br/>components · tokens · layout"]
  F -->|"production design"| I["Figma<br/>(codeAmani's system of record)"]

Official Documentation

Setup

There is nothing to install for the web surface — sign in at claude.ai/design. For the /design skill you need a current Claude Code signed in with a claude.ai subscription (not an API key):

# Claude Code v2.1.233 or later is required for /design
npm install -g @anthropic-ai/claude-code
claude --version

# /design and artifacts both require a subscription-backed session
claude
> /login
> /design a few options for the rider check-in screen

Claude drafts the artboards, publishes the canvas, and prints a link. Open it, pick an artboard, and tell Claude which option to implement.

Environment variables

These are the artifact switches — /design inherits every one of them, because the canvas is published as an artifact.

# Turn artifacts (and therefore /design's canvas) off for your own sessions
CLAUDE_CODE_DISABLE_ARTIFACT=1

# Stop the browser opening automatically on publish
CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0

# Needed only if you disabled feature-flag fetching and still want comments
CLAUDE_CODE_ARTIFACT_COMMENTS=1
CLAUDE_CODE_ARTIFACT_COMMENTS_AUTOREACT=1

Equivalent settings-file form:

{
  "disableArtifact": true
}

Key patterns

1. Ask for options, not a design

The whole point of a multi-artboard canvas is comparison. A brief that names a count and an axis of variation gets you something to choose between; a brief that says "design the settings page" gets you one guess.

/design four takes on the boda rider check-in screen — vary how much the map
dominates and whether the fare quote is a card or an inline row. One line under
each on the trade-off.

The same instinct works for an artifact without /design at all:

Make an artifact with four distinctly different layouts for the settings panel.
Vary density and grouping, and lay them out as a grid with a one-line tradeoff
under each.

2. Give it your design system before it invents one

Claude applies a built-in design skill to every artifact it builds, and that skill looks for an existing design system in your project first. Record your tokens where Claude will find them — CLAUDE.md or a theme file — and they take precedence over Claude's own choices (your prompt beats both).

## Design system

- Colors: primary #00d4ff, secondary #3ecf8e, tertiary #8b5cf6, surface #080b0f
- Typography: Outfit for display and body, JetBrains Mono for code and labels
- Spacing: 8px scale, 14px panel radius
- Panels: rgba(20,26,36,0.55) fill, 1px rgba(255,255,255,0.06) border, blur(14px)

That block is codeAmani's MotionStack Dark system (see anthropic/claude_dev_guide_reference.md) — drop it in a project's CLAUDE.md and every artboard and artifact that project produces comes out on-brand instead of generic-SaaS-purple.

Only Google Fonts loads from outside a published page. Any other typeface has to be inlined as a @font-face data URI, so pick a Google-hosted face (Outfit and JetBrains Mono both are) or accept the fallback stack.

3. /design-sync — push your real React components up

For teams that want the canvas building with actual components rather than lookalikes, the commands reference documents a pair:

claude
> /design-login              # authorize design-system access with your claude.ai account
> /design-sync codeAmani DS  # convert this repo's React design system and upload it

Caveats straight from the docs: a first-time sync verifies every component and can take a few hours on a large repo, and it is Anthropic-API only — on Amazon Bedrock, Google Cloud's Agent Platform, Microsoft Foundry, and Claude Platform on AWS the underlying tool cannot reach claude.ai, so the command is unavailable.

4. Refine on the canvas, not in the prompt

Three refinement channels, and they are not interchangeable:

• Chat — structural change ("make it two columns", "add an empty state").
• Inline comments — targeted feedback pinned to one element, the way you'd review a Figma frame.
• Direct canvas editing — the pixel-level pass: select an element, edit text in place, nudge spacing and color.

Prompting for a 4px spacing change is a waste of a turn. Do structure by chat and polish by hand.

5. Export and handoff

From the Export control on a Claude Design project:

The handoff bundle is the interesting one: it carries the component structure as a machine-readable spec plus the tokens actually used on the canvas, so Claude Code is reading a spec rather than inferring intent from a screenshot.

6. Updating a canvas later

A /design canvas is an artifact, so the artifact rules apply. From a new session, give Claude the URL or attach it with /artifacts — otherwise Claude creates a new canvas instead of updating yours.

Update https://claude.ai/code/artifact/5fbea6f3-... — swap artboard 2's fare card
for the inline row treatment from artboard 4 and republish.

/artifacts lists everything you own or have been shared; o opens, c copies the link, Enter attaches it to the session. Ctrl+] reopens the most recent artifact from the terminal.

Where it fits next to Figma and Canva

codeAmani already runs figma/ and canva/ guides. They do not overlap as much as they look:

The honest boundary: Claude Design collapses the blank-canvas problem and the "I need something to react to by Thursday" problem. It does not replace a maintained component library, and it has no version-controlled source of truth the way a Figma library does. Draft in Claude Design, decide, then rebuild the survivor in Figma or straight in code.

Constraints worth knowing before you promise something

Because the Claude Code canvas is an artifact, the artifact page constraints are the canvas constraints:

And from the Claude Design admin guide: it is web-only today, there is no data-residency support, audit logs are not supported yet, and preview access is gated by short-lived signed tokens re-checked against sharing permissions on every open. Enterprise admins enable it under Organization settings > Capabilities > Anthropic Labs > Claude Design (default off), and a Claude Design Admin permission controls who may publish, default, or delete a design system.

codeAmani notes

• Nothing sensitive goes on an artboard. A canvas is published to Anthropic-operated infrastructure and served from a sandboxed *.claudeusercontent.com origin. Treat every brief, screenshot, and pasted string as leaving the machine: no live keys, no Daraja shortcodes or passkeys, no Stripe secrets, no real customer rows. Mock the data — 254708374149 and 174379 are the Daraja sandbox values and are fine; a real MSISDN is not.
• Know your sharing floor. On Pro and Max, a public link is the only way to share an artifact — there is no "just my org" option. A client mockup shared from a Pro account is world-readable by anyone with the URL. Org-scoped sharing and editor roles need Team or Enterprise, where public sharing is off until an Owner turns on External sharing.
• Auth split. Application code calls Anthropic through the Vercel AI SDK / AI Gateway with an API key (see anthropic/). Claude Design and artifacts do not work from an API-key session — they need a subscription-backed /login. Two different credentials, two different purposes; don't try to unify them.
• Design system in CLAUDE.md is the highest-leverage five minutes. MotionStack Dark tokens in a project's CLAUDE.md mean every artifact, /design canvas, and /dataviz chart from that repo comes out matching the docs UI without anyone prompting for it.
• Keep the page light — this is a real constraint, not a nicety. Raster images as data URIs blow both the 16 MiB ceiling and the download budget. Prefer SVG and CSS for diagrams. This matters doubly for the Kenya-targeted builds (duka-order-bot, boda-dispatch, clinic-salon-booking, …): a shared canvas link opened on a 3G Android handset is a single self-contained page, so its weight is entirely under your control. A PDF export is usually the kinder artifact to WhatsApp to a shop owner than a link.
• Where it earns its slot for us: flyer and one-pager artboards for the WhatsApp + M-Pesa product line, screen-flow mockups to agree on a rider or duka flow before anyone writes a route handler, and side-by-side option boards for internal decisions. Then Figma for anything that has to survive more than one round.
• Preview means preview. /design is a research preview and is not yet in the commands reference; /design-sync and /design-login are. Pin nothing to this behavior in a runbook you can't edit quickly.

Troubleshooting

Official docs:

• https://www.anthropic.com/news/claude-design-anthropic-labs
• https://support.claude.com/en/articles/14604416-get-started-with-claude-design
• https://support.claude.com/en/articles/14604406-claude-design-admin-guide-for-team-and-enterprise-plans
• https://code.claude.com/docs/en/artifacts
• https://code.claude.com/docs/en/commands
• https://code.claude.com/docs/en/whats-new/2026-w34