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

Skill	Style	Description
figma	Dark	Design tool with collaborative interface
github	Dark	Developer platform with dark UI
linear	Dark	Project management with Inter font, 4px grid
vercel	Light	Developer platform with minimal black/white
supabase	Dark	Database platform with green accents
railway	Dark	Infrastructure with minimal dark aesthetic
neon	Dark	Serverless Postgres with neon accents
planetscale	Dark	Serverless MySQL platform
upstash	Dark	Serverless Redis/Kafka
convex	Light	Reactive backend platform
replit	Dark	Browser IDE with dark theme
retool	Light	Internal tool builder
webflow	Light	No-code website builder
resend	Dark	Email API with clean dark UI
clerk	Light	Authentication platform
liveblocks	Light	Real-time collaboration API

Productivity & Collaboration

Skill	Style	Description
notion	Light	Productivity app with clean, minimal design
slack	Light	Enterprise messaging with aubergine accent
discord	Light	Community platform with signature blurple
shortcut	Light	Developer project management
raycast	Dark	macOS launcher with dark aesthetic
warp	Dark	Modern terminal UI
superhuman	Light	Premium email client
front	Light	Team inbox platform
loom	Light	Video messaging platform
miro	Light	Collaborative whiteboard
pitch	Light	Modern presentation tool
tldraw	Light	Minimal canvas/whiteboard
cal	Light	Scheduling platform
coda	Light	All-in-one doc platform
craft	Light	Beautiful Apple-style docs
airtable	Light	Spreadsheet-database hybrid

Notes & Todo

Skill	Style	Description
obsidian	Dark	Knowledge graph notes
bear	Light	Markdown notes with elegant UI
things	Light	macOS todo perfection
todoist	Light	Cross-platform todo
ticktick	Light	Feature-rich todo app
mem	Light	AI-first notes app

Fintech & Banking

Skill	Style	Description
stripe	Light	Payment platform with blue accents
mercury	Dark	Modern banking with lavender accents
robinhood	Dark	Fintech with signature green
ramp	Light	Corporate card platform
brex	Light	Premium fintech design
plaid	Light	API-first financial platform
wise	Light	International money transfer
monzo	Light	Neobank with coral accents
n26	Light	European mobile bank

HR & Business

Skill	Style	Description
gusto	Light	HR/Payroll with friendly aesthetic
deel	Light	Global payroll platform
rippling	Light	Enterprise HR modern UI
lattice	Light	People management platform
ashby	Light	Modern ATS design
intercom	Light	Customer messaging platform

Analytics & Data

Skill	Style	Description
amplitude	Light	Product analytics
mixpanel	Light	Event analytics UI
posthog	Light	Open-source analytics
segment	Light	Data platform UI
launchdarkly	Light	Feature flag platform

AI & ML

Skill	Style	Description
anthropic	Light	AI company with warm cream aesthetic
openai	Light	AI company with clean white aesthetic
hugging-face	Light	ML model hub community
jasper	Light	AI writing tool
copy-ai	Light	Content generation UI
codeium	Dark	AI coding assistant
weights-biases	Light	ML experiment tracking
descript	Light	AI video editing

E-commerce & Payments

Skill	Style	Description
shopify	Light	E-commerce platform
gumroad	Light	Creator commerce
lemonsqueezy	Light	Digital product sales
paddle	Light	SaaS payments platform

Email & Marketing

Skill	Style	Description
loops	Light	Modern email marketing
mailchimp	Light	Email marketing leader
convertkit	Light	Creator email platform
beehiiv	Light	Newsletter platform
substack	Light	Publishing platform

Publishing & Reading

Skill	Style	Description
ghost	Light	Open-source publishing
readwise	Light	Reading highlight aggregator
matter	Light	Read-later app

Design Community

Skill	Style	Description
dribbble	Light	Designer showcase
awwwards	Light	Web design awards
mobbin	Light	Mobile UI patterns
framer	Light	Website builder aesthetic

Consumer & Social

Skill	Style	Description
apple	Light	Gold standard consumer design
spotify	Dark	Music platform with charcoal theme
airbnb	Light	Travel platform with warm tones
pinterest	Light	Visual discovery platform
arc	Light	Revolutionary browser UI

---

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