AI 编程 agent 的设计智能技能——UI 生成、设计系统、原型、稿转码,接 Google Stitch 等。
这 186 个AI 设计工具里，实测后的首选是 Leonxlnx/taste-skill（★ 100.0k）。想要不撞脸的设计：两次产出都通过全部七项检查，和不装 skill 的页面几乎没有相同之处：自己的字体、偏冷的配色，第二次还用了橙色强调色。 看实测 →
2026-10-10 我们实跑了其中 10 个。每个在用完即删的沙箱里由 Claude Code（Claude Opus 5.5）调用，把同一个落地页做两遍：一个虚构的应用，文案固定，设计自由。不装 skill 的 Claude Code 也做了两遍。这里没有审美分。每个页面由浏览器测量：任何落地页都该通过的七项检查，以及让页面「撞脸」的四样东西（标题字体、正文字体、强调色、背景），分别和不装 skill 的页面比、和它自己的另一次产出比。
在静态页面上看不出区别： skills (它讲的是动效；字体、配色和版式与不装 skill 的页面一致); Skills (两次产出四项全部与不装 skill 的页面相同).
不管选哪个：22 个页面里没有一个是老式的 AI 味（紫色渐变、渐变文字、emoji 图标、居中大标题），装不装 skill 都一样。现在的「撞脸」更安静：米白底配青绿、左边文字、右边一张状态卡片。
排名规则：先看产出和不装 skill 时 Claude Code 做的页面有多少相同（标题字体、正文字体、强调色、背景），越少越靠前；再看七项页面检查，最后看 GitHub 星数。这量的是「像不像」，不是审美：请看图。每个 skill 做两遍，同一份需求。
发现： 22 个页面里没有一个是老式的 AI 味（紫色强调色、渐变文字、emoji 图标、居中大标题），装不装 skill 都一样。现在的默认风格是米白底配青绿、衬线标题；10 个 skill 里有 2 个四项全部照搬，4 个只有一项或零项相同。每个 skill 在 7 项检查里至少通过 6.5 项。 看对照组 →
| # | Skill | 与不装 skill 的页面相同（共 4 项） | 自己两次产出相同（共 4 项） | 页面检查通过（共 7 项） | 未通过 | 标题字体 | 证据 |
|---|---|---|---|---|---|---|---|
| 1 | taste-skill ★ 93,722 | 0.5/4 | 3/4 | 7.0/7 | - | Geist | 两次产出 |
| 2 | ui-ux-pro-max-skill ★ 134,020 两次产出里有一次在手机上会横向滚动。 |
0.5/4 | 3/4 | 6.5/7 | 手机上不横向滚动 | Varela Round | 两次产出 |
| 3 | hallmark ★ 29,767 | 1.0/4 | 2/4 | 7.0/7 | - | Hanken Grotesk / Newsreader | 两次产出 |
| 4 | nothing-design-skill ★ 2,808 固定的一套风格：点阵字标题、灰底黑字，两次都一样。其中一次在手机上会横向滚动。 |
1.0/4 | 4/4 | 6.5/7 | 手机上不横向滚动 | Doto | 两次产出 |
| 5 | huashu-design ★ 24,688 两次产出差别最大：字体、版式和强调色每次都不同。 |
1.5/4 | 1/4 | 7.0/7 | - | Archivo / Hind | 两次产出 |
| 6 | claude-design-system-prompt ★ 1,978 | 1.5/4 | 3/4 | 7.0/7 | - | Bricolage Grotesque | 两次产出 |
| 7 | baoyu-design ★ 4,260 | 2.0/4 | 2/4 | 7.0/7 | - | Instrument Serif / Young Serif | 两次产出 |
| 8 | styleseed ★ 973 | 2.0/4 | 1/4 | 7.0/7 | - | Figtree / Inter | 两次产出 |
| 9 | skills ★ 44,260 这组 skill 讲的是动效和交互细节。字体、配色和版式上，两次产出都和不装 skill 的页面一样。 |
4.0/4 | 4/4 | 7.0/7 | - | Fraunces | 两次产出 |
| 10 | Skills ★ 6,666 两次产出的字体、强调色和背景都和不装 skill 的页面相同。 |
4.0/4 | 4/4 | 7.0/7 | - | Fraunces | 两次产出 |
Claude 设计 skill 有两件事要做。第一件是把界面做对。在 Design2Code（从截图重建 484 个真实网页）上，模型主要错在两处：漏掉视觉元素、布局不对（NAACL 2025）。所以 skill 能补的是结构：一套设计系统、间距和字体规则、一个看渲染结果的步骤。第二件是别和所有人长得一样。一项对照实验里，拿到语言模型点子的作者写出的故事被评为更有创意、文笔更好，但彼此之间比不用 AI 的故事更相似（Science Advances 2024）；另一项研究发现不同用户的点子也会趋同（C&C 2024）。这两项测的是故事和点子，不是界面，但 AI 做的界面千篇一律的紫色渐变就是同一种效应，也正是这页星数最高的几个 skill 要解决的问题。两件事都能测：渲染页面、截图、按清单打分，在 ArtifactsBench 上这种方法和人工排名的一致率达到 94.4%。所以我们看一个设计 skill：是否给 agent 规则和看见自己产出的办法，是否把它推离默认样式。
| 类型 | 怎么做 | 解决什么 | 要留意什么 |
|---|---|---|---|
| UI 与前端美化 95 · ui-ux-pro-max-skill, taste-skill |
给 agent 的规则和品味：字体、间距、配色、要避免什么。 | 把界面推离 AI 页面普遍共有的默认样子。 | 人人都用同一个 skill，它就成了新的默认；看看能不能定自己的方向。 |
| 设计系统 47 · open-design, design-extract |
agent 照着搭的设计变量、组件和布局规则。 | 跨页面一致，也就是模型最常出错的布局部分。 | 效果取决于你给它的那套系统。 |
| Figma 与设计工具 18 · Figma-Context-MCP, figma-console-mcp |
读写 Figma 等设计工具的 MCP 服务和插件。 | agent 照真实的设计稿做，而不是照文字描述。 | 需要设计文件的访问令牌，先看评级。 |
| 设计稿转代码 10 · onlook, open-codesign |
把设计稿或截图变成可运行的前端代码。 | 省掉从设计稿到代码的手工翻译。 | 漏元素和布局错是 Design2Code 发现最多的两类错误；对比一下截图。 |
| 海报与品牌 12 · html-anything, logo-design-skill |
海报、logo、社媒配图和品牌素材。 | 不离开 agent 就能出视觉素材。 | 大家要的东西越相同，趋同效应越明显。 |
| 设计审查 4 · designer-skills, design-motion-principles |
对照设计规则检查渲染后的页面，指出哪里不对。 | 把"看自己的产出"这一步做成独立工具。 | 有真实设计师的示例，模型的评审会好很多；泛泛的评审很浅。 |
还没有研究直接测过 AI 界面的趋同；证据来自故事和点子，所以我们把它称为类比。这些基准测的是模型，不是这页列出的 skill。
| 看起来和别的 AI 页面一个样 | 带字体、配色和禁用规则的前端设计 skill |
| 页面越做越不统一 | 让 agent 照着搭的设计系统 |
| 已经有 Figma 设计稿 | Figma MCP 或设计稿转代码工具，再对比截图 |
| 上线前想要第二意见 | 看渲染页面的设计审查步骤 |
底线是安装安全。这一页被标为 CAUTION 或 UNSAFE 的 2 个条目，都只是因为安装方式（sudo，或 curl | sh 安装脚本）被标，不是因为设计或生成界面时的行为。
大家搜「frontend design skill」，通常指的是 Anthropic 官方的 frontend-design skill。它只是一份写满指令的 SKILL.md，没有脚本，放在 anthropics/skills 仓库里，同时也以插件形式收在 claude-plugins-official 插件市场。它要求 Claude 针对每个需求选定明确的视觉方向，从字体、配色到版式，并点名那些让页面一看就是 AI 生成的习惯：米色背景配赤陶色点缀、标题里单独高亮一个词、内容本不是步骤却标上 01/02/03。
在 Claude Code 里用下面这条命令安装。下面列出的社区 skill 把同样的思路做得更深：taste 类 skill 在写代码前先定设计方向，其他的加入参考图、设计系统规范，或者加一道审查，把看起来像 AI 做的界面改写掉。每一项都标了星数，已评级的标了安全评级。
/plugin install frontend-design@claude-plugins-officialGitHub 上的官方 frontend-design SKILL.md ↗
Claude Code、Codex、Cursor、DeepSeek Harness、OpenCode 的本地设计应用，支持生成与导出 HTML/PDF/PPT…
git clone https://github.com/nexu-io/open-design.git
Huashu Design：Claude Code 的 HTML 原生设计 skill，支持原型、幻灯片、动画、5维评审和 MP4 导出
npx skills add alchaincyf/huashu-design
面向 Stitch MCP server 的 Agent Skills 库，遵循 Agent Skills 开放标准，兼容 Antigravity、Gemin…
npx skills add google-labs-code/stitch-skills --list
开源 Claude Design 替代，一键导入 Claude Code/Codex API key，Prompt 生成原型、幻灯片、PDF，支持多模型。
生成海报、书籍封面、专辑封面等设计作品，支持电影海报、读书笔记、公众号封面和小红书配图。含AI提示词优化、风格对比、图生图，默认9:16竖版。
npx skills add joeseesun/qiaomu-mondo-poster-design
logo-generator-skill
npx skills add https://github.com/op7418/logo-generator-skill.git
将参考界面（图片、截图、URL）转为量化的 Design DNA JSON，再用内容生成匹配界面。
npx skills add zanwei/design-dna
提供设计智能、用于跨平台构建专业 UI/UX 的 AI skill
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
Taste-Skill：让 AI 具备审美，避免生成无聊、千篇一律的内容
npx skills add https://github.com/Leonxlnx/taste-skill
设计师和工程师技能
npx skills@latest add emilkowalski/skills
适用于 Claude Code、Cursor 和 Codex 的反 AI 垃圾设计 skill。
npx skills add nutlope/hallmark
本地 AI agent 编写 HTML，支持 75 skill、9 种形式、沙箱预览和多格式导出；兼容 Claude Code、Cursor、Codex 等。
git clone https://github.com/nexu-io/html-anything
面向使用 Codex、Claude、Cursor 等 AI coding agents 的设计师和开发者的 agent skills
开源 AI 原生矢量设计工具，支持并发 Agent Teams。Design-as-Code。在实时画布上将提示词转换为 UI，替代 Pencil。
brew install --cask openpencil
本地运行 Claude Design 作为 Agent Skill，支持 Cursor、Claude Code 等，生成自包含 HTML 的 UI 模拟稿、原…
npx skills add JimLiu/baoyu-design
一条命令提取网站设计系统：DTCG tokens、MCP server、多平台输出、Tailwind v4、Figma variables、shadcn/ui…
npx skills add Manavarya09/design-extract
面向 Claude、Gemini CLI、Codex 等 AI agent 的徽标设计 skill：原则、流程、SVG 制作、测试工具及 1,400+ 个徽标…
/plugin marketplace add kaankiziltug/logo-design-skill
用于构建沉浸式滚动驱动网站的 agent skill，支持 Codex、Claude Code 等编码 agents，也可作为 Claude Code 插件使…
/plugin marketplace add nateherkai/scroll-craft
基于 TypeUI 的 Chrome 扩展，可提取网站样式并为 AI 生成 DESIGN.md 文件和设计 skill
用于生成遵循 Nothing 设计语言 UI 的 Claude Code skill。单色、排版、工业风。
git clone https://github.com/dominikmartn/nothing-design-skill.git
设计技能集合：用于设计的 agentic skills、commands 和 plugins，涵盖研究、系统、UI、交互和交付。
/plugin marketplace add Owl-Listener/designer-skills
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
将你的设计系统作为 API。连接 AI 与 Figma，用于提取、创建和调试。
git clone https://github.com/southleft/figma-console-mcp.git
Reverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.
基于 Apple HIG 的跨平台 UI/UX 设计审查工具，支持 Flutter、Tauri、Electron、React Native，兼容 Claude…
npx skills add dickwu/apple-design-skill
用于动效设计审查的 Claude Code skill，基于 Emil Kowalski、Jakub Krehel 和 Jhey Tompkins 训练，提供…
npx skills add kylezantos/design-motion-principles
Claude Code skill 以电影制作方式指导网站，涵盖提交清单、生成资源、构建和每次发布前执行的 anti-slop linter。
npx skills add agiwhitelist/auteur
Claude Code、Codex 和 Cursor 的开源设计方法引擎，含 23 个 agent skill，支持固定设计判断、多种语法、语义调色板、参考编…
Paper.design 的开源替代方案。支持人类与 AI agent 实时协作设计的多人画布，内置 MCP。
git clone https://github.com/kgoedecke/doop && cd doop
Cursor skill 为 AI agent 提供 60+ 界面组件的实践、布局模式和设计系统规范，避免生成通用 UI。
```bash
# Clone into your Cursor skills directory
git clone https://github.com/carmahhawwari/ui-design-brain.git \
~/.cursor/skills/ui-design-brain
```开源 skill，可学习任意品牌并生成完整设计系统。支持 Claude Code 和 Codex。助手构建的 UI 均符合品牌。
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue
构建者，而不只是研究者。将高收入应用模式转为原生品质移动界面的 agent skill。
npx skills@latest add appllama/appllama-skills
用于设计美观一致网页的 Claude Code skill——先写规范，再写代码。
git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design
支持 Claude Desktop、Claude Code、Cursor、Antigravity 等 AI 工具读取、分析和修改 Figma 设计的 Mode…
npx claude-talk-to-figma-mcp
开源 AI 生成 UI 视觉风格库：148 套风格，包含 design tokens、prompts、MCP、Agent Skill 和 npm CLI。
git clone https://github.com/AnxForever/stylekit.git
将设计系统编译为 Agent Plugin，提取视觉身份，生成 SKILL.md 与 tokens.css，检查绕过 tokens 的内容。
bunx tinte from --emit-script # print the extraction script for a live page
Claude 幻灯片 skill，包含 20 条品牌 DNA 设计原则。
git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design
Claude Code设计顾问：反通用UI、风格试衣间、58个真实网站设计系统库
npx skills add joeseesun/qiaomu-design
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.
为 AI coding agent 提供设计系统：一条命令将公司 DESIGN.md 参考和 skill 安装到 Claude Code、Codex、Curs…
npx oh-my-design-cli install-skills
面向使用 AI 编程工具进行原型设计和构建的设计师的 agent skill 集合，编码设计流程，让 AI 遵循结构化路径而非随机输出。
npx skills add julianoczkowski/designer-skills
用于生成 14 种格式设计卡片的 Claude Code skill，涵盖平台封面、社交分享卡和编辑排版，遵循 Anthropic
npx skills add https://github.com/geekjourneyx/claude-design-card
Claude Code skill，基于真实参考图和开发者持久化审美档案生成 UI，避免通用 AI 默认风格。
git clone https://github.com/codeswithroh/tastemaker ~/.claude/skills/tastemaker
面向 Claude Code、Cursor 和 coding agent 的设计 skill。将 AI 界面转为可发布前端。安装：npx skills add…
npx skills add superdesigndev/superdesign-skill
Claude Code、claude.ai、Cowork 的创意编程 skill，涵盖动效、微交互和设计系统；编码前确认交互方案，反对 AI 套路。
git clone https://github.com/AThevon/genjutsu.git
面向 AI 编程 agent 的设计工程系统——以精工级质量交付 UI。安装为 agent skill。
npx skills add educlopez/ui-craft
用 Claude Code 无需编程构建动画网站：一次安装包含 UI/UX Pro Max、Framer Motion 和 21st.dev。
git clone https://github.com/tenfoldmarc/website-builder-setup.git ~/.claude/commands/website-builder-setup
适用于 Claude Code、Cursor、Windsurf、Gemini CLI 和 Copilot 的虚拟设计团队，含26种角色、62个命令和设计知识。
git clone https://github.com/Adityaraj0421/naksha-studio.git ~/.claude/plugins/naksha
Claude Code skill：通过 ZenMux 使用 GPT Image 2 生成 UI 设计稿
npx skills add oil-oil/draw-ui
使用 Claude Code SDK 和 GLM 4.7，通过 ui-ux-pro-max Skill 自动生成100个落地页的基准测试项目
面向 AI agents 的研究优先设计 skill，通过 Refero MCP 获取真实应用界面和流程。
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
Claude Code skill——逆向拆解任意网站的设计风格：具体设计令牌与明确取舍（解释 WHY，而非只说 WHAT）
git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste
开源 MCP server，为 Claude Code、Codex、Cursor、OpenCode、ZCode 提供网站参考，支持截图搜索和网站记录，免 AP…
claude mcp add awwwards -- npx -y awwwards-mcp
AI 可通过 JavaScript 在 Figma 画布绘制 UI，并将现有设计读取为结构化数据。支持 Claude Code、Cursor、VS Code…
claude mcp add figma-ui-mcp -- npx figma-ui-mcp
开源 MCP server 与 shadcn/ui registry：含31个主题、设计令牌、UI原则和WCAG规则，支持 Claude Code、Curso…
npx shadcn@latest add https://www.better-design.com/registry/<design-system>/<component>.json
由 AI agent 直接生成 UI 组件设计系统文档，可渲染到 Figma 或 .md 文件，支持 Cursor、Claude Code 和 Codex。
Dig 构建的供 agent 使用的 prompt-as-code 设计系统，适用于 Codex、Cursor 和 Claude Code，含目录、布局、区块…
npx dig-ui-skill install codex
Claude Code 的专业移动应用 UI/UX 设计 skill
npx skills add ceorkm/mobile-app-ui-design
SwiftUI 前端设计 skill：6条规范、设计咨询、品牌资产指南和五维评审，支持 Claude Code、Cursor、Codex、OpenCode 等…
npx skills add wholiver/swiftui-design-skill -g -y
AI 驱动的 Storybook story 生成器，支持任意框架、设计系统和 LLM 提供商
npm install -D @tpitre/story-ui
为 Codex、Claude Code 和兼容 Pi 的 agent 设计认知循环：构框、发散、观察、重构
npm install -g @3xhaust/oh-my-design
人类和 AI 都能读懂的设计系统，适用于 Claude Code 和 Cursor
claude mcp add melta-ui node ./dist/index.js
面向游戏 UI 设计的 Cursor Agent Skills 工作流，涵盖原型生成、风格切换、页面延展和组件拆解，通过 Spec-Kit 文档、视觉契约与资…
分析图像、网站和 Figma 文件，生成包含令牌系统、组件清单和重建说明的结构化 design.md 的 Claude skill
git clone https://github.com/uxKero/anydesign.git
Design Buddy：用于品牌设计系统、GPT-image-2 图像、图表、信息图、Logo、幻灯片、微信排版和社交图片的视觉制作 Agent Skills
npx skills add SpaceZephyr/design-buddy
Claude Code + Figma 的约束层：4 个 skill 让 AI 遵循你的 Design System。组件保持关联，tokens 保持绑定，不…
可移植的 Claude skill，将 Claude 变成 HTML 产物设计专家，支持演示文稿、落地页、原型、动画和海报。改编自 Claude.ai 内部设…
npx skills add jiji262/claude-design-skill -g
用于通过引导式探索和迭代创建及优化 SVG 标志的 agent skill。
claude plugin add neonwatty/logo-designer-skill
从公开网站提取设计令牌（颜色、字体、间距、圆角、阴影），生成 JSON 和 CSS 自定义属性，可作为 Claude、Cursor、Codex 的 agent…
npx skills add arvindrk/extract-design-system
Easel 是 Codex 和 Claude 的 macOS 工作区，支持 AI 产品设计与前端迭代，集成本地项目库、设计系统、Codex 对话、网页预览检查…
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
115个品牌主题HTML设计，作为Claude Code skill（93网页+22个iOS，含20个中国展示）。一行安装，再说：“Linear风页面”“飞书…
适用于 Codex、Claude Code、ZCode 等 AI coding agent 的可复用 UI/UX 设计 skill
使用 Claude Code 在 Figma 中设计。Bridge 通过 WebSocket 将终端连接到 Figma Plugin API。
npx @noemuch/bridge-ds init
面向 AI agent 的瑞士国际主义风格设计系统 skill
npx skills add zeke/swiss-design-skill
Figma 插件，提取本地样式规范并生成 DESIGN.md 和 SKILL.md，供 Claude Code、Codex、Cursor 等 AI 工具使用
```bash
npm install
```design.how 的 agent skill 与设计系统：从应用构建设计系统，用 agent 发布 UI，并在 CI 中强制执行。
npx skills@latest add https://design.how
提供品牌参考，生成完整设计系统页面和一页 A4 品牌手册 PDF。
git clone https://github.com/robonuggets/design-system
图文卡片生成 Skill：内容→海报级组图（小红书3:4/公众号封面）；1引擎+3种视觉语言：静纸 Still Paper、实证 Signal Proof、图…
npx skills add dososo/blcaptain-style-skill -g
高级 UX 与设计系统知识，让 AI agent 自动应用。
npx skills add dembrandt/dembrandt-skills --all
Claude skill：分析Claude Code原型，用搜索和Code Connect映射至Figma设计系统，逐状态生成画面并标注触发器、转换和边界情况
git clone https://github.com/alima-max/prototype-to-figma-skill.git ~/.claude/skills/prototype-to-figma
可供 agent 编辑的画布设计工具。在画布上排列结构化 UI 节点，通过 MCP 连接 Claude、Codex、Cursor 或 opencode
npx skills add https://github.com/lassejlv/loora/tree/main/skills/loora-design-guide
Open Analytics 设计语言作为 agent skill：组件配方、类型检查源码、token CSS 和 CLI，适用于 Claude Code、C…
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
用于使用 Google Material Design 3、Material You、M3 Expressive、无障碍、适配布局和语义化设计令牌设计、评审与…
git clone https://github.com/skydashnet/material-design-3-ui-skill.git
Codex 优先的 Agent Skills 库，涵盖前端、网站、动效、无障碍、QA 和交付流程。
git clone https://github.com/TheGoat395/Codex-Skills.git
适用于 Claude Code、Codex 和 Gemini CLI 的前端设计 skill。八种美学锚点，分别对应特定 CSS token。每次需求选一种。
git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design
Claude Code 的 UI/UX 系统：71 个插件、93 个 agent、74 个 skill，涵盖设计、无障碍和前端工作流。
git clone https://github.com/HermeticOrmus/LibreUIUX-Claude-Code.git
为 AI agent 按需提供62个品牌设计语言的 Claude Code skill
git clone https://github.com/zephyrwang6/brand-design-md.git
Production-Stage Visual Design & In-Codebase UI Engineering Suite
npx @tidyfactor/cli-styler add-skill
Gridgeist 将产品意图转化为严谨的视觉系统，避免千篇一律的 AI SaaS 风格。
npx skills add ohmiler/gridgeist -g
网页设计 skill，适用于 Claude Code。来自 38 个网站的 48 种模式，避免生成通用 AI 前端。
/plugin marketplace add MickeyAlton33/web-designer-plugin
为 Claude Code 复现 Claude Design：用 skills、starters 和 Chrome DevTools MCP 创建 HTML…
git clone https://github.com/bluzir/claude-code-design.git
设计系统优先的前端 UI 实现 Codex skill
git clone https://github.com/MaxHan7/frontend-ui-standards-skill.git
通过代码执行让 AI agent 控制 Figma 的 MCP
claude mcp add figma-pilot -- npx @youware-labs/figma-pilot-mcp
本地设计风格图库：输入截图，输出设计词汇和可粘贴的 Claude Code 简报。网页设计三步流程第 1 步。
git clone https://github.com/cth9191/taste-vault.git
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
配套 Figma plugin 的 MCP server，让 AI agents 安全读取和绘制 Figma canvas，提供结构化验证、默认安全绘图和多窗…
git clone https://github.com/<you>/reqwise-figma-mcp.git
Claude Code 工作流：复现 ClaudeDesign，支持并行设计探索、面板评审、综合与对抗式优化，生成单个前端页面；双语 README
从设计系统提取的 UI 约束，用于配合 AI agent 构建像素级界面。
npx skills add ihlamury/design-skills
东方文化编辑海报 v2 Codex skill：Image 2 出图、中文标题精炼、真实文化物证、A/B/C 测试
AI agent产品验证系统：创意→Logo→产品→品牌→发布视频。桌面应用，支持 Claude Code 和 Codex 的 skill。
uv tool install "git+https://github.com/ReScienceLab/super-prototyping#subdirectory=tools"
AI配对、150+推理规则、CLI、18个平台模板；支持Claude、Cursor等；107种风格、127套配色、107种字体
npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro
Claude Design：AI UI/UX工具，支持截图转 React、Figma、Tailwind CSS、设计系统、SVG、暗色模式、响应式布局和代码导…
精选网站的 DESIGN.md 文件，解析设计系统，供 AI agents 使用。Sparkbites 出品。
npx design-bites add linear.app
用于产品原型生成的 Codex skill，包含 IA、设计门禁、页面 UI YAML 和 Figma 工作流。
```text
使用产品原型生成 Skill，生成一个会员系统前台页面原型
```审查并重写 AI 生成的前端，去除紫色渐变、奶油+陶土色和单色默认样式。附零依赖扫描器，是 avoid-ai-writing 的设计对应工具。
git clone https://github.com/funboy322/avoid-ai-design.git ~/.agents/skills/avoid-ai-design
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.
npm install -g plumb-mcp
基于公开 llms.txt 的 DaisyUI 组件文档本地 MCP 服务器
docker run -i --rm daisyui-mcp
Claude Code、Cursor、Windsurf 设计引擎：确定性反 AI-slop 检查器（152 条规则）；离线运行，不调用 LLM，MIT。
pip install uxskill
Claude Code 移动应用 UI/UX 设计 skill：iOS、Android、无障碍和 React Native 最佳实践
git clone https://github.com/awesome-skills/mobile-app-design.git
Throughline——连接设计与代码。Claude Code 插件，引导你从空白 Figma 文件构建同步、经过故事测试的组件库。
/plugin marketplace add jrpease/throughline
Figsor 是连接 Cursor 与 Figma 的 MCP server，支持通过聊天在 Figma 画布中创建和编辑设计。
claude mcp add --transport stdio --scope project figsor -- npx -y figsor
为 AI 编码工作流提取设计上下文，从任意 URL 提取颜色、字体、间距和断点，生成可移植的 DESIGN.md
npx @designmdcc/cli stripe.com > DESIGN.md # human-readable spec
Figma Console MCP：Figma MCP server的Markdown skill，含令牌、变量、组件、WCAG审计、版本、FigJam、Sl…
git clone https://github.com/southleft/figma-console-mcp-skills.git
基于现代最佳实践（2026）的 UX/UI 设计指导 Claude Code skill
```
~/.claude/skills/ux-designer/
```防止 Claude Code/Cursor 猜测 UI。将任意网站设计系统提取为符合规范的 DESIGN.md，通过官方 @google/design.md…
npx brandmd https://stripe.com -o DESIGN.md
한국 브랜드의 디자인 언어를 출처가 달린 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 스킬 설치
1,486 个真实网页设计系统，提取为机器可读规范。面向 AI coding agents 的 MCP server。
git clone https://github.com/qiuyiwu1989-star/opendesign
用于使用 SwiftUI Liquid Glass 设计系统构建和迁移 Apple 平台应用的 Claude Code skill（iOS 26+、macOS…
/plugin marketplace add haider-nawaz/liquid-glass-skill
用 Rust 构建的 Figma MCP，通过插件提供完整读写权限（无 REST API、无速率限制，含 73 个工具）
claude mcp add -s project figma-mcp-rust -- npx -y @alvinindra/figma-mcp-rust@latest
基于真实产品界面的 MCP server 和 design skill，用于编码 agent 的 UI 工作。两种工具，可通过 npx 安装。
npx skills add PyModel/niblet-skill-mcp --skill niblet -y
将设计系统质量从“尽力而为”变成可重复的工程流程的 agent skill。
/plugin marketplace add ohprettyhak/design-farmer
Claude Code / Cowork 的前端设计规范，涵盖字体、配色、动效、组件与反套路。
npx skills add h3nryprod01/design-taste
Sumi——Claude Code 的 UX/UI 设计知识库：43 个 skill、168 份参考、37 个命令，反低质设计并提供可审计引用链。使用 /su…
/plugin marketplace add phazurlabs/sumi
用 AI 视觉从任意网站生成兼容 Google Stitch 的 DESIGN.md 文件。使用自有 Gemini、OpenAI、Claude 或 Ollam…
git clone https://github.com/hasi98/designpull
一行意图 → 一份演示级深色编辑风 HTML 演示文稿。Claude Code skill。
/plugin marketplace add kimsh-1/deck-factory
代码→设计→代码：Claude Code skills 连接 Figma 与生产代码库：d2c / c2d / ds-govern。安装：npx skills…
npx skills add BIAsia/c2d2c
将中国地域文化转化为克制、当代的大字海报与编辑海报，非旅游宣传。
git clone https://github.com/dacnay816y62-hub/regional-culture-poster.git ~/.agents/skills/regional-culture-poster
参考 Toss Tech Design 文章制作的非官方 skill。
npx skills add Ilbie/Toss-Design-Skill
面向 AI agent 的设计知识层，综合 10 多本设计书籍，生成明确意图的 UI/UX，避免套路。
npm install -g design-skill-os
从 Claude Code 检查、构建或扩展 Figma 设计系统；支持只读审计、WCAG 检查、组件评分，构建模式含变量绑定和 slots，可选 Phase…
git clone https://github.com/natdexterra/work-with-design-systems.git .claude/skills/work-with-design-systems
中文字体选择 agent skill：可商用 CJK 字体库、场景选字矩阵、CJK-Latin 搭配规则，支持 Claude Code、Cursor、Kimi…
PencilPlaybook 是 Pencil.dev + Claude Code 的 UI Taste-Skill，结合感知心理学与资深设计约束，减少雷同…
git clone https://github.com/stevembarclay/pencilplaybook ~/.claude/skills/PencilPlaybook
任意 URL 按需生成设计系统。五种形式，一个 agent：web、API、CLI、TypeScript SDK，以及可在 Claude Code、Codex…
npx skills add MohtashamMurshid/getdesign
零依赖、单文件 HTML 设计系统与 agent skill，受 shadcn/ui 启发。完全离线、无需 npm，提供 6 种布局原型和 LLM 原子工具集。
npx skills add QingYunA/agent-html
Claude Code、Cowork 和 Cursor 的设计风格。Prom 是泰语“准备好”的意思。免费学习：loop.sv-academy.org
设计师AI skill/agent，支持VS Code Copilot、Claude Code、OpenAI Codex；DESIGN.md提取网站设计系统。
dwic 是终端内的产品设计工具。运行 npx dwic-audit 检查 WCAG 对比度、令牌偏移和结构缺口，由48名设计专家修复，并跨会话记住设计决策。
提升 AI 生成 UI 设计质量的 skill，教 Claude Code、Codex、Antigravity 构建涵盖动效、排版、色彩和 WCAG AA 的…
适用于 Codex、Claude、Gemini、DeepSeek 和通用 Agents 的模型无关 Fantasy Mouse UI 设计插件
一句话出网页；4制3审，检59种反模式；Impeccable、tasteskill、UI Skills、emil-skill；Claude Code/Code…
Claude Code 高级产品设计 skill：基于158份审核资料，构建研究驱动、无障碍且不千篇一律的UI，附质量评分清单。
Fable 风格设计系统，适用于 AI coding agent、Claude、Opus 4.8、Codex、Cursor、Gemini、Antigravit…
为 AI 编程助手提供设计指导：12 项原则、13 份参考文档、7 份组件检查清单。支持 Claude Code、Cursor、Codex 和 Windsur…
基于 context-and-memory package 的记忆驱动设计系统，指导任意 AI coding agent 生成滚动驱动的产品落地页。单个 HT…
Suanfish Design System：7层33个AI设计agent，含REJECT机制；v2.5新增Path G（流式、工具调用、推理、引用、工件）。
Claude/Antigravity/Opencode AI skill，可从任意网站逆向分析设计系统，提取颜色、字体、间距和组件，生成交互式 HTML 文档。
macOS 26（Liquid Glass）可作为 Claude Code、Cursor 和 Gemini CLI 的即插即用 skill。
Agent skill：按 Awwwards/Webby/FWA 标准设计网页，通过 8 维截图自审循环改进（Claude Code、Codex、Cursor）
UI 动效设计 skill，含13类111种效果；按场景生成CSS/JS代码，支持 Claude Code、Codex、OpenClaw。
面向 AI coding agent 的 Structural Grid（Exposed Grid / Rail Layout）设计系统 skill。
在 Tailwind、Figma、CSS 与 Material 3、SwiftUI、CSS Variables 之间转换设计令牌的 MCP server，用于…
Awwwards是评分体系，不是风格；Claude Code skill将设计40/易用30/创意20/内容10编为8阶段构建法，含18个参考、模板和可运行的…
| 工具 | 星标 | 评分 |
|---|---|---|
| open-design | ★ 103.3k | 78 |
| Figma-Context-MCP | ★ 16.0k | 74 |
| huashu-design | ★ 25.7k | 74 |
| stitch-skills | ★ 8.1k | 83 |
| open-codesign | ★ 8.1k | 75 |
| qiaomu-mondo-poster-design | ★ 1.3k | 46 |
| logo-generator-skill | ★ 2.3k | 58 |
| design-dna | ★ 1.5k | 76 |
| ui-ux-pro-max-skill | ★ 138.6k | 86 |
| taste-skill | ★ 100.0k | 83 |
| skills | ★ 48.6k | 82 |
| hallmark | ★ 30.6k | 80 |
| onlook | ★ 26.9k | 68 |
| html-anything | ★ 9.1k | 75 |
| Skills | ★ 6.8k | 75 |
| openpencil | ★ 6.4k | 72 |
| baoyu-design | ★ 4.5k | 68 |
| design-extract | ★ 4.3k | 72 |
| logo-design-skill | ★ 3.8k | 83 |
| scroll-craft | ★ 2.9k | 71 |
星数最高的有:nextlevelbuilder/ui-ux-pro-max-skill(UI/UX 设计能力)、Leonxlnx/taste-skill(让生成的界面不千篇一律)和 nexu-io/open-design(开源的 Claude Design 替代品)。要让 agent 连接 Figma:GLips/Figma-Context-MCP。它们都收录在 GitHub 开源合集 zhuyansen/awesome-claude-design-skills 里。
大多数设计 skill 是一个带 SKILL.md 的文件夹:复制到 ~/.claude/skills(或项目的 .claude/skills),或者用仓库提供的命令安装,之后让 Claude Code 做界面相关的工作,它就会加载这个 skill。本页每张卡片都链到仓库自己的安装说明,并显示安全评级。
2026 年顶尖的AI 设计工具是 open-design, Figma-Context-MCP, huashu-design。Agent Skills Hub 按 GitHub Star、质量分（含完整度、示例、agent 就绪度等 6 个维度）和近期活跃度对 186 个选项排序，每 8 小时基于实时 GitHub 数据重建。
open-design（103.3k stars）是通用AI 设计工具工作流中采用最广的选择，用 TypeScript 编写。Figma-Context-MCP（16.0k stars）是有力的替代。按你现有技术栈来选：匹配团队已用的语言和运行时，把集成成本降到最低。拿不准就从 open-design 开始——它社区最深、线上示例最多。
遇到以下情况建议别用现成的AI 设计工具：（1）需求需要工具插件系统不支持的深度定制；（2）有严格合规要求、禁止第三方依赖；（3）工具维护停滞（上次提交超过 6 个月）；（4）数据量小到写个 50 行脚本比学这工具还省。对每天 100 次请求以上的生产工作流，维护良好的工具省下的时间通常盖过定制损失。
AI 设计工具专门聚焦AI 设计工具相关的具体任务；AI 生图 Skill:GPT Image、Nano Banana 与 Flux是相关但不同的类别——那类工具见 https://agentskillshub.top/best/image-generation/。两者常出现在同一条 agent 流水线里，却解决不同问题：主目标是具体任务时选AI 设计工具，工作流更宽泛时选AI 生图 Skill:GPT Image、Nano Banana 与 Flux。
对多数团队是的。open-design 有 103.3k 个 star 的社区验证，能处理你没想到的边界情况，还自带文档。只有当（1）需求高度非标准、（2）有安全/合规理由要避开开源依赖、或（3）维护负担小到（代码 <200 行）长期更省时，才值得自己造。盈亏平衡点通常在省下约 2-3 周开发时间。
列表里多数AI 设计工具是开源的，采用宽松许可（MIT、Apache 2.0）。少数在免费自托管内核之上提供付费托管/云版本。商用前务必查看每个工具 GitHub 仓库的 LICENSE——有些用 AGPL 或非商业限制，可能不适合你的部署模式。
评级来自基于 SlowMist agent 安全分类法的规则扫描：42 条公开规则，覆盖凭证窃取、数据外泄、curl | sh 安装等。它是第一层扫描，不是人工审计 — 我们如实说明，不夸大。
问题规模有独立研究佐证：Liu et al. (2026) 对 31,132 个 agent skill 的研究发现，26.1% 含有安全漏洞。我们自己的全目录普查已作为可引用的开放数据集发布。
信源与负责人：