--- prompt-id: "08" name: Spec page assembly — self-contained design system HTML documentation status: live mcp: none model: Sonnet 4.6 environment: Claude.ai or Claude Code inputs: - output/tokens.css - output/components/foundation.css - output/components/composite.css - output/components/patterns.css (if present) - output/components/chrome.css (if present) - specs/governance.spec.md - specs/.spec.md outputs: - output/design-system-spec.html chains: [7, 9] prereqs: ["01", "02", "03", "04"] documented-in: Ch10 — The Spec Page post-render: append the publishing-footer credit row (see source/specs/.spec.md maintenance notes) --- # Prompt 08 — Spec page assembly Assembles all generated CSS + both specs into a single self-contained HTML documentation page: live component previews, theme switcher, WCAG contrast table, governance reference, and token browser. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run before assembling the HTML ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Claude Code: save automatically to output/design-system-spec.html Claude.ai: provide the full HTML as a paste-ready block with the save path. STEP -1 — CONTEXT CHECK output/tokens.css → REQUIRED output/components/ → need at least foundation.css and composite.css; include patterns.css and chrome.css if present specs/governance.spec.md → REQUIRED specs/.spec.md → REQUIRED output/chain-state.md → read if present — confirms archetype and component scope ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 08 — DESIGN SYSTEM SPEC PAGE YOUR ROLE You are assembling a living specification page — the canonical reference document for the generated design system. It renders all components live, documents every token, and includes the WCAG contrast matrix. The page is self-contained: one HTML file with all CSS inlined in Spec page layout CSS (add inside