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 179 Claude Design Skills for Frontend & UI here, our pick after testing them is Leonxlnx/taste-skill (★ 95.7k). 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 93 · 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 43 · 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 18 · 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 10 · 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 12 · html-anything, logo-generator-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 3 · 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 prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.
MCP server to provide Figma layout information to AI coding agents like Cursor
Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic
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.
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风格.
Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.
```bash
npx skills add zanwei/design-dna
```An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Skills for Designers and Engineers.
```bash
npx skills@latest add emilkowalski/skills
```Anti-AI-slop design skill for Claude Code, Cursor, and Codex.
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.
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.
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
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+.
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.
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.
```sh
git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
```Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
Build better UI with AI
```bash
npx typeui.sh --help
```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.
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.
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。
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.
```bash
npx skills add kylezantos/design-motion-principles
```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.
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.
Open-source design-method engine for Claude Code, Codex & Cursor. 23 agent skills for fixed design judgment, multiple grammars, semantic palettes, reference compilation, and evidence-verified UI. MIT.
Cross-platform UI/UX design reviewer based on Apple HIG. Works with Flutter, Tauri, Electron, React Native. Compatible with Claude Code, Cursor, Codex.
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.
```bash
# Clone into your Cursor skills directory
git clone https://github.com/carmahhawwari/ui-design-brain.git \
~/.cursor/skills/ui-design-brain
```The open-source alternative to Paper.design. A multiplayer design canvas where humans and AI agents design together, live. MCP built in.
A builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.
open-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 Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.
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
Compile your design system into an Agent Plugin. Extract an identity from any reference, emit SKILL.md + tokens.css, lint what bypasses your tokens.
Open-source visual style library for AI-generated UI — 148 curated styles with design tokens, prompts and MCP. | 面向 AI 生成网页的开源视觉风格库：148 套精选风格，支持 MCP、Agent Skill 与 npm CLI。
A Claude skill for slides that don't look like AI made them. Brand DNA × 20 codified design principles.
偏执型设计顾问：反 AI 味设计 + 风格试衣间 + 58 站设计系统库的 Claude Code Skill | Opinionated design advisor for Claude Code: anti-generic UI, style fitting room, 58 real-site design systems.
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.
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.
Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic
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.
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
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.
Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.
Build professional animated websites with Claude Code — no coding needed. One install, three tools: UI/UX Pro Max + Framer Motion + 21st.dev. By @tenfoldmarc
```bash
git clone https://github.com/tenfoldmarc/website-builder-setup.git ~/.claude/commands/website-builder-setup
```Claude Code skill: generate UI design mockups with GPT Image 2 via ZenMux
```bash
npx skills add oil-oil/draw-ui
```A virtual design team for Claude Code, Cursor, Windsurf, Gemini CLI, and Copilot — 26 roles, 62 commands, 15,000+ lines of expert design knowledge. Your agency's design brain, inside your terminal.
Claude Code skill — reverse-engineer any website's design taste: concrete tokens + opinionated trade-offs (WHY, not just WHAT)
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.
🎨 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.
Research-first design skill for AI agents. 150K+ real app screens and flows via Refero MCP.
```bash
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
```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.
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.
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.
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.
AI-powered Storybook story generator — works with any framework, any design system, any LLM provider
Design cognition loop for Codex, Claude Code, and Pi-compatible agents — frame, diverge, see, reframe
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.
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.
Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images
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.
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.
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
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
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.
A Swiss International Style design system skill for AI agents
```sh
npx skills add zeke/swiss-design-skill
```A Claude Code Skill for designing professional interfaces following Apple Human Interface Guidelines
An agent skill for creating and refining SVG logos through guided exploration and iteration.
```bash
claude plugin add neonwatty/logo-designer-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
```bash
npm install
```Give Claude a brand reference, get a full design system page + 1-page A4 brand book PDF.
```bash
git clone https://github.com/robonuggets/design-system
```Chinese card-generation Skill: content → image sets (XHS 3:4 / WeChat cover). 1 engine + 3 styles: Still Paper, Signal Proof, Bridge Canvas.
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.
A canvas design tool your agent can edit. Arrange structured UI nodes on the canvas; connect Claude, Codex, Cursor, or opencode over MCP
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'.
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.
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.
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.
```bash
git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design
```Codex-first Agent Skills library for premium frontend, website, motion, accessibility, QA, and handoff workflows.
```bash
git clone https://github.com/TheGoat395/Codex-Skills.git
cd Codex-Skills
python3 scripts/install_skills.py --dry-run
python3 scripts/install_skills.py
```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.
A Claude Code Skill that gives your AI agent the design language of 62 world-class brands — on demand.
Gridgeist turns product intent into a rigorous visual system—without the generic AI SaaS aftertaste.
Award-winning web design skill for Claude Code. 48 patterns from 38 top websites. Stop generating generic AI frontends.
Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP
Codex skill for design-system-first frontend UI implementation
```bash
git clone https://github.com/MaxHan7/frontend-ui-standards-skill.git
```Local design-taste gallery: screenshots in, design vocabulary + paste-ready Claude Code briefs out. Step 1 of the 3-step web design process.
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.
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.
🎆 A Claude Code workflow that replicates ClaudeDesign — parallel design exploration, panel judging, synthesis, and adversarial refinement to a single world-class frontend page. 双语 README。
Opinionated UI constraints extracted from the best design systems. Use with AI agents to build pixel-accurate interfaces.
```bash
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
A product-validation system for AI agents: idea → logo → product → brand → launch video in two hours. Desktop app + skills for Claude Code and Codex.
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
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.
Codex skill for product prototype generation with IA, design gates, page UI YAML, and Figma workflow.
```text
使用产品原型生成 Skill，生成一个会员系统前台页面原型
```MCP server and design skill that grounds coding-agent UI work in real product screens. Two tools, npx-installable.
Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping agent, design systems, wireframe renderer. SVG icon creator, dark mode toggle, responsive layout tool. Front-end code export, shadcn/ui integration, vector assets, branding assistant.
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.
Local Figma MCP server with no REST rate limits, no metered tool-call quotas, and a verification loop. Drop-in alternative to Figma's Dev Mode MCP and Framelink for Claude Code, Cursor, Windsurf — works on every plan including Free.
Spotkit — a Claude Code skill that turns a feature description into minimal, abstract SVG product illustrations that all belong to one design system.
🌼 A token-friendly local MCP server for DaisyUI component documentation using their public llms.txt.
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.
Comprehensive mobile app UI/UX design skill for Claude Code - iOS, Android, accessibility, React Native best practices
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.
Figsor is an MCP server that bridges Cursor to Figma, enabling chat-driven design creation and editing - directly on your Figma canvas.
```bash
https://github.com/AsifKabirAntu/figsor.git
```Senior-level UX and design-system knowledge, packaged so your AI agent applies it automatically.
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.
A Claude Code skill that provides comprehensive UX/UI design guidance based on modern best practices (2026).
```
~/.claude/skills/ux-designer/
```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.
Gogh is a source-cited Obsidian operating brain that turns six frontend design skills into one advisable stack for AI coding agents.
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.
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
```한국 브랜드의 디자인 언어를 출처가 달린 DESIGN.md 한 장으로 정리한 오픈 카탈로그 — Open catalog of Korean brands' design languages, one cited DESIGN.md per brand.
Figma MCP build with Rust, server with full read/write access via plugin (no REST API, no rate limits, 73 tools)
MCP / CLI for Claude Design
Agent skill that turns design system quality from "best effort" into a repeatable engineering workflow.
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.
```bash
npx @designmdcc/cli stripe.com > DESIGN.md
```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.
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.
Design engineering for AI coding tools. Brand identity + design projects, from strategy to code.
One line of intent → a presentation-grade, dark-editorial HTML deck. A Claude Code skill.
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.
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
Translate Chinese regional culture into restrained contemporary large-type and editorial posters, not tourism promotion.
An open Agent Skill for extracting poster design systems and transferring them to original poster concepts.
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.
An unofficial skill made with reference to Toss Tech Design articles.
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."
全网首个中文字体专业知识包：可商用中文字体库（授权三级分类）、场景×气质选字矩阵、中英混排与排版规则。让 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.
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.
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.
Zero-dependency, single-file HTML design system & agent skill inspired by shadcn/ui. 100% offline, zero npm, 6 layout archetypes & atomic arsenal for LLMs.
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
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.
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
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.
AI flyer and poster generator for Claude Code. Describe a design, get editable HTML/CSS, export to high-res PNG or PDF.
🐟 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.
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.
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
Agent skill: design web pages to Awwwards/Webby/FWA standard with an 8-dimension screenshot self-review loop (Claude Code, Codex, Cursor...)
| Tool | Stars | Score |
|---|---|---|
| open-design | ★ 101.1k | 78 |
| Figma-Context-MCP | ★ 16.0k | 74 |
| huashu-design | ★ 24.9k | 74 |
| stitch-skills | ★ 8.1k | 83 |
| open-codesign | ★ 8.0k | 75 |
| qiaomu-mondo-poster-design | ★ 1.3k | 46 |
| logo-generator-skill | ★ 2.2k | 58 |
| design-dna | ★ 1.5k | 76 |
| ui-ux-pro-max-skill | ★ 135.1k | 86 |
| taste-skill | ★ 95.7k | 90 |
| skills | ★ 46.1k | 83 |
| hallmark | ★ 28.7k | 83 |
| onlook | ★ 26.9k | 68 |
| html-anything | ★ 9.1k | 75 |
| Skills | ★ 6.6k | 75 |
| openpencil | ★ 6.1k | 72 |
| baoyu-design | ★ 4.4k | 69 |
| design-extract | ★ 4.1k | 71 |
| scroll-craft | ★ 2.9k | 71 |
| design-md-chrome | ★ 2.9k | 73 |
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 179 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 (101.1k stars) is the most adopted choice for general ai design tools workflows, written in TypeScript. Figma-Context-MCP (16.0k 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 — it has the deepest community and the most examples online.
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 101.1k 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, covering 11 red-flag categories including credential harvesting, data exfiltration, and curl | sh installers. 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: