Ui Design System
Document tokens, components, and principles so agents and teammates ship UI that stays on-brand.
Overview
ui-design-system is an agent skill most often used in Build (also Validate prototype, Build docs) that turns a design-system documentation skeleton—principles, palettes, and metadata—into agent-readable specs for consist
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill ui-design-systemWhat is this skill?
- Structured design-system doc with name, version, owner, status, and last-updated metadata
- Four numbered design principles with one-sentence guidance each (clarity, consistency, accessibility, progressive disclo
- Brand and neutral color tables with hex, RGB, and usage columns
- Explicit WCAG 2.1 AA expectation in the principles section
- Progressive-disclosure principle for complexity management in UI
- 4 numbered design principle slots in the template
- WCAG 2.1 AA referenced in the principles section
- Separate brand and neutral color palette tables
Adoption & trust: 853 installs on skills.sh; 17.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping screens fast but have no centralized, machine-readable record of colors, principles, and ownership for your product UI.
Who is it for?
Solo builders formalizing a small product design language before scaling pages or handing work to an agent.
Skip if: Teams that already maintain a complete Figma or Storybook system with no need to regenerate documentation from a blank template.
When should I use this skill?
You need to create or update design-system documentation with principles, metadata, and color palettes for agent-driven UI work.
What do I get? / Deliverables
You get a structured design-system doc scaffold agents can extend into full tokens and component rules before more pixels are changed.
- Design-system markdown with principles and palette tables
- Ownership and version metadata block for the system
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Design systems are authored and maintained while the product UI is being built; the template anchors the canonical visual language shelf in Build. Frontend is where color palettes, typography, and component usage rules directly constrain screens and flows.
Where it fits
Capture provisional brand colors and four principles before approving a landing prototype.
Give the agent hex tables and usage rules while implementing dashboard components.
Publish an in-repo DESIGN_SYSTEM.md agents can cite on every UI pull request.
How it compares
Use as a documentation template skill, not a live design-token MCP server or automated contrast checker.
Common Questions / FAQ
Who is ui-design-system for?
Indie and solo builders documenting a lightweight design system for SaaS, mobile, or extension UIs when agents need written rules instead of guesswork.
When should I use ui-design-system?
During Validate when prototyping look-and-feel, during Build frontend when locking palettes and principles, and during Build docs when publishing system references for the repo.
Is ui-design-system safe to install?
Treat it as local documentation guidance; review the Security Audits panel on this Prism page and inspect the skill package in your repo before granting broad filesystem access.
SKILL.md
READMESKILL.md - Ui Design System
# Design System Documentation ## System Info | Field | Value | |-------|-------| | **Name** | [Design System Name] | | **Version** | [X.Y.Z] | | **Owner** | [Team/Person] | | **Status** | Active / Beta / Deprecated | | **Last Updated** | YYYY-MM-DD | --- ## Design Principles The following principles guide all design decisions in this system: 1. **[Principle 1 Name]** - [One sentence description. Example: "Clarity over cleverness - every element should have an obvious purpose."] 2. **[Principle 2 Name]** - [One sentence description. Example: "Consistency breeds confidence - similar actions should look and behave the same."] 3. **[Principle 3 Name]** - [One sentence description. Example: "Accessible by default - every component must meet WCAG 2.1 AA standards."] 4. **[Principle 4 Name]** - [One sentence description. Example: "Progressive disclosure - show only what is needed, reveal complexity on demand."] --- ## Color Palette ### Brand Colors | Name | Hex | RGB | Usage | |------|-----|-----|-------| | Primary | #[XXXXXX] | rgb(X, X, X) | Primary actions, links, key UI elements | | Secondary | #[XXXXXX] | rgb(X, X, X) | Secondary actions, accents | | Accent | #[XXXXXX] | rgb(X, X, X) | Highlights, badges, notifications | ### Neutral Colors | Name | Hex | Usage | |------|-----|-------| | Gray-900 | #[XXXXXX] | Primary text | | Gray-700 | #[XXXXXX] | Secondary text | | Gray-500 | #[XXXXXX] | Placeholder text, disabled states | | Gray-300 | #[XXXXXX] | Borders, dividers | | Gray-100 | #[XXXXXX] | Backgrounds, hover states | | White | #FFFFFF | Page background, card background | ### Semantic Colors | Name | Hex | Usage | |------|-----|-------| | Success | #[XXXXXX] | Success messages, positive indicators | | Warning | #[XXXXXX] | Warning messages, caution indicators | | Error | #[XXXXXX] | Error messages, destructive actions | | Info | #[XXXXXX] | Informational messages, tips | ### Accessibility - All text colors must meet WCAG 2.1 AA contrast ratio (4.5:1 for normal text, 3:1 for large text) - Test with color blindness simulators - Never use color as the only indicator of state --- ## Typography Scale ### Font Family - **Primary:** [Font Name] (headings and body) - **Monospace:** [Font Name] (code blocks, technical content) - **Fallback Stack:** [System font stack] ### Type Scale | Name | Size | Weight | Line Height | Usage | |------|------|--------|-------------|-------| | Display | 48px / 3rem | Bold (700) | 1.2 | Hero headings | | H1 | 36px / 2.25rem | Bold (700) | 1.25 | Page titles | | H2 | 28px / 1.75rem | Semibold (600) | 1.3 | Section headings | | H3 | 22px / 1.375rem | Semibold (600) | 1.35 | Subsection headings | | H4 | 18px / 1.125rem | Medium (500) | 1.4 | Card titles, labels | | Body Large | 18px / 1.125rem | Regular (400) | 1.6 | Lead paragraphs | | Body | 16px / 1rem | Regular (400) | 1.5 | Default body text | | Body Small | 14px / 0.875rem | Regular (400) | 1.5 | Secondary text, captions | | Caption | 12px / 0.75rem | Regular (400) | 1.4 | Labels, metadata | --- ## Spacing System ### Base Unit: 4px | Token | Value | Usage | |-------|-------|-------| | space-1 | 4px | Tight spacing (icon padding) | | space-2 | 8px | Compact elements (inline items) | | space-3 | 12px | Related elements (form field gaps) | | space-4 | 16px | Default spacing (paragraph gaps) | | space-5 | 20px | Group spacing (card padding) | | space-6 | 24px | Section spacing | | space-8 | 32px | Large section gaps | | space-10 | 40px | Page section dividers | | space-12 | 48px | Major layout sections | | space-16 | 64px | Page-level spacing | ### Layout Spacing - **Page margin:** space-6 (mobile), space-8 (tablet), space-12 (desktop) - **Card padding:** space-5 - **Form field gap:** space-3 - **Section gap:** space-10 --- ## Component Library ### Component Status Legend - **Stable** - Production ready, fully documented and tested - **Beta** - Functional but may change, use with awareness - **Deprecated** - Scheduled for rem