feat(claude-design): add 00-what-claude-design-is-and-isnt disambiguation reference
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
a69f18e64f
commit
24aa23f26f
1 changed files with 113 additions and 0 deletions
|
|
@ -0,0 +1,113 @@
|
|||
# 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-labs` slug 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/design` covers **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 options
|
||||
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — get-started article, GLCA framework, handoff bundle contents
|
||||
- `https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design` — design-system setup, DESIGN.md concept
|
||||
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions
|
||||
- `https://claude.com/plugins/design` — Anthropic's official knowledge-work-plugins/design plugin
|
||||
- `https://github.com/anthropics/knowledge-work-plugins` — source for the official plugin
|
||||
- `https://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.
|
||||
Loading…
Add table
Add a link
Reference in a new issue