diff --git a/plugins/claude-design/skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md b/plugins/claude-design/skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md new file mode 100644 index 0000000..02a6f05 --- /dev/null +++ b/plugins/claude-design/skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md @@ -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.