open/claude-design
1
0
Fork 0
Code Issues Releases 1 Activity

docs(claude-design): sync README and CLAUDE.md with Phase 9, fix two stale claims

Browse source 
Docs pass for Wave 2. README now documents nine phases rather than eight,
carries a Phase 9 row in the phase table and a Phase 9 paragraph in the
slides walkthrough, lists 05-critique-iterate.md among the foundation
references (6, not 5; 14 reference files, not 13), and uses the namespaced
design:critique / design:accessibility / design:handoff tokens the live
plugin actually exposes.

Two stale claims corrected, both measured 2026-08-18:

- Assertion (i) was described as a recursive grep that excludes the local
  files by name. Since 3696b8e it is a per-file grep over a git-derived
  shipped set (git check-ignore), so no name list exists to maintain.
- Marketplace context claimed this plugin has no separate git repository and
  no separate remote. git rev-parse --show-toplevel resolves to the plugin
  directory, origin is open/claude-design.git, and the sibling catalog/ is a
  separate repository. The docs-triple rule is narrowed accordingly: the
  catalog README is updated in the catalog repository at release time, never
  from here.

Also fixes a mis-numbered layer list in the README walkthrough, which named
start-simple as Layer 2 and the AI-slop avoid-list as Layer 4. The real
numbering in 01-prompt-fundamentals.md is Layer 1, 1.5, 2a, 2b, 3, 4, 5.

No version bump, no tag, no CHANGELOG entry — Step 9 owns those.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NaybqQwqirrNmikJsUrbDg
This commit is contained in:
Kjell Tore Guttormsen 2026-08-18 21:06:30 +02:00
commit 7d604309ae
2 changed files with 19 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

20
README.md
View file

