用 Impeccable Skill 消除 Codex 生成界面的 AI 味：四步审美审计流

许多开发者在使用 Codex 编写前端界面时，常常遇到界面粗糙、缺少状态反馈、响应式不规范等问题。本篇通过开源设计规范技能消除这类问题。

1. 认识核心设计规范与 Impeccable

Impeccable 不是一个组件库，而是专门给 Coding Agent（Codex、Claude Code）使用的 UI 审美与工程规范技能。

它内置了一套系统化的设计准则：

• 状态统一：强制校验并补齐 hover、focus-visible、disabled、loading、error 5 种状态；
• 排版与间距：建立一致的 4px/8px 间距节奏，禁止随手乱写魔数像素；
• 微交互：动画时长严格约束在 150ms ~ 250ms 之间，消除生硬过度动效；
• 模式细分：严格区分“在现有代码上精修（Polish）”与“重新推倒重构（Redesign）”。

2. 在项目中安装技能

在你的项目根目录下（Codex 运行的目录），直接通过 Git 载入技能文件：

mkdir -p .codex/skills/impeccable
git clone --depth=1 https://github.com/pbakaus/impeccable.git /tmp/impeccable
cp -r /tmp/impeccable/* .codex/skills/impeccable/
rm -rf /tmp/impeccable

安装完成后，Codex 在启动或执行任务时会自动感知当前技能中的规范指引。

3. 执行审美与无障碍审计 (audit)

在 Codex 中发送以下任务，先产出审计清单，不急于修改代码：

请调用 impeccable skill 对当前前端页面执行 audit 模式。
重点检查：
1. 视觉层级与排版对比度；
2. 缺失的交互状态反馈；
3. 移动端断点与无障碍 (ARIA) 标签完整性。
输出问题清单，先不要修改代码。

4. 优化移动端流式布局 (adapt mobile)

针对审计结果，要求 Codex 调整结构而非暴力缩放文字：

针对上述审计结果，执行 adapt 模式：
优化移动端响应式布局，通过调整 Flex/Grid 结构与导航折叠来适配屏幕，严禁通过暴力缩小字体来妥协空间。

5. 补齐微交互与工程加固 (polish & harden)

接下来通过两步指令收敛视觉细节与异常边界：

执行 polish 模式：
1. 统一容器圆角、阴影层级与 8px 网格间距；
2. 补齐所有可交互元素的 hover、active、focus-visible 与 disabled 状态；
3. 将所有过渡动画锁死在 200ms ease-out。

加固模式检查边界：

执行 harden 模式：
检查各组件边界情况（超长文字溢出处理、空数据状态、加载骨架屏），确保构建零报错。

6. 验收标准与检查清单

在 Codex 完成代码修改后，请使用以下清单逐项勾兑：

• [ ] 所有按钮点击或悬停时均有平滑过渡，无视觉跳跃；
• [ ] 键盘 Tab 键切换时，出现清晰的 focus-visible 焦点环；
• [ ] 移动端视口下无横向滚动条，主要触控按钮高度不小于 44px；
• [ ] 本地运行 npm run build 或静态语法检查 100% 通过。