design-skills
# 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