Updated 8mo ago
by ihlamury
design-skills
Opinionated UI constraints extracted from the best design systems. Use with AI agents to build pixel-accurate interfaces.
95 GitHub stars (95)
+5 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | +1 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | +2 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | +2 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | 0 |
- 30 skills (30 skills found in its SKILL.md files)
- 13 forks (13 forks)
- 8mo ago last update (Last updated 8mo ago)
Install
Skills CLI
npx skills add ihlamury/design-skills
Asks which skills and agents to install. Just one: npx skills add ihlamury/design-skills --skill airbnb-ui-skills — add -g for every project.
Claude Code
git clone https://github.com/ihlamury/design-skillscp -r "design-skills/skills/airbnb" ~/.claude/skills/
Copies the airbnb-ui-skills skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add ihlamury/design-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md — showing the first 30 of 87 files.
-
airbnb-ui-skills
Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.
skills/airbnb/SKILL.md on GitHub (opens in a new tab) -
airtable-ui-skills
Airtable's UI design system. Use when building interfaces inspired by Airtable's aesthetic - light mode, Inter font, 4px grid.
skills/airtable/SKILL.md on GitHub (opens in a new tab) -
amplitude-ui-skills
Amplitude's UI design system. Use when building interfaces inspired by Amplitude's aesthetic - light mode, Inter font, 4px grid.
skills/amplitude/SKILL.md on GitHub (opens in a new tab) -
anthropic-ui-skills
Anthropic's UI design system. Use when building interfaces inspired by Anthropic's aesthetic - light mode, Inter font, 4px grid.
skills/anthropic/SKILL.md on GitHub (opens in a new tab) -
apple-ui-skills
Apple's UI design system. Use when building interfaces inspired by Apple's aesthetic - light mode, Inter font, 4px grid.
skills/apple/SKILL.md on GitHub (opens in a new tab) -
arc-ui-skills
Arc's UI design system. Use when building interfaces inspired by Arc's aesthetic - light mode, Inter font, 4px grid.
skills/arc/SKILL.md on GitHub (opens in a new tab) -
ashby-ui-skills
Ashby's UI design system. Use when building interfaces inspired by Ashby's aesthetic - dark mode, Inter font, 4px grid.
skills/ashby/SKILL.md on GitHub (opens in a new tab) -
awwwards-ui-skills
Awwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid.
skills/awwwards/SKILL.md on GitHub (opens in a new tab) -
bear-ui-skills
Bear's UI design system. Use when building interfaces inspired by Bear's aesthetic - light mode, Inter font, 4px grid.
skills/bear/SKILL.md on GitHub (opens in a new tab) -
beehiiv-ui-skills
Beehiiv's UI design system. Use when building interfaces inspired by Beehiiv's aesthetic - light mode, Inter font, 4px grid.
skills/beehiiv/SKILL.md on GitHub (opens in a new tab) -
brex-ui-skills
Brex's UI design system. Use when building interfaces inspired by Brex's aesthetic - light mode, Inter font, 4px grid.
skills/brex/SKILL.md on GitHub (opens in a new tab) -
cal-ui-skills
Cal's UI design system. Use when building interfaces inspired by Cal's aesthetic - light mode, Inter font, 4px grid.
skills/cal/SKILL.md on GitHub (opens in a new tab) -
clerk-ui-skills
Clerk's UI design system. Use when building interfaces inspired by Clerk's aesthetic - light mode, Inter font, 4px grid.
skills/clerk/SKILL.md on GitHub (opens in a new tab) -
coda-ui-skills
Coda's UI design system. Use when building interfaces inspired by Coda's aesthetic - light mode, Inter font, 4px grid.
skills/coda/SKILL.md on GitHub (opens in a new tab) -
codeium-ui-skills
Codeium's UI design system. Use when building interfaces inspired by Codeium's aesthetic - dark mode, Inter font, 4px grid.
skills/codeium/SKILL.md on GitHub (opens in a new tab) -
convertkit-ui-skills
Convertkit's UI design system. Use when building interfaces inspired by Convertkit's aesthetic - light mode, Inter font, 4px grid.
skills/convertkit/SKILL.md on GitHub (opens in a new tab) -
convex-ui-skills
Convex's UI design system. Use when building interfaces inspired by Convex's aesthetic - dark mode, Inter font, 4px grid.
skills/convex/SKILL.md on GitHub (opens in a new tab) -
copy-ai-ui-skills
Copy Ai's UI design system. Use when building interfaces inspired by Copy Ai's aesthetic - light mode, Inter font, 4px grid.
skills/copy-ai/SKILL.md on GitHub (opens in a new tab) -
craft-ui-skills
Craft's UI design system. Use when building interfaces inspired by Craft's aesthetic - light mode, Inter font, 4px grid.
skills/craft/SKILL.md on GitHub (opens in a new tab) -
deel-ui-skills
Deel's UI design system. Use when building interfaces inspired by Deel's aesthetic - light mode, Inter font, 4px grid.
skills/deel/SKILL.md on GitHub (opens in a new tab) -
descript-ui-skills
Descript's UI design system. Use when building interfaces inspired by Descript's aesthetic - dark mode, Inter font, 4px grid.
skills/descript/SKILL.md on GitHub (opens in a new tab) -
discord-ui-skills
Discord's UI design system. Use when building interfaces inspired by Discord's aesthetic - light mode, Inter font, 4px grid.
skills/discord/SKILL.md on GitHub (opens in a new tab) -
dribbble-ui-skills
Dribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.
skills/dribbble/SKILL.md on GitHub (opens in a new tab) -
figma-ui-skills
Figma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.
skills/figma/SKILL.md on GitHub (opens in a new tab) -
framer-ui-skills
Framer's UI design system. Use when building interfaces inspired by Framer's aesthetic - dark mode, Inter font, 4px grid.
skills/framer/SKILL.md on GitHub (opens in a new tab) -
front-ui-skills
Front's UI design system. Use when building interfaces inspired by Front's aesthetic - light mode, Inter font, 4px grid.
skills/front/SKILL.md on GitHub (opens in a new tab) -
ghost-ui-skills
Ghost's UI design system. Use when building interfaces inspired by Ghost's aesthetic - dark mode, Inter font, 4px grid.
skills/ghost/SKILL.md on GitHub (opens in a new tab) -
github-ui-skills
GitHub's UI design system. Use when building interfaces inspired by GitHub's aesthetic - dark mode, Inter font, 4px grid.
skills/github/SKILL.md on GitHub (opens in a new tab) -
gumroad-ui-skills
Gumroad's UI design system. Use when building interfaces inspired by Gumroad's aesthetic - dark mode, Inter font, 4px grid.
skills/gumroad/SKILL.md on GitHub (opens in a new tab) -
gusto-ui-skills
Gusto's UI design system. Use when building interfaces inspired by Gusto's aesthetic - light mode, Inter font, 4px grid.
skills/gusto/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.