skills.rest
rachel353
rachel353COMMUNITY
Explore all skills by this author →
GitHub

design-system-builder

Extract design tokens from index.css and generate semantic state mappings with CSS output.

Updated Apr 7, 2026
Search Tags:#frontend#css#tailwind#tokens#design-system#semantic-states#tokens-extraction
One-click install
npx skills add https://github.com/rachel353/fullty-plan --skill design-system-builder-rachel353
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-builder
Source: https://github.com/rachel353/fullty-plan/tree/main/.claude/skills/design-system-builder
Command: npx skills add https://github.com/rachel353/fullty-plan --skill design-system-builder-rachel353

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Automate the extraction of design tokens from index.css and convert them into a unified design system by generating semantic state mappings and design artifacts such as rules and CSS.

Core Features & Use Cases

  • Extracts colors, typography, and spacing tokens from index.css.
  • Generates semantic state mappings for info, action, success, warning, danger, and frozen.
  • Outputs .claude/rules/design_system_rules.mdc and app/globals.css for consistent UI.

Quick Start

Run the Python script to scan index.css and generate the semantic state mappings and output files.

Frequently Asked Questions about design-system-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from index.css to build a semantic state system?▼

To extract design tokens from index.css, this Skill scans your file for colors, typography, and spacing, then generates semantic state mappings for info, action, success, warning, danger, and frozen states. It outputs structured utility CSS and design rules.

What are semantic state mappings in a frontend design system?▼

Semantic state mappings in a frontend design system translate raw CSS tokens into standardized UI meanings, specifically covering info, action, success, warning, danger, and frozen states. This ensures a consistent UI language across your application.

Can I use this to generate Tailwind CSS tokens for my web app?▼

Yes, you can generate Tailwind CSS tokens for your web app. The Skill reads your existing index.css, infers design tokens, and outputs app/globals.css with utility CSS alongside .claude/rules/design_system_rules.mdc for consistent UI implementation.

Do I need an existing index.css file to generate design system rules?▼

Yes, you need an existing index.css file to generate design system rules. The Skill requires this file as input to infer your colors, typography, and spacing tokens before mapping them to semantic states and writing the output artifacts.

What is the best way to standardize frontend UI language across multiple components?▼

The best way to standardize frontend UI language is by mapping raw CSS tokens to six semantic states: info, action, success, warning, danger, and frozen. This process generates standardized utility CSS and design rules to maintain consistency.

Related Skills

Explore More Design & Creative Skills→
vultisigvultisig
19

figma

Implement React components from Figma designs using MCP inspection.

Official
Advanced
habrahgithubhabrahgithub

frontend-ui-implementation

Convert Figma designs into Next.js UI components with semantic HTML and Tailwind.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced