Skills for DesignBest Claude skills for design systems
4 of these were scored on one shared brief, a Tally budgeting-app landing page. 8 are listed without a score, because they fit the task.
Listings
ux-ui-agent-skills
Its banned-defaults list fixed the baseline's tells directly: no emoji, one lead feature instead of an equal grid, a lead pricing plan, off-black on warm white and a big display headline. Solid and tasteful; we could not run the kit's own scripted gates because only the skill folder was available.
claude-design-system-prompt
The aesthetic-direction and slop-check skills produced a calm, coherent fintech page: a real product panel in the hero, a bento feature block with one lead cell, and borders instead of shadows. It also renders a visible design-system summary, as the skill requires, which some will see as clutter.
UI UX Pro Max
We ran its own design-system generator on the brief. It picked a 'Vibrant & Block-based' style, blue/purple/pink and Russo One with Chakra Petch, a pairing it tags for gaming and esports, and a testimonials-led layout we had no real quotes for. Following it gave a bold, accessible block layout with SVG icons and visible focus states, but the look doesn't fit a calm budgeting app. Good rules and checklists; the auto-picked direction needs a designer's veto.
material-3-skill
Applied faithfully, it yields a correct-looking Material 3 page: tonal surfaces, pill buttons, MD3 type scale and Material Symbols. That is an improvement in consistency over the baseline, but it reads as an Android app shell rather than a distinctive marketing page.
Manavarya09/design-extract Extracts a website's design system as DTCG tokens.
design-extract
Extracts a website's design system as DTCG tokens.
southleft/figma-console-mcp A Figma MCP server for extracting, creating, and debugging design systems.
figma-console-mcp
A Figma MCP server for extracting, creating, and debugging design systems.
styleseed
A design-method engine with 23 agent skills.
dominikmartn/hue Learns a brand and turns it into a design system.
hue
Learns a brand and turns it into a design system.
ancoleman/ai-design-components UI, UX, and backend component skills, grouped into plugin bundles you can install.
ai-design-components
UI, UX, and backend component skills, grouped into plugin bundles you can install.
marvkr/better-design An open-source design MCP server, plus a shadcn/ui registry of AI design systems.
better-design
An open-source design MCP server, plus a shadcn/ui registry of AI design systems.
redongreen/uSpec Generates design-system docs for UI components from your AI agent.
uSpec
Generates design-system docs for UI components from your AI agent.
southleft/skills-for-figma Open-source agent skills for Figma's native MCP server: tokens, components, and accessibility.
skills-for-figma
Open-source agent skills for Figma's native MCP server: tokens, components, and accessibility.
Questions
How is "Claude skills for design systems" ranked?
Tested tools come first, ordered by the editorial score from one standard brief, a Tally budgeting-app landing page, then by GitHub stars. Tools we did not score follow, ordered by stars. A listing is on this page because it has this task tag.
Does every tool on this page have a score?
4 of 12 listings were scored on that brief. The others are included because they fit the task, not because they were scored.