docs(claude-design): rewrite plugin README for v0.1 surface
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
a6fb3869d9
commit
7c40dc5600
1 changed files with 196 additions and 12 deletions
|
|
@ -1,22 +1,206 @@
|
|||
# claude-design
|
||||
# Claude Design Facilitator
|
||||
|
||||
Claude Code plugin: be an expert on **Claude Design** (claude.ai/design).
|
||||
> End-to-end facilitator for prompting Claude Design (`claude.ai/design`). Walks the operator from raw idea through intent-preset selection, audience and destination clarification, DESIGN.md anchor, five-layer prompt drafting, copy-paste delivery, iteration coaching, and ship-readiness handoff. Cites Anthropic primary sources inline. Recommends Anthropic's official `knowledge-work-plugins/design` as the downstream post-design tool.
|
||||
|
||||
This plugin holds the knowledge, skills, agents, and commands needed to facilitate the entire process of designing and producing artifacts on Claude Design — from initial idea, through prompt engineering, through iteration, to a finished result.
|
||||
> **Solo-maintained, fork-and-own.** This plugin is a starting point, not a vendor product. Issues are welcome as signals; pull requests are not accepted. See [GOVERNANCE.md](GOVERNANCE.md) for the full model and what upstream provides.
|
||||
|
||||
> **Status: 0.1.0-pre — bootstrap.** Skill/agent/command surface is being defined through the Voyage pipeline (`/trekbrief` → `/trekresearch` → `/trekplan` → `/trekexecute` → `/trekreview`).
|
||||
*AI-generated: all content produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)*
|
||||
|
||||
## Scope (to be confirmed via brief)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Deep knowledge of Claude Design as a product surface
|
||||
- Prompt-engineering patterns specifically tuned for Claude Design
|
||||
- End-to-end facilitation: discovery → prompt → preview → refine → ship
|
||||
- Reference material from the Anthropic cookbook and other authoritative sources
|
||||
A Claude Code plugin that ships one skill (`claude-design-facilitator`) plus a reference tree for prompting Anthropic's `claude.ai/design` workspace. The skill auto-fires on natural-language triggers, walks the operator through an eight-phase facilitation flow, and produces a copy-paste-ready prompt grounded in Anthropic's verbatim Goal / Layout / Content / Audience framework and the four published per-preset prompt patterns. Output is the prompt — the artifact gets built in Claude Design.
|
||||
|
||||
## Status
|
||||
---
|
||||
|
||||
Pre-release. No commands or agents yet. See `ROADMAP.md` and `TODO.md` for the current Voyage iteration.
|
||||
## Scope and complementarity
|
||||
|
||||
This plugin covers the **pre-design and during-design lifecycle** for `claude.ai/design`: idea → intent-preset selection → prompt engineering → copy-paste delivery → iteration coaching → ship-readiness check.
|
||||
|
||||
For **post-design** work — critique, accessibility audit, UX copy review, research synthesis, design-system audit, engineering handoff guidance — install Anthropic's official plugin:
|
||||
|
||||
```
|
||||
claude plugins add knowledge-work-plugins/design
|
||||
```
|
||||
|
||||
Anthropic's plugin operates on existing artifacts (Figma URLs, screenshots, copy snippets) and ships six slash-commands: `/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, `/handoff`. There is zero command overlap with this plugin and complementary lifecycle coverage — the two plugins are designed to be installed together. See [skills/claude-design-facilitator/references/04-handoff-and-scope.md](skills/claude-design-facilitator/references/04-handoff-and-scope.md) for the full coverage map.
|
||||
|
||||
---
|
||||
|
||||
## What this plugin is NOT
|
||||
|
||||
By design, this plugin does not:
|
||||
|
||||
- **Drive the browser.** No automation of `claude.ai/design` itself; you copy and paste the prompts the skill produces.
|
||||
- **Generate the artifact code.** Claude Design is the artifact generator. This plugin produces prompts that go into Claude Design.
|
||||
- **Store artifact history or version artifacts.** Claude Design has no version-tree primitive and this plugin does not invent one.
|
||||
- **Cover adjacent Anthropic surfaces.** Classic Artifacts at `claude.ai`, Live Artifacts in Claude Cowork, custom visuals embedded in a chat reply are out of scope — see [skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md](skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md) for the disambiguation reference.
|
||||
- **Duplicate Anthropic's `knowledge-work-plugins/design` plugin.** No `/critique`, no `/accessibility`, no `/ux-copy`, no `/research-synthesis`, no `/design-system`, no `/handoff`. The post-design lane belongs to Anthropic's plugin.
|
||||
|
||||
`tests/validate-plugin.sh` enforces the forbidden-command-name list mechanically.
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Add the marketplace once, then install the plugin:
|
||||
|
||||
```bash
|
||||
claude plugins marketplace add ktg-plugin-marketplace https://git.fromaitochitta.com/open/ktg-plugin-marketplace
|
||||
```
|
||||
|
||||
In Claude Code:
|
||||
|
||||
```
|
||||
/plugin install claude-design@ktg-plugin-marketplace
|
||||
```
|
||||
|
||||
Or enable directly in `~/.claude/settings.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"enabledPlugins": {
|
||||
"claude-design@ktg-plugin-marketplace": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The skill auto-discovers; no further configuration needed.
|
||||
|
||||
---
|
||||
|
||||
## What you can do with it
|
||||
|
||||
The skill `claude-design-facilitator` walks the operator through eight phases. The phases are scoping + grounding (1–4), drafting + delivery (5–6), and iteration + ship-readiness (7–8).
|
||||
|
||||
| Phase | What happens |
|
||||
|-------|--------------|
|
||||
| **1. Disambiguate the surface** | Confirm `claude.ai/design` is the intended surface, not classic Artifacts, Live Artifacts, custom chat visuals, or `knowledge-work-plugins/design`. Read [references/00](skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md) when signals are mixed. |
|
||||
| **2. Name the intent preset** | Pick one of eight Claude Design presets: `designs`, `prototypes`, `slides`, `one-pagers`, `wireframes-mockups`, `pitch-decks`, `marketing-collateral`, `frontier-design`. The per-preset reference file shapes the prompt pattern. Evidence-grade labels are surfaced. |
|
||||
| **3. Audience and destination** | Capture audience (internal team / external stakeholder / investor / customer) and destination (PDF / PPTX / HTML / Canva / Code-handoff / share-link). Flag PPTX-export traps for `pitch-decks` early. |
|
||||
| **4. Anchor on DESIGN.md** | Read [references/02](skills/claude-design-facilitator/references/02-design-md.md). If the operator has no DESIGN.md, point at the copy-paste brand-to-DESIGN.md extractor prompt. |
|
||||
| **5. Draft the prompt** | Compose layers 1–5 from [references/01](skills/claude-design-facilitator/references/01-prompt-fundamentals.md): Anthropic's verbatim Goal / Layout / Content / Audience framework + start-simple-layer-complexity + concrete-alternative-spec + propose-options-before-building + AI-slop negative constraints + four design dimensions + four grading criteria + the per-preset pattern. |
|
||||
| **6. Deliver** | Output a single copy-paste-ready fenced markdown code block. Add a one-line caption and three to five expected follow-up turns. |
|
||||
| **7. Iteration coaching** | Read [references/03](skills/claude-design-facilitator/references/03-iteration-and-session.md). Coach which surface to use next — Tweak panel (zero-token, surgical), inline comments (component-scoped), or chat (full regen). Session-break heuristics + recovery prompt library when iteration gets stuck. |
|
||||
| **8. Ship-readiness** | Run the export validation checklist. If shipping to engineering, confirm the Design → Code handoff bundle is complete. Recommend installing `knowledge-work-plugins/design` for downstream critique / accessibility / handoff. |
|
||||
|
||||
The skill auto-fires on natural-language triggers like *"I want to build a dashboard in Claude Design"*, *"help me prompt claude.ai/design"*, *"iterate on my Claude Design artifact"*. The full trigger list is in [skills/claude-design-facilitator/.triggers.txt](skills/claude-design-facilitator/.triggers.txt) and `tests/test-skill-triggers.sh` validates each phrase appears in the skill description.
|
||||
|
||||
Explicit invocation works too: the skill registers as the slash command `/claude-design-facilitator` for when the operator wants to start a clean facilitation session.
|
||||
|
||||
---
|
||||
|
||||
## Skill surface
|
||||
|
||||
| Skill | Triggers | Output |
|
||||
|-------|----------|--------|
|
||||
| `claude-design-facilitator` | 12 natural-language phrases (full list in `.triggers.txt`); also explicit `/claude-design-facilitator` slash command | A copy-paste-ready Claude Design prompt block composed from the five-layer stack and the per-preset pattern, with follow-up-turn expectations |
|
||||
|
||||
No commands, no agents, no hooks, no MCP servers at v0.1. The single skill is the entire user-facing surface.
|
||||
|
||||
---
|
||||
|
||||
## Reference content map
|
||||
|
||||
The plugin ships 13 reference files in `skills/claude-design-facilitator/references/`:
|
||||
|
||||
**Foundation references (5):**
|
||||
|
||||
- [`00-what-claude-design-is-and-isnt.md`](skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md) — Surface disambiguation against Artifacts, Live Artifacts, custom chat visuals, and Anthropic's `knowledge-work-plugins/design`.
|
||||
- [`01-prompt-fundamentals.md`](skills/claude-design-facilitator/references/01-prompt-fundamentals.md) — The five-layer prompt stack: GLCA framework + start-simple-layer-complexity + concrete-alternative-spec + propose-options + AI-slop negative constraints + four design dimensions + four grading criteria. Anchored on four Anthropic primary sources.
|
||||
- [`02-design-md.md`](skills/claude-design-facilitator/references/02-design-md.md) — DESIGN.md 9-section canonical structure + brand-to-DESIGN.md extractor prompt + failure modes.
|
||||
- [`03-iteration-and-session.md`](skills/claude-design-facilitator/references/03-iteration-and-session.md) — Tweak / Comment / Chat cascade, session economics, 4-screen inflection, recovery prompt library (break-default-aesthetic, fix-the-system, edit-previous-message, 3-failed-comment escalation, model downshift, verbal save-pattern).
|
||||
- [`04-handoff-and-scope.md`](skills/claude-design-facilitator/references/04-handoff-and-scope.md) — Design → Code one-way handoff, bundle contents, lifecycle-stage coverage map vs Anthropic's `knowledge-work-plugins/design`, downstream tool recommendation.
|
||||
|
||||
**Per-preset references (8):**
|
||||
|
||||
- [`presets/designs.md`](skills/claude-design-facilitator/references/presets/designs.md) — Anthropic-documented + community-validated
|
||||
- [`presets/prototypes.md`](skills/claude-design-facilitator/references/presets/prototypes.md) — Anthropic-documented + community-validated
|
||||
- [`presets/slides.md`](skills/claude-design-facilitator/references/presets/slides.md) — Anthropic-documented + community-validated
|
||||
- [`presets/one-pagers.md`](skills/claude-design-facilitator/references/presets/one-pagers.md) — Community-only
|
||||
- [`presets/wireframes-mockups.md`](skills/claude-design-facilitator/references/presets/wireframes-mockups.md) — Community-only
|
||||
- [`presets/pitch-decks.md`](skills/claude-design-facilitator/references/presets/pitch-decks.md) — Community-only (with explicit PPTX-export caveat)
|
||||
- [`presets/marketing-collateral.md`](skills/claude-design-facilitator/references/presets/marketing-collateral.md) — Community-only
|
||||
- [`presets/frontier-design.md`](skills/claude-design-facilitator/references/presets/frontier-design.md) — Experimental — no validated practitioner pattern as of 2026-05-16
|
||||
|
||||
---
|
||||
|
||||
## Per-preset coverage
|
||||
|
||||
The canonical coverage manifest is [`.coverage.md`](.coverage.md). Below mirrors that file.
|
||||
|
||||
| Preset | Evidence grade | Anthropic anchor |
|
||||
|--------|----------------|------------------|
|
||||
| designs | Anthropic-documented + community-validated | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
|
||||
| prototypes | Anthropic-documented + community-validated | [prototypes tutorial](https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux) |
|
||||
| slides | Anthropic-documented + community-validated | [slides tutorial](https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks) |
|
||||
| one-pagers | Community-only | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
|
||||
| wireframes-mockups | Community-only | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
|
||||
| pitch-decks | Community-only (with PPTX-export caveat) | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
|
||||
| marketing-collateral | Community-only | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
|
||||
| frontier-design | Experimental — no validated practitioner pattern | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
|
||||
|
||||
When Anthropic publishes per-preset guidance for a Community-only or Experimental preset, [`.coverage.md`](.coverage.md) and the affected preset file refresh — re-research triggers are documented inline.
|
||||
|
||||
---
|
||||
|
||||
## Verification
|
||||
|
||||
```bash
|
||||
bash plugins/claude-design/verify.sh
|
||||
```
|
||||
|
||||
Runs five test scripts under `tests/` in dependency order:
|
||||
|
||||
| Script | Verifies |
|
||||
|--------|----------|
|
||||
| `validate-plugin.sh` | plugin.json + SKILL.md frontmatter + LICENSE + GOVERNANCE.md + README.md + CLAUDE.md + .coverage.md presence; forbidden-command-name scope-fence check; operator-private-context grep; Norwegian-leakage advisory |
|
||||
| `test-skill-triggers.sh` | SKILL.md description >=400 chars; every phrase in `.triggers.txt` appears in SKILL.md |
|
||||
| `test-sc2-artifact-coverage.sh` | Each preset in `.coverage.md` has >=1 file hit in plugin content |
|
||||
| `test-sc3-citations.sh` | No `[CITE]` / `[verify]` / "according to" placeholders; each Authoritative-claims file has >=1 Anthropic-domain URL |
|
||||
| `test-sc1-dogfood-log.sh` | Format-check the operator dogfood log in `REMEMBER.md` (gitignored) — 5 fields well-formed |
|
||||
|
||||
Flags:
|
||||
|
||||
- `--strict` — pass-through to `test-sc1-dogfood-log.sh`. Without `--strict`, missing dogfood block is advisory. With `--strict`, it is the release gate.
|
||||
- `--quick` — skip `test-skill-triggers.sh` for fast incremental runs.
|
||||
|
||||
Exit codes: `0` = all pass; non-zero = at least one sub-test failed.
|
||||
|
||||
---
|
||||
|
||||
## Compatibility
|
||||
|
||||
| Requirement | Version |
|
||||
|-------------|---------|
|
||||
| Claude Code | Recent versions with plugin support |
|
||||
| Anthropic surface | `claude.ai/design` (Labs research preview launched 2026-04-17) |
|
||||
| Platform | macOS, Linux, Windows |
|
||||
| Network | None for the skill itself; the artifact-generation lives in `claude.ai/design` |
|
||||
| Dependencies | None — no npm packages, no Python, no external tools. Bash 3.2 compatible for test scripts. |
|
||||
|
||||
---
|
||||
|
||||
## Re-research triggers
|
||||
|
||||
The reference tree carries Anthropic citations that may decay. Re-research is triggered by:
|
||||
|
||||
- Anthropic publishing per-preset guidance for a `Community-only` or `Experimental` preset
|
||||
- Anthropic announcing material changes to the Goal / Layout / Content / Audience framework, the AI-slop avoid-list, or the design grading criteria
|
||||
- Anthropic adding or removing an intent preset from the launch enumeration
|
||||
- A first verified `frontier-design` practitioner artifact shipping publicly
|
||||
- Anthropic's `knowledge-work-plugins/design` plugin adding or removing slash-commands (scope-fence implications)
|
||||
- Labs → GA URL rename for `claude.ai/design`
|
||||
|
||||
When a trigger fires, run `bash verify.sh --strict` after the update to confirm SC2 and SC3 still pass.
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
[MIT](LICENSE). Fork it, modify it, ship your own version under your own name.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue