Design System Builder — Tokens, Type Scale & Drift Check
Build, extract or extend a design system — and catch where your product has drifted off it.
$12
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsDesign System Builder — Tokens, Type Scale & Drift Check
Example session with this skill installed
We have a logo with #0055FF and #FF3300. We need a 4px-based spacing scale, a mobile-first type scale, and tokens for a light-themed web app. Use Tailwind-compatible naming.
- Read your context and instructions
- Compiled the design system builder
- Generated the app files
I have generated a foundational design system based on your brand colors and a 4px base unit. The system prioritizes semantic naming for Tailwind CSS integration and ensures all text roles meet WCAG 2.1 AA contrast requirements.
Design System Foundation
1. Brand & Semantic Tokens (Tailwind Config)
{
"theme": {
"extend": {
"colors": {
"brand": {
"primary": "#0055FF",
"secondary": "#FF3300"
},
"ui": {
"bg-main": "#FFFFFF",
"bg-surface": "#F8FAFC",
"text-primary": "#0F172A",
"text-secondary": "#475569",
"border-subtle": "#E2E8F0",
"action-primary": "#0055FF",
"action-hover": "#0044CC",
"error": "#DC2626"
}
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px"
}
}
}
}
2. Typography Scale (Mobile-First)
| Level | Size | Line Height | Use Case |
|---|---|---|---|
| Display | 32px (2rem) | 1.2 | Main page headings |
| Heading | 24px (1.5rem) | 1.3 | Section titles |
| Body Large | 18px (1.125rem) | 1.5 | Lead paragraphs |
| Body Base | 16px (1rem) | 1.5 | Standard reading text |
| Caption | 14px (0.875rem) | 1.4 | Helper text, labels |
3. CSS Variables (tokens.css)
:root {
--color-brand-primary: #0055FF;
--color-text-primary: #0f172a;
--space-unit: 4px;
--radius-md: 8px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
Next steps
- Review the contrast ratio for
brand-secondary(#FF3300) on white; it currently passes for large text only. - Define the component-level tokens for Buttons and Inputs.
- Export these tokens into your
tailwind.config.jsto begin implementation.
tokens.css
ZIP · project files
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
The problem
UI consistency degrades as teams scale, leading to "CSS bloat" and fragmented user experiences. Developers often waste time debating hex codes or spacing values instead of building features.
What it does
- Generates W3C-compliant design tokens in JSON and CSS variables based on your brand or existing screens.
- Builds modular typography and spacing scales using standard base units (4px/8px) with accessibility-first contrast checks.
- Creates detailed component specifications for core UI elements like buttons, inputs, and modals, including states and token mapping.
- Performs "drift checks" to identify off-system values in your current codebase and provides a migration map to get back on track.
Frameworks & tools
Outputs compatible with Tailwind CSS, Figma Variables, and standard W3C Design Token JSON. Supports web (CSS/SCSS) and mobile (iOS/Android) platform notes.
Why this beats prompting it yourself
Generic LLMs often provide "pretty" palettes that fail WCAG contrast requirements or use brittle, appearance-based naming like gray-500. This skill enforces semantic naming and role-based logic, ensuring your system is accessible and maintainable from day one.
Use cases
- Bootstrapping a new product's design system from a logo and three wireframes.
- Auditing a legacy codebase to consolidate redundant colors and spacing into a unified token set.
- Extending an existing system to support Dark Mode or a new data-visualization suite.
- Generating developer-ready documentation that explains the "why" behind every design constraint.
Known limitations
Does not generate actual React/Vue component code, only the design specifications and tokens. Maximum of two font families per scale to ensure performance.
Focuses on design specs and tokens, not boilerplate UI code. Limits typography to two families. Requires clear brand or UI input for Build/Extract modes.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
Permissions
No special permissions declared or detected