design-system
Manage design tokens, component specifications, and automated presentation generation in a consistent system.
Install
mkdir -p .claude/skills/design-system-arareusername && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19287" && unzip -o skill.zip -d .claude/skills/design-system-arareusername && rm skill.zipInstalls to .claude/skills/design-system-arareusername
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.Key capabilities
- →Define three-layer token architecture
- →Generate CSS variables from JSON configs
- →Validate token usage in source code
- →Generate brand-compliant slide decks
- →Apply Duarte-style pattern breaking to presentations
How it works
The system uses a three-layer token hierarchy (primitive, semantic, component) to generate CSS variables. It also employs a decision system with CSV-based logic to assemble slide decks using Chart.js and design tokens.
Inputs & outputs
When to use design-system
- →Create new design tokens
- →Define component design variants
- →Generate slides from design specs
- →Validate design system usage
About design-system
Defines a structured token system and component documentation. It supports the generation of design tokens and assets for consistent UI and presentation building.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
When not to use it
- →Hardcoding hex values in UI components
- →Using CSS-only bars for charts
- →Projects lacking a defined token structure
Prerequisites
Limitations
- →Slides must import design-tokens.css
- →Requires Chart.js for all chart rendering
How it compares
Unlike manual styling, this system enforces a single source of truth for design tokens and automates slide layout generation based on emotional arcs.
Compared to similar skills
design-system side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| design-system (this skill) | 0 | 3mo | Review | Intermediate |
| ui-styling | 12 | 11mo | Review | Beginner |
| tailwind-design-system | 34 | 5mo | No flags | Intermediate |
| figma | 22 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by ARareUsername
View all by ARareUsername →You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
design-system-patterns
wshobson
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.