Impeccable 设计网站研究：把前端审美变成可执行工作流

/research/impeccable-design-vocabulary-agent-frontend.md

Impeccable 这个网站最值得借鉴的地方，不是它用了什么字体、什么颜色，也不是要把自己的项目做成“暗色漆面 + 金箔 + 铜绿”的视觉风格。它真正有价值的是把一个很难说清的前端问题拆开了：AI 生成的页面为什么总有一股模板味，为什么开发者明明能让它写出 CSS，却很难让它稳定写出有品味、有层级、有产品感的界面。

它给出的答案很直接：问题不只是模型能力，而是协作语言。人对 AI 说“高级一点”“更有设计感”“别像 AI 做的”，这些话太模糊；AI 最终只能回到训练数据里最常见的 SaaS 平均脸。Impeccable 做的事情，是把“审美”变成 Agent 能执行的设计词汇、上下文文件、命令动词、反模式检查和浏览器内迭代流程。

对老大的 vibe coding 来说，这比单纯安装一个插件更有启发：以后前端工作应该从“让 Codex 写页面”升级为“给 Codex 一个可执行的设计导演协议”。

这个网站真正做对了什么

Impeccable 首页上那句话很准：“The missing design vocabulary for agents.” 它不是把自己包装成又一个 UI 生成器，而是把痛点放在“vocabulary”上：AI frontends all share one look，是因为它没有足够明确的词去区分 hierarchy、contrast、restraint、layout、typography、motion、anti-pattern。

官方 README 也把产品说得很工程化：它提供 1 个 skill、23 个命令、live browser iteration，以及 44 条确定性 detector rules。这里的关键不是数字，而是它把前端审美拆成三种东西：

• 上下文：PRODUCT.md 和 DESIGN.md 让 Agent 知道用户是谁、产品是什么气质、哪些风格不应该碰、有哪些 token 和组件。
• 设计动词：typeset、layout、colorize、bolder、quieter、distill、harden、polish 这些命令把“变好看”变成明确操作。
• 反模式检测：Slop catalog 把常见 AI 味拆成可检查规则，而不是靠“看着不舒服”的主观评价。

这三件事组合起来，才是它比普通 prompt collection 更强的地方。普通 prompt collection 往往只告诉你怎么说；Impeccable 则试图让项目本身保存设计语境，让 Agent 每次都能回到同一套标准。

可直接借鉴的 12 件事

1. 每个项目先分清 Brand Surface 和 Product Surface

Impeccable 的 init 会判断这个界面属于 brand 还是 product。这个分类非常适合老大的项目。

Brand surface 是官网、landing page、作品集、活动页，视觉印象本身就是产品的一部分，可以有强 hero、强字体、强色彩、强图像。Product surface 是后台、工具、dashboard、个人工作台，设计首先服务任务，重点是密度、状态、可读性、错误处理、键盘/鼠标效率和长期使用舒适度。

老大的大多数项目，比如 BuJo Web、AIIterate、Superbot、各种内部工作台，默认应该是 product surface。它们不需要被做成漂亮的 SaaS 首页；它们需要的是低脑力、中文友好、信息层级清楚、状态稳定、能长期用。这个分类如果不提前写清楚，Agent 很容易把工具界面做成 landing page。

2. 用 anti-reference 管住模型的审美惯性

Impeccable 的 PRODUCT.md 明确写了 anti-references：不要 generic AI tool marketing，不要 dark mode + purple gradients，不要 neon accents、glassmorphism、glowing particles、cyan-on-black，不要 hero metrics、identical-card feature grids、boost productivity copy，不要过度装饰。

这件事值得直接照搬。以后每个前端任务都应该先写“不像什么”，而不是只写“像什么”。比如：

Anti-references:
- 不要紫蓝渐变、玻璃拟态、霓虹发光
- 不要 card soup
- 不要每个 section 都有 uppercase eyebrow
- 不要假 metrics / fake dashboard
- 不要一切都居中
- 不要营销废话

AI 对正向审美容易平均化，对负向边界反而更容易执行。先声明 anti-reference，可以明显降低 AI slop。

3. 把“高级一点”翻译成设计动词

