Impeccable 为什么能提高 AI 的界面设计质量？

Impeccable 是给 AI 编程工具用的前端设计 skill，可以安装到 Codex、Claude Code、Cursor 等工具里。项目还是用 React、Vue、HTML、CSS 或原生应用代码，Impeccable 给 AI 提供设计规则和工作流程。

它不接管技术栈，也不充当在线设计器。其中包含专门命令、项目上下文文件、检查脚本和浏览器迭代流程。AI 做设计决定之前，要先读项目资料，确认页面任务和限制。

4.0 版的 SKILL.md 和核心参考文件把“改好看点”拆成一步步能检查的动作，每一步都规定了输入、任务和停止条件，质量提升主要靠这个。

它适合用在什么场景

Impeccable 主要处理用户能看到、能操作的界面，例如网站、落地页、后台、产品页面、表单、设置页、新手引导、空内容页面和文档站。

常见用法包括：

• 设计新页面，或者重新设计已有页面。
• 调整页面层级、字体、间距、布局、颜色和动画。
• 清理重复卡片、渐变文字、装饰性玻璃效果等常见 AI 设计痕迹。
• 检查无障碍、响应式表现、加载速度、主题切换和各种界面状态。
• 从代码中整理设计变量、组件规则和 DESIGN.md，并在浏览器里比较视觉方案。

纯后端任务通常用不到它，例如接口、数据库、鉴权和不涉及界面的业务计算。

官网首页标出了几种常见的 AI 设计痕迹，并展示 /polish 前后的差别。来源：Impeccable 官网。

先看它怎么工作

官网的 Designing with Impeccable 页面把使用过程分成四个阶段：Start、Iterate、Polish、Maintain。

Start 读取资料，Iterate 制作和调整界面。到了 Polish，需要根据桌面端和移动端的真实画面检查问题。Maintain 会把采用的规则写进项目，留给后续任务使用。四个阶段会按需要回到前一步。

skill 里还写了页面分类、专门命令、脚本检查和独立复查。完整流程如下：

实际怎么使用

调用时，把命令和目标写清楚即可，常见格式为 /impeccable <命令> <目标>。不同开发工具的入口略有差别，Codex 使用 $impeccable。

第一次在项目中使用时，先运行：

/impeccable init

init 会读取项目代码，确认平台、用户和产品事实，同时创建或整理 PRODUCT.md、DESIGN.md 等上下文。一个项目通常只需运行一次。

修改已有页面时，命令和目标直接写在一起：

/impeccable polish pricing-page
/impeccable audit checkout
/impeccable typeset article

新页面就说清楚页面给谁看、要达到什么目的。想先确定交互和界面安排，就用 shape。需要在浏览器里比较视觉方案，则用 live。

在 Codex 中先调用 $impeccable，提示写法如下：

为产品官网设计一个 Persuade 模式的定价页。
用 shape 梳理新用户首次进入后台的操作流程。
用 live 在浏览器里调整当前页面的首屏区域。

发布前用 audit 检查技术质量，clarify 修改界面文字，harden 检查极端状态。设计规则出现重复或变化时，extract 整理可复用组件，document 更新 DESIGN.md。

先问清楚页面是干什么的

Impeccable 把界面分成四种模式：

• Persuade：让访客理解、相信并采取行动，例如官网和定价页。
• Operate：帮助用户完成任务，例如后台、编辑器和设置页。
• Read：帮助读者理解内容，例如文档、教程和文章。
• Experience：让作品本身成为体验中心，例如作品集和展览页。

这套分类能防止 AI 把同一个模板套到所有页面上。营销页要让访客理解并行动，后台是任务和状态，作品集要把注意力留给作品；文档那种要长时间阅读、带导航的页面，标准又不一样。各类页面的判断标准不同，一套“漂亮页面”逻辑很难全部照顾到。

用项目事实管住自由发挥

Impeccable 会读取三类信息。PRODUCT.md 保存产品事实和用户需求，DESIGN.md 保存长期使用的视觉规则，Surface Brief 记录当前页面的目标和限制。

现有代码、组件、设计变量和素材也会成为判断依据。AI 据此决定沿用已有设计，或者创建新的视觉体系。

官方把“Start with context”放在第一步。平台、用户、产品事实和可用证据都要在写界面前确认。来源：Designing with Impeccable。

这样能避免局部修改牵动整个产品，AI 也不能为了画面效果临时编卖点、数字或功能。开始写界面之前，什么能用什么不能用已经定好了。

不同问题，交给不同命令

Impeccable 给每类问题安排了单独的命令。critique 看体验和视觉层级，audit 检查无障碍、性能和响应式表现，polish 处理发布前细节。字体、布局和颜色分别交给 typeset、layout、colorize，harden 专门检查错误状态、国际化和极端数据。

例如只想调整字体时，直接调用 typeset。模型不必同时处理动画、错误状态和性能问题，检查结果也更容易复查。

刻意避开 AI 最爱用的模板

Impeccable 对“AI 味”的判断很具体。重复的图标卡片、数字型首屏、装饰性玻璃效果、渐变文字、硬套的等宽字体，以及没有真实内容支撑的图表和圆角容器，都会触发检查。

设计全新页面时，AI 要先写出这个行业最常见的页面套路，再列出一个同样容易想到的相反方案，把两者排除。候选方案要从目标用户熟悉的文化、物件、出版物、空间或视觉系统里寻找，随后由外部脚本分配继续发展的方案。

随机分配只用来阻止模型反复挑高频模板。候选方案依然要符合产品事实、用户任务、素材条件和性能限制。

设计质量有明确检查项

craft-floor.md 给出了明确要求：正文对比度至少达到 4.5:1，行宽控制在 65 到 75 个字符，标题层级要清楚。检查对象还包括键盘焦点、加载、错误、空内容和禁用状态。

最后还要看真实截图。桌面端和移动端放在同一轮里检查，发现问题后集中修改，再确认一次。代码能说明功能写好了，但页面实际渲染成什么样，只有截图看得见。

新页面还会交给一个没参与制作的检查角色。它能看到原始需求、页面截图、设计约定和检测结果，不带制作时的先入之见。检查完成后，成品采用的视觉规则会写回 DESIGN.md。

总结

这套流程里真正起作用的是最后两步：真实截图复查，和没参与制作的独立检查角色。制作和检查分开，问题才不会被自己审自己。审美风格仍由产品和页面目标决定。

修改一个按钮时，没有必要走完整套流程。新页面、重要改版和视觉要求较高的项目，更适合使用这套方法。