技能介绍

它解决什么问题

AI 生成的界面最常见的问题不是"做不出来"，而是"看起来都一样"。紫蓝渐变发光背景、千篇一律的三卡片功能区、随处可见的超大圆角——这些 AI 痕迹让界面在截图里还能看，真实落地时就显得廉价。更隐蔽的是工程层面的问题：标题层级和 font-size 跳跃没有节奏、间距体系不统一、深色背景下文字对比度不足、移动端横向溢出、按钮缺少 hover/focus/disabled 状态。这个技能就是为这类"能用但不体面"的产物准备的后置精修 pass，而不是从头重画。

核心能力与工作方式

它把精修拆成六种 Follow-Up 模式，可以按需单点触发：

Audit：按层级、间距、配色、字体、交互状态、响应式、可访问性逐项排查，只挑影响最大的问题
Critique：解释界面为什么显得 generic、overdesigned 或 underdesigned
Polish：在保留用户意图的前提下直接动手改
Animate：只在反馈或叙事确有收益的位置加克制的动效
Harden：修移动端溢出、文字裁切、对比度问题、缺失状态和脆弱的布局假设
Live：为演示或分享做最终视觉 QA

操作上有几条硬规则：动手前必须先读现有的 HTML 或页面，不能只凭 prompt 猜测；保留原有内容、品牌和场景；优先做少而准的修改，而不是大面积 cosmetic churn；并且最终要交付一个能跑的状态，而不是一份 critique 清单。

适用边界与注意点

它假设你已经有一份可检查的产物（页面或 HTML 文件），不会凭空生成新设计。动效保持克制，不追求炫技；可访问性是底线而非可选项，包括 focus 状态、对比度和 prefers-reduced-motion 回退。需要更强的 anti-slop 重设计能力时，可搭配 design-taste-frontend 或 gpt-taste；动效部分可搭配 emilkowalski-motion 或 GSAP 相关技能；需要真实图片视频素材时，再接 image/video 类技能，而不是用 CSS 假装装饰。