Impeccable 最有用的部分，是把设计反馈拆成命令动词：

• typeset：字体、字号、行高、字重、层级、可读宽度。
• layout：区域结构、留白、主次、节奏、容器宽度。
• colorize：策略性用色，而不是随机渐变。
• quieter：去噪、去发光、减少装饰、降低视觉冲突。
• bolder：页面太安全时，增加一个明确视觉主张。
• distill：删重复、删套娃、删多余解释。
• clarify：重写按钮、空状态、错误信息、帮助文案。
• harden：长文本、中文、大数字、错误、loading、空状态、移动端。
• polish：发版前最后一轮对齐、细节、交互和状态检查。

这会改变给 Codex 的指令质量。不要说：

把这个页面做高级一点。

要说：

对这个 dashboard 做 quieter + typeset + layout pass。
保持 product density，不改业务逻辑。
去掉 nested cards 和无意义 glow。
拉开标题/正文/标签层级，收紧相关信息组间距。
用真实中文长标题和空状态验证。

这类指令更像设计导演，不像审美祈祷。

4. 把设计上下文写进项目，而不是只写在聊天里

Impeccable 的 PRODUCT.md 和 DESIGN.md 很值得借鉴。对老大的 vibe coding 项目，不一定要一开始写完整设计系统，但至少应该有轻量版本：

# DESIGN.md

## Lane
Product surface / Brand surface / Hybrid

## Audience
谁使用，在什么压力下使用，用什么设备。

## Job
这个界面帮助用户完成什么。

## Voice
compact / calm / clinical / editorial / playful / premium / Chinese-friendly / low-cognitive-load

## Anti-references
明确不要什么。

## Tokens
surface / raised / text / muted / rule / accent / danger / success / radius / spacing / fonts

## Primitives
AppShell / TopBar / Sidebar / MainPane / RightRail / Button / Panel / ListRow / StatusTag / EmptyState

这样 Codex 每次进项目都能读到同一套设计语境，而不是每轮重新猜风格。

5. 不要让一次性 CSS 长成视觉债

Impeccable 的 DESIGN.md 里有一个很实用的规则：reach for a kit primitive before inventing a new class。按钮就用 .ks-button 加 variant，分组就用 .ks-bento + .ks-bento-tile，section 就用 .ks-section、.ks-section-head、.ks-section-sub。不要每个页面都发明 .hero-cta-primary、.footer-cta、.section-action-button。

这对 Codex 尤其重要。Agent 很容易为了局部效果写一堆一次性 class，短期看起来解决问题，长期让项目没有统一视觉语言。老大的项目以后应该有一个规则：同一类 pattern 出现三次，就必须考虑抽成 token 或 component primitive。

6. 从“漂亮页面”转向“可维护的视觉系统”

Impeccable 自己的网站风格叫 Neo Kinpaku：暗色漆面、金箔、铜绿、技术几何、小圆角、细线条、几乎不用装饰性阴影。这个风格不适合直接照搬到老大的产品里，但它的系统化方式值得学。

它不是随便挑一个 yellow，而是把颜色命名为 kinpaku gold、verdigris patina、lacquer black、raised lacquer、text muted、gold hairline 等。这种命名让颜色有语义。以后老大的产品也应该用这样的 token 思路，而不是 --blue-500、--gray-700 随手拼。

适合老大的方向可能更像 compact workbench：暗色但不纯黑，PragmataPro 处理英文/数字，LXGW 或霞鹜处理中文，少量语义色表达状态，边框和 spacing 表达层级，少用大卡片和大阴影。

7. 用 Slop catalog 建立前端坏味道清单

Impeccable 的 /slop 页面列出 46 个 AI-generated UI / quality anti-pattern。这个页面非常值得长期参考，因为它把“AI 味”拆得很细。

可直接纳入老大前端 review 的坏味道包括：

