01 / UI 生成
Frontend Design
by Anthropic
先确定明确的视觉方向，再生成具有设计判断的生产级前端界面。
编辑判断：最稳妥的起点；篇幅短、约束强，适合压制千篇一律的 AI UI。
- 适合
- Landing Page、产品页、组件与完整 Web App
- 平台
- Claude Code
- License
- Repo terms
HTML/CSSReactVue
02 / 质量与审查
Impeccable
by Paul Bakaus
覆盖设计上下文、生成、批评、简化、动效、适配和最终打磨的完整 UI Skill 套件。
编辑判断：不是单个 Prompt，而是一套可循环使用的设计导演工作流。
- 适合
- 已有产品的持续设计、Review 与 Polish
- 平台
- Codex · Claude Code · Cursor · Copilot
- License
- MIT
Web UIDESIGN.md
03 / 设计系统
UI/UX Pro Max
by NextLevelBuilder
把 UI 风格、配色、字体、UX 规则和图表类型组织成可检索的设计知识库。
编辑判断：适合快速拓宽方案空间，但最终取舍仍需产品语境约束。
- 适合
- 设计探索、Design System、跨技术栈 UI
- 平台
- Codex · Claude Code · Cursor · Gemini
- License
- MIT
ReactVueTailwindFlutter
04 / Design to Code
Stitch Skills
by Google Labs Code
配合 Stitch MCP 生成界面、完善 Prompt，并将设计结果转换成 React / shadcn/ui。
编辑判断：当前较完整的 Stitch 到工程代码工作流，适合多页面原型。
- 适合
- Stitch 设计生成、网站规划、React 转换
- 平台
- Codex · Claude Code · Cursor · Gemini CLI
- License
- Apache-2.0
Stitch MCPReactshadcn/ui
05 / UI 生成
Frontend Design Principles
by Joshua David Thomas
根据产品型界面或营销型页面加载不同设计原则，强调每个设计选择都必须有理由。
编辑判断：路由清晰，尤其适合区分 SaaS 工作台与 Marketing Site。
- 适合
- Dashboard、Admin、SaaS、营销页
- 平台
- Agent Skills compatible
- License
- MIT
FrontendApp UIMarketing
06 / 设计系统
Design Loop
by Jezweb
用 SITE.md、DESIGN.md 和 baton prompt 维持跨页面、跨会话的视觉一致性。
编辑判断：适合长期站点工程，解决 Agent 每轮重新发明设计的问题。
- 适合
- 多页面网站、长期迭代、设计记忆
- 平台
- Claude Code
- License
- MIT
DESIGN.mdHTML/CSS
07 / 设计系统
UI Design Skills Pack
by Wshobson
包含 Design System、Accessibility、Responsive、Interaction 与移动端设计等多个细分 Skill。
编辑判断：覆盖面广，适合作为专项检查清单；使用前应只安装需要的部分。
- 适合
- A11y、响应式、交互与设计系统专项
- 平台
- Claude Code
- License
- MIT
Web ComponentsReact NativeCSS
08 / 动效与交互
Distinctive Frontend
by Koomook
围绕字体、主题、Motion 与背景层次强化视觉个性，减少模板化 AI 美学。
编辑判断：适合追求高视觉冲击的实验项目，不建议无脑用于企业后台。
- 适合
- 创意官网、作品集、活动页
- 平台
- Claude Code
- License
- MIT
CSSMotionFrontend
09 / UI 生成
Claude Design Skill
by jiji262
面向 HTML Artifact 的可移植设计 Skill，可生成 Landing Page、原型、动画、海报和 Deck。
编辑判断：输出类型丰富，适合快速视觉实验；工程级页面需要二次整理。
- 适合
- HTML Artifact、Prototype、Animation
- 平台
- Agent Skills compatible
- License
- MIT
HTMLCSSJavaScript
10 / 资源合集
Frontend Design Toolkit
by Wil Waldon
按设计 Skill、动效、Figma、测试、框架和部署整理的前端 Agent 工具导航。
编辑判断：不是单个 Skill，更像 UI Agent 工具链的索引和选型入口。
- 适合
- 发现更多 Skill、MCP 与组合工作流
- 平台
- Claude Code
- License
- See repository
SkillsMCPPlugins
11 / UI 生成
Frontend UI Engineering
by Addy Osmani
从组件架构、状态、Design System、Accessibility 和性能出发构建生产级 UI。
编辑判断：设计判断与前端工程约束比较平衡，适合真实产品而非单纯视觉 Demo。
- 适合
- 组件、响应式布局、交互与既有产品改造
- 平台
- Codex · Claude Code · Agent Skills compatible
- License
- See repository
ReactTypeScriptCSSWCAG
12 / UI 生成
Web Artifacts Builder
by Anthropic
用 React、TypeScript、Tailwind 和 shadcn/ui 创建带状态、路由的复杂单文件 Web Artifact。
编辑判断：脚手架和打包路径完整，适合复杂交互 Artifact，不适合简单静态片段。
- 适合
- 可交互 Demo、工具、数据界面与多组件 Artifact
- 平台
- Claude · Agent Skills compatible
- License
- Repo terms
ReactViteTailwindshadcn/ui
13 / Design to Code
shadcn Skills
by Matt B
先搜索 1,500+ 现有 shadcn 组件，再按主题风格、可访问性与动效约定 Review 实现。
编辑判断：解决 Agent 重复造组件的问题；Discovery 与 Review 两个 Skill 分工清楚。
- 适合
- shadcn/ui 组件发现、选型和实现审查
- 平台
- Codex · Claude Code · Cursor
- License
- MIT
shadcn/uiRadix UITailwindMotion
注意：依赖外部 Registry · 第三方组件质量不一
查看原始仓库↗14 / UI 生成
Taste Skill
by Leonxlnx
面向 Landing Page、Portfolio 与 Redesign 的 anti-slop 设计 Skill，先读 Brief 再确定视觉方向。
编辑判断：边界意识很好：明确不服务 Dashboard，适合营销与品牌表达型页面。
- 适合
- Landing Page、作品集、官网改版
- 平台
- Claude Code · Agent Skills compatible
- License
- MIT
ReactRadix UIshadcn/ui
15 / 质量与审查
Web Design Guidelines
by Vercel Labs
根据持续更新的 Web Interface Guidelines 审查 Accessibility、UX、表单、动效与界面代码。
编辑判断：适合作为交付前的独立 Review Gate，输出能直接定位到文件和行。
- 适合
- UI Code Review、Accessibility 与 UX Audit
- 平台
- Codex · Claude Code · Cursor
- License
- MIT
WebARIAFormsMotion
16 / 动效与交互
Frontend Studio
by MiniMax AI
将 UI、电影感动效、生成式媒体、营销文案与 p5.js 视觉整合到一个前端制作流程。
编辑判断：能力跨度大，适合视觉型营销项目；普通业务页面使用成本偏高。
- 适合
- 品牌官网、滚动叙事、生成式视觉与媒体页面
- 平台
- Agent Skills compatible
- License
- MIT
Next.jsVueSvelteGSAPp5.js
注意：包含媒体生成脚本 · 需要外部 API · 流程较重
查看原始仓库↗17 / 质量与审查
Governed Frontend UI Kit
by Jscraik
包含 Baseline UI、Frontend Design、Visual Regression 等 10 个受治理的前端 UI Skills。
编辑判断：质量治理和 Skill 验证思路突出，适合研究团队级 UI Agent 工作流。
- 适合
- 视觉回归、基线检查和团队 Skill 治理
- 平台
- Codex · Claude Code · Agent Skills compatible
- License
- See repository
Visual RegressionUI ReviewSkill Evals
注意：大型多 Skill 仓库 · 安装器与运行时较复杂 · 未逐项实测
查看原始仓库↗18 / 质量与审查
React Native Best Practices
by Callstack
覆盖 React Native 渲染、列表、动画、启动时间、内存与原生 Profiling 的专项 Skill。
编辑判断：移动 UI 性能方向难得的系统化资料，适合把“界面顺滑”落实成可测指标。
- 适合
- React Native UI 性能、动画和设备端诊断
- 平台
- Codex · Claude Code · Cursor · Gemini CLI
- License
- MIT
React NativeiOSAndroidProfiling
19 / Design to Code
Figma Generate Design
by OpenAI
从代码或描述出发，复用 Figma Design System 的组件、Variables 与 Styles 组装完整页面。
编辑判断：重点是复用现有设计资产，而不是用硬编码矩形假装 Design System。
- 适合
- 从产品描述或代码生成、更新 Figma Screen
- 平台
- Codex
- License
- See repository
Figma MCPDesign TokensComponent Library
注意：依赖 Figma MCP · 需要文件与 Team Library 权限
查看原始仓库↗20 / 资源合集
Markdown Visual Skills
by Markdown Viewer
提供 Mermaid、D2、Vega-Lite 等多种渲染引擎的图表、数据可视化和技术视觉 Skill。
编辑判断：不是传统 UI 生成器，但很适合补齐产品文档和 Dashboard 中的可解释视觉。
- 适合
- 流程图、架构图、数据图表与技术内容卡片
- 平台
- Codex · Claude Code · Cursor
- License
- See repository
MermaidD2Vega-LiteMarkdown
注意：包含多个渲染引擎 · 输出兼容性需验证 · 未逐项实测
查看原始仓库↗