From 4e98106ac644041848717b4c982b729f8b638dc0 Mon Sep 17 00:00:00 2001 From: Keysat Date: Tue, 16 Jun 2026 12:45:23 -0500 Subject: [PATCH] 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 --- guides/design.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/guides/design.md b/guides/design.md index 43def93..cd6eceb 100644 --- a/guides/design.md +++ b/guides/design.md @@ -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//`. +- 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//`. 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: - Web-capture: -## Prompt block (paste into Claude Design) +## Prompt block (paste into the cloud tool, e.g. Claude Design) > … … Include: … Audience: <…> … Style like . ```