• Inter / Geist / Space Grotesk 一把梭，字体没有角色。
• single font for everything，标题、正文、标签没有层级。
• rounded icon tile above heading，每个 feature card 都像同一个模板。
• purple-to-blue gradients、cyan-on-dark、neon glow。
• gradient text 承担主要阅读。
• glassmorphism 和 blurred orbs 只是装饰，不服务层级。
• nested cards，卡片套卡片套卡片。
• identical feature-card grids，所有区块同等重要。
• hero metric layout，用假数字制造可信感。
• repeated section kicker labels，每个标题上面都有 uppercase eyebrow。
• monotonous spacing，所有间距一样，没有节奏。
• bounce/elastic easing，动效廉价。
• marketing buzzwords：streamline、empower、supercharge、world-class。

这不是说这些东西永远不能用，而是每次用都必须有理由。没有理由，就是默认删除。

8. 设计审查要有“技术验收”

Impeccable 把 critique、audit、harden 分开，这个思路很重要。审美不是只看截图；前端设计要进入生产，就必须被真实内容和边界状态打过。

以后老大的前端验收至少应该看：

• 桌面宽屏和窄屏；
• 中文长标题、中英混排、长 ID、大数字；
• loading、empty、error、offline、partial failure；
• hover、focus、keyboard、disabled；
• console 是否有新错误；
• 字体是否真的加载，而不是只写了 font-family；
• public URL 下 HTML、CSS、JS、font/image 是否都能取到；
• 截图里主动作是否一眼可见。

这也是为什么以后不能只用 npm run build 作为 UI 完成证明。build 只能说明代码能编译，不能说明界面成立。

9. 文案也是设计系统的一部分

Impeccable 很强调 voice：direct、specific、rooted in craft、zero hedging。它反对 “might / could / consider / perhaps” 这种犹豫腔，也反对 generic SaaS copy。

这对中文产品也一样。老大的个人工具里，按钮、空状态、错误提示、说明文字应该短、准、有动作。不要写“提升效率”“智能管理”“一站式体验”这种废话。按钮应该说动作，空状态应该说下一步，错误提示应该说原因和补救方式。

前端审美不仅是颜色和布局，文案也决定产品质感。

10. Brand 可以大胆，Product 要克制

Impeccable 自己是 brand surface，所以它可以有强烈的金箔视觉、强 wordmark、强命名、强 personality。但老大的多数项目是 product surface，借鉴它时必须做一次转换。

可以借鉴的不是“金箔风”，而是：

• 每个视觉选择都服务一个角色；
• 主色少但坚定；
• 装饰少但有记忆点；
• 文字系统有层级；
• 组件有统一 primitive；
• 反模式有清单；
• 发版前有 audit/harden。

如果直接照搬 Impeccable 的品牌感，内部工具会变得太戏剧化；如果照搬它的工作流，内部工具会更稳。

11. Live Mode 的本质是把“指哪改哪”产品化

Impeccable 的 Live Mode 很有启发：它不是让用户继续写抽象 prompt，而是让用户在浏览器里点元素、画区域、写指令、生成三个 variant，然后接受一个并写回源码。

这可以启发老大的前端工作流：以后不一定要完全安装 Impeccable，但可以建立类似的评审习惯。截图或浏览器 DOM 指向具体区域，把“这个地方怪”翻译成“这个 header 需要 quieter + layout”，再让 Codex 定向修改，而不是整页重写。

尤其是 BuJo Web / AIIterate 这种长期产品，最怕“全局重做一下”。更好的方式是：指向一个区域，定义一个设计 pass，跑一次浏览器验收。

12. 它提醒我们：审美可以被工程化，但不能被完全自动化

Impeccable 的 detector 能抓很多 AI slop，但不能替代判断。比如 serif hero、cream background、large radius、gradient、card grid，这些东西在某些语境里可以成立，问题是“无理由地使用”。

所以老大以后可以把 Impeccable 当成一套审查语言，而不是把它当成审美外包。真正的目标是形成自己的 frontend-design-taste：知道什么适合自己的产品、什么只是流行模板、什么该抽成组件、什么该删掉。

一张可迁移的工作流图

下面这张图把可借鉴部分压缩成老大以后 vibe coding 前端时可以使用的控制回路：

怎么落到老大的实际工作流

以后做前端时，可以把 Impeccable 的方法转成固定步骤。

第一步，开工前写 5 行设计 brief：

