UI Spec Skill

Analyze UI screenshots and produce a structured design-to-developer handoff specification with JSONC tokens and an implementation brief.

Invoke with: /ui-spec

Overview

Given one or more screenshots or mockups of a desired UI, this skill produces:

1. Design Tokens (JSONC) — A structured JSON document defining colors, typography, spacing, borders, shadows, components, and theme tokens.
2. Developer Implementation Brief — A natural-language description of the UI to be built.

Analysis Steps

The skill follows a systematic analysis procedure:

1. Screenshot Inventory — Label each screenshot and identify what it contributes
2. Layout Structure — Overall page structure, grids, navigation, content areas
3. Color Palette — Primary, secondary, and gray scales plus named accents
4. Typography — Font families, size scale, weight scale
5. Spacing and Sizing — Padding, margin, gap patterns
6. Borders, Shadows, Effects — Radius scale, shadows, gradients
7. Component Inventory — Every distinct UI component with variants and states
8. Light and Dark Mode — Semantic color slots for both modes
9. Responsive Behavior — Layout changes at each breakpoint

Output Format

Design Tokens

A JSONC block defining:

• Colors — Full 50-950 scales for primary, secondary, and gray; named accents for success, warning, danger, info
• Typography — Font families, size scale, weight scale
• Spacing — Tailwind-compatible rem values
• Borders — Radius scale and border widths
• Shadows — Named shadow definitions (sm, md, lg, xl)
• Themes — Light and dark mode semantic tokens (background, foreground, card, muted, border, etc.)
• Components — Per-component token usage, variants, and states
• Layout — Structure, sidebar, header, content area definitions

Developer Brief

A markdown document describing:

• What the user sees and how the UI feels
• How the token system works
• Color strategy and theme switching
• Responsive behavior at each breakpoint
• Every page/view and its purpose
• Every component and where it appears

Use with Device UI Skill

The UI Spec skill is typically used as a precursor to the Device UI skill. Generate a design specification from mockups, then use it as the design brief input for the Device UI implementation workflow.