用AI生成过前端页面的都有一个共同体验：不管你怎么描述需求，出来的东西总是一股浓烈的”AI味”——大圆角卡片铺满屏幕、紫色渐变背景、到处飘着emoji图标、每个section都塞满了card grid。看起来像是2023年某个AI hackathon的demo，而不是一个正经产品。
OpenAI显然也意识到了这个问题。他们最近发了一份Frontend Prompting Playbook，专门教你怎么让GPT-5.4生成不那么AI的UI。同时还开源了一份frontend-skill配置给Codex用。这份文档本身就是一篇绝佳的”反AI审美”指南，值得每个前端认真读一遍。
AI生成UI的通病到底是什么
在拆解Playbook之前，先说清楚问题。我用各种AI工具生成过不少页面，踩坑总结下来，AI生成的UI有几个致命特征：
卡片泛滥。AI特别喜欢用card来组织内容。不管什么信息，先套一层圆角+阴影的卡片再说。一个简单的feature列表，它能给你拆成6个等大的卡片排成grid。结果整个页面看起来像后台管理系统的dashboard。
紫色偏执。不知道训练数据里紫色出现的频率是不是特别高，AI默认配色方案大概率带紫色渐变。紫色本身没问题，问题是每个AI生成的页面都紫，就变成了AI的signature color。
hero区域塞太多东西。标题、副标题、两段描述、三个统计数字、两个按钮、一排logo、一个动画背景——全挤在首屏。人类设计师的hero是做减法的结果，AI的hero是把所有能想到的元素堆上去。
品牌感为零。把logo换掉之后，所有AI生成的页面看起来都一样。这是最致命的问题。
Playbook的核心思路：约束大于创意
OpenAI这份Playbook本质上是一份system prompt，核心策略是用大量硬规则限制模型的”创造力”。这个思路很反直觉——大家通常觉得AI的优势是创造力，但在UI设计领域，不受约束的创造力恰恰是灾难的来源。
Playbook把规则分成了几个层次，我按重要程度排一下：
第一层：构图约束
这是最重要的一层。Playbook直接规定：
One composition: The first viewport must read as one composition, not a dashboard. Full-bleed hero only: the hero image should be a dominant edge-to-edge visual plane. Hero budget: only brand, one headline, one short supporting sentence, one CTA group, and one dominant image.
“Hero budget”这个概念特别好。它直接限制了首屏能放的元素数量——品牌名、一个标题、一句话、一组按钮、一张图。就这些，多一个都不行。不能放stats、不能放schedule、不能放promo。
这解决了AI最大的问题：不知道什么时候该停。人类设计师做设计是做减法，AI做设计是做加法。给它一个约束上限，强制它减法。
第二层：反卡片原则
Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
这段话应该刻在每个用AI写前端的人的显示器上。”如果去掉边框、阴影、背景、圆角不影响交互和理解，那它就不该是卡片。”这是一个非常实用的判断标准。
我拿这个标准回过头看之前AI生成的页面，大概80%的卡片都是多余的。一个feature列表用section+间距就够了，根本不需要卡片。
第三层：品牌和配色
Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak. Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias. Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
“No purple bias”——OpenAI自己都承认了紫色问题的存在。同时明确禁止Inter、Roboto这些”安全牌”字体。这两条加在一起，基本上就是在说：别用AI默认给你选的那些东西。
实际效果怎么样：用Playbook前后对比
我拿一个实际需求测了一下：生成一个本地咖啡店的landing page。
不加Playbook的prompt：
Build a landing page for a local coffee shop called "Morning Fog". They specialize in single-origin pour-over coffee. Located in Shanghai, established 2019.
出来的结果：紫色渐变背景、6个feature卡片（”新鲜烘焙”、”手冲工艺”、”单一产地”之类）、hero里塞了营业时间和地址、用了Inter字体、有一排毫无意义的统计数字（”500+ 种咖啡豆”、”10000+ 杯手冲”）。典型AI味。
加上Playbook约束后的prompt：
Build a landing page for "Morning Fog", a local coffee shop in Shanghai. Single-origin pour-over, est. 2019. Design constraints: - Full-bleed hero with real coffee photography - Hero budget: brand name, one tagline, one CTA only - No cards anywhere - No purple, no gradients - Earthy warm palette, define as CSS variables - Serif headline font, not Inter/Roboto - No stats, no icon rows, no pill clusters - Each section has exactly one job
差别很明显。第二版出来的页面品牌感强很多——全幅的咖啡图片做背景，暖色调，衬线字体标题，整个页面只有四个section各司其职。不像一个”AI做的咖啡店网站”，更像一个设计师做的。
当然还是能看出AI痕迹，但至少不辣眼睛了。
从Playbook里能学到的Prompt Engineering技巧
抛开前端设计不谈，这份Playbook在prompt engineering层面有几个值得学的技巧：
1. 用”禁止清单”比”要求清单”更有效
Playbook里大量使用”Do not”、”No”、”Never”、”Avoid”。它不是告诉模型”请做出有品牌感的设计”，而是说”如果首屏去掉nav之后看不出是哪个品牌，就是不合格”。否定式约束比肯定式要求对LLM更有效，因为它缩小了输出空间。
2. 给出具体的判断标准而不是模糊的形容词
“设计要精致”——这种prompt毫无用处。Playbook的写法是”如果去掉卡片的border、shadow、background、radius不影响理解，那就去掉”。这是一个可执行的判断流程，不是一个形容词。
3. 先写计划再写代码
Playbook要求模型在动手之前先写三样东西：visual thesis、content plan、interaction thesis。这其实就是Chain-of-Thought在设计领域的应用——让模型先想清楚再做，而不是直接输出代码。
4. 低reasoning反而效果更好
OpenAI自己说的：前端设计任务不要用高reasoning level。”Lower reasoning helps the model stay fast, focused, and less prone to overthinking.”想多了反而过度设计。这一点在我实测中确认了——reasoning调高之后，模型开始加各种”贴心”的功能和组件，结果更复杂更AI味。
一些Playbook没覆盖但同样重要的问题
响应式断裂。AI生成的desktop版看着还行，resize到mobile就全崩了。Playbook提了一句”ensure the page loads properly on both desktop and mobile”但没有给具体约束。实际用的时候建议在prompt里加上mobile-first或者明确指定断点行为。
交互状态缺失。AI生成的UI通常只有默认状态，hover、active、disabled、loading、error、empty这些状态基本不考虑。一个”看起来不错”的button可能hover的时候毫无反馈。这个需要在prompt里逐一要求。
真实内容vs占位符。OpenAI强调要用真实内容而不是Lorem Ipsum，这点很关键。AI拿到真实文本之后生成的布局结构会更合理，因为它能根据实际内容长度来分配空间。用占位符的话，所有文本块看起来都一样长，结果布局也呆板。
对前端团队的实际建议
如果你的团队在用AI辅助生成UI（不管是Codex、Cursor还是别的什么），建议做三件事：
第一，把OpenAI这份Playbook的hard rules复制出来，改成你们自己产品的版本。把紫色换成你们的品牌色禁区，把字体黑名单换成你们的design token。这份规则应该放在项目的AGENTS.md或者类似的AI上下文文件里，让每次AI生成代码的时候自动加载。
第二，建一个”反面案例库”。每次AI生成了AI味很重的UI，截图存下来，标注哪里不对。下次prompt的时候可以引用这些反面案例，效果比光写文字约束好得多。
第三，约束传递到子任务。这是我踩过最深的坑——主prompt写了一堆设计约束，但拆分成子任务后忘了带上这些约束，子任务生成的组件又回到了AI默认审美。每个子任务都要携带完整的设计约束。
写在最后
OpenAI这份Playbook最有价值的地方不是具体的规则，而是它背后的理念：对AI的约束就是设计本身。好的设计是约束的结果，不是自由发挥的结果。人类设计师花几年时间学会的审美直觉，现阶段只能用规则来替代。
Playbook和frontend-skill的代码都在GitHub上开源了。不管你用不用OpenAI的产品，这份约束清单都值得抄到你自己的AI工作流里。
前端生成式AI的问题从来不是”能不能生成”，而是”生成出来的东西能不能用”。Playbook证明了一件事：答案不在模型能力上，在prompt质量上。
