不用推倒重来！qiaomu-design打磨模式6大动作：Audit到Harden，老页面翻新完全教程

qiaomu-design 是一个偏执型设计顾问 Claude Code Skill，它的打磨模式专为已有页面设计：不推倒重来，而是用 Audit、Critique、Polish、Animate、Harden、Live 六大动作对老页面做"外科手术式"翻新，去掉 AI 味的同时保留原有内容、品牌与任务流。

什么是打磨模式：老页面的"手术刀"而非"推土机"

大多数 AI 工具翻新页面的方式是：读两句需求 → 直接重写整个页面。结果往往是你原本能用 80% 的东西被推翻了 90%。

qiaomu-design 的打磨模式换了个思路（见 SKILL.md）：

适用于页面已存在且方向成立的任务。先完整读取现物，再按意图组合六大动作。保留内容、品牌和任务流，优先做少而高影响的修复；最终交付可运行产物，而非只有批评清单。

也就是说，它会先"读懂你的页面"，再决定动哪里、动多深。只有当你说"从零设计 / 重新设计"时，它才会走三阶段的完整流程（诊断 → 四方向预览 → 执行）；而当你说"帮我打磨这个页面 / 去掉 AI 味 / 加动效"时，直接进入打磨模式。

6 大动作总览：一张表看懂 Audit 到 Live

动作	一句话职责	典型产出	主要参考文件
Audit	全面体检：信息层级、空间节奏、响应式、交互状态	有证据的问题清单（按影响排序）	engineering-checklist.md
Critique	截图评审：渲染后苛刻找茬，定位最弱环节	3–5 处高影响问题定位	craft-loop.md
Polish	视觉精修：去 AI 味、补工艺细节	修改后的真实文件	craft-loop.md
Animate	动效加持：给交互加"活气"，但不吵	符合规范的动效实现	motion-craft.md
Harden	工程加固：状态、焦点、无障碍、危险操作防护	全状态可运行的界面	engineering-checklist.md
Live	真实验收：浏览器实测 + 门禁检查后才交付	桌面/移动端截图 + preflight 通过	preflight.md

六个动作不是流水线，而是按意图组合的零件箱：只想审查就用 Audit + Critique 后停止；想全面翻新就六个全上。

动作一：Audit —— 先完整读取现物，再动手

打磨模式的第一铁律是"先读现物"。Audit 会审计五件事：

• 信息层级：最重要的信息是否第一眼可见
• 空间节奏：留白、间距、分组是否一致
• 核心任务：用户 3 秒内能开始要干的事吗
• 响应式：移动端是否有横向滚动、挤压、遮挡
• 交互状态：hover、focus、loading、empty、error 是否齐全

如果你只要诊断（"先看看问题，不要改"），它会交付一份按影响排序、带证据的问题清单后停下，不碰任何文件——这一点在 SKILL.md 的路由表里写得很明确：只审查的任务"诊断后停止，不修改文件"。

动作二：Critique —— 截图评审，"没毛病"不是合法答案

这是打磨模式里最"偏执"的一环。它借鉴了 craft-loop.md 的两轮制（Render → Critique → Refine）：

1. 第一轮：真实打开页面，截桌面（≥1280px）截图
2. 四视角苛刻评审：艺术总监（哪一屏最像模板）、工程师（哪里对不齐/状态缺失）、甲方（三秒看完记住了什么）、读者（眯眼通读哪段最费劲）——每个视角必须各挑出至少一处
3. 第二轮：只修这 3–5 处最关键问题，禁止顺手大改、禁止推倒重做

"一轮交付是赌运气，两轮交付才是设计。"实测中这套评审真实揪出过淡入黑屏、元素溢出裁剪、标题断句等问题。

动作三：Polish —— 去掉 AI 味，但只动高影响处

Polish 是纯视觉动作，目标是"少而高影响的修复"。它会对照 preflight.md 的反套路扫描清单逐项排查：

• 有没有紫蓝渐变、外发光霓虹、大标题渐变字
• 字体是不是默认的 Inter/Roboto/Arial
• 有没有居中 Hero + 三等分卡片的模板脸
• 文案有没有"革命性/颠覆/无缝/赋能"这类空词

同时可以按 craft-loop.md 的工艺密度菜单补细节：品牌色 focus 环、::selection 定制、多层染色阴影、流体字号（clamp）等 12 项签名动作里挑 5 项以上落地——密度不等于吵闹，氛围层透明度必须低于 6%。

动作四：Animate —— 给页面加动效，但有纪律

"加动效"最容易翻车：无目的动画、transition: all、UI 用 ease-in……Polish 模式里的 Animate 动作有一套完整纪律（motion-craft.md）：

• 动效必须有目的和频率判断，高频操作（如键盘触发）不加动画
• UI 动效 ≤ 300ms，只动 transform/opacity，不动画布局属性
• 必须有 prefers-reduced-motion 兜底
• 说不出动效名字时，先查 animation-vocabulary.md 把模糊描述转成准确术语再实现

动作五：Harden —— 工程加固，把"能用"变成"可靠"

Harden 面向工程验收（engineering-checklist.md），补齐老页面最常见的短板：

• 完整状态：空态、加载态、错误态、成功态齐全，超长文本不破版
• 无障碍：图标按钮有 aria-label、表单控件有 label、焦点可见
• 弹窗纪律：焦点陷阱 + Esc 关闭 + 焦点返还
• 危险操作防护：确认或可撤销，错误信息告诉用户下一步
• 移动端：无 h-screen、无横向滚动条、非对称布局塌缩单列

动作六：Live —— 真实截图 + preflight 门禁，过不了不交付

最后一个动作是交付把关。打磨模式"仍须经过真实截图、响应式和 preflight.md"：

• 真实运行页面，截桌面与移动端双端图复核
• 逐条过 preflight 门禁：反套路扫描、设计读取一致性、动效抽查、工程抽查、中文排版追加项，最后是"三秒测试"——眯眼看整页三秒，这一页像不像 AI 做的？像就回去找出泄密点
• 全部勾选才算过，"差一条都不许说基本完成"

三步上手：安装与触发话术

第一步，安装（需要 Node.js 与支持 Agent Skills 的客户端）：

npx skills add joeseesun/qiaomu-design

第二步，验证：

npx skills add joeseesun/qiaomu-design --list

第三步，直接说触发词。打磨模式的自然语言示例（来自 agents/interface.yaml 与 evals/trigger_cases.json）：

• "打磨这个已经能用的页面，去掉 AI 味但别推倒重来"
• "审查这个仪表盘的信息层级、状态和移动端问题，先不要改"
• "Polish this existing component and audit its UX states and responsive behavior."

只审查、不动手时，务必加上"先不要改"——它会按路由规则只给诊断清单。

延伸阅读：仓库里的关键文件

资料	路径
打磨模式定义	SKILL.md
两轮制评审与工艺密度	references/craft-loop.md
交付前门禁	references/preflight.md
工程验收清单	references/engineering-checklist.md
动效工艺 / 术语 / 审查	references/motion-craft.md · references/animation-vocabulary.md · references/motion-review.md
58 站设计系统库	references/design-systems/
用户偏好账本	references/user-preferences.md

总结

qiaomu-design 打磨模式的价值在于一套克制的翻新方法论：先读现物（Audit）→ 苛刻评审（Critique）→ 少而准地修（Polish/Animate）→ 工程加固（Harden）→ 真实验收（Live）。老页面不必推倒重来，配合 preflight 门禁，翻新后的页面既不翻车、也不再有那股"AI 味"。