12 KiB
What Claude Design is and isn't
Last updated: 2026-05-17 | Verified: research/01-claude-design-surface.md Status: Beta (Labs research preview) Captured-on date: 2026-05-16
This file disambiguates claude.ai/design from the four surfaces it is most commonly conflated with. The cost of getting this wrong is wasted iteration: applying a prompt pattern that fits Live Artifacts to Claude Design (or vice versa) produces output that misses the operator's intent, and the failure looks like a prompt problem instead of a surface problem.
Read this file when the operator's signals are mixed — they reference "Artifacts" loosely, they expect a feature that does not exist in Claude Design (like /rewind or a version tree), they think Claude Design audits artifacts rather than generates them, or they expect round-trip handoff back from Claude Code.
1. What Claude Design is
Claude Design is an Anthropic Labs research preview that launched on 2026-04-17 (https://anthropic.com/news/claude-design-anthropic-labs). It is a dedicated workspace at claude.ai/design for generating interactive design artifacts from a prompt.
Five properties define the surface:
- Labs research preview, not GA. The product can change without notice. Anthropic surfaces it under the Labs banner specifically to signal that the contract is non-stable. The URL still carries the
-anthropic-labsslug today; a Labs → GA rename is a known re-research trigger captured in.coverage.md. - Opus 4.7 pinned. All generations run on Opus 4.7. Operators cannot select a model from the Claude Design UI. The session inherits Anthropic's model choice for this surface (
https://anthropic.com/news/claude-design-anthropic-labs). - Single HTML/React substrate. Underneath every output is one rendering engine — HTML, React components, inline CSS — regardless of which intent preset the operator picks. The intent preset shapes prompting and export, not the underlying tech.
- Eight intent presets exposed in the UI. Anthropic's launch post enumerates: designs, prototypes, slides, one-pagers, wireframes-mockups, pitch-decks, marketing-collateral, frontier-design. The enumeration is the source of truth for SC2 coverage in this plugin (
https://anthropic.com/news/claude-design-anthropic-labs). - Multiple export paths. PDF (lossless for static layouts, lossy for interactive elements), PPTX (slide master / layouts / fonts honored, but text can flatten to images on complex compositions), HTML standalone, Canva import, share-link, and Claude Code handoff (machine-readable component spec + design tokens + layout hierarchy + assets + standalone HTML/CSS/JS + per-state screenshots + PM notes + framework README — verbatim per
https://support.claude.com/en/articles/14604416-get-started-with-claude-design).
Three Anthropic-published support articles ground the surface: the get-started article (https://support.claude.com/en/articles/14604416-get-started-with-claude-design), the design-system setup article (https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design), and the PowerPoint-mode conventions article (https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint).
2. What Claude Design is NOT
Not classic Artifacts at claude.ai
Classic Artifacts live in any Claude.ai chat. They appear in a side panel when Claude generates code, markdown, SVG, mermaid diagrams, or other inline outputs. Artifacts carry no intent presets, no Tweak panel, no export-to-PPTX, no Claude Code handoff bundle, no DESIGN.md anchor concept. They are a chat affordance.
Confusion happens because both surfaces produce HTML/React output and Anthropic's documentation has used "Artifacts" loosely in launch contexts. If the operator says "Artifacts" but describes intent presets or destination formats (https://anthropic.com/news/claude-design-anthropic-labs), they mean Claude Design. If they describe a side panel inside a chat (support.claude.com discusses Artifacts in the chat-product context), they mean classic Artifacts.
Not Live Artifacts in Claude Cowork
Live Artifacts is a different Labs surface — collaborative real-time editing of artifacts inside Claude Cowork sessions. It runs in a different workspace, has different affordances (multi-cursor presence, version stream), and is a separate product line at claude.ai/code family (see Anthropic's Cowork-related communications). Claude Design has none of those collaborative primitives. The operator working alone in claude.ai/design is the canonical flow.
Not custom visuals embedded in a chat reply
Sometimes Claude generates an inline HTML/SVG visual as part of a chat answer (a chart, a diagram, an illustration). That is a one-off chat artifact, not a Claude Design session. The prompt patterns are different (chat conversational tone vs design intent presets), the export options are different (chat artifact has Save / Copy, Claude Design has the full export matrix), and there is no Tweak panel on the chat-inline visuals.
Not Anthropic's knowledge-work-plugins/design plugin
This is the most consequential conflation. Anthropic ships an official plugin at https://claude.com/plugins/design (https://github.com/anthropics/knowledge-work-plugins) with six slash-commands: /critique, /accessibility, /ux-copy, /research-synthesis, /design-system, /handoff. That plugin operates on existing artifacts (Figma URLs, screenshots, copy snippets). It does not generate artifacts.
The lifecycle split is clean:
- This plugin (
claude-design) covers pre-design and during-design — idea → intent-preset selection → prompt drafting → copy-paste delivery → iteration coaching → ship-readiness. - Anthropic's
knowledge-work-plugins/designcovers post-design — critique → accessibility → UX copy review → research synthesis → design-system audit → engineering handoff.
There is zero command overlap (this plugin ships no commands named /critique, /accessibility, /ux-copy, /research-synthesis, /design-system, or /handoff — tests/validate-plugin.sh assertion (h) enforces this mechanically). Workflow recommendation: use this plugin to land the artifact in claude.ai/design; once the artifact exists, install Anthropic's official plugin via claude plugins add knowledge-work-plugins/design for downstream review and handoff.
Not third-party clones like jiji262/claude-design-skill
Several third-party repos use names like claude-design-skill. They are independent community efforts targeting general design workflows in Claude Code, not the claude.ai/design surface specifically. They predate the Anthropic Labs launch in some cases. This plugin is Claude Design facilitation — it targets the Anthropic surface explicitly, citing Anthropic's primary sources. Verify the operator's mental model accordingly.
3. Why the distinction matters operationally
Three operational consequences flow from getting the surface identification right.
Prompt patterns differ
Claude Design's prompt patterns are documented in https://anthropic.com/news/claude-design-anthropic-labs, https://support.claude.com/en/articles/14604416-get-started-with-claude-design, and the two per-preset tutorials (https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux, https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks). These prompts assume the Claude Design substrate, intent presets, and the Tweak / Comment / Chat iteration cascade. Applying them to classic Artifacts, Cowork, or an inline chat visual produces noise.
Classic Artifacts prompts (the kind used inside any claude.ai chat) are conversational and lean on chat affordances. Claude Design prompts use the verbatim Goal / Layout / Content / Audience framework and lean on intent presets. The frameworks do not interchange cleanly.
Limits differ
Claude Design has its own quota economics — the operator's Max / Pro plan budget burns down at a different rate than classic chat (research/04 documents observed Pro burn of roughly 25-30 minutes of active design work, Max roughly 60-90; these are community-observed, not Anthropic-published, and may shift). Opus 4.7 quality degrades at 40-50% context (https://anthropic.com/engineering/harness-design-long-running-apps). A 4-screen session inflection is documented community-wide.
None of these limits apply identically to classic Artifacts or to the official knowledge-work-plugins/design plugin. Diagnosing a quota / quality issue requires knowing which surface is in play.
Scope differs
The official knowledge-work-plugins/design plugin is the right tool for post-design critique. Trying to make this plugin (claude-design) emit a critique would duplicate Anthropic's command surface and add nothing. The reverse — using knowledge-work-plugins/design to generate the artifact — does not work because that plugin operates on artifacts that already exist.
If the operator is uncertain whether their question is pre-design or post-design, ask: does the artifact exist yet? If no — this plugin. If yes — Anthropic's plugin.
4. Decision shortcuts
- The operator mentions intent presets (designs / prototypes / slides / one-pagers / wireframes-mockups / pitch-decks / marketing-collateral / frontier-design) → Claude Design.
- The operator mentions a workspace URL
claude.ai/design→ Claude Design. - The operator mentions PPTX / PDF / Canva / Code-handoff exports → Claude Design.
- The operator says "Tweak panel" or "Tweak slider" → Claude Design.
- The operator says "Artifact" in a side panel context inside a normal chat → classic Artifacts.
- The operator says "Cowork" or "real-time collaborative" or "multi-cursor" → Live Artifacts.
- The operator says "critique" / "accessibility audit" / "Figma" → Anthropic's
knowledge-work-plugins/design. - The operator references a third-party repo named
claude-design-*→ ask what surface they target; likely not the Anthropic Labs preview.
If signals remain mixed after this read-through, ask one clarifying question rather than guess: "Are you working in the dedicated Claude Design workspace at claude.ai/design, or somewhere else?"
Sources
https://anthropic.com/news/claude-design-anthropic-labs— Anthropic Labs launch announcement (2026-04-17), Opus 4.7 pin, intent-preset enumeration, export optionshttps://support.claude.com/en/articles/14604416-get-started-with-claude-design— get-started article, GLCA framework, handoff bundle contentshttps://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design— design-system setup, DESIGN.md concepthttps://support.claude.com/en/articles/13521390-use-claude-for-powerpoint— PowerPoint-mode conventionshttps://claude.com/plugins/design— Anthropic's official knowledge-work-plugins/design pluginhttps://github.com/anthropics/knowledge-work-plugins— source for the official pluginhttps://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux— Anthropic-published per-preset tutorial (prototypes)https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks— Anthropic-published per-preset tutorial (slides)https://anthropic.com/engineering/harness-design-long-running-apps— design grading criteria, non-monotonic-improvement framing
When in doubt: the Anthropic news post and the get-started support article are the load-bearing sources. Everything else triangulates against them.