让 Claude Code 生成更美观的 UI：工具、MCP Server 与 Plugin 完整指南
状态: 草稿 — 待逐项测试验证 日期: 2026-05-06 背景: 在使用 Claude Code 做 UI 开发时，发现它生成的界面"功能正确但美感不足"，于是展开了一次系统性的工具调研。
问题：AI 生成的 UI 为什么"不好看"？
现象
用 Claude Code 做 UI 开发时，经常遇到这种情况：
- 布局和功能都对，但看起来就是"学生作业感"
- 配色平庸、间距缺乏呼吸感、排版没有层次
- 错误状态、空状态、loading 状态只是"能用"，没有任何愉悦感
- 缺乏对用户的同理心 — 设计像是给开发者看的，不是给用户用的
根因分析
这个问题有两层原因：
第一层：缺乏审美参考源
Claude 的训练数据里有"平均审美" — 它知道按钮应该圆角、文字应该对齐、应该用 Flexbox 布局。但它不知道什么样的配色让人觉得高级、什么样的间距让人觉得呼吸感好、什么样的动效让人觉得流畅。
一个好设计师做 UI 之前会看 Dribbble、Behance 找灵感。Claude 不看，直接凭"记忆"生成，所以产出的东西是"正确但平庸"的。
第二层：缺乏设计判断力
即使给了 Claude 一套设计规范（HIG、Material Design、Tailwind），它也只是在"遵守规范"，而不是在"做设计"。规范告诉你"按钮最小点击区域是 44pt"，但不告诉你"什么时候应该用幽灵按钮而不是实心按钮"。
解决方案总览
| 层级 | 工具 | 类型 | 解决的问题 |
|---|---|---|---|
| 视觉参考 | Design Inspiration MCP Server | MCP Server | 让 Claude 看到真实好设计 |
| 设计执行 | ui-designer plugin | Plugin | 让 Claude 会做好看的 UI |
| 用户同理心 | ux-researcher plugin | Plugin | 让 Claude 懂用户 |
| 愉悦感注入 | whimsy-injector plugin | Plugin | 让 Claude 想得到加"灵魂" |
| 品牌一致性 | brand skill | Skill | 确保新功能和已有品牌一致 |
| 设计稿还原 | Framelink MCP for Figma | MCP Server | 从 Figma 设计稿精确实现 |
MCP Server vs Plugin vs Skill 的区别
| 扩展类型 | 作用 | 类比 |
|---|---|---|
| MCP Server | 给 Claude 外部工具能力 | 手脚 — 能做事情 |
| Plugin | 给 Claude 专业知识和行为模式 | 大脑 — 知道怎么想 |
| Skill | 给 Claude 特定场景的操作指南 | 操作手册 — 知道怎么做 |
要让 Claude 生成美观的 UI，三者缺一不可：
- MCP 让它看到真实好设计（视觉参考）
- Plugin 让它想得到加愉悦感（审美直觉）
- Skill 让它按规范做（一致性保证）