@ -2,7 +2,7 @@
End-to-end facilitator for prompting Claude Design (claude.ai/design) — idea to copy-paste-ready prompt with iteration coaching, citing Anthropic primary 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 prompt grounded in Anthropic's verbatim Goal / Layout / Content / Audience framework and the published per-preset prompt patterns. For anyone who keeps getting the convergent default aesthetic back from Claude Design. Output is the prompt — the artifact gets built in Claude Design.
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 a nine-phase facilitation flow, and produces a prompt grounded in Anthropic's verbatim Goal / Layout / Content / Audience framework and the published per-preset prompt patterns. For anyone who keeps getting the convergent default aesthetic back from Claude Design. Output is the prompt — the artifact gets built in Claude Design.
## Table of Contents
@ -72,7 +72,7 @@ Claude Design has a strong gravitational pull toward convergent middle-ground ou
The fix is in the prompt itself, not in the artifact. Anthropic publishes a five-layer prompt scaffold across three primary sources — the Goal / Layout / Content / Audience framework in the [Claude Design launch post](https://anthropic.com/news/claude-design-anthropic-labs) and [Get started article](https://support.claude.com/en/articles/14604416-get-started-with-claude-design), the DESIGN.md anchor in the [design system article](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design), and the AI-slop avoid-list plus cultural-reference anchoring in the [aesthetics cookbook](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics). Assembling a prompt that actually uses all five layers, with the right per-preset pattern, in the right order, takes deliberate scaffolding most operators do not do unprompted.
This plugin does the scaffolding interactively. The `claude-design-facilitator` skill walks the operator through eight phases, surfaces the questions that produce a workable Goal / Layout / Content / Audience answer, anchors on DESIGN.md if one exists or extracts one if not, composes the five layers in the right order, and outputs a copy-paste prompt the operator pastes into `claude.ai/design`. The artifact gets built in Claude Design; this plugin produces the prompt.
This plugin does the scaffolding interactively. The `claude-design-facilitator` skill walks the operator through nine phases, surfaces the questions that produce a workable Goal / Layout / Content / Audience answer, anchors on DESIGN.md if one exists or extracts one if not, composes the five layers in the right order, and outputs a copy-paste prompt the operator pastes into `claude.ai/design`. The artifact gets built in Claude Design; this plugin produces the prompt.
The output is honest about what it is. Every authoritative claim cites an Anthropic primary source inline. Community patterns are labelled and attributed. The `frontier-design` preset is flagged Experimental rather than dressed up as canonical. The plugin recommends Anthropic's official [`knowledge-work-plugins/design`](https://claude.com/plugins/design) for everything that happens after the artifact is generated — there is zero command overlap by design.
@ -108,7 +108,7 @@ By design, this plugin does not:
## 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).
The skill `claude-design-facilitator` walks the operator through nine phases. The phases are scoping + grounding (1–4), drafting + delivery (5–6), iteration + ship-readiness (7–8), and an optional critique-iterate loop (9) that runs only when the operator asks for it.
| Phase | What happens |
|-------|--------------|
@ -120,6 +120,7 @@ The skill `claude-design-facilitator` walks the operator through eight phases. T
| **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. |
| **9. Critique-iterate** *(optional)* | Read [references/05](skills/claude-design-facilitator/references/05-critique-iterate.md). Coach the export and the `design:critique` run (9a), consume the pasted critique as untrusted reference data (9b), synthesize a re-prompt aimed at the one prompt layer that produced the problem (9c), then loop or exit (9d). Opt out at any point by saying `skip`. This phase routes to Anthropic's plugin; it never reimplements it. |
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.
@ -133,7 +134,7 @@ A realistic session against the `slides` preset — Q1 results deck for an inter
**Operator:** *"I want to build a Q1 results slide deck for the engineering team in Claude Design."*
The skill auto-fires (the phrase matches `.triggers.txt`). It walks the eight phases:
The skill auto-fires (the phrase matches `.triggers.txt`). It walks the phases:
**Phase 1 — Disambiguate the surface.** The skill confirms `claude.ai/design` is the intended surface, not classic Artifacts or Live Artifacts. The operator confirms.
@ -143,7 +144,7 @@ The skill auto-fires (the phrase matches `.triggers.txt`). It walks the eight ph
**Phase 4 — Anchor on DESIGN.md.** The operator has no DESIGN.md yet. The skill points at the brand-to-DESIGN.md extractor prompt in [`references/02-design-md.md`](skills/claude-design-facilitator/references/02-design-md.md): paste a brand-guidelines URL or PDF into Claude.ai, get back a DESIGN.md filling the nine canonical sections (typography, colour, spacing, layout primitives, motion, voice, imagery, density, accessibility). The operator runs the extractor against the company's brand site, gets a DESIGN.md, drops it into the Claude Design project assets.
**Phase 5 — Draft the prompt.** The skill composes the five layers from [`references/01-prompt-fundamentals.md`](skills/claude-design-facilitator/references/01-prompt-fundamentals.md): Goal / Layout / Content / Audience (Layer 1) → start-simple-layer-complexity (Layer 2) → concrete-alternative-spec (Layer 3) → AI-slop negative constraints (Layer 4) → per-preset pattern from `presets/slides.md` (Layer 5). The skill produces a single copy-paste fenced block. The operator inspects it, optionally edits the Goal sentence, then proceeds.
**Phase 5 — Draft the prompt.** The skill composes the five layers from [`references/01-prompt-fundamentals.md`](skills/claude-design-facilitator/references/01-prompt-fundamentals.md): Goal / Layout / Content / Audience (Layer 1) → start-simple-layer-complexity (Layer 1.5) → concrete-alternative-spec house style (Layer 2a) → AI-slop negative constraints (Layer 3), composed with the per-preset pattern from `presets/slides.md`. The skill produces a single copy-paste fenced block. The operator inspects it, optionally edits the Goal sentence, then proceeds.
**Phase 6 — Deliver.** The skill outputs the prompt block. The structure of a realistic delivery for this scenario looks like:
@ -193,7 +194,9 @@ That block is what gets pasted into `claude.ai/design`. The skill also surfaces
**Phase 7 — Iteration coaching.** Once Claude Design produces the first version, the skill points the operator at the Tweak → Comment → Chat cascade in [`references/03-iteration-and-session.md`](skills/claude-design-facilitator/references/03-iteration-and-session.md): Tweak panel for surgical zero-token edits (spacing, font size, colour), inline comments for component-scoped changes (rewrite slide 5), full chat regeneration as a last resort. Plus the session-break heuristic (after 4 substantive screens, start a fresh session with a verbal save-pattern carrying state forward) and the recovery prompt library when iteration gets stuck.
**Phase 8 — Ship-readiness.** Before the all-hands, the skill runs the export validation checklist for the chosen destination (HTML preview → keep in Claude Design; PPTX → check fonts and master, charts may flatten). If the deck is being handed off to engineering for any reason, it recommends installing [`knowledge-work-plugins/design`](https://claude.com/plugins/design) for `/critique`, `/accessibility`, and `/handoff` — the post-design lane.
**Phase 8 — Ship-readiness.** Before the all-hands, the skill runs the export validation checklist for the chosen destination (HTML preview → keep in Claude Design; PPTX → check fonts and master, charts may flatten). If the deck is being handed off to engineering for any reason, it recommends installing [`knowledge-work-plugins/design`](https://claude.com/plugins/design) for `design:critique`, `design:accessibility`, and `design:handoff` — the post-design lane.
**Phase 9 — Critique-iterate (optional).** If the deck comes back with problems that surface tweaks cannot fix — a slide that does not earn its place, hierarchy that fights the narrative — the skill offers the critique-iterate loop from [`references/05-critique-iterate.md`](skills/claude-design-facilitator/references/05-critique-iterate.md). It coaches the export, hands over `design:critique @<file>`, reads the pasted critique by judgment rather than by parser, and drafts a re-prompt aimed at the single prompt layer responsible — for `slides`, deck-wide drift usually means the house-style spec (Layer 2a) was too loose, not that any one slide was laid out wrong. The operator confirms the mapping before anything is handed back. Saying `skip` at any point ends the phase.
The full output of the session is a single fenced markdown block (Phase 6) plus a short follow-up-turns list and an iteration-coaching pointer. That is the entire user-facing deliverable.
@ -211,15 +214,16 @@ No commands, no agents, no hooks, no MCP servers at v0.1. The single skill is th
## Reference content map
The plugin ships 13 reference files in `skills/claude-design-facilitator/references/`:
The plugin ships 14 reference files in `skills/claude-design-facilitator/references/`:
**Foundation references (5):**
**Foundation references (6):**
- [`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.
- [`05-critique-iterate.md`](skills/claude-design-facilitator/references/05-critique-iterate.md) — Phase 9 shared mechanics: operator-as-bridge handoff rationale, the `design:critique` preconditions, the untrusted-input rule for pasted critique output, and the judgment-based mapping from critique findings to prompt layers. Each per-preset file carries its own thin `Critique-iterate hint` block on top of this.
**Per-preset references (8):**