Product UIDesign SystemComponents

UI Design System

UI design system toolkit for tokens, components, and patterns.

Install for

Real Conversations

See how the UI Design System skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

We're a 4-person startup and our UI is a mess — every screen uses different colors, spacing, and font sizes. I want to establish a design token system that works in Figma and our React/Tailwind codebase. Where do I start?

Agent

Design Token System — Startup Foundation

Step 1: Define your primitive tokens (source of truth)

// tokens/primitives.js
export const color = {
  blue: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a5f' },
  gray: { 50: '#f9fafb', 200: '#e5e7eb', 900: '#111827' },
  red:  { 500: '#ef4444' },
  green:{ 500: '#22c55e' },
};
export const space = { 1: '4px', 2: '8px', 3: '12px', 4: '16px', 6: '24px', 8: '32px', 12: '48px' };
export const fontSize = { sm: '14px', base: '16px', lg: '20px', xl: '24px', '2xl': '32px' };

Step 2: Map primitives to semantic tokens

export const semantic = {
  colorBrand: color.blue[500],
  colorDanger: color.red[500],
  colorSurface: color.gray[50],
  colorText: color.gray[900],
  colorTextMuted: color.gray[200],
};

Step 3: Wire into Tailwind

// tailwind.config.js
theme: { extend: { colors: { brand: '#3b82f6', danger: '#ef4444', surface: '#f9fafb' } } }

Step 4: Figma variables Create a "Primitives" and "Semantic" variable collection in Figma. Bind component properties to semantic variables, not primitives.

Rule: Designers use semantic tokens. Primitive tokens only appear in the token definition file — never in components directly.

Want me to generate the full token file plus a shadcn-compatible theme config?

You

We have a React component library but different engineers built Button, Modal, and Form components independently so they're all inconsistent. How do we standardize them without a full rewrite?

Agent

Component Standardization — Incremental Approach

Don't rewrite — wrap and migrate. Here's the playbook:

Phase 1: Audit (1 week) List all variants of each component in production:

Button: 6 variants found
  - PrimaryButton (blue, 3 sizes)
  - SubmitButton (identical to Primary?)
  - GhostButton (no border)
  - ActionBtn (uses inline styles)
  - btn-primary (CSS class only)

Create a Storybook story for each. Now you can see duplication visually.

Phase 2: Define the canonical component API

// Agree on this interface first — before writing code
<Button
  variant="primary" | "secondary" | "ghost" | "danger"
  size="sm" | "md" | "lg"
  loading={boolean}
  disabled={boolean}
  onClick={fn}
>
  Label
</Button>

Phase 3: Build the canonical version once Use shadcn/ui as base (radix primitives + Tailwind). This gives you accessibility for free.

Phase 4: Migration without big bang

Add @deprecated JSDoc to old components
Set up ESLint rule: no-restricted-imports pointing to old component paths
Migrate one screen per sprint as features are touched

Timeline: Full migration in 6–10 sprints without stopping feature work.

Want me to generate the canonical Button, Input, and Modal components with the agreed API?

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Best

Claude Opus 4.8 Claude Sonnet 4 GPT-4.1 Gemini 2.5 Pro Grok 3 Kimi K2

Good

Claude Haiku 4.5 GPT-4.1 mini Gemini 2.5 Flash Grok 3 mini

Larger models produce more detailed, production-ready outputs.

Context Window

This skill's SKILL.md is typically 3–10 KB — fits in any modern context window.

8K Skill only

32K+ Skill + conversation

100K+ Skill + references + codebase

All current frontier models support 100K+ context.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Ready to try UI Design System?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.

Install for

← Browse all skills