Claude Code 装上这个设计外挂，AI 生成的 UI 终于不翻车了

Claude Code 写 UI 代码已经是很多设计师和开发者的日常了——但出来的界面总有一股”AI 味”，要么是组件生硬堆砌，要么是配色毫无章法，看久了你甚至怀疑自己审美出了问题。

问题不在于 Claude 不懂代码，而在于它不懂设计。

Sumi 解决这个问题的方式很直接——给 Claude 注入一整套资深产品设计师的判断力。它不是简单塞一堆设计规范文档，而是内置了 44 个相互协作的技能，覆盖认知心理学、可访问性标准、设计系统、组件代码四大块，Claude 每次评审判断 UI 都能说出”依据是什么”。

核心能力：AI 生成 UI 的急救包

我最喜欢的是 /sumi:fix 这个命令。你把任意 AI 生成的有问题的 UI 代码丢给它，它会：

• 自动识别”设计垃圾”（slop）的特征
• 逐条修正并说明依据
• 生成 before/after 对比
• 给出一个 0-100 的设计质量分

这比让人类设计师一句句指出”这里不行”高效多了。

从零搭界面的正确姿势

如果你是从空白开始做，Sumi 给出了一套经过验证的流程：

• /sumi:brief — 填入用户画像、约束条件和成功标准
• /sumi:style fintech/ecommerce/… — 选定视觉方向（色板、字体、间距、动效），结果存到 .sumi/style.json
• /sumi:wireframe — 先把信息架构搭出来
• /sumi:screen — 输出带全部状态的生产级代码
• /sumi:a11y — 自动检查 WCAG 2.2 合规性并修正

关键是 .sumi/ 目录会持久化设计决策，后续命令都会继承之前的风格设定，不会每次都重新发明。

设计系统一键搭建

做设计系统是个苦活，但 Sumi 把最机械的部分自动化了：

• /sumi:tokens — 导出 W3C DTCG 格式的设计 Token，支持 CSS / Tailwind / Style Dictionary
• /sumi:dark — 从亮色推导出暗色版本，自动处理亮度映射
• /sumi:component Button — 出一个组件，附带所有状态（hover/disabled/loading/error）的参考实现
• /sumi:figma — Figma 文件和代码保持同步

不只是修 UI，它是设计思维的外挂

Sumi 的定位挺有意思——它不只是帮你修代码，它本身就是一个设计推理引擎。你问它”Fitts 定律对按钮尺寸有什么要求”，它会直接引用并给出建议；你问”这个倒计时是不是暗黑模式”，它会从用户心理层面分析。

有了它，Claude 不再只是”会写代码的工具”，而是”有设计判断力的协作伙伴”。

35 星、44 项技能、37 条命令——如果你经常和 AI 生成 UI 打交道，这个工具值得现在就装上。

GitHub 仓库：phazurlabs/sumi

GitHub: https://github.com/phazurlabs/sumi