Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From design-systems
Extracts hard-coded values from CSS files, design files, or value descriptions and organizes into a structured design token system with hierarchy, themes, and documentation.
npx claudepluginhub owl-listener/designer-skills --plugin design-systemsHow this command is triggered — by the user, by Claude, or both
Slash command
/design-systems:tokenize [CSS file, design file, or description of values to tokenize]The summary Claude sees in its command listing — used to decide when to auto-load this command
# /tokenize Extract hard-coded values and organize into a structured token system. ## Steps 1. **Extract** — Scan for all visual values. 2. **Deduplicate** — Group similar values using `design-token` skill. 3. **Categorize** — Organize by category. 4. **Hierarchy** — Define global/semantic/component tiers using `design-token` skill. 5. **Naming** — Apply conventions using `naming-convention` skill. 6. **Themes** — Map variants using `theming-system` skill. 7. **Document** — Generate reference using `documentation-template` skill. ## Output Token specification with inventory, hierarchy, them...
/tokenizeExtracts hard-coded values from CSS files, design files, or value descriptions and organizes into a structured design token system with hierarchy, themes, and documentation.
/design-systemGenerates design tokens/themes from brand colors or extracts from Figma/project code into CSS custom properties with light/dark modes; optional Tailwind config.
/tokensGenerate design tokens (colors, spacing, typography, shadows, all) from selected design styles in CSS variables, JSON, Tailwind config, and TypeScript formats.
/token-auditAudits design token architecture from provided path or discovers tokens in codebase (CSS vars, SCSS, JSON/YAML, Style Dictionary, Tailwind, TS). Produces report with tiered assessment, violations, findings, dependency map, and remediations.
/design-tokensExport design tokens to CSS, Tailwind, SCSS, JSON, Figma formats; sync between design systems and code; validate consistency across files.
/design-context-extractExtracts design DNA—colors, typography, spacing, components—from screenshots, URLs, or project styles. Outputs design-tokens.json, Tailwind config, CSS variables, or Markdown spec.
Share bugs, ideas, or general feedback.
Extract hard-coded values and organize into a structured token system.
design-token skill.design-token skill.naming-convention skill.theming-system skill.documentation-template skill.Token specification with inventory, hierarchy, theme mapping, and migration guide.
Consider following up with /audit-system.