UI Skills

Opinionated UI constraints extracted from the best design systems. Use these skills to help AI agents build pixel-accurate, consistent interfaces.

87 design skills extracted from leading companies including Linear, Stripe, Figma, Apple, and more.

Installation

Claude Code / Cursor / Copilot

npx skills add ihlamury/design-skills

Manual Installation

# Clone the repo
git clone https://github.com/ihlamury/design-skills.git

# Copy a skill to your project
cp -r design-skills/skills/linear ~/.claude/skills/

Direct Download

Download individual SKILL.md files from the skills/ directory.

Available Skills (87)

Developer Tools & Platforms

Productivity & Collaboration

Notes & Todo

Fintech & Banking

HR & Business

Analytics & Data

AI & ML

E-commerce & Payments

Email & Marketing

Publishing & Reading

Design Community

Consumer & Social

What's Inside Each Skill

Each skill contains:

• Colors - Semantic tokens (surface, text, border colors)
• Typography - Font families, sizes, weights, text styles
• Spacing - Grid system and spacing scale
• Borders - Border radius and width scales
• Layout - Viewport and component patterns
• Components - Button, input, card specifications
• Interactive States - Hover, focus, disabled states
• Animation - Timing and performance guidelines

Constraint Hierarchy

• MUST - Absolute requirements
• SHOULD - Strong recommendations
• NEVER - Explicit prohibitions

Usage

With Claude Code

# Install all skills
npx skills add ihlamury/design-skills

# Then in your prompt:
# "Build a dashboard using the Linear UI skills"

With Cursor / Copilot

1. Copy the skill file to your project:

curl -o .cursor/skills/linear.md https://raw.githubusercontent.com/ihlamury/design-skills/main/skills/linear/SKILL.md

2. Reference it in your prompt:

@linear.md Build a settings page following these design constraints

With Claude.ai

1. Go to Project Knowledge in your Claude project
2. Upload the SKILL.md file
3. Claude will automatically follow the constraints

With Any AI Agent

Copy the contents of any SKILL.md file directly into your prompt:

You are building a fintech dashboard. Follow these design constraints exactly:

[paste SKILL.md contents here]

Now build me a transaction history component.

Example Prompts

Dashboard:

Using the Linear UI skills, build a project management dashboard with:
- Sidebar navigation
- Project list
- Task cards

Landing Page:

Using the Stripe UI skills, create a pricing page with:
- Three tier cards
- Feature comparison
- CTA buttons

Dark Mode App:

Using the Spotify UI skills, build a music player interface with:
- Album art display
- Playback controls
- Playlist sidebar

Fintech Dashboard:

Using the Mercury UI skills, build a banking dashboard with:
- Account balance cards
- Transaction history
- Transfer modal

Developer Tool:

Using the Supabase UI skills, build a database management interface with:
- Table explorer
- Query editor
- Schema viewer

What You Get

When an AI uses these skills, it will:

• Use the exact color tokens (#080A0A instead of arbitrary grays)
• Apply consistent typography (Inter, correct font sizes)
• Follow the spacing grid (4px or 8px increments)
• Match border radius and component styles
• Respect the constraint hierarchy (MUST/SHOULD/NEVER)

Extraction Pipeline

This repository includes tools to extract design skills from any website.

Quick Start

# Extract a single website
python scripts/extract_ui.py --url https://example.com --name Example

# Generate skill from extraction
python ui-skills/generate_skills.py --input ui_extractions_json/example.json --name Example

Batch Extraction

# Check status
python scripts/extract_ui.py --status

# Extract all websites
python scripts/extract_ui.py --all

# Generate all skills
python scripts/generate_all_skills.py

Requirements

• Python 3.8+
• Codia API key for design analysis
• ScreenshotOne key for screenshots

See scripts/scripts.md for full documentation.

Contributing

Want to add a new design system?

Option 1: Submit a URL

Open an issue with the website URL and we'll extract it.

Option 2: Manual PR

1. Create skills/{company}/SKILL.md with YAML frontmatter
2. Add skills/{company}/metadata.json
3. Update this README

License

MIT