Skip to content
delta

Port a design back into the site

Maps every value in an external design to a token before anything is written, then writes tokens, site.css and pages in order, with a snapshot to fall back on.

Recipe
Port the design below back into this site. It was made against the token spec exported from this site, in Claude Design or another design tool that kept the token names. Design: [paste or attach the HTML and CSS exported from Claude Design, Figma, Paper or another tool, together with its Composed properties and Proposed tokens sections and its list of changed token values] 1. Run get-design-context, get-tokens and get-notes. Do not write anything yet. 2. Read the design and list every value that is not one of these three: a var() reference to a token that exists on this site; a composed property declared in the design's Composed properties section and built from tokens; a token listed under Proposed tokens. Show me the list as a table: where it appears, the value, and what you propose instead (an existing token, a composed property, or a new token). Wait for my approval. 3. Compare the design's token values with the site's. List every token whose value changed, as name, current value, new value, and the contrast ratios for ink on surface-body, ink-muted on surface-body, and on-action on action. Wait for my approval. 4. Write in this order, and stop if any step is refused: a. The approved token values, with update-tokens. b. The approved new tokens, with update-tokens. If the ability refuses a new name, add it as a composed property instead and tell me. c. The composed properties, into site.css with patch-site-assets, declared once at the top with bare names. d. The pages and templates, with the page and template abilities, keeping the design's semantic classes as they are. Targets: [name the pages and templates to create or replace] 5. Read back every page and template you wrote. Confirm the CSS contains no colour literal and no size that is not a token or a calc() from one. Report the snapshot id that was taken before the token write, so I can restore. Do not install plugins. Do not change notes.md. Do not change a token the design did not change.