平时经常有朋友在评论区问我：为什么同样是用 AI 写前端页面，有些演示做出来很有设计感，但自己上手试的时候，得到的总是千篇一律的圆角卡片和蓝紫渐变？
前苹果设计师 Anshu Chimala（曾在苹果工作 12 年，带领研发与设计团队探索早期 AI 产品）在 Lenny's Newsletter 上写了一篇《如何把 AI 变成世界级设计师》。他在文章开头放了几个自己做的案例：用 Fable 5 实现的一镜到底卡路里记录工具、用 Claude Opus 5 两句提示词写出的 3D 太空探索游戏，以及用 Opus 5 配合 GPT-5.6 搭建的产品落地页。
读这篇文章时我很有共鸣。我自己在做网页和设计类 Skill 的过程中，踩过的坑和总结出来的应对办法，和他在专业设计视角下提炼的流程高度重合。下面结合他的文章脉络和我自己的工程实践，聊聊怎样把 AI 从默认的安全模板里拉出来。
为什么大模型默认写出的界面总有「AI 味」
大语言模型底层的生成逻辑，是根据上文一步步预测下一个最可能出现的 Token。在模型后训练阶段，人类偏好评分会让模型学会做出最稳妥、最符合大多数人平均预期的选择。
这种机制让 AI 在常规问答和代码逻辑上表现稳定，却站在了优秀 UI 设计的对立面。好的设计往往需要打破常规，用出人意料的排版或交互给人留下印象；而 AI 在没有收到明确风格约束时，默认会交出一份「委员会式的设计」——也就是谁都不会出错、但毫无特点的公约数方案。
我们熟悉的早期蓝紫色渐变、铺满页面的圆角矩形容器、直接拿 Emoji 当功能图标，都是因为提示词里没有限制风格，模型自动落回了它认为最安全的默认选项。
要跳出这个默认区间，可以借鉴传统设计里的「双钻石流程」（发现、定义、开发、交付）：经历两次「先发散、再聚焦」。比如做一个热量记录应用，不能一上来就拍脑袋认定「拍照算热量」是唯一解法，而是先发散观察用户的真实困难，聚焦出核心问题后，再发散尝试拍照识别、语音口述等不同方案，最后通过灰度测试收敛到用户最常用的主路径。
用 AI 做界面也是同样的道理：不要盯着第一版平庸的草稿反复修补，而是先在发散阶段让模型一次性探出多条截然不同的视觉路径，挑中最好的一版底子后，再聚焦打磨交互细节与业务功能。
从伪随机到明确的视觉方向
面对空白屏幕时，很多人会尝试在提示词里写「请做一个独特的设计，所有设计决策全部随机」。但实验结果证明，仅仅口头要求「随机」，模型生成的四套页面依然会使用相同的配色和相似的排版，只是把右侧的圆角面板换成了圆环或礼花图案；在中文场景下，它还会写出很多晦涩难懂的抽象隐喻文案。这是因为模型本质上依然在预测概率最高的字符串，无法凭空产生真正的随机性。
为了从外部打破趋同，Anshu Chimala 提出了一种「随机字符串种子」的办法：让 AI 先用脚本生成一长串包含字母和数字的随机字符串，把字符串里的隐藏模式作为配色、布局和字体风格的灵感来源（但不在页面上显示这串字符）。加上这层外部约束后，四套方案终于出现了衬线体与无衬线体、亮色与暗黑模式等明显的风格分化。
不过按我自己的实操经验，其实不一定非要绕「生成随机字符串」这一步。现在的模型理解能力已经足够好，只要你在提示词里直接写清楚：「请为这个应用生成四套完全不同的设计方案，要求每套方案的色彩搭配、字体类型和版式布局都必须拉开差异」，不用随机种子也能直接得到同样丰富的发散效果。
如果你想做出真正让人眼前一亮的页面，还需要给模型输入更具体的跨领域视觉意向，或者明确授权它打破排版规则。比如：
- 要求「采用大胆的像素风格，每个板块都像游戏画面，但整体仍是一个完整的产品落地页」；
- 要求「把应用场景放在 45 度等轴微距视角的 3D 城市里，用不同的建筑和街区来展示各项产品功能」；
- 要求「采用不对称的非常规布局，使用有冲突感的配色与字体，大胆把元素排到边缘，打破常规规则但保持页面好看」。
在实际开发中，我们未必每次都能凭空想出「像素风」或「等轴 3D 城市」这样的点子，但第三条思路非常通用——直接告诉 AI「大胆排版，不要局限于常规的居中对称布局」，它就会敢于突破传统的卡片堆叠。
如果一开始完全没有头绪，可以先让 AI 充当灵感发散器：让它针对产品列出十来种大胆的视觉方向，每一种只写简短的几句话，不要展开细节。我们从中挑出感兴趣的方向，再把自己的主观取舍喂回去。比如想做一个工业控制面板风格，告诉它「需要有点击按钮的触感和声音反馈，避开俗气的卡通感；纯灰色渐变太单调，加入一点纹理和色彩，同时保持面板的简洁」。来回碰撞几轮把设计意向聊透之后，我自己的习惯是直接让当前对话里的 AI 开始写页面，不需要像原作者那样专门让它总结一段长提示词、再新开一个会话去生成。
引入没有历史包袱的「设计评审子 Agent」
初稿写出来之后，如果直接让当前写代码的 Agent 自己看着页面继续改，效果往往不理想。因为主 Agent 的上下文里装着之前写下的所有代码和历史决策，它没有客观视角，很容易顺着原有的结构修修补补。
更有效的做法是建立一套基于子 Agent 的反馈闭环：启动一个全新的、不带任何历史代码上下文的子 Agent，专门担任「设计评审员」。
在每一轮修改后，把当前页面的真实截图交给这个评审子 Agent，让它对照顶尖设计工作室的标准挑毛病：找出整体构图和细节上的最大差距，严厉扣掉明显带有 AI 模板感的元素，按 10 分制打分，并规定只有分数达到 9 分以上才算完成任务。
这种「无历史包袱独立评审」的机制不仅适用于 UI 设计，写代码时也同样好用。让同一个 Agent 优化老代码，它往往只能在原有缺陷上打补丁；而拉一个干净的子 Agent 来做 Code Review，它更容易直接指出底层结构设计上的问题，给出推倒重来的干净方案。
在工程落地上，这套分工还有两层实际考量：
第一是模型能力的错位搭配。原作者用 Claude Fable 5 当评审员、让便宜快速的模型改代码；而在我们日常能用上的模型里，往往写代码最强的模型（如 Codex）审美偏保守，反而是 Gemini 或 Grok 这类模型在视觉排版上更有灵气。我之前开源的 grok-designer（早期版本叫 Gemini Designer）就是基于这个思路设计的：让主 Agent 派发一个调用 Grok 或 Gemini 的子 Agent 专门负责看图提设计方案，再交回给主 Agent 写代码。
第二是评审反馈必须具体到可执行。评审子 Agent 绝不能只给「不够高级」「需要更有张力」这类空泛的评价，否则写代码的模型根本不知道怎么改。在编写评审指令时，必须要求它输出明确的修改位置、具体调整方式甚至伪代码，让负责写代码的主 Agent 只做确定的实现工作。
用生图、着色器与绿幕视频拆帧丰富视觉层次
如果只让 AI 写 HTML 和 CSS，它最多只能排排文字、画几个简单的 SVG 图标。但像苹果官网那样有视觉张力的网站，很大程度上依赖高质量的图片、光影和动态素材。
很多编程 Agent（比如 Codex）即使内置了生图能力（如 imagegen Skill），在默认写网页时也很少主动调用图片生成。因此我们需要在提示词里明确要求它：调用生图工具生成插画或透明底装饰图，或者结合着色器（Shader，可用来实现随鼠标移动的日冕光效、流光、点状波纹）与 3D 效果来丰富画面。比如在两个模块衔接处放一枚生成的透明底水晶图案，或者给刻度盘加上随鼠标移动的光晕，页面的单调感立刻就会消失。
遇到更复杂的自定义动画——比如水晶爆裂旋转，或者角色跟随交互做出动作——纯靠手写代码很难实现，这时可以借用「AI 生成绿幕视频 + 抠像拆帧」的方案。
具体做法是：先让视频生成模型生成一段纯绿色背景的循环动画视频，再让 AI 写一段色键（Chroma Key）脚本把绿色背景抠除，转换成透明底的视频或 PNG 序列帧。我之前把这套流程封装成了开源的 oil-motion Skill，我个人网站首屏右下角那只小狗，就是先生成一段 360 度转头的绿幕视频，抠成透明底后切分为不同视频帧，再根据鼠标指针的横坐标实时切换对应帧，做出了小狗盯着鼠标转头的交互。
同样的序列帧方案还可以绑定到页面的滚动条上：页面往下滚，动画往后拨；页面往上滚，画面倒退回去。我之前做另一个网站时就用这种方式实现了单页连贯的一镜到底动画。
删掉没有价值的文字与容器，亲手打磨最终文案
把创意和视觉元素加进去之后，最后一步是做减法，剔除页面里所有不能带来实际价值的元素。
现在的 AI 模型有一个非常顽固的习惯：特别喜欢在页面各个角落塞满解释性的描述文字和多余的外层容器。比如原作者展示的卡路里应用初稿，尽管他已经在提示词里明确要求「干净、极简」，模型生成的界面依然塞满了问候语、副标题说明和层层嵌套的底板。
只要图片、数字和布局本身已经能让用户看懂这块区域是干什么的，就可以果断把多余的说明文字删掉。比如左侧导航栏如果图标和结构已经很清晰，就没必要再在顶上加一行「当前工作区」的文字说明；只有当某个图标含义不直观、删掉文字会影响理解时，才需要保留文字标签，或者改成鼠标悬停时显示的 Tooltip。
同样，向 AI 提出极简要求时，只说「做出苹果那样的极简风格」往往没什么用，必须给出具体的删减指令：「将布局简化为以图像为中心的网格，去掉渐变效果、发光效果以及不必要的容器元素」。把这些冗余装饰扒干净之后，界面的呼吸感马上就出来了。
原作者文章的最后两节（第七节专门排查 AI 味、第八节亲手撰写网站文案）属于付费订阅内容，出于对原作者的尊重，这里不展开具体细节。不过第八点标题本身就是一个很实在的提醒：AI 写出的营销与展示文案往往带着明显的套路感，把页面布局和交互打磨到位之后，关键位置的文案最好还是由我们自己亲手写一遍。