AI 做设计总感觉”哪里不对”？这个 Skill 专治 AI 生成的表面精致病

你有没有这种感觉——AI 生成的 UI 第一眼看着挺漂亮，但仔细看总觉得哪里不对？

说不上来，就是”不对劲”。

这不是你审美有问题。是因为 AI 生成的界面，往往看起来精心打磨过，实际上每个细节都没有理由。

今天分享一个我最近挖到的宝藏 Skill：design-critique，专门用来给 AI 设计做”设计批评”。

它的核心理念

这个 Skill 的哲学引用了一句 Nielsen Norman Group 的话：

“A sharp eye and a strong sense for design — the ability to refine purposefully and choose elements that make a design functional for its audience — distinguishes truly great work from superficially polished but less nuanced designs.”

翻译成人话：好的设计是有理由的设计，不是”看着还行”的设计。

它要求每个设计决策都必须能回答：为什么是这个字体？为什么间距是 8px 而不是 16px？这个圆角存在是为了什么？

“Good From Afar” 测试

这是这个 Skill 最核心的一个环节——“远看测试”。

在你宣布一个设计”完成”之前，必须过这几关：

• 缩放到 25%：视觉层级还清晰吗？
• 缩放到 400%：间距关系还成立吗？有没有尴尬的缝隙？
• 眯眼测试：能一眼看出主要操作是什么吗？
• 去掉颜色：设计在灰度下还能正常运作吗？
• 朗读文字：标签和文案读起来自然还是像模板套话？

很多 AI 生成的设计，第一关就挂了。

五阶段批判流程

这个 Skill 不是简单给 UI 打分，它有一套完整的审查流程：

Phase 1：意图追问——在做任何视觉判断之前，先问：这个产品是什么？谁用它？他们想完成什么？它应该唤起什么情绪？

Phase 2：决策验证——每个设计选择（字体、颜色、间距等）都必须有理由，能说清楚”这个选择如何帮助用户完成目标”。

Phase 3：光学检查——专业设计师会做的微调：字体的视觉平衡（三角形字母 A、V 需要视觉补偿）、行长度是否舒适（45-75 字符）、垂直节奏是否和谐。

Phase 4：反模式检测——识别常见的 AI 设计病：没有理由的圆角、为了卡片而卡片的布局、为了渐变而渐变的背景、没有目的地的动画。

Phase 5：批判性提问——像资深设计师一样追问：”如果去掉这个元素，什么会坏？””这是用户要求的还是 AI 自己加的？”

怎么用

安装命令：

npx skills add https://github.com/vinzenz/jules-agentic-software-builder-for-claude --skill design-critique

触发方式很简单，当你想让 AI 评审一个设计稿时，说：

请用 design-critique 评审这个设计

然后提供：Figma 链接、截图，或详细描述。AI 会按照五阶段流程给你一份结构化的批判报告，包括问题严重等级（P0 阻塞级 / P1 频繁摩擦 / P2 打磨级 / P3 未来可做）和具体的修复建议。

适合谁

• 设计师：给你的 AI 生成稿找一个”毒舌同事”
• 前端开发者：避免做出”看起来正常但经不起推敲”的界面
• 产品经理：快速判断一个设计稿是否真的经过思考
• AI 编程用户：配合 Cursor / Claude Code / Windsurf 使用，在交付前做最后一轮审查

GitHub 链接：https://github.com/vinzenz/jules-agentic-software-builder-for-claude

GitHub: https://github.com/vinzenz/jules-agentic-software-builder-for-claude