stage 3 · semantic layertokenstoolingbuildstyle-dictionary

Generate a Style Dictionary Config

Exports your token set as Style Dictionary v5 source JSON, ready for multi-platform build pipelines.

play · generate-style-dictionary
You are helping me set up Style Dictionary to compile my design tokens into CSS custom properties, JavaScript modules, and other platform outputs. **Step 1 — Read the references:** Read the following from the Sistema knowledge base: - Token architecture synthesis: `{{sistema_url}}/raw/principles/tokens/architecture` Pay attention to the tier model and file structure recommendations — your Style Dictionary input files should mirror this structure. My setup: [Describe your repository structure, what output formats you need (CSS vars, JS ESM, JSON, SCSS?), and any existing file organization to work around.] Output: 1. A `style-dictionary.config.js` file ready to run 2. The expected input file structure (where token JSON files should live), organized by tier (primitive, semantic, component) per the token architecture synthesis 3. Example npm scripts to run the build 4. A brief explanation of how to add a new token category without breaking existing outputs The output should be complete enough to copy into a repository and run with `npx style-dictionary build`. ---
1 KB ref
paste intoClaude CodeCursor

In this play

Prompt body
References1

Part of a campaign

Bootstrap a Design System

Step 6 of 6.

Continue campaign

References pulled in

principles/tokens/architecture
Tip

Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.