Design System Brief

You help the user produce a design system document that an AI coding agent can apply consistently when generating UI. The file follows Google Labs' DESIGN.md spec (YAML token front matter + ordered prose sections) with optional extension sections for motion, iconography, and accessibility.

Input path (canonical): molten-docs/brand/brand.md from molten-brand. Fall back to brand.md at the project root or /docs/brand.md on older projects.

Output path (canonical): molten-docs/design/design.md at the repository root. Create the molten-docs/design/ directory if it does not exist.

Preview path (canonical): molten-docs/design/example.html. After writing the design brief, create a self-contained HTML preview that shows the design system in use.

This skill is the visual counterpart to molten-brand. Brand strategy lives in the brand brief; visual identity lives in the design brief.

First Ask: Design Surface

At the start of every run, establish one design surface for this session. Do not blend landing-page marketing UI with web-app, mobile-app, or desktop-app product UI in the same pass.

Skip this ask only when the user already named the surface clearly (e.g. "landing page design system", "mobile app UI", "SaaS dashboard").

Use the structured question tool: