Create a Design System from a Brand Brief: Tokens, Themes and CSS
Choose a product recipe, generate semantic tokens and reusable CSS, then check complete screens and an independent integration. Keep local demonstrations separate from a production application.
Fastest way
Ask your AI to do it
Paste this into the AI agent you already use:
Use Design System Studio to turn my reviewed brand brief into semantic tokens, themes and reusable CSS. Ask for product, audience and primary task, then choose planning, editorial or operations. Keep fictional presets labeled, generate into a fresh folder, check actual interactions and the independent CSS integration, and distinguish pair contrast checks from a full accessibility audit.
What does a design-system skill actually deliver?
Design System Studio v1.2.0 turns a reviewed brief into semantic colors, reusable CSS, a design contract and interactive product screens. It includes planning, editorial and operations recipes with different layouts and behaviors. The Python generator runs locally without dependencies or an API key; your agent still supplies the design decisions and reviewed content.
Start with the product task and permitted brand material
- Name the product, audience and primary task. Supply approved brand colors, type guidance and owned screen references when available. Mark missing facts instead of inventing a customer story.
- Choose planning for workstreams, editorial for stories and review queues, or operations for dense records and local acknowledgment. Choose by the task, not just a favorite palette.
- Keep fictional practice records labeled. Changing the preset brand name does not turn its progress values, people or stories into real evidence.
Use semantic roles to connect decisions to components
A primitive names a raw value, a semantic role describes its purpose, and a component rule explains where to apply it. In this package, each theme defines twelve semantic roles, including canvas, surface, ink, primary, on-primary and focus. A same-theme alias such as {primary} is supported; cycles and unknown references are rejected. Read references/input.md before authoring a brief.
| Decision | Delivered representation | Review |
|---|---|---|
| Surface and text meaning | Theme roles in tokens.json and native CSS | Compare the resolved color with the actual component |
| Spacing, radius, type and motion | Declared scales and reusable component styles | Check dense records, long copy and reduced motion |
| Target framework integration | Native CSS plus an optional Tailwind v4 adapter | Compile the adapter in the actual target project |
Generate a complete practice delivery without writing JSON
Install the complete package and confirm your agent can discover it. Read SKILL.md and review the generator. From the installed package folder, use Python 3.10+ and a new output directory. This command uses the fictional Northstar planning preset with a demonstration brand name. Use atelier or signal for the other two recipes.
Review the package and first-run instructions
python3 scripts/quickstart.py --preset northstar --name "Cedar Practice" --output ./practice-design-systemInspect the result and the independent CSS integration
Open practice-design-system/result/index.html and test the chosen product task. Then open practice-design-system/result/integration.html, which imports the actual delivered stylesheets independently. Compare computed styles against tokens.json; a screenshot of matching colors alone does not prove that another document consumes the same CSS.
- Switch themes with a search, selection or form error active. Check that the input and recovery state remain intact. Test keyboard dismissal of dialogs, empty results, long content and a narrow viewport.
- Review contrast.json and contrast.csv using the unrounded pass/fail decisions. These cover listed opaque token pairs; they do not establish full WCAG conformance, screen-reader behavior or every composited state.
- Inspect delivery.zip and its manifest. Read DESIGN.md and integration notes alongside the editable brief, app.json and exported CSS. The package uses its own documented JSON schema, not a claimed DTCG interchange format.
Inspect the current example output → — Compare the visible result with the exported files and checks described in this section.
Edit ordinary fields, then generate a new delivery
For the visual editor, run python3 scripts/start-studio.py --output ./practice-design-editor from the package folder and open the printed local address. Choose a recipe, author the essential fields and generate actual files. Each generation has a new directory; local browser actions reset on reload. Keep the reviewed brief and regenerate to preserve changes in an export.
What still needs implementation in a real product?
The included interactions demonstrate local behavior. They do not create production records, connect a backend or provide server-side authorization. Compile framework adapters and audit accessibility in the target application. A purchase unlocks the package under its access rules; model accounts and any other services remain separate.