Claude Code 做 UI 不再靠感觉——Design Audit 让设计评审自动化

做产品的时候，最怕听到这句话——”能用，但总觉得哪里不对”。

很多开发者（包括我）其实没有系统学过设计，看 UI 全凭感觉。Claude 生成的代码功能没问题，但视觉上一股”AI味”——扁平、俗套、没有灵魂。想让它变好看，却不知道怎么改、从哪改起。

Design Audit 就是来解决这个问题的。

它是什么

Design Audit 是 Claude Code 的一个设计评审 Skill，出自 bencium（一个专注 AI 编程工具设计的团队）。它的核心逻辑很简单：把你现有的 UI（代码、截图、Figma 链接都行）丢给它，它会从 12 个专业维度给你打分，并且直接告诉你哪里有问题、怎么改。

三个分数同时出：Design（设计质量）、AI Slop（有没有 AI 味）、Accessibility（无障碍合规）。每个分数 A-F，直接对应改进优先级。

12 个评审维度一览

• Typography（字体层级、字重、行高）
• Color & Contrast（对比度、语义色使用）
• Spacing & Layout（8px 网格、对齐、留白）
• Visual Hierarchy（主要操作清晰度）
• Consistency（组件复用、圆角统一）
• Accessibility（触控区域、焦点状态、alt 文本）
• Forms & Inputs（标签、验证时机）
• Motion & Animation（时长、缓动、减少动效支持）
• Dark Mode（不只是颜色反转）
• Iconography（图标家族一致性）
• Navigation（导航结构、当前位置）
• Design Tokens（是否符合你的设计系统）

实际体验

我让 Claude Code 拿一段自己写的后台管理界面跑了一遍。几秒钟后回来：Design C、AI Slop C+、Accessibility B。问题列表按严重程度排了序，Top 3 优先级直接标红。

最有用的是：它不只说”哪里不对”，还给你 Before/After 的代码 diff，手把手告诉你怎么改。改完再跑一遍，分数立涨。

适合谁

• 自己写前端、不知道怎么评审 UI 的开发者
• 产品经理想做设计质量初筛
• 设计师想快速拿到一份结构化的 review 报告

怎么装

一行命令搞定：

npx -y skills add bencium/bencium-marketplace --skill design-audit --agent claude-code

或者单独装这个 Skill，把 SKILL.md 文件放到 ~/.claude/skills/design-audit/ 目录下即可。

免费、开源、MIT 协议，3,500+ 安装量，口碑稳定。装完以后，每次做完 UI 都可以跑一遍，比自己凭感觉判断靠谱多了。

GitHub：https://github.com/bencium/bencium-marketplace

GitHub: https://github.com/bencium/bencium-marketplace