Claude design skills for Claude Code and Codex: frontend design, UI generation, design systems, Figma and mockup-to-code. Every skill is security-graded before you install it.
Of the 196 Claude Design Skills for Frontend & UI here, our pick after testing them is Leonxlnx/taste-skill (★ 110.2k). For a look that is not the default: Both builds passed all seven checks and shared almost nothing with the no-skill page: its own typeface, a cooler palette, and a second build that dared an orange accent. See the test →
On 2026-10-10 we ran 10 of these skills. Each built the same landing page twice in a throwaway sandbox, driven by Claude Code (Claude Opus 5.5): a made-up app, fixed copy, the design left open. Claude Code with no skill built it twice as well. Nothing here is a taste score. A browser measured each page: seven checks any landing page should pass, and four things that make pages look alike (headline font, body font, accent colour family, background family), compared with the no-skill pages and between a skill's own two builds.
Changed nothing you can see in a still page: skills (it is about motion; fonts, colours and layout matched the no-skill page); Skills (both builds matched the no-skill page on all four).
Whichever you pick: none of the 22 pages had the old AI look (purple gradient, gradient text, emoji icons, centred hero), with or without a skill. The sameness now is quieter: teal on cream, text left, a status card right.
Ranked by how little a build shares with the page Claude Code made with no skill (headline font, body font, accent family, background family), then by the seven page checks, then GitHub stars. This counts sameness, not taste: look at the pictures. Two builds per skill, one brief.
What we found: None of the 22 pages had the old AI look (a purple accent, gradient text, emoji icons, a centred hero), with or without a skill. The default now is teal on cream with a serif headline, and 2 of 10 skills reproduced it on all four counts; 4 shared one or none. Every skill passed at least 6.5 of the 7 checks. See the control run →
| # | Skill | Shares with the no-skill page (of 4) | Its two builds share (of 4) | Checks passed (of 7) | Failed | Headline font | Evidence |
|---|---|---|---|---|---|---|---|
| 1 | taste-skill ★ 93,722 | 0.5/4 | 3/4 | 7.0/7 | - | Geist | Both builds |
| 2 | ui-ux-pro-max-skill ★ 134,020 One of its two builds scrolled sideways on a phone. |
0.5/4 | 3/4 | 6.5/7 | no sideways scroll on a phone | Varela Round | Both builds |
| 3 | hallmark ★ 29,767 | 1.0/4 | 2/4 | 7.0/7 | - | Hanken Grotesk / Newsreader | Both builds |
| 4 | nothing-design-skill ★ 2,808 One fixed identity: a dot-matrix headline, black on grey, both times. One build scrolled sideways on a phone. |
1.0/4 | 4/4 | 6.5/7 | no sideways scroll on a phone | Doto | Both builds |
| 5 | huashu-design ★ 24,688 The two builds look least alike: different fonts, layout and accent each time. |
1.5/4 | 1/4 | 7.0/7 | - | Archivo / Hind | Both builds |
| 6 | claude-design-system-prompt ★ 1,978 | 1.5/4 | 3/4 | 7.0/7 | - | Bricolage Grotesque | Both builds |
| 7 | baoyu-design ★ 4,260 | 2.0/4 | 2/4 | 7.0/7 | - | Instrument Serif / Young Serif | Both builds |
| 8 | styleseed ★ 973 | 2.0/4 | 1/4 | 7.0/7 | - | Figtree / Inter | Both builds |
| 9 | skills ★ 44,260 These skills are about motion and interaction detail. On fonts, colours and layout both builds match the no-skill page. |
4.0/4 | 4/4 | 7.0/7 | - | Fraunces | Both builds |
| 10 | Skills ★ 6,666 Both builds share the no-skill page's fonts, accent and background. |
4.0/4 | 4/4 | 7.0/7 | - | Fraunces | Both builds |
A Claude design skill has two jobs. The first is getting the interface right. On Design2Code, 484 real web pages rebuilt from screenshots, models mostly fail at recalling the visual elements and at getting the layout right (NAACL 2025), so what a skill adds is structure: a design system, spacing and type rules, a step that looks at the rendered page. The second job is not looking like everyone else's. In a controlled experiment, writers given ideas by a language model wrote stories rated more creative and better written, yet the stories were more similar to each other than those written without it (Science Advances 2024); a second study found the same for ideas across users (C&C 2024). Those studies measured stories and ideas, not interfaces, but the default purple-gradient look of AI-made UI is the same effect, and it is what the most-starred skills on this page set out to stop. Both jobs can be tested: render the page, take screenshots and score them against a checklist, which matched human rankings 94.4% of the time on ArtifactsBench. So we judge a design skill by whether it gives the agent rules and a way to see its own output, and by whether it pushes away from the default.
| Kind | How it works | What it fixes | What to watch |
|---|---|---|---|
| Frontend design 99 · ui-ux-pro-max-skill, taste-skill |
Rules and taste for the agent: type, spacing, colour, what to avoid. | Pushes away from the default look most AI-made pages share. | A skill used by everyone becomes the new default; check it lets you set your own direction. |
| Design systems 51 · open-design, design-extract |
Tokens, components and layout rules the agent builds from. | Consistency across pages, the part models get wrong most often. | Only as good as the system you give it. |
| Figma and design tools 17 · Figma-Context-MCP, figma-console-mcp |
MCP servers and plugins that read from or write to Figma and similar tools. | The agent works from the real design file instead of a description. | Needs an access token to your design files; check the grade. |
| Design to code 11 · onlook, stitch-skills |
Turns a design or a screenshot into working front-end code. | Saves the hand translation from mock-up to markup. | Missing elements and wrong layout are the two errors Design2Code found most; compare the screenshots. |
| Graphics and brand 14 · html-anything, logo-design-skill |
Posters, logos, social images and brand assets. | Visual assets without leaving the agent. | The sameness effect is strongest where everyone asks for the same thing. |
| Design review 4 · designer-skills, design-motion-principles |
Checks a rendered page against design rules and reports what is off. | The "look at your own output" step, as its own tool. | A model's critique improves a lot with examples from real designers; generic critique is shallow. |
No study yet measures sameness in AI-made interfaces directly; the evidence for it comes from stories and ideas, which is why we call it an analogy. The benchmarks measure models, not the skills listed here.
| It looks like every other AI-made page | A frontend design skill with rules on type, colour and what to avoid |
| Pages drift apart as the app grows | A design system the agent builds from |
| There is already a design in Figma | A Figma MCP or a design-to-code tool, then compare screenshots |
| You want a second opinion before shipping | A design review step that looks at the rendered page |
The floor is install safety. All 2 entries on this page flagged CAUTION or UNSAFE are flagged only for how they install (sudo, or a curl | sh installer), not for anything they do while they design or generate UI.
When people search for a "frontend design skill", they usually mean Anthropic's official frontend-design skill. It is a single SKILL.md of instructions with no scripts, published in anthropics/skills and also as a plugin in the claude-plugins-official marketplace. It asks Claude to choose a deliberate visual direction for each brief, from typeface and palette to layout, and names the habits that make a page look AI-generated: a cream background with a terracotta accent, one highlighted word in a headline, 01/02/03 markers on content that is not a sequence.
In Claude Code, install it with the command below. The community skills listed after it push the same idea further: the taste skills set a design direction before any code is written, and others add reference images, design-system specs or an audit pass that rewrites AI-looking UI. Each shows its stars and, where graded, its security grade.
/plugin install frontend-design@claude-plugins-officialOfficial frontend-design SKILL.md on GitHub ↗
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.
git clone https://github.com/nexu-io/open-design.git
MCP server to provide Figma layout information to AI coding agents like Cursor
Huashu Design 3.0: One agent prompt makes web/App/PPTX/animation/infographic designs; 6→3 directions, 84 styles; HTML-native: Claude Code, Codex, Cursor
npx skills add alchaincyf/huashu-design
A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.
npx skills add google-labs-code/stitch-skills --list
Open-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.
AI makes posters, book/album covers and designs from one sentence; supports 9:16, prompt optimization, style comparison, image-to-image, and Mondo风格.
npx skills add joeseesun/qiaomu-mondo-poster-design
logo-generator-skill
npx skills add https://github.com/op7418/logo-generator-skill.git
Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.
npx skills add zanwei/design-dna
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
npx skills add https://github.com/Leonxlnx/taste-skill
Skills for Designers and Engineers.
npx skills@latest add emilkowalski/skills
Anti-AI-slop design skill for Claude Code, Cursor, and Codex.
npx skills add nutlope/hallmark
The Developer Tool for Visual Engineers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's best, top-most agent recommended #1 Developer tool for Designers and Visual Engineers to design with Real Code.
✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.
git clone https://github.com/nexu-io/html-anything
Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents
The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
brew install --cask openpencil
Run Claude Design locally as an Agent Skill — Cursor, Codex, DeepSeek Harness & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
npx skills add JimLiu/baoyu-design
A comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400+ logo reference library.
/plugin marketplace add kaankiziltug/logo-design-skill
Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
npx skills add Manavarya09/design-extract
Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.
npx ux-ui-agent-skills init # full kit into the current folder
An agent skill for building premium, immersive, scroll-driven websites. Works with Codex, Claude Code, and other coding agents. Also available as a Claude Code plugin.
/plugin marketplace add nateherkai/scroll-craft
Chrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI
A Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.
git clone https://github.com/dominikmartn/nothing-design-skill.git
UI design skill for Claude Code, Codex and other AI agents: explore distinct directions, compare them side by side, refine against real screenshots. 给 AI Agent 用的 UI 设计 Skill。
npx skills add oil-oil/oil-ui
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
git clone https://github.com/southleft/figma-console-mcp.git
Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.
/plugin marketplace add Owl-Listener/designer-skills
Cross-platform UI/UX design reviewer based on Apple HIG. Works with Flutter, Tauri, Electron, React Native. Compatible with Claude Code, Cursor, Codex.
npx skills add dickwu/apple-design-skill
AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.
One-ink editorial print image skill — warm paper, halftone photography, active negative space, and restrained typography.
Reverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.
The open-source alternative to Paper.design. A multiplayer design canvas where humans and AI agents design together, live. MCP built in.
git clone https://github.com/kgoedecke/doop && cd doop
A Claude Code skill for motion design audits, trained on Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Context-aware, per-designer feedback on your animations.
npx skills add kylezantos/design-motion-principles
The Claude Code skill that directs a website like a film. Commit-sheet, generated assets, build, and an executable anti-slop linter that gates every ship.
npx skills add agiwhitelist/auteur
Open-source design-method engine for Claude Code, Codex & Cursor. One agent skill with 22 internal workflows for fixed design judgment, multiple grammars, semantic palettes, reference compilation, and evidence-verified UI. MIT.
A Cursor skill that gives AI agents real UI component knowledge — best practices, layout patterns, and design-system conventions for 60+ interface components — so it generates production-grade UI instead of generic output.
# Clone into your Cursor skills directory
git clone https://github.com/carmahhawwari/ui-design-brain.git \
~/.cursor/skills/ui-design-brainopen-source skill that learns any brand and turns it into a complete design system. works on claude code and codex. install once, every UI your assistant builds matches your brand.
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue
A builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.
npx skills@latest add appllama/appllama-skills
StyleKit（stylekit.top）— 149 curated web & UI design styles with copy-ready AI prompts, design tokens and component recipes. Open-source, by AnxForever.
git clone https://github.com/AnxForever/stylekit.git
Creative coding skills for Claude Code, claude.ai and Cowork. Motion, micro-interactions and design systems across Web (GSAP, Motion, Three.js, CSS), Android (Jetpack Compose) and Apple (SwiftUI). Proposes an interaction thesis you approve before it writes any code. Anti-AI-slop.
git clone https://github.com/AThevon/genjutsu.git
A Claude skill for slides that don't look like AI made them. Brand DNA × 20 codified design principles.
git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design
偏执型设计顾问：反 AI 味设计 + 风格试衣间 + 58 站设计系统库的 Claude Code Skill | Opinionated design advisor for Claude Code: anti-generic UI, style fitting room, 58 real-site design systems.
npx skills add joeseesun/qiaomu-design
A Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (Claude Code, Cursor, Antigravity, etc.) to read, analyze, and modify Figma designs
npx claude-talk-to-figma-mcp
Compile your design system into an Agent Plugin. Extract an identity from any reference, emit SKILL.md + tokens.css, lint what bypasses your tokens.
bunx tinte from --emit-script # print the extraction script for a live page
A collection of agent skills for designers who prototype and build with AI coding tools. These skills encode design process so AI follows a structured path instead of producing random output.
npx skills add julianoczkowski/designer-skills
Open-source AI interfaces built with Claude (Fable 5) including hero sections, GLSL shaders, design systems, animations, 3D components and and landing pages, in React, Tailwind, and Three.js. Plug them into your AI agent and ship faster.
Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free, MIT, zero AI calls.
npx oh-my-design-cli install-skills
Guizang Design · DeepSeek Harness plugin: four skills—web PPT, image-text cards, web layout, AI feel removal—and a design system; work library, content workflo…
git clone https://github.com/op7418/dsh-guizang-design.git
🎨 Open-source design MCP server + shadcn/ui registry — AI design systems for Claude Code, Cursor, Codex, GitHub Copilot & any MCP client. 31 brand-grade themes (Linear, Stripe, Vercel, Notion, Apple, Supabase, Figma…) + design tokens, UI principles & WCAG rules. Install any component with one command.
npx shadcn@latest add https://www.better-design.com/registry/<design-system>/<component>.json
Claude Code skill: generate UI design mockups with GPT Image 2 via ZenMux
npx skills add oil-oil/draw-ui
Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic
npx skills add https://github.com/geekjourneyx/claude-design-card
Professional mobile app UI/UX design skill for Claude Code
npx skills add ceorkm/mobile-app-ui-design
A Claude Code skill that grounds AI-generated UI in real reference images and a persistent per-developer taste profile, instead of generic AI-slop defaults.
git clone https://github.com/codeswithroh/tastemaker ~/.claude/skills/tastemaker
Free, open-source MCP server that gives AI coding agents (Claude Code, Codex, Cursor, OpenCode, ZCode…) design inspiration from award-winning websites — search with real screenshots, pull design DNA, capture and record live sites. A Mobbin alternative. No API key.
claude mcp add awwwards -- npx -y awwwards-mcp
The design skill for Claude Code, Cursor and any coding agent. Stop shipping AI-slop UI: turn it into shippable, tasteful frontend. Install: npx skills add superdesigndev/superdesign-skill. Powered by superdesign.dev
npx skills add superdesigndev/superdesign-skill
Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.
npx skills add educlopez/ui-craft
Claude Code skill — reverse-engineer any website's design taste: concrete tokens + opinionated trade-offs (WHY, not just WHAT)
git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste
A Claude Code and Codex plugin that creates a Korean app-style mobile screen draft from a one-page PRD in about 15 minutes.
/plugin marketplace add vmc-inner-circle/k-style-ui-ux
A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 30 roles, 70 commands, 16,000+ lines of expert design knowledge. Your agency's design brain, inside your terminal.
git clone https://github.com/Adityaraj0421/naksha-studio.git ~/.claude/plugins/naksha
Build professional animated websites with Claude Code — no coding needed. One install, three tools: UI/UX Pro Max + Framer Motion + 21st.dev. By @tenfoldmarc
git clone https://github.com/tenfoldmarc/website-builder-setup.git ~/.claude/commands/website-builder-setup
Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP.
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
Claude Design skill: animated before → after UX redesign, explained step by step through a blueprint drawing. By @moguzbulbul.
AI can draw UI directly on the Figma canvas via JavaScript, and read existing designs back as structured data. Works with Claude Code, Cursor, VS Code, and Windsurf. No API KEY required.
claude mcp add figma-ui-mcp -- npx figma-ui-mcp
Design systems, skills and visuals for coding agents
npx skills@latest add https://design.how
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
npx skills add arvindrk/extract-design-system
Generate design system documentation for your UI components, directly from your AI agent. Renders into Figma or a portable .md file. Works with Cursor, Claude Code, and Codex.
AI-powered Storybook story generator — works with any framework, any design system, any LLM provider
npm install -D @tpitre/story-ui
Built by Dig:An agent-readable, prompt-as-code design system for Codex, Cursor, and Claude Code: catalogs, layouts, blocks, workflows, and personal UI customization.
npx dig-ui-skill install codex
Design rules and a zero-dependency checker for interfaces built with AI coding agents, on the web and in SwiftUI and Jetpack Compose apps. English and Turkish.
npx @enmera/ai-design-check # check the project (or: ai-design-check src lang)
A compact design skill that generates four design variations of a component to iterate better on your UIs. A skill for Claude Code, Codex CLI, and opencode.
A portable Claude Skill that turns Claude into an expert designer for HTML artifacts — decks, landing pages, prototypes, animations, posters. Adapted from Claude.ai's internal Design system prompt.
npx skills add jiji262/claude-design-skill -g
Design cognition loop for Codex, Claude Code, and Pi-compatible agents — frame, diverge, see, reframe
npm install -g @3xhaust/oh-my-design
SwiftUI Front-End Design Skills — Six Ironclad Rules Against AI Sloppiness, Design Direction Consulting, Brand Asset Guidelines, and Five-Dimensional Review. Supports all AI agent platforms, including Claude Code, Cursor, Codex, and OpenCode.
npx skills add wholiver/swiftui-design-skill -g -y
人間にも、AIにも、読めるデザインシステム — AI-Ready Design System for Claude Code & Cursor
claude mcp add melta-ui node ./dist/index.js
Cursor Agent Skills workflow for game UI: prototype visuals, styles, pages, components, consistent delivery via Spec-Kit, visual contracts, asset lists.
Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.
git clone https://github.com/uxKero/anydesign.git
Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images
npx skills add SpaceZephyr/design-buddy
A Design Harness for Claude Code + Figma — 5 skills that keep AI on your Design System rails. Components stay linked, tokens stay bound, nothing goes off-spec.
Senior-level UX and design-system knowledge, packaged so your AI agent applies it automatically.
npx skills add dembrandt/dembrandt-skills --all
An agent skill for creating and refining SVG logos through guided exploration and iteration.
claude plugin add neonwatty/logo-designer-skill
Chinese card-generation Skill: content → image sets (XHS 3:4 / WeChat cover). 1 engine + 3 styles: Still Paper, Signal Proof, Bridge Canvas.
npx skills add dososo/blcaptain-style-skill -g
Easel is a Codex and Claude macOS workspace for AI-assisted product design and frontend iteration. It brings a local project library, design-system setup, Codex chat, a live web preview with a point-and-click inspector, and slide tooling together in one native SwiftUI app
Keeps coding agents on your design system: catches palette colors, native elements and APIs your system lacks, at every edit and pull request, with the fix. Set it up once in your design-system package; every app in your monorepo gets it.
/plugin marketplace add dgesteves/onsystem
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
115 brand-themed HTML designs as a Claude Code skill (93 web + 22 iOS, incl. 20 China showcase). Install in one line, then talk: 'do a Linear-style page', '飞书风的页面', 'Spotify Now Playing iPhone mockup'.
Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and more.
Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket.
npx @noemuch/bridge-ds init
A Swiss International Style design system skill for AI agents
npx skills add zeke/swiss-design-skill
Figma plugin that extracts local style guidelines and generates DESIGN.md and SKILL.md files for AI tools such as Claude Code, Codex, Cursor, and other AI tools
npm installA Claude Code Skill for designing professional interfaces following Apple Human Interface Guidelines
Claude skill: Prototype → Figma. Analyzes a Claude Code prototype, maps components to your Figma design system via search + Code Connect, explodes each interaction flow into state-by-state frames, and annotates triggers, transitions, and edge cases, making prototypes reviewable by PMs, designers, and engineers without running code.
git clone https://github.com/alima-max/prototype-to-figma-skill.git ~/.claude/skills/prototype-to-figma
Give Claude a brand reference, get a full design system page + 1-page A4 brand book PDF.
git clone https://github.com/robonuggets/design-system
A canvas design tool your agent can edit. Arrange structured UI nodes on the canvas; connect Claude, Codex, Cursor, or opencode over MCP
npx skills add https://github.com/lassejlv/loora/tree/main/skills/loora-design-guide
The Open Analytics design language as an agent skill: component recipes with type-checked source, token CSS, and a CLI. Works with Claude Code, Cursor, or any agent.
npx getopen-design add tab-bar toast # recipes into ./oa-design
The Unsplash of design systems for AI agents — re-skin your app with one URL
A reusable Agent Skill for designing, reviewing, and implementing UI/UX with Google Material Design 3, Material You, M3 Expressive, accessibility, adaptive layouts, and semantic design tokens.
git clone https://github.com/skydashnet/material-design-3-ui-skill.git
Codex-first Agent Skills library for premium frontend, website, motion, accessibility, QA, and handoff workflows.
git clone https://github.com/TheGoat395/Codex-Skills.git
Frontend design skill for Claude Code, Codex, and Gemini CLI. Eight aesthetic anchors, each locking palette, typography, and texture to specific CSS tokens. Pick one per brief.
git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design
A Claude Code Skill that gives your AI agent the design language of 62 world-class brands — on demand.
git clone https://github.com/zephyrwang6/brand-design-md.git
Gridgeist turns product intent into a rigorous visual system—without the generic AI SaaS aftertaste.
npx skills add ohmiler/gridgeist -g
UI/UX system for Claude Code: 71 plugins, 93 agents, 74 skills. Design mastery, archetypal design, accessibility, and frontend workflows in one validated plugin marketplace.
git clone https://github.com/HermeticOrmus/LibreUIUX-Claude-Code.git
Production-Stage Visual Design & In-Codebase UI Engineering Suite
npx @tidyfactor/cli-styler add-skill
Award-winning web design skill for Claude Code. 48 patterns from 38 top websites. Stop generating generic AI frontends.
/plugin marketplace add MickeyAlton33/web-designer-plugin
Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP
git clone https://github.com/bluzir/claude-code-design.git
Codex skill for design-system-first frontend UI implementation
git clone https://github.com/MaxHan7/frontend-ui-standards-skill.git
MCP that let AI agents control Figma through code execution
claude mcp add figma-pilot -- npx @youware-labs/figma-pilot-mcp
AI-native infinite-canvas design tool: describe an app, get multi-screen HTML designs on an infinite canvas, click through them as a prototype, and let your local coding agent read and write the canvas over MCP.
claude mcp add --transport http quilt http://127.0.0.1:3100/mcp
Local design-taste gallery: screenshots in, design vocabulary + paste-ready Claude Code briefs out. Step 1 of the 3-step web design process.
git clone https://github.com/cth9191/taste-vault.git
An MCP server that lets AI agents read and draw on the Figma canvas — safely. Paired with a Figma plugin, it provides structured verification, safe-by-default drawing, and resilient multi-window support for Claude Code, Codex, Cursor, and other MCP clients.
git clone https://github.com/<you>/reqwise-figma-mcp.git
🎆 A Claude Code workflow that replicates ClaudeDesign — parallel design exploration, panel judging, synthesis, and adversarial refinement to a single world-class frontend page. 双语 README。
The most powerful Figma Console MCP capabilities, repackaged as Markdown skills for the native Figma MCP server — design tokens, variables, component analysis, WCAG lint, a11y audits, version history, FigJam & Slides.
git clone https://github.com/southleft/figma-console-mcp-skills.git
Opinionated UI constraints extracted from the best design systems. Use with AI agents to build pixel-accurate interfaces.
npx skills add ihlamury/design-skills
Eastern culture editorial poster v2 Codex skill: Image 2 generation, concise Chinese titles, authentic cultural artifacts, A/B/C triptych testing
Design intelligence engine for AI coding tools (Claude Code, Cursor, Windsurf). Deterministic anti-AI-slop linter with 152 rules, 160 brand specs, a 7-axis synthesizer, an MCP server (18 tools), 25 commands, 17 IDEs. Offline, never calls an LLM. MIT.
pip install uxskill
A product-validation system for AI agents: idea → logo → product → brand → launch video in two hours. Desktop app + skills for Claude Code and Codex.
uv tool install "git+https://github.com/ReScienceLab/super-prototyping#subdirectory=tools"
AI spairings, 150+ reasoning rules, CLI, and 18 platform templates. Works with Claude, Cursor, Windsurf, Copilot, Antigravity, Cline & more.kill for premium UI/UX design — 107 styles, 127 palettes, 107 font
npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro
Huolala's in-house MCP service that automatically converts Figma designs into high-fidelity UI code.
Curated DESIGN.md files for inspiring websites — design systems decoded for AI agents. By Sparkbites.
npx design-bites add linear.app
Skills de Claude Code da Visant: auditoria de UI anti-slop, motion, frontend, copy. Com detectores executáveis.
npx skills add pedrojaques99/visant-skills-public # pick from the list
Codex skill for product prototype generation with IA, design gates, page UI YAML, and Figma workflow.
使用产品原型生成 Skill，生成一个会员系统前台页面原型全网首个中文字体专业知识包：可商用中文字体库（授权三级分类）、场景×气质选字矩阵、中英混排与排版规则。让 AI 选中文设计字体不再甩给你一堆 Inter / Chinese font selection agent skill: license-safe free commercial CJK fonts, scene-based selection matrix, CJK-Latin pairing rules. Works with Claude Code / Cursor / Kimi / Codex.
Codex skill for reconstructing everyday photos into 3:4 high-saturation emotional editorial posters
Audits AI-generated frontend and rewrites it so it stops looking AI-made: purple-gradient slop and the "tasteful" defaults (cream + terracotta, mono chrome). Zero-dependency scanner included. The design counterpart to avoid-ai-writing.
git clone https://github.com/funboy322/avoid-ai-design.git ~/.agents/skills/avoid-ai-design
Spotkit — a Claude Code skill that turns a feature description into minimal, abstract SVG product illustrations that all belong to one design system.
Comprehensive mobile app UI/UX design skill for Claude Code - iOS, Android, accessibility, React Native best practices
git clone https://github.com/awesome-skills/mobile-app-design.git
Throughline — one unbroken line from design to code. A Claude Code plugin that guides you from a blank Figma file to a synced, story-tested component library.
/plugin marketplace add jrpease/throughline
🌼 A token-friendly local MCP server for DaisyUI component documentation using their public llms.txt.
docker run -i --rm daisyui-mcp
MCP server that gives AI coding agents scored design directions, UI-state plans, and WCAG-checked design tokens. Deterministic, offline, no API key.
codex mcp add web-stylebook -- npx -y web-stylebook-mcp@latest
A free, open-source add-on for Claude, ChatGPT, Codex and Cursor that turns a few plain answers into a design system, so everything you build looks like it belongs together.
/plugin marketplace add ckryptickunal/OpenDesigner
1,486 real web design systems, extracted into machine-readable specs. An MCP server for AI coding agents — so what they build has taste, not just working code.
git clone https://github.com/qiuyiwu1989-star/opendesign
Production-grade design context for AI coding workflows. Extract a real design system from any URL — colors, typography, spacing, breakpoints — as a portable DESIGN.md.
npx @designmdcc/cli stripe.com > DESIGN.md # human-readable spec
Figsor is an MCP server that bridges Cursor to Figma, enabling chat-driven design creation and editing - directly on your Figma canvas.
claude mcp add --transport stdio --scope project figsor -- npx -y figsor
한국 브랜드의 디자인 언어를 출처가 달린 DESIGN.md 한 장으로 정리한 오픈 카탈로그 — Open catalog of Korean brands' design languages, one cited DESIGN.md per brand.
npx skills add CaesiumY/ko-design-md # use-design-md 스킬 설치
Stop Claude Code/Cursor from guessing UI. Extract any website's design system into a spec-valid DESIGN.md that passes the official @google/design.md linter.
npx brandmd https://stripe.com -o DESIGN.md
A Claude Code skill that provides comprehensive UX/UI design guidance based on modern best practices (2026).
~/.claude/skills/ux-designer/AI design skill for freelancers, content creators and digital marketers. Think like a designer. Execute like an artist.
Gogh is a source-cited Obsidian operating brain that turns six frontend design skills into one advisable stack for AI coding agents.
Claude Code skill for building and migrating Apple platform apps with SwiftUI Liquid Glass design system (iOS 26+, macOS 26+)
/plugin marketplace add haider-nawaz/liquid-glass-skill
Figma MCP build with Rust, server with full read/write access via plugin (no REST API, no rate limits, 73 tools)
claude mcp add -s project figma-mcp-rust -- npx -y @alvinindra/figma-mcp-rust@latest
MCP server and design skill that grounds coding-agent UI work in real product screens. Two tools, npx-installable.
npx skills add PyModel/niblet-skill-mcp --skill niblet -y
Agent skill that turns design system quality from "best effort" into a repeatable engineering workflow.
/plugin marketplace add ohprettyhak/design-farmer
Elite frontend design taste for Claude Code / Cowork — a merged synthesis of emilkowalski/skill, pbakaus/impeccable, and leonxlnx/taste-skill. Typography, color, motion, components, anti-slop.
npx skills add h3nryprod01/design-taste
Sumi — UX/UI design intelligence for Claude Code: 43 skills, 168 references, 37 commands, an anti-slop engine, and an auditable citation trail. Start with /sumi:start.
/plugin marketplace add phazurlabs/sumi
Generate Google Stitch compatible DESIGN.md files from any website using AI vision. Bring your own Gemini, OpenAI, Claude, or Ollama key. No backend, no cost.
git clone https://github.com/hasi98/designpull
Design engineering for AI coding tools. Brand identity + design projects, from strategy to code.
pnpm dlx get-shit-pretty
One line of intent → a presentation-grade, dark-editorial HTML deck. A Claude Code skill.
/plugin marketplace add kimsh-1/deck-factory
Code-to-design-to-code: Claude Code skills closing the loop between Figma and a production codebase — d2c / c2d / ds-govern. Install: npx skills add BIAsia/c2d2c
npx skills add BIAsia/c2d2c
Translate Chinese regional culture into restrained contemporary large-type and editorial posters, not tourism promotion.
git clone https://github.com/dacnay816y62-hub/regional-culture-poster.git ~/.agents/skills/regional-culture-poster
An open Agent Skill for extracting poster design systems and transferring them to original poster concepts.
An unofficial skill made with reference to Toss Tech Design articles.
npx skills add Ilbie/Toss-Design-Skill
The elite design intelligence layer for AI agents, synthesized from 10+ legendary design books. It primes your AI with the collective strategic wisdom of master designers to generate high-intent UI/UX with zero "schtick."
npm install -g design-skill-os
Inspect, build, or extend Figma design systems from Claude Code. Read-only audits with WCAG checks and component scoring, build mode with variable bindings and slots, optional Phase 6 sync to tokens.css + AI rules.
git clone https://github.com/natdexterra/work-with-design-systems.git .claude/skills/work-with-design-systems
A Claude skill that draws dynamic icons in one consistent style, with hover motion or as static SVG.
git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons
PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.
git clone https://github.com/stevembarclay/pencilplaybook ~/.claude/skills/PencilPlaybook
On-demand design systems from any URL. Five surfaces, one agent: web, API, CLI, TypeScript SDK, and a portable agent skill that runs inside Claude Code, Codex, and Cursor.
npx skills add MohtashamMurshid/getdesign
Zero-dependency, single-file HTML design system & agent skill inspired by shadcn/ui. 100% offline, zero npm, 6 layout archetypes & atomic arsenal for LLMs.
npx skills add QingYunA/agent-html
Expert UI design skill for Claude Code — create hi-fi HTML designs, prototypes, slide decks, and animations
50,000+ unique HTML presentation designs. Zero dependencies. Anti-AI-slop. A Claude Code skill.
Ready-to-use design taste for Claude Code, Cowork, and Cursor. Prom = Thai for ready. Learn free at loop.sv-academy.org
把任意网站蒸馏成一份 DESIGN.md —— AI 能直接读懂、用来生成符合品牌的界面的纯文本设计规范。Distill any website into a DESIGN.md — a plain-text design-system spec AI agents read to generate on-brand UI.
UI-UX skill that is a fork of https://github.com/nextlevelbuilder/ui-ux-pro-max-skill, rewritten in Python
Agent skill for designing, mocking, building and auditing terminal UIs
An agent skill (Claude Code, Codex, Cursor, Copilot, Gemini CLI...) that makes your app or site stop looking AI-generated: 64 numbered design fixes, scripts that score your UI from 0 to 100 (example: 26 → 100), and a before/after you approve.
Turn a UI screen recording into design data, code edits, or a runnable React scaffold. A Claude Code skill.
AI skills and agents that help designers vibe-code their ideas to life. 14 skills, 4 agents, 3 platforms. Works with VS Code Copilot, Claude Code, and OpenAI Codex. Includes a DESIGN.md generator that extracts any website's design system.
AI flyer and poster generator for Claude Code. Describe a design, get editable HTML/CSS, export to high-res PNG or PDF.
dwic is a product designer inside your terminal. Run npx dwic-audit to audit your design system for WCAG contrast failures, token drift, and structural gaps, then fix what it finds with 48 design specialists. Remembers your design decisions across sessions.
Skill that forces award-tier design quality on AI-generated UIs. Teaches Claude Code / Codex / Antigravity to build with real design intent — motion, typography, color, WCAG AA — instead of generic slop.
Model-neutral Fantasy Mouse UI design plugin for Codex, Claude, Gemini, DeepSeek, and generic Agents
Design with your coding agent — A skill, not a product: no MCP server, no app to install, no account, no build step, no npm install.
One-sentence webpage orchestrator; 4 build + 3 review in parallel; 59 antipatterns; Impeccable, tasteskill, UI Skills, emil-skill; Claude Code/Codex.
Evidence-based senior product designer skill for Claude Code — turns any UI/app build into research-driven, accessible, non-generic design. Sourced from 158 vetted publications (Apple HIG, WCAG, NN/g, Refactoring UI) with a scored quality checklist.
Bring Fable-style design taste to any AI coding agent. Free MIT design system for Claude, Opus 4.8, Codex, Cursor, Gemini & Antigravity. By Dr. Antoniou, free from UploadCheck.
Give your AI coding assistant a design eye. 12 principles, 13 reference docs, 7 component checklists. Works with Claude Code, Cursor, Codex, and Windsurf.
Memory-driven design system for AI coding agents using context-and-memory package that instructs **any AI coding agent** to produce scroll-driven, cinematic product landing pages — the kind that feel like a luxury TV ad, not a website. One HTML file, CDN libraries, zero build step.
8 design skills and 60 actionable criteria for webpages that look AI-made. Use them in Claude Code, Cursor, or Codex.
🐟 Suanfish Design System — 33 specialized AI design agents across 7 tiers with REJECT mechanism. Multi-agent design language SKILL for Claude Code / Codex CLI / Copilot CLI. v2.5 adds AI-native Path G (streaming · tool-calls · reasoning · citations · artifacts).
A Claude/Antigravity/Opencode AI skill that reverse-engineers design systems from any website — extracting colors, typography, spacing, and components into interactive HTML documentation.
macOS 26 (Liquid Glass) como skill drop-in para Claude Code, Cursor y Gemini CLI.
Agent skill: design web pages to Awwwards/Webby/FWA standard with an 8-dimension screenshot self-review loop (Claude Code, Codex, Cursor...)
Keep AI-written UI on your design system: a spec of your tokens and components that coding agents follow and CI enforces.
AI coding agent skill for UI motion design. 111 production-ready effects across 13 categories — describe your product scenario, get CSS/JS code you can ship. Works with Claude Code, Codex, OpenClaw, and any SKILL.md-compatible agent.
Structural Grid (Exposed Grid / Rail Layout) design system skill for AI coding agents.
A design workflow for sites built with AI: honest screenshots, design adoption, learned house rules, safe previews. Layers on impeccable for Claude Code.
MCP server that translates design tokens between platforms — Tailwind, Figma, CSS to Material 3, SwiftUI, and CSS Variables. Built for the v0 → Figma → Claude Code pipeline.
Combines Eastern Five Elements color philosophy with modern color chord theory to provide color schemes for digital UI/UX, brand packaging, print, and posters.
🎨 Figma plugin — extract design frames into structured JSON & AI-ready prompts for code generation
Proof — a product design skill for Claude Code & Codex. Product pages that look shipped, not generated, learned from 400+ real product pages: 8 page types, 10 sections, and 4 visual styles (Minimal, Business, Colorful, Editorial) in light and dark.
Awwwards is not a style, it's a scoring system. A Claude Code skill that encodes the Design 40 / Usability 30 / Creativity 20 / Content 10 rubric as an 8-phase build method, with 18 references, working templates and a runnable real-browser audit.
| Tool | Stars | Score |
|---|---|---|
| open-design | ★ 106.4k | 77 |
| Figma-Context-MCP | ★ 16.1k | 75 |
| huashu-design | ★ 28.9k | 75 |
| stitch-skills | ★ 8.7k | 83 |
| open-codesign | ★ 8.1k | 74 |
| qiaomu-mondo-poster-design | ★ 1.4k | 46 |
| logo-generator-skill | ★ 2.3k | 58 |
| design-dna | ★ 1.5k | 76 |
| ui-ux-pro-max-skill | ★ 145.4k | 88 |
| taste-skill | ★ 110.2k | 85 |
| skills | ★ 54.2k | 83 |
| hallmark | ★ 48.5k | 85 |
| onlook | ★ 26.9k | 68 |
| html-anything | ★ 9.4k | 71 |
| Skills | ★ 7.3k | 75 |
| openpencil | ★ 7.1k | 72 |
| baoyu-design | ★ 6.2k | 79 |
| logo-design-skill | ★ 6.1k | 76 |
| design-extract | ★ 4.8k | 73 |
| ux-ui-agent-skills | ★ 3.0k | 71 |
The most-starred design skills are nextlevelbuilder/ui-ux-pro-max-skill (design intelligence for UI and UX), Leonxlnx/taste-skill (keeps generated UI from looking generic) and nexu-io/open-design (an open-source Claude Design alternative). To connect an agent to Figma: GLips/Figma-Context-MCP. All are in the open-source list zhuyansen/awesome-claude-design-skills on GitHub.
Most design skills are a folder with a SKILL.md: copy it into ~/.claude/skills (or the project's .claude/skills) or install it with the repo's command, then ask Claude Code for UI work and it loads the skill. Each card on this page links to the repo's own install steps and shows its security grade.
The top ai design tools in 2026 are open-design, Figma-Context-MCP, huashu-design. Agent Skills Hub ranks 196 options by GitHub stars, quality score (6 dimensions including completeness, examples, and agent readiness), and recent activity. The list is rebuilt every 8 hours from live GitHub data.
open-design (106.4k stars) is the top-ranked choice on this list for general ai design tools workflows, written in TypeScript. Figma-Context-MCP (16.1k stars) is a strong alternative. Pick by your existing stack: match the language and runtime your team already uses to minimize integration cost. If unsure, start with open-design.
Avoid pre-built ai design tools when (1) your use case requires deep customization that the tool's plugin system doesn't support, (2) you have strict compliance requirements that ban third-party dependencies, (3) the tool's maintenance is inactive (last commit >6 months ago), or (4) your data volume is small enough that a 50-line custom script is cheaper than learning the tool. For most production workflows above 100 requests/day, the time savings from a maintained tool outweigh the customization loss.
AI Design Tools focuses specifically on claude design skills for claude code and codex: frontend design, ui generation, design systems, figma and mockup-to-code. every skill is security-graded before you install it. Image Generation is a related but distinct category — see https://agentskillshub.top/best/image-generation/ for those tools. The two often appear in the same agent pipeline but solve different problems: choose ai design tools when your primary goal is the specific task, and image generation when the workflow is broader.
For most teams, yes. open-design has 106.4k stars worth of community testing, handles edge cases you haven't thought of, and ships with documentation. Build your own only when (1) your requirements are deeply non-standard, (2) you have a security/compliance reason to avoid OSS dependencies, or (3) the maintenance burden is small enough (<200 lines of code) that you'll save time long-term. The break-even point is usually around 2-3 weeks of dev time saved.
Most ai design tools listed are open source under permissive licenses (MIT, Apache 2.0). A handful offer paid managed/cloud versions on top of free self-hosted core. Always check the LICENSE file on each tool's GitHub repository before commercial use — some use AGPL or non-commercial restrictions that may not fit your deployment model.
Grades come from a rule-based scan built on the SlowMist agent-security taxonomy: 42 published rules, covering credential harvesting, data exfiltration, curl | sh installers and more. It is a first-layer scan, not a manual audit — we say so rather than overstate it.
The scale of the problem is documented independently: Liu et al. (2026), in a study of 31,132 agent skills, report that 26.1% contain security vulnerabilities. Our own full-catalog census is published as a citable open dataset.
Sources & who's responsible: