A 4-skill bundle for AI coding agents: extract-design-system + design-system-patterns + awesome-design-systems + animated-landing-workflow. Install once, have your agent handle frontend work the way a senior design-system engineer + motion designer would — from token extraction to Awwwards-caliber animated landings.
Built for Claude Code, Cursor, Warp, Cline, Amp, Antigravity, OpenCode, and every other agent that speaks the skills.sh ecosystem format.
npx skills add arvindrk/extract-design-system@extract-design-system --global --yes
npx skills add wshobson/agents@design-system-patterns --global --yes
npx skills add pato-gonzalez/design-system-stack@awesome-design-systems --global --yes
npx skills add pato-gonzalez/design-system-stack@animated-landing-workflow --global --yes
npx skills list --global # verify all 4 show upThat's it. Four globally-installed skills, available to every AI agent on your machine that supports the skills.sh format.
Paste this block to any AI coding agent (Claude Code, Cursor, Warp Agent, etc.). The agent will read the commands and install everything globally without further input.
Please install the Design System Stack — a 4-skill bundle that gives AI agents
senior-level knowledge for frontend, UI, design-system, and animated-landing
work. Run the following commands exactly and verify at the end. All skills
install globally (available across every project), use `--yes` to skip prompts.
```bash
npx skills add arvindrk/extract-design-system@extract-design-system --global --yes
npx skills add wshobson/agents@design-system-patterns --global --yes
npx skills add pato-gonzalez/design-system-stack@awesome-design-systems --global --yes
npx skills add pato-gonzalez/design-system-stack@animated-landing-workflow --global --yes
```
After installation, verify with:
```bash
npx skills list --global
```
You should see all four skills listed. From this point, use them as the
primary reference for:
- **extract-design-system** (PRIMARY) — extracting tokens and design primitives
from existing websites / codebases
- **design-system-patterns** (PRIMARY) — token hierarchies, theming, variant
systems, Style Dictionary, component architecture
- **awesome-design-systems** (COMPLEMENTARY) — catalog of 185 shipped design
systems indexed by feature flags (Components / Voice & Tone / Designers Kit /
Source code); use for benchmarking, citation, and finding real-world
precedents
- **animated-landing-workflow** (APPLIED WORKFLOW) — a reproducible pipeline
for producing Awwwards-caliber animated landings using Claude Design as the
orchestrator plus motionsites.ai, higgsfield.io, Dribbble, shots.so, and
land-book as accelerators. Use when the user asks to design, prototype,
animate, or ship a landing page with motion.
When the user asks for frontend or design-system work, consult the two PRIMARY
skills first; cite concrete precedents from the COMPLEMENTARY catalog. When
the user asks for a landing page, animated hero, or motion-heavy visual work,
load the APPLIED WORKFLOW skill to orchestrate the full pipeline — it will
pull from the other three as needed and hand off to Claude Code at the end.1. extract-design-system — PRIMARY
Author: arvindrk · License: MIT
Extracts design primitives (tokens, type scales, color scales, spacing) from a public website and generates starter token files for a new project. Use when you need to reverse-engineer an existing product's design language into a token set you can edit.
Example prompt after install:
"Extract the design tokens from stripe.com and generate starter CSS custom properties + a tokens.json for a new project."
2. design-system-patterns — PRIMARY
Author: Seth Hobson (wshobson) · License: MIT
Token hierarchies (primitive → semantic → component), theming infrastructure (CSS custom properties + React context providers + prefers-color-scheme detection), variant systems with class-variance-authority, Style Dictionary pipelines for multi-platform token generation (CSS/iOS/Android), and component architecture patterns (compound, polymorphic, headless, slot-based).
Example prompt after install:
"Set up a theme switcher in this Next.js project with light, dark, and system modes, using CSS custom properties and a React context provider."
Catalog data source: alexpate/awesome-design-systems (Unlicense, public domain) Skill author: pato-gonzalez · License: MIT
A searchable catalog of 185 publicly documented design systems (Material, Carbon, Polaris, Fluent, GOV.UK, Atlassian, Salesforce Lightning, Chakra, Mantine, shadcn/ui, Radix, and more). Each entry is indexed by 4 upstream feature flags:
- Components — has coded patterns / working examples (180/185)
- Voice & Tone — publishes editorial language guidance (77/185)
- Designers Kit — ships a Figma/Sketch/XD/PS file (85/185)
- Source code — implementation repo is public (132/185)
The SKILL.md includes headline stats, curated category exemplars (big tech, government, enterprise SaaS, OSS React libraries, travel/retail, fintech), and a routing table so the agent loads only the reference file that matches the question.
Example prompts after install:
- "Show me 3 design systems with strong voice & tone guidance I can reference."
- "Find me open-source React design systems I can read the code of."
- "How does Shopify Polaris handle empty states?"
- "Give me 3 gov design systems with downloadable Figma kits."
Workflow source: Viktor Oddy (@viktoroddy) · Skill author: pato-gonzalez · License: MIT
An applied pipeline for producing top-tier animated landings with Claude Design (Anthropic Labs, launched 2026-04-17, powered by Claude Opus 4.7) as the orchestrator. Five accelerator tools feed Claude Design at specific stages:
| Tool | Role |
|---|---|
| motionsites.ai | Animated background templates → export to LLM → self-hosted code |
| higgsfield.io (or Kling 3) | AI-generated animation previews for style exploration |
| Dribbble | Component-level inspiration (buttons, stat cards, micro-interactions) |
| shots.so | Showcase / video-edit templates for portfolio & social posts |
| land-book | Full-page landing templates as layout skeletons |
The skill ships a 6-stage pipeline (inspiration → asset generation → token decisions → Claude Design prototype → Claude Code handoff → showcase) with per-stage checklists, prompts, and a handoff-bundle guide. It uses the other three skills in this stack (catalog lookups, token decisions, extraction if inheriting a brand) and hands off to animation-code skills like awwwards-animations at the implementation stage.
Example prompts after install:
- "Help me build an animated landing page for a fintech product."
- "Design a hero with a moving background using Claude Design, then hand off to Claude Code."
- "Turn this Dribbble shot into a live landing page using the animated-landing workflow."
- "Walk me through the handoff bundle from Claude Design to Claude Code."
If you can't use the skills.sh CLI, or want to vendor this repo directly:
git clone https://github.com/pato-gonzalez/design-system-stack.git
mkdir -p ~/.agents/skills
cp -r design-system-stack/skills/awesome-design-systems ~/.agents/skills/
cp -r design-system-stack/skills/animated-landing-workflow ~/.agents/skills/
# Optional: symlink into Claude Code's skills directory
ln -sf ~/.agents/skills/awesome-design-systems ~/.claude/skills/awesome-design-systems
ln -sf ~/.agents/skills/animated-landing-workflow ~/.claude/skills/animated-landing-workflow
# For the two PRIMARY skills, install from their upstreams:
npx skills add arvindrk/extract-design-system@extract-design-system --global --yes
npx skills add wshobson/agents@design-system-patterns --global --yesdesign-system-stack/
├── README.md ← you are here
├── LICENSE ← MIT
├── CREDITS.md ← detailed attributions
├── install.sh ← one-shot bash installer
├── skills/
│ ├── awesome-design-systems/
│ │ ├── SKILL.md ← manifest: stats, flag semantics, exemplars, routing
│ │ └── references/
│ │ ├── all-systems.md (199 lines — all 185 entries)
│ │ ├── notable-by-category.md (177 lines — curated groupings)
│ │ ├── open-source.md (138 lines — 132 OSS systems)
│ │ ├── with-designers-kit.md ( 89 lines — 85 systems w/ kits)
│ │ └── with-voice-and-tone.md ( 81 lines — 77 systems w/ voice)
│ └── animated-landing-workflow/
│ ├── SKILL.md ← manifest: toolchain, pipeline, stack integration
│ └── references/
│ ├── tool-inventory.md ← deep dive on each of the 6 tools
│ ├── workflow-pipeline.md ← 6-stage pipeline, brief → ship
│ └── handoff-to-code.md ← Claude Design → Claude Code mechanics
└── tools/
├── parse.py ← re-parse upstream catalog README into JSON
└── build.py ← regenerate catalog reference files from JSON
What's NOT in this repo: the two external PRIMARY skills. They remain at their upstream repos and are installed directly from there via npx skills add. This is by design — no re-distribution, no sync drift, upstream gets all the install counts.
To pull the latest entries from the upstream alexpate/awesome-design-systems repo:
# From repo root
curl -s https://raw.githubusercontent.com/alexpate/awesome-design-systems/master/README.md -o /tmp/ads-readme.md
python3 tools/parse.py /tmp/ads-readme.md > /tmp/ads-entries.json
python3 tools/build.py /tmp/ads-entries.jsonThen update the "captured" date at the top of skills/awesome-design-systems/SKILL.md and open a PR.
This project is nothing without its upstream sources. Full attribution in CREDITS.md. Short version:
Skills:
- arvindrk — extract-design-system
- Seth Hobson (wshobson) — agents/design-system-patterns
- Alex Pate (alexpate) — awesome-design-systems (catalog data for skill #3)
- Viktor Oddy (@viktoroddy) — the animated-landing workflow itself (source of skill #4)
Tools orchestrated by skill #4:
- Anthropic — Claude Design (the orchestrator, launched 2026-04-17)
- motionsites.ai · higgsfield.io · Dribbble · shots.so · land-book
If this repo is useful to you, please star the upstream repos before this one, and credit Viktor Oddy when teaching the workflow.
PRs welcome for:
- Fixing dead links in the catalog
- Adding new categories or exemplar systems
- Improving
SKILL.mdtrigger coverage - Porting the skill to new agent ecosystems beyond skills.sh
MIT — use it, fork it, improve it.