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 OpenDesign View 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 turning one brand color into a full 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

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

01
Fix the Brand Color
The workflow opens by identifying the brand primary, which the file requires in hex format, since every generated category is derived from it.
02
Run the Token Generator
One script call produces the whole system: color, style preset and output format are the three arguments it accepts.
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.
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.
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.
06
Sync Figma and Sign Off
Tokens go into Figma through the Tokens Studio plugin, and the handoff checklist confirms the pipeline, component library and documentation are done.

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

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.

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.
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.
No Hardcoded Values
Component implementations must reference design tokens only; literal pixel or hex values in components are treated as a failed check.
Every Variant Ships
Components are expected to implement the full variant set, primary, secondary and ghost, rather than a subset.
Size Variants Have Fixed Dimensions
The small size is defined as 32px height, 12px horizontal padding and 14px font size, with md and lg scaling from there.
Contrast Must Clear WCAG AA
Generated colors are validated at 4.5:1 for normal text and 3:1 for large text, with semantic colors required to define contrast values.
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.

Source: written from the SKILL.md in the skill's own terms.

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.

In OpenDesign import ui-design-system from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read 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

Trigger TermsQuoted phrases such as generate design tokens that should route a request to this skill.
WorkflowsFour numbered workflows: token generation, component system, responsive design, developer handoff.
Tool ReferenceArguments, defaults and output categories for design_token_generator.py, with example calls.
Quick Reference TablesColor scale steps, 1.25 typography scale, WCAG levels and style preset differences.
Knowledge BaseFour reference guides: token-generation, component-architecture, responsive-calculations, developer-handoff.
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?

A hex brand color and a style choice, passed straight on the command line with the output format. The file shows calls like a classic palette with CSS output, so nothing else has to be configured first.

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?

You install the Tokens Studio plugin and import the generated JSON, after which the tokens sync automatically with Figma styles. The same handoff workflow also covers React, Tailwind and styled-components integration.

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 OpenDesign Browse all skills