# 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

```bash
npx skills add ihlamury/design-skills
```

### Manual Installation

```bash
# 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](./skills/figma/) | Dark | Design tool with collaborative interface |
| [github](./skills/github/) | Dark | Developer platform with dark UI |
| [linear](./skills/linear/) | Dark | Project management with Inter font, 4px grid |
| [vercel](./skills/vercel/) | Light | Developer platform with minimal black/white |
| [supabase](./skills/supabase/) | Dark | Database platform with green accents |
| [railway](./skills/railway/) | Dark | Infrastructure with minimal dark aesthetic |
| [neon](./skills/neon/) | Dark | Serverless Postgres with neon accents |
| [planetscale](./skills/planetscale/) | Dark | Serverless MySQL platform |
| [upstash](./skills/upstash/) | Dark | Serverless Redis/Kafka |
| [convex](./skills/convex/) | Light | Reactive backend platform |
| [replit](./skills/replit/) | Dark | Browser IDE with dark theme |
| [retool](./skills/retool/) | Light | Internal tool builder |
| [webflow](./skills/webflow/) | Light | No-code website builder |
| [resend](./skills/resend/) | Dark | Email API with clean dark UI |
| [clerk](./skills/clerk/) | Light | Authentication platform |
| [liveblocks](./skills/liveblocks/) | Light | Real-time collaboration API |

### Productivity & Collaboration

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

### Notes & Todo

| Skill | Style | Description |
|-------|-------|-------------|
| [obsidian](./skills/obsidian/) | Dark | Knowledge graph notes |
| [bear](./skills/bear/) | Light | Markdown notes with elegant UI |
| [things](./skills/things/) | Light | macOS todo perfection |
| [todoist](./skills/todoist/) | Light | Cross-platform todo |
| [ticktick](./skills/ticktick/) | Light | Feature-rich todo app |
| [mem](./skills/mem/) | Light | AI-first notes app |

### Fintech & Banking

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

### HR & Business

| Skill | Style | Description |
|-------|-------|-------------|
| [gusto](./skills/gusto/) | Light | HR/Payroll with friendly aesthetic |
| [deel](./skills/deel/) | Light | Global payroll platform |
| [rippling](./skills/rippling/) | Light | Enterprise HR modern UI |
| [lattice](./skills/lattice/) | Light | People management platform |
| [ashby](./skills/ashby/) | Light | Modern ATS design |
| [intercom](./skills/intercom/) | Light | Customer messaging platform |

### Analytics & Data

| Skill | Style | Description |
|-------|-------|-------------|
| [amplitude](./skills/amplitude/) | Light | Product analytics |
| [mixpanel](./skills/mixpanel/) | Light | Event analytics UI |
| [posthog](./skills/posthog/) | Light | Open-source analytics |
| [segment](./skills/segment/) | Light | Data platform UI |
| [launchdarkly](./skills/launchdarkly/) | Light | Feature flag platform |

### AI & ML

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

### E-commerce & Payments

| Skill | Style | Description |
|-------|-------|-------------|
| [shopify](./skills/shopify/) | Light | E-commerce platform |
| [gumroad](./skills/gumroad/) | Light | Creator commerce |
| [lemonsqueezy](./skills/lemonsqueezy/) | Light | Digital product sales |
| [paddle](./skills/paddle/) | Light | SaaS payments platform |

### Email & Marketing

| Skill | Style | Description |
|-------|-------|-------------|
| [loops](./skills/loops/) | Light | Modern email marketing |
| [mailchimp](./skills/mailchimp/) | Light | Email marketing leader |
| [convertkit](./skills/convertkit/) | Light | Creator email platform |
| [beehiiv](./skills/beehiiv/) | Light | Newsletter platform |
| [substack](./skills/substack/) | Light | Publishing platform |

### Publishing & Reading

| Skill | Style | Description |
|-------|-------|-------------|
| [ghost](./skills/ghost/) | Light | Open-source publishing |
| [readwise](./skills/readwise/) | Light | Reading highlight aggregator |
| [matter](./skills/matter/) | Light | Read-later app |

### Design Community

| Skill | Style | Description |
|-------|-------|-------------|
| [dribbble](./skills/dribbble/) | Light | Designer showcase |
| [awwwards](./skills/awwwards/) | Light | Web design awards |
| [mobbin](./skills/mobbin/) | Light | Mobile UI patterns |
| [framer](./skills/framer/) | Light | Website builder aesthetic |

### Consumer & Social

| Skill | Style | Description |
|-------|-------|-------------|
| [apple](./skills/apple/) | Light | Gold standard consumer design |
| [spotify](./skills/spotify/) | Dark | Music platform with charcoal theme |
| [airbnb](./skills/airbnb/) | Light | Travel platform with warm tones |
| [pinterest](./skills/pinterest/) | Light | Visual discovery platform |
| [arc](./skills/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

```bash
# 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:
```bash
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

```bash
# 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

```bash
# 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](https://codia.ai) key for design analysis
- [ScreenshotOne](https://screenshotone.com) key for screenshots

See [scripts/scripts.md](./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
