夜雨聆风摘要
AI 写前端已经不稀奇了。真正的问题是：它写出来的界面，能不能像一个真实产品，而不是一眼看出是模板化生成的“AI 页面”。
最近我集中看了一批前端设计相关的 Agent Skill，包括 Anthropic frontend-design、OpenAI frontend-skill、ce-frontend-design、SuperDesign、Open Design、Claude Design 以及一些设计系统和 UX 协作类 skill。
它们解决的不是同一个问题。
有的负责让页面更有视觉记忆点，有的负责识别现有设计系统，有的负责抽取 design tokens，有的负责 UX 决策，有的更像完整的设计工作台。
为了让差异更直观，我用同一个页面任务做了一组对照：
一个 AI 内容运营平台的首页 Dashboard，用来查看选题、草稿、发布、数据反馈和待处理事项。
文中 14 张截图不是第三方 skill 的官方输出，而是基于各 skill 公开说明和方法论，围绕同一个页面任务做出的模拟效果图。它们的作用是帮助理解不同 skill 的设计取向，而不是证明某个 skill 一定会生成完全相同的页面。
一、先把结论说清楚
前端设计类 skill 不能简单理解成“生成漂亮页面”。它们更像是几类不同的设计角色：
| 类型 | 代表对象 | 主要解决什么 |
|---|---|---|
| 视觉生成型 | Anthropic frontend-design、OpenAI frontend-skill、frontend-aesthetics | 避免模板感，让页面有明确视觉方向 |
| 工程落地型 | ce-frontend-design | 先识别现有设计系统，再实现和截图验证 |
| 设计系统型 | Jwynia frontend-design、frontend-design-system | 抽取 token、组件规范、布局和可访问性规则 |
| UX 协作型 | bencium-controlled-ux-designer、ui-ux-pro-max | 先做设计取舍，再进入实现 |
| 设计工作台型 | superdesign、Open Design、Claude Design | 生成草稿、做多方案迭代、输出 visual artifact |
| 工具链集成型 | mcp-figma-desktop | 从 Figma 抽取图层、token、截图和实现信息 |
也就是说，成熟的前端 Agent 工作流不应该只依赖一个“写页面”的提示词，而应该是：
设计判断 → 页面实现 → 浏览器验证 → 截图交付 → 继续打磨这才是前端设计 skill 和普通代码生成提示词的区别。
二、这次对比了哪些 skill？
这次主要看了 14 个对象，来源包括本机已安装 skill、skills.sh、GitHub、Smithery、Elite AI Tools，以及 Open Design / Claude Design 这类设计产品。
| Skill / 工具 | 定位 |
|---|---|
Anthropic frontend-design | 创建有辨识度、生产级、避免通用 AI 审美的前端界面 |
OpenAI frontend-skill | 强视觉页面、图像主导层级、克制构图和动效 |
Jwynia frontend-design | 分析 CSS，抽取 design tokens，生成颜色、字体和组件 |
ce-frontend-design | 真实项目优先：识别现有设计系统、规划、实现、截图验证 |
superdesign | UI/UX 草稿、迭代、组件抽取的设计 agent |
bencium-controlled-ux-designer | 先询问、再决策的 UX 协作型 skill |
ui-ux-pro-max | 多技术栈、多设计风格、多 UX 指南的规则库 |
frontend-design-system | token、布局规则、动效指南、可访问性检查 |
claude-web-design-skill | 给 Claude Code 增加偏营销站点的审美规则 |
frontend-aesthetics | 避免模板化 UI，同时尊重项目 design-dna 和 token |
fd | 前端设计和打磨模式，强调视觉方向和 UI polish |
mcp-figma-desktop | 通过 Figma 桌面端抽取 UI 代码、design tokens 和截图 |
| Open Design | 开源设计工作台，类似 Claude Design 的替代方案 |
| Claude Design | Anthropic 的视觉原型产品，用于生成 design artifact |
这里要特别区分：Open Design 和 Claude Design 不是普通 SKILL.md。它们更像产品或工作台，里面可以承载多套 skill、设计系统和 artifact 生成流程。
三、同一个 Dashboard，14 种设计取向
下面所有截图都使用同一个信息架构：顶部导航、关键指标、选题队列、内容生产进度、近期表现和今日待办。
这样对比的好处是：内容不变，只看不同 skill 的设计偏好如何影响页面。
1. Anthropic frontend-design
偏强视觉表达，反模板、反默认 SaaS 卡片。这个版本更像高对比产品海报。
2. OpenAI frontend-skill
更克制，强调构图、留白和视觉锚点，减少不必要的卡片噪音。
3. Jwynia frontend-design
更像设计系统工程师：先抽 token，再组织组件。页面里能看到规范化痕迹。
4. ce-frontend-design
最接近真实业务后台：先看现有系统，再做克制、可扫描、可验证的界面。
5. superdesign
更像设计画布里的候选稿，适合多方案草稿、主题变体和组件抽取。
6. bencium-controlled-ux-designer
重点不是炫技，而是先做设计决策。这个版本像经过一轮 UX 评审后的方案。
7. ui-ux-pro-max
偏规则库驱动，强调配色、图表、可访问性和多场景 UI 指南。
8. frontend-design-system
企业设计系统味道最重：token、布局、状态和一致性优先。
9. claude-web-design-skill
更偏网页设计和营销站审美，强调排版、尺度、层级和“高级感”。
10. frontend-aesthetics
在项目 design-dna 内摆脱模板感，比普通后台更鲜明，但仍保留产品结构。
11. fd
偏 UI polish，像一个经过打磨后的深色运营工具。
12. mcp-figma-desktop
重点不是审美生成，而是从 Figma 抽取图层、token、截图和实现信息。
13. Open Design
它是工作台，不是单个 skill。这个版本体现的是 skill、设计系统、预览和导出的闭环。
14. Claude Design
更像快速生成的 visual artifact，适合讨论视觉方向、品牌上下文和页面变体。
四、怎么选？
如果你只是想让页面更有视觉记忆点，优先看 Anthropic frontend-design、OpenAI frontend-skill、frontend-aesthetics。
如果你是在真实项目里加页面或组件，优先看 ce-frontend-design。它最重要的能力不是“画得更炫”，而是先识别项目已有的设计系统，避免新页面看起来不像这个产品的一部分。
如果你要治理老项目的 UI 混乱，优先看 Jwynia frontend-design 或 frontend-design-system。这类 skill 更关心 token、组件、间距、字体和可访问性。
如果需求还不清楚，先看 bencium-controlled-ux-designer 或 ui-ux-pro-max。它们更适合在动手前做 UX 取舍。
如果你想要完整设计工作台，Open Design 和 Claude Design 更值得关注。它们不是单个提示词，而是更上层的 artifact 生成环境。
如果你已经有 Figma 设计稿，mcp-figma-desktop 的价值更大：它解决的是从设计稿到实现信息的交接问题。
我的实际建议是：
真实产品开发：ce-frontend-design + 浏览器验证 + demo 截图
新产品概念页：frontend-design + frontend-aesthetics
设计系统治理：Jwynia frontend-design + frontend-design-system
复杂 UX 流程：bencium-controlled-ux-designer + ui-ux-pro-max
设计工作台：Open Design / Claude Design / superdesign五、真正值得学的不是“好看”，而是约束
前端设计 skill 最有价值的地方，不是某个 CSS 技巧，而是它们把一些设计纪律写进了 Agent 工作流。
这些纪律包括：
- 先识别现有设计系统，再设计新组件
- 先确定页面任务，再摆组件
- Dashboard 不要写成营销页
- 不要默认堆卡片
- 不要让字体、颜色、动效各玩各的
- 不要没有截图就宣布页面完成
- 不要让新组件破坏已有产品的一致性
AI 写页面会越来越快。如果没有这些约束，它只会更快地产生“看起来能用、实际上不像产品”的界面。
所以前端设计 skill 真正要解决的问题不是“让 AI 写更多 UI”，而是让 AI 同时回答两个问题：
这个页面有没有设计感？
这个页面能不能属于这个产品？frontend-design 更偏向第一个问题。
ce-frontend-design 更偏向第二个问题。
设计系统型和 UX 协作型 skill 则继续追问：这个页面能不能被复用、被审查、被长期维护。
一句话总结：
前端设计 skill 的核心，不是让 AI 画得更花，而是让 AI 更像一个懂设计约束的前端工程师。
欢迎关注我! 一起学习AI
参考资料
- Anthropic frontend-design on skills.sh
- Jwynia frontend-design on skills.sh
- SuperDesign skill on skills.sh
- Bencium controlled UX designer on skills.sh
- UI/UX Pro Max on skills.sh
- OpenAI curated frontend-skill on GitHub
- Vercel skills CLI on GitHub
- Open Design on GitHub
- Claude Web Design Skill
- Frontend Aesthetics on Smithery
- FD frontend design skill
- Figma Desktop Skill
- What is Claude Design, and how do you give it your brand?
- How to install a Skill in Claude Design
