ui-brief

A design token is a variable that stores design decisions like color and spacing. This Skill derives color tokens from brand hue and lightness, writing them as a Tailwind v4 @theme block so your project maintains consistent branding across components.

Tailwind v3 is handled through a provided fallback approach, as the generator primarily targets Tailwind v4 @theme syntax. It detects your CSS location and Tailwind version to write tokens accordingly, ensuring compatibility with your existing setup.

Creating a design system foundation is streamlined by generating a formal constraint document and token starter simultaneously. This derives color tokens from brand inputs and writes a DESIGN.md file, ensuring branding consistency from the project start.

To generate a DESIGN.md file, run the setup command at your project root with your project name, brand hue, and brand lightness. It writes the constraint document to the root or frontend directory, skipping generation if one already exists.

Generating design tokens will not overwrite your CSS file. The process ensures idempotent writes by appending the @theme token starter to your existing CSS when appropriate, and skips generation if a DESIGN.md file already exists.