From 4533cc1d85b749ceebe43f29f4813555c2dca4d0 Mon Sep 17 00:00:00 2001 From: Keysat Date: Fri, 19 Jun 2026 19:35:04 -0500 Subject: [PATCH] design guide: distill a Claude Design .dc.html at its default props, not the screenshots MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .dc.html prototypes are parameterized components whose data-props defaults encode the decisions the user landed on; the bundled screenshots are option-history (rejected options + stale iterations). Read the .dc.html at its defaults as the source of truth and confirm with the user — don't anchor the contract on screenshots. (Learned on the ten31 CRM: a screenshot-anchored read locked a plan onto a rejected card the .dc.html defaults had already superseded.) --- guides/design.md | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/guides/design.md b/guides/design.md index 5c0d99e..3227c4a 100644 --- a/guides/design.md +++ b/guides/design.md @@ -145,8 +145,25 @@ If the user used Figma or just talked through the look, that's fine — the same Turn the input — a cloud export, imported guidelines, or a reconciled inventory — into the vendor-neutral contract. When distilling a Claude Design export, note it is **agent-mediated, not a mechanical export**: Claude Design emits standalone HTML with *inline, hardcoded* CSS -(no CSS custom properties, no DTCG tokens), so you read values out of the export/screenshots -and author the contract yourself. Worth a human glance the first few runs. +(no CSS custom properties, no DTCG tokens), so you read values out of the export and author +the contract yourself. Worth a human glance the first few runs. + +**Read the `.dc.html` at its *default props* as the source of truth — the screenshots are +option-history, not the final.** A Claude Design bundle ships renderable `*.dc.html` prototypes +(React + a `support.js` dc-runtime + a `store.js` mock store) next to a `screenshots/` folder. +Each `.dc.html` is a **parameterized component**: a top-of-file `data-props` blob declares every +option the session explored as an `editor:"enum"` with a `default` (e.g. `lpFlag: +star|earmark|banner` default `"earmark"`; `variant: compact|roomy` default `"compact"`; plus +`font`, `theme`, …). **Those defaults are the decisions the user actually landed on.** The PNG +screenshots, by contrast, are captures of *assorted* prop combinations from across the session — +they include rejected options and stale iterations, so they are **not** a reliable "final". +Read the `.dc.html` render markup at its default props (the ``/`` blocks + the +`data-props` defaults), or render the file at defaults (needs a local server — `support.js` +expects `window.React` and `fetch`es), and trust *that* over any screenshot — then confirm with +the user, who is the authority on which options won. *(Hard-won on the ten31 CRM: a +screenshot-anchored read locked a whole build plan onto a rejected card — disposition badges, a +6-stage funnel, a star flag — that the `.dc.html` defaults had already superseded with the final +earmark + 4-stage-pipeline card. The files didn't lie; we'd read the wrong one.)* 1. **Preserve provenance.** Confirm the raw input is committed under `design/_imports//`. 2. **Author `design/DESIGN.md`** in the nine-section format coding agents parse: **Visual