1. 从“impeccable”这个词说起它到底想解决什么问题第一次看到“impeccable”这个词是在几个前端交流群里。有人甩出一张截图说某个工具能把 AI 写出来的前端代码“收拾得服服帖帖”评论区里有人回了一句“这玩意儿确实 impeccable”。我当时的第一反应是又一个包装概念的工具但点进去看了两眼之后我意识到它踩中的是一个真实存在的痛点——AI coding agents 生成的前端代码能跑但不好看、不统一、不讲究。这个词本身的意思是“无可挑剔的、完美的”。放在前端设计语境里它指向的不是功能层面的正确而是视觉和体验层面的“讲究”。你让 Codex CLI、Claude Code 或者别的 AI coding agent 帮你写一个登录页它大概率能给你一个能用的版本输入框、按钮、表单验证都有。但你打开浏览器一看间距是随意的颜色是默认的圆角是 4px 还是 8px 全看模型心情hover 状态可能压根没写。功能上没毛病设计上全是毛病。impeccable 要做的就是这件事在 AI 生成代码和最终交付之间插一层“设计品控”。它不是一个从零开始的设计工具也不是一个替代 Figma 的东西而是一个面向 AI coding agents 的“前端设计规范执行层”。你可以把它理解成一个极其挑剔的设计师站在 AI 旁边每当 AI 写完一段 UI 代码它就凑过去说“这个间距不对这个色号偏了这个交互状态缺了。”从热搜词来看impeccable 和 AI coding agents、frontend design、CLI、browser extension 这几个词绑得很紧。这说明它的使用形态大概率是两种一种是通过命令行CLI集成到开发流程里另一种是通过浏览器扩展browser extension在预览环节做实时检查。这两种形态对应的是两个不同的使用场景——前者是“写的时候就管”后者是“写完再看”。两种都有道理后面我会详细拆。这篇文章适合谁看如果你正在用 AI coding agents 写前端或者你是一个前端工程师发现 AI 生成的代码总是需要你手动调半天样式那 impeccable 这类工具的思路值得你花时间研究。哪怕你最后不用它理解它背后的“设计规范执行”逻辑也能帮你更好地设计自己的 AI 工作流。如果你是完全的前端新手这篇文章也能帮你看清楚AI 写前端到底差在哪以及怎么补上这个差距。2. impeccable 的核心设计思路为什么是“规范执行层”而不是“代码生成器”2.1 AI 写前端的真正短板不在功能在“一致性”我先说一个我自己的观察。过去大半年我用 Codex CLI 和几个 AI coding agents 写过不少前端页面。一个很明显的规律是AI 写单个组件的能力已经很强了但写一个完整页面、尤其是一个有多个组件的页面时一致性会崩。举个例子。我让 AI 写一个设置页面里面有开关toggle、下拉选择select、文本输入input和保存按钮。AI 会分别写这四个东西每个单独看都还行。但放到一起问题就出来了开关的圆角是 full下拉的圆角是 6px输入框的圆角是 4px按钮的圆角是 8px。间距也是开关和下拉之间是 16px下拉和输入框之间是 12px输入框和按钮之间是 24px。颜色更不用说边框颜色三个地方三个样。这不是 AI 笨而是它的生成机制决定的。AI 是逐 token 生成的它在写开关的时候脑子里没有“这个页面所有组件的圆角应该统一”这个全局约束。它只是在局部做“看起来合理”的决策。而人类设计师做页面时脑子里是有一套 design token 的圆角就三档间距就四档颜色就一个 palette。这套 token 是全局的所有组件都从里面取值。impeccable 的核心思路我判断就是把这套 design token 变成 AI 必须遵守的硬约束。它不是让 AI 重新学一遍设计而是在 AI 生成代码之后或者生成过程中用一套预定义的规范去校验和修正。这就像代码里的 linter——你不是让程序员不写错而是写完之