Make the design guide vendor-agnostic about the harness

Keep "Claude Design" only as the named default visual tool (like naming
Figma); generalize the spots that assumed the coding harness is Claude:
- Phase B framed as "the cloud tool" (Claude Design as default; adapt for Figma)
- export named the "coding-agent handoff bundle" (Claude Design's term noted)
- token extraction points at Style Dictionary / any harness skill, not Claude Code
- BRIEF prompt block paste target generalized
This commit is contained in:
Keysat
2026-06-16 12:45:23 -05:00
parent a6e3fe6908
commit 4e98106ac6
+11 -8
View File
@@ -121,15 +121,18 @@ canvas. Work it out *with* the user, inspiration-first:
## Phase B — (Optional) cloud round-trip
Run this only for **fresh** designs that need the visual tool, or **redesign/elevate**
backfills. Document-as-is backfills skip it. You cannot run Claude Design — it is cloud-only
at `claude.ai/design`, browser-driven, and the user does this step. Hand them a runbook:
backfills. Document-as-is backfills skip it. You cannot run the cloud tool yourself — the
default, Claude Design, is cloud-only at `claude.ai/design`, browser-driven, and the user
does this step. Hand them a runbook (the steps below are written for Claude Design; adapt
them for Figma or whatever visual tool the user prefers):
- What to **paste** (the prompt block from `BRIEF.md`) and **upload/point at** (the checklist).
- How to **iterate**: inline canvas comments, direct edits, sliders/toggles — not just
re-prompting.
- What to **export**: the **"Handoff to Claude Code" bundle** (richest — HTML/CSS/JS +
per-state screenshots + a README of stack/conventions) and a few **screenshots**. PDF/PPTX/
Canva are presentation-only — skip them. Drop the bundle into `design/_imports/<date>/`.
- What to **export**: the **coding-agent handoff bundle** (Claude Design calls it "Handoff to
Claude Code") — richest output: HTML/CSS/JS + per-state screenshots + a README of stack/
conventions — and a few **screenshots**. PDF/PPTX/Canva are presentation-only — skip them.
Drop the bundle into `design/_imports/<date>/`.
If the user used Figma or just talked through the look, that's fine — the same Phase C applies.
@@ -148,8 +151,8 @@ and author the contract yourself. Worth a human glance the first few runs.
(a short "when building UI here, do X" note).
3. **Author `design/tokens.tokens.json`** — W3C DTCG (JSON; each token has `$type` and
`$value`; groups nest; references use `{group.token}`). Pull colors, type scale, spacing,
radii, shadows from the input. The standalone Claude Code `design-tokens-skill` can assist —
optional.
radii, shadows from the input. A design-tokens build tool (e.g. Style Dictionary) — or a
token-extraction skill if your harness ships one — can assist; optional.
4. **Populate `design/brand/`** — logo, fonts, optionally a `palette.css` generated from the
tokens via Style Dictionary.
5. **Wire the contract in.** Ensure the `AGENTS.md` **Design line** is present; add if missing.
@@ -203,7 +206,7 @@ this project's brand?*
- Upload: <logo, fonts, inspiration images, existing DESIGN.md/tokens>
- Web-capture: <live URLs, if any>
## Prompt block (paste into Claude Design)
## Prompt block (paste into the cloud tool, e.g. Claude Design)
> <Goal> … <Layout> … Include: <Content> … Audience: <…> … Style like <Reference>.
```