design-tokenslisted

Produce a `DESIGN_TOKENS.md` spec — colors (light + dark), spacing, typography, layout, motion, breakpoints — derived from a chosen aesthetic philosophy. Output is a markdown document (name / value / semantic role) saved to `.design/<slug>/`, NOT an actual CSS or Tailwind config file. Materialization into the project's real token file happens later in `/build` (or when `frontend-design` runs standalone). Use when starting a new project, establishing a visual system, setting up tokens, or the user mentions "tokens" or "design system".
muzalee/claude-atelier · ★ 0 · Web & Frontend · score 62

Install: claude install-skill muzalee/claude-atelier

This skill produces the design tokens **spec** for a project. Run it after the design brief and before building any components. It writes a markdown document (`DESIGN_TOKENS.md`) inside `.design/<slug>/` — not a CSS or Tailwind file. The build phase materializes the spec into the project's stack-appropriate format. ## Example prompts - "Set up design tokens for this project" - "Generate a token spec based on Dieter Rams" - "I need a spacing scale and color palette before I start building" - "Create tokens that match our brief" ## Process 1. **Check what already exists.** Scan the codebase for: - CSS variable definitions (`:root`, `[data-theme]`, custom property files) - Tailwind config (`tailwind.config.js|ts`) — especially `theme.extend` - Theme provider files (Material UI `createTheme`, Chakra `extendTheme`, shadcn `globals.css`) - Design token JSON files (Style Dictionary format, Figma token exports) - Any `tokens.css`, `variables.css`, `theme.css`, etc. - `package.json` UI framework dependencies (tailwindcss, @mui/material, @chakra-ui/react, etc.) If tokens already exist, **extend the spec to cover gaps** (missing dark mode, incomplete spacing scale, no motion tokens) rather than replacing. 2. **Read the brief.** Look for `.design/<slug>/DESIGN_BRIEF.md`. If multiple slugs exist, use the most recently modified one or ask. If the brief names a philosophy, derive token values from it. If no brief exists, ask the user what direction they want. 3.