Lane: product surface
Audience: 老大自己，低脑力快速操作，长期使用
Job: 快速筛选、编辑、确认、回看
Voice: compact, calm, clinical, Chinese-friendly
Anti-references: no purple gradients, no glassmorphism, no card soup, no fake metrics

第二步，让 Codex 做结构，不先做装饰：

先定义 AppShell / TopBar / Sidebar / MainPane / RightRail / Panel / ListRow / StatusTag。
不要先调颜色，不要写一次性 class。

第三步，用命名 pass 迭代：

Apply layout + typeset pass to the article view.
Apply quieter pass to the sidebar and action bar.
Apply harden pass with long Chinese titles, empty state, error state, mobile width.

第四步，用 anti-slop review 收口：

检查是否有 nested cards、重复 eyebrow、无意义 glow、flat hierarchy、monotonous spacing、generic SaaS copy。
有就删或解释理由。

第五步，浏览器验收，不只看 build：

desktop screenshot
mobile/narrow screenshot
console errors = 0
真实中文长文本不溢出
空/错/loading 状态可读
focus/hover/disabled 清楚

第六步，把稳定 pattern 写回 DESIGN.md 或组件库。不要让同一个问题下一轮重新解释。

不建议照搬的地方

不要直接把老大的工具都做成 Impeccable 的 Neo Kinpaku 风。这个风格适合它自己的品牌：它需要表达“设计总监”“精密”“昂贵”“有判断力”。但老大的内部工具需要的是更低调、更高密度、更中文友好、更像工作台的界面。

也不要把 detector 当成审美裁判。规则只能指出高风险模式，不能替你判断具体语境。一个 card grid 可能是偷懒，也可能是内容本来就需要；一个 serif headline 可能是 AI 味，也可能是品牌选择。关键是：每个选择都要有任务、语义或品牌理由。

更不要把“安装 Impeccable”当成解决方案本身。它可以作为辅助，但真正的长期收益来自自己的项目拥有设计上下文、组件原语、验收规则和反模式清单。

可以立刻采用的 Prompt 模板

新页面：

Design and implement [screen]. Lane: product surface.
Audience: [who uses it, under what pressure]. Job: [task].
Voice: compact, calm, Chinese-friendly, low-cognitive-load.
Anti-references: no purple gradients, no glassmorphism, no nested card soup, no repeated uppercase eyebrow labels, no fake SaaS metrics.
Use tokens and reusable primitives. Include empty/loading/error/long-content states.
Verify desktop + mobile in browser with real Chinese text.

改现有页面：

Apply a [typeset/layout/quieter/bolder/distill/harden] pass to [target].
Preserve behavior and data. Do not invent new product features.
Reduce these slop tells: [specific smells].
If a pattern recurs 3+ times, extract a token/component instead of adding one-off CSS.
Return changed files and browser verification evidence.

设计 review：

Review this screen as a design director.
Score hierarchy, typography, layout rhythm, color/contrast, product clarity, anti-slop, accessibility, responsive robustness from 0-4.
List P0/P1/P2 issues with exact selectors/components and fixes.
Do not redesign unless asked.

结论

Impeccable 给老大最大的启发，是前端审美可以被工程化到 Agent workflow 里：先有产品语境，再有设计动词，再有反模式清单，再有浏览器验收，最后沉淀成项目设计系统。

以后 vibe coding 前端时，目标不应该是“让页面漂亮一点”，而应该是让页面进入一个可持续的设计控制回路：每次改动都知道它服务什么任务、避免什么模板味、属于哪个组件原语、用什么真实场景验收。这样才会真正提升前端品味，而不是每次靠模型随机发挥。

依据

• https://impeccable.style/ 首页：提出 “The missing design vocabulary for agents”。
• https://impeccable.style/designing/：Start / Iterate / Polish / Maintain 四阶段。
• https://impeccable.style/docs/：23 个命令、session path、command pairs。
• https://impeccable.style/slop/：46 个 AI-generated UI / quality anti-pattern。
• GitHub README：1 skill、23 commands、live browser iteration、44 deterministic detector rules。
• PRODUCT.md：产品目的、brand personality、anti-references、design principles。
• DESIGN.md：Neo Kinpaku 设计系统、OKLCH tokens、组件 kit consumption rule。