102.7K+Download
Skip to the usage guide
ui-design-systemby Alireza Rezvani

UI Design System Skill.

A Claude Code and Codex skill for brand and design-system work: design tokens, component documentation, responsive calculations, and developer handoff.

  • Brand & Design Systems
  • Design system
Download OpenDesignView usage guide
alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md
--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist
Front matter and section headings read from the upstream file on 2026-09-14 · 10,759 characters in full

01 What it does

What the ui-design-system Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A design system toolkit for combining a brand color with a style preset to generate a token set. design_token_generator.py takes a hex color plus a modern, classic or playful preset and returns colors, typography, 8pt spacing, sizing, borders, shadows, animation, breakpoints and z-index layers as json, css, scss or a summary.

Four workflows then cover component architecture from atoms to templates, responsive breakpoints with clamp() fluid type, WCAG contrast validation, and developer handoff into React CSS variables, Tailwind config or styled-components, plus Figma sync through Tokens Studio. It is aimed at senior UI designers who have to document tokens and components for a build team.

What it produces

  • Token files in JSON, CSS or SCSS, or a human-readable summary from the bundled Python generator.
  • Component API documentation covering props, variant options, states and accessibility requirements.
  • Integration snippets for React with CSS variables, a Tailwind theme config and styled-components.
  • Semantic color tokens that carry their own contrast colors.
See the example prompt ↗

How It Works

  1. 01
    Fix the Brand Color

    Choose the primary brand color in hex and a style preset. The color seeds the palette; typography, spacing and other categories also use the generator’s preset rules.

  2. 02
    Run the Token Generator

    One script call produces the whole system: color, style preset and output format are the three arguments it accepts.

  3. 03
    Map Tokens to a Component Hierarchy

    Components are organised as atoms, molecules, organisms and templates, then each one is tied to the token groups it consumes.

  4. 04
    Set Breakpoints and Fluid Type

    Six breakpoints run from xs to 2xl, and fluid typography is expressed with a clamp formula between a minimum and maximum size.

  5. 05
    Wire Tokens into the Codebase

    The handoff workflow shows the token file imported directly, a Tailwind theme built from the JSON, and a styled-components theme reading token keys.

  6. 06
    Sync Figma and Sign Off

    The guide includes Tokens Studio import and a handoff checklist. Set up and verify the design-tool integration separately; running the generator alone does not prove Figma synchronization.

02 Find your fit

When to Use the ui-design-system Skill

Use the ui-design-system skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • You have a single brand color and need a complete token system derived from it.
  • You are structuring a component library and want tokens mapped onto atoms, molecules, organisms and templates.
  • You need breakpoints, fluid typography scales or responsive spacing values calculated for you.
  • You are preparing to hand a finished token set over to the development team.

Know the Boundaries

  • The style presets are not a deep re-skin: the theme choice mostly shifts font stacks, default radius and shadow character, for example 8px rounded corners on modern against 4px on classic.

What to Provide

  • Brand primary and project setupProvide the primary hex color and the receiving project. Have Python and the bundled design_token_generator.py available; confirm the exported tokens can be consumed by your build.
  • A style presetPick one of three directions, modern, classic or playful, since the preset changes type families, corner radius and shadow treatment across the generated set.
  • The output formatSay which format the receiving project consumes: json, css, scss or the summary view, because that decides what the handoff produces.

03 Inside the skill

Rules the ui-design-system Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Default Brand Color

    When no color is passed the generator falls back to #0066CC as the primary brand color, so output still renders without a hex argument.

  2. Spacing Is an 8pt Grid

    Spacing tokens follow an 8pt grid based scale running from 0 to 64, with semantic aliases layered on top of the numeric steps.

  3. No Hardcoded Values

    Component implementations must reference design tokens only; literal pixel or hex values in components are treated as a failed check.

  4. Every Variant Ships

    Components are expected to implement the full variant set, primary, secondary and ghost, rather than a subset.

  5. Size Variants Have Fixed Dimensions

    The source illustrates small, medium and large visual heights of 32, 40 and 48px. These examples do not by themselves satisfy its separate 44×44px touch-target checklist: inspect the actual clickable area.

  6. Contrast Must Clear WCAG AA

    The workflow asks for contrast checks at 4.5:1 for normal text and 3:1 for large text at AA. Verify the rendered foreground/background pairs; generating token files is not proof that the interface passes.

  7. Touch Targets Stay Large Enough

    Interactive elements have to reach a minimum touch target of 44 by 44 pixels in the accessibility checklist.

04 Put it to work

Install ui-design-system in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add ui-design-system to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-system

Generic skills CLI form for product-team/skills/ui-design-system/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

Editorial example based on the reviewed source; not an executed task or an upstream quotation.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm every token category was generated rather than a partial set.
  • Verify hover, active, focus and disabled states all actually work on each component.
  • Check that focus indicators are visible and semantic HTML elements are used.
  • Make sure the design tool has been synced before the handoff is called finished.
  • Confirm a build pipeline is configured so the exported tokens reach the code.

OpenDesign provides a local workspace for coding agents. Check the installed version for skill availability and setup; this source review does not verify bundled skills or include external tools and services.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Alireza Rezvani
Repository
github.com/alirezarezvani/claude-skills Branch main
Skill file
product-team/skills/ui-design-system/SKILL.md Content checksum recorded at verification; commit 19392f7
License
MIT From LICENSE.
Repository stars
25,934 GitHub snapshot taken 2026-09-14 for the whole alirezarezvani/claude-skills repository, which contains 5 skills in this catalog. Not a rating or usage count for ui-design-system.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Trigger TermsQuoted phrases such as generate design tokens that should route a request to this skill.
  2. WorkflowsFour numbered workflows: token generation, component system, responsive design, developer handoff.
  3. Tool ReferenceArguments, defaults and output categories for design_token_generator.py, with example calls.
  4. Quick Reference TablesColor scale steps, 1.25 typography scale, WCAG levels and style preset differences.
  5. Knowledge BaseFour reference guides: token-generation, component-architecture, responsive-calculations, developer-handoff.
  6. Validation ChecklistTick lists for token generation, component system, accessibility and developer handoff.
The Skill's Own Description
“UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.”

Front-matter description from SKILL.md. The full file is about 10,759 characters. Read the full file on GitHub.

06 Before you install

Questions About the ui-design-system Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What do I need to run the generator?

Have Python and the bundled design_token_generator.py script available, then choose the primary hex color, style and output format. The guide shows JSON, CSS, SCSS and summary output. Project integration and any design-tool synchronization are separate setup steps.

Which output formats can I get?

JSON is the default, and the same script writes CSS custom properties, SCSS variables or a summary view. The examples redirect SCSS output into a partial so it can be imported directly.

How does the Figma sync work?

The guide describes importing generated JSON through Tokens Studio. Check the installed plugin’s accepted token format and configure any synchronization separately; the Python generator does not establish or verify a live Figma connection.

Which contrast level does it hold work to?

The reference table defines both AA and AAA: AAA needs 7:1 for normal text and 4.5:1 for large text, while AA is the lighter 4.5:1 and 3:1 target. Large text means at least 18pt regular or 14pt bold.

UI Design System

Run ui-design-system on a Real Brand and design-system Work Task.

Download OpenDesign, import ui-design-system from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-system