Claude Code 现在能替你做完整的设计评审了

Claude Code 现在能替你做完整的设计评审了

你有没有这种感觉：AI 生成的前端代码看起来挺像样，但总感觉哪里不对劲——颜色不统一、间距乱糟糟、字体层级模糊。说不上来哪里不好，但就是缺了点”设计感”。

问题不在 AI 能力不够，而是它没有一个设计眼光来自我审视。

NeverSight 团队刚上线了一个叫 Design System 的 Skill，专门教 Claude Code 如何像资深设计师一样审视 UI 并给出可操作的修复方案。

它具体能做什么？

这个 Skill 支持三种模式：

• 生成模式：扫描你的代码库，提取现有的颜色、字体、间距等设计模式，然后生成一套完整的设计系统文档（DESIGN.md + design-tokens.json + 可交互 HTML 预览）
• 视觉评审模式：对现有 UI 打分，10 个维度各 0-10 分，包括色彩一致性、字体层级、间距节奏、组件一致性、响应式行为、深色模式、动效、Accessibility、信息密度、UI 打磨程度。每个维度都附带具体例子和精确到文件:行号的修复建议
• AI 味检测：识别那些一看就是 AI 写的设计模式——满屏渐变、紫蓝色调、”玻璃拟态”卡片、无脑圆角、滚动动画滥用、单调的首屏布局

实际使用体验

我在一个 midjourney 风格的落地页上跑了评审，几秒钟出来一份报告：动效得分 3/10（”滚动时有 7 处无意义动画”）、信息密度 4/10（”首屏塞了太多元素，没有透气感”）。每个问题都标了文件位置，直接可以动手改。

最实用的是 AI 味检测功能——它能帮你识别那些看起来很”AI”的设计陷阱，比如所有卡片都是同样的紫蓝渐变背景、所有图片都是居中的圆形头像。这比你靠肉眼扫要快得多。

怎么安装？

一行命令搞定：

npx -y skills add NeverSight/skills_feed --skill design-system --agent claude-code

装完直接说 /design-system audit --url http://localhost:3000 就能开始评审。或者 /design-system generate --style minimal 从零构建设计系统。

适合人群：前端开发者、设计工程师、以及所有想让 AI 产出更有设计感的团队。安全扫描也过了，Trust Score 100/100。

GitHub：https://github.com/NeverSight/skills_feed

GitHub: https://github.com/NeverSight/skills_feed