Design System Builder — Tokens, Type Scale & Drift Check

    1

    Build, extract or extend a design system — and catch where your product has drifted off it.

    $12

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Design 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)

    LevelSizeLine HeightUse Case
    Display32px (2rem)1.2Main page headings
    Heading24px (1.5rem)1.3Section titles
    Body Large18px (1.125rem)1.5Lead paragraphs
    Body Base16px (1rem)1.5Standard reading text
    Caption14px (0.875rem)1.4Helper 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

    1. Review the contrast ratio for brand-secondary (#FF3300) on white; it currently passes for large text only.
    2. Define the component-level tokens for Buttons and Inputs.
    3. Export these tokens into your tailwind.config.js to begin implementation.

    design-system-builder-tokens-type-scale--app.zip

    ZIP · project files

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Generate W3C-compliant design tokens in JSON and CSS formats.Audit codebases to find and fix "design drift" and off-system values.Create modular typography and spacing scales with accessibility checks.Produce detailed component specs for developers and designers.

    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.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 8 days ago

    • Passed all security checks, Safe to install

    Listed8 days ago

    What's inside

    Frequently Asked Questions