Skills for Design
Make Claude a better designer
A directory of Claude skills, plugins, and MCP servers for UI, UX, and visual design. We only list tools that change the output.
52 tools, updated Oct 2026
Showing 52 of 52 tools
Directory
Impeccable
Impeccable drops the cream-and-serif default for a loud navy, orange and primary-color landing page set in heavy Archivo, then builds a calmer pine-and-lime dashboard. Pick it if you want a product page with real energy that still holds up on a dense screen.
Hallmark
Hallmark turns Tally into a cheerful yellow-and-pastel brand in Plus Jakarta Sans with big ghost numerals, and the dashboard matches it. The most consistent result in the set, but it took about 12 minutes per brief.
Huashu Design
Huashu swaps Fraunces for Bricolage Grotesque and puts a lime highlighter on a deep forest green. It keeps envelopes as real kraft cards and carries the look into a tidy dashboard. A safe, distinct choice for consumer finance.
claude-design-system-prompt
This system prompt moves Tally to a cool grey-and-ink look with Bricolage Grotesque, Geist and a lime marker, and the dashboard is clean and well organized. One contrast bug on the closing CTA keeps it from a higher score.
ECC Frontend Design Direction
ECC keeps a Fraunces and cream landing page but adds mono labels and a tilted sticky note. The IBM Plex dashboard is more useful than the baseline's, with a sync alert, search and person filters.
frontend-design (Anthropic)
Anthropic's frontend-design gives Tally a mint-and-pastel landing page and a navy-and-manila ledger dashboard, both clearly new. The mobile landing page is wider than the phone, which caps the score.
Taste Skill (design-taste-frontend)
Taste makes the boldest landing page in the set, a white Swiss poster with giant Anton type, electric blue and red. The dashboard looks like a different skill made it, and it scrolls sideways on a phone.
emilkowalski/skills
Emil's design-eng skill keeps a cream-and-forest landing page in Instrument Serif with a tilted phone, and builds a clean near-white Geist dashboard. The landing page repeats the baseline's hero overlap.
Garden Web Design Engineer
Garden's web-design-engineer trades Fraunces for Young Serif and adds an orange-red accent with sage. It's a warm variation on the default, and it repeats the default's habit of a hero card covering the mockup.
Antislop UI
Antislop UI flattens the default into a kraft-and-stamp-red paper look with 4 px corners and flat pricing rows. It's cleaner than the baseline but plainly related. Its dashboard drops the sidebar for a top nav.
Interface Design
Interface Design gives the default a ledger-and-pencil feel with Newsreader and IBM Plex Mono, and adds envelope icons to the dashboard. It's careful work, but you'd still take it for the baseline at a glance.
baoyu-design
Baoyu keeps the baseline's cream-and-green palette in oklch with Instrument Serif and a kraft envelope illustration. It's a nicer-detailed version of the default rather than a new direction.
material-3-skill
Material 3 applies a full tonal M3 system in Roboto Flex, and the dashboard is dense and solid. On the landing page, icon names print as text and a hero card still covers the balance.
Refactoring UI Skills
Refactoring UI turns Tally into a clean, generic Tailwind-style SaaS: Plus Jakarta Sans, a grey scale and emerald, then Inter and slate with teal on the dashboard. Tidy, but anonymous, and the hero card still covers the balance.
UI Craft: Dense Dashboard
UI Craft builds the best dense dashboard in the set: Linear-style IBM Plex on cool grey, with filters, a line chart and a who-spent-what view, all above the fold. The mobile dashboard scrolls sideways, which caps the score.
web-designer
Web Designer makes a sharper editorial take on the default: thin high-contrast Fraunces, kraft envelope cards, a stamp-red accent and a postmark. The palette is still the baseline's, and the mobile dashboard scrolls sideways.
diagram-design
Editorial HTML and SVG diagrams in 44 types, written to avoid Mermaid's default look.
brag
Turns the project you just built into a short launch video
GLips/Figma-Context-MCP An MCP server that gives coding agents layout information from Figma.
Figma-Context-MCP (Framelink)
An MCP server that gives coding agents layout information from Figma.
google-labs-code/stitch-skills Google Labs agent skills for the Stitch MCP server.
Stitch Skills
Google Labs agent skills for the Stitch MCP server.
grab/cursor-talk-to-figma-mcp An MCP integration that lets Claude Code, Cursor, and Codex read and change Figma designs.
TalkToFigma MCP
An MCP integration that lets Claude Code, Cursor, and Codex read and change Figma designs.
Manavarya09/design-extract Extracts a website's design system as DTCG tokens.
design-extract
Extracts a website's design system as DTCG tokens.
logo-design-skill
A skill for logo design principles and the workflow around them.
awesome-design-skills
A list of 67 DESIGN.md and SKILL.md files for design.
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.
figma/mcp-server-guide Figma's guide to its official MCP server.
Figma MCP server (official guide)
Figma's guide to its official MCP server.
oil-oil/beautify-github-readme A skill for designing README files in Claude Code and Codex.
beautify-github-readme
A skill for designing README files in Claude Code and Codex.
jau123/MeiGen-AI-Design-MCP An MCP server for image and video generation, and for visual inspiration, in Claude.
MeiGen-AI-Design-MCP
An MCP server for image and video generation, and for visual inspiration, in Claude.
oil-oil/oil-ui A UI skill for exploring distinct design directions.
oil-ui
A UI skill for exploring distinct design directions.
Vincentwei1021/video-talkcraft A motion-design skill for videos driven by a voiceover.
video-talkcraft
A motion-design skill for videos driven by a voiceover.
dickwu/apple-design-skill Reviews UI and UX against Apple's Human Interface Guidelines.
apple-design-skill
Reviews UI and UX against Apple's Human Interface Guidelines.
agent-vision-toolkit
Vision tools that rebuild a frontend UI from a reference image.
wilwaldon/Claude-Code-Frontend-Design-Toolkit A collection of skills and tools for better-looking frontends in Claude Code.
Claude-Code-Frontend-Design-Toolkit
A collection of skills and tools for better-looking frontends in Claude Code.
rohitg00/awesome-claude-design Claude Design prompts in DESIGN.md files, grouped by aesthetic, plus skills and teardowns.
awesome-claude-design
Claude Design prompts in DESIGN.md files, grouped by aesthetic, plus skills and teardowns.
echris6/motion-video-kit A skill kit for AI-assisted business videos.
motion-video-kit
A skill kit for AI-assisted business videos.
styleseed
A design-method engine with 23 agent skills.
Nutlope/inspo Real websites, searchable over MCP, so an agent can study their design.
inspo
Real websites, searchable over MCP, so an agent can study their design.
dominikmartn/hue Learns a brand and turns it into a design system.
hue
Learns a brand and turns it into a design system.
superdesigndev/superdesign-skill A design skill for coding agents, aimed at UI that doesn't look like a default AI template.
superdesign-skill
A design skill for coding agents, aimed at UI that doesn't look like a default AI template.
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.
ceorkm/mobile-app-ui-design A mobile app UI and UX design skill for Claude Code.
mobile-app-ui-design
A mobile app UI and UX design skill for Claude Code.
Refero skill
A research-first design skill, using the Refero MCP and 150,000+ real app screens and flows.
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.
Bridge
Design in Figma from Claude Code. It connects your terminal to the Figma Plugin API.
LibreUIUX
A UI and UX system for Claude Code: 71 plugins, 93 agents, and 74 skills.
heyadam/claudedesign-to-swiftui Converts HTML prototypes from Claude into SwiftUI views.
claudedesign-to-swiftui
Converts HTML prototypes from Claude into SwiftUI views.
Ashutos1997/claude-design-auditor-skill Audits designs against 19 professional design rules.
Design Auditor
Audits designs against 19 professional design rules.
Sumi
UX and UI guidance for Claude Code: 43 skills, 168 references, and 37 commands.
ddruids/mobbin-skill Structured UI and UX research through the Mobbin MCP.
mobbin-skill
Structured UI and UX research through the Mobbin MCP.
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.
tui-design
Design, mock, build, and audit interfaces for the terminal.
No matches. Try "figma" or suggest one.