夜雨聆风学习资料网

ARTICLE · 1032613

如何让 AI 做出世界级的 UI 设计

发布时间：2026-09-18 18:53:48 最近访问：2026-09-18 18:53:48

如何让 AI 做出世界级的 UI 设计

最近读到 Lenny’s Newsletter 上的一篇文章，《How to turn your AI into a world-class designer》。
作者 Anshu Chimala 曾在 Apple 工作 12 年，带过软件工程和设计团队，主要参与未来 AI 产品的研究和原型设计。他在文章里提出了一套很有意思的方法：不是寻找一个所谓的“神级 Prompt”，而是把传统设计流程重新改造成一套适合 AI Agent 的设计流程。
这几年，用 AI 写 UI 已经越来越容易。
告诉 Codex、Claude Code 或其他 Coding Agent：

帮我做一个现代、简洁、高级的 Landing Page。

几分钟后，它通常真的可以给出一个完整页面。
Hero、CTA、Feature Card、渐变、动画、圆角，一样不少。
但另一个问题也越来越明显：
为什么很多 AI 做出来的网站，看一眼就有一股明显的“AI 味”？
原因可能并不在于模型不会设计。
恰恰相反，是因为模型太善于选择那些最安全、最常见、最容易被所有人接受的方案。
于是，真正的问题变成了：
怎样把 AI 从它自己的平均审美里拉出来？

01

AI 为什么天然会趋向“平均审美”

LLM 本质上仍然是一个概率模型。
每当它需要决定：
这里用什么颜色？
字体多大？
按钮放在哪里？
Hero 怎么布局？
它都会倾向于选择概率最高、训练数据里最常见、最容易被接受的方案。
结果就是我们熟悉的：
紫蓝渐变。
左文右图。
圆角卡片。
顶部导航栏。
Feature Grid。
大号 CTA。
Glow。
Glassmorphism。
这并不是模型能力不足。
而是因为：
它太习惯于做正确的事。
而真正优秀的设计，恰恰经常来自一些不那么“正确”的决定。
不对称。
留白。
反常规的字体。
奇怪的构图。
意外的视觉隐喻。
甚至某些第一眼看起来“不应该这样做”的东西。
Anshu 把他的流程分成三个阶段：
Discover → Define → Deliver
先充分发散，再建立独特的设计身份，最后通过不断删除和打磨收敛到成品。

02

第一招：用真正的随机 Seed 打破模型惯性

文章里一个很有意思的方法，是：
不要让模型自己假装随机，而是从模型外部引入随机性。
如果你告诉 AI：

给我随机设计一个完全独特的网站。

听起来好像已经很开放了。
但模型所谓的“随机”，依然发生在自己的概率分布里。
它可能换几个颜色、调整几个布局，但多跑几次之后，你依然会发现它们长得很像。
于是作者借鉴了 Sakana AI 的 String Seed of Thought 思路：
让 Coding Agent 先通过 Shell 真正生成一个随机字符串，再把这个随机字符串作为设计灵感来源。
可以把原文方法整理成这样一个可直接使用的 Prompt：

我要你为一个生产力应用设计 Landing Page。

在开始设计之前，请先执行以下流程：

  1. 使用 Shell 生成一个足够长的随机字母数字字符串。

  2. 仔细观察这个字符串，从数字分布、重复字符、节奏、特殊组合等模式中寻找设计灵感。

  3. 根据这些模式确定整个页面的视觉方向，包括：

    • 色彩体系

    • Typography

    • Layout

    • 比例关系

    • 图形语言

    • 动效节奏

  4. 不要简单把字符串映射成颜色，而是把它当作一个 Creative Seed。

  5. 最终页面中不要显示这个随机字符串，它只用于影响你的设计决策。

在确定 Creative Direction 后，再开始实现页面。

不要回到常见 SaaS Landing Page 模板。

这个方法最有价值的地方，其实不是“随机字符串”。
而是：
主动向模型的概率分布中注入一个外部变量。
同一个模型。
同一个项目。
只要换一个 Seed，就可能产生完全不同的设计路径。
这和我们通常追求的 Prompt Engineering 有点相反。
过去我们总在想：
怎样描述得更精确？
而在创意任务里，有时候更应该问：
怎样让模型不要那么容易回到默认答案？

03

第二招：不要说“高级”，给 AI 一个大胆的视觉命题

另一个非常实用的方法，是不要再使用：

Modern Beautiful Clean Premium

这些几乎没有设计信息的词。
因为所谓“高级”“现代”，本身就没有明确的视觉方向。
Anshu 给出的思路是：
给 AI 一个具体、甚至有些疯狂的世界。
例如他在文章里尝试了三个方向：像电子游戏一样的像素艺术 Landing Page、把产品功能变成等距 3D 城市，以及大量使用不对称、冲突色彩和不舒服留白的实验性页面。
按照这个思路，可以直接写成：

为我的生产力应用设计一个 Landing Page。

整个网站采用大胆的 Pixel Art 视觉语言。

每一个 Section 都应该像一张电子游戏截图，但同时必须承担真正 Landing Page 的信息功能。

不要简单加入几个像素图标，而要让：

  • Typography

  • Illustration

  • Navigation

  • Button

  • Section transition

都属于同一个完整的电子游戏世界。

或者：

为我的生产力应用设计一个 Landing Page。

整个页面存在于一座 Isometric 3D City 中。

不同产品能力不要用传统 Feature Card 展示，而是分别对应城市中的不同区域、建筑和设施。

用户滚动页面时，就像不断探索这座城市。

页面仍然需要保持清晰的信息层级和产品叙事，不能为了 3D 效果牺牲可用性。

再激进一点：

为产品设计一个高度实验性的 Landing Page。

主动避免标准 SaaS 布局。

使用：

  • 强烈的不对称构图

  • 有控制的色彩冲突

  • 非传统 Typography

  • 大量负空间

  • 非常规信息层级

允许打破传统网页设计规则。

但所有破坏规则的行为都必须服务于一个统一的视觉语言，而不是为了奇怪而奇怪。

注意这里发生了一个非常关键的变化。
我们不再告诉 AI：
“页面应该有哪些组件。”
而是在告诉它：
“这个产品生活在什么世界里。”
组件只是结果。
设计语言才是真正的生成空间。

04

如果自己想不到视觉方向，让 AI 先发散，而不是直接设计

这里还有一个非常实用的小流程。
很多时候，我们自己也不知道应该设计成什么样。
最容易犯的错误是问 AI：

给我一个有创意的设计方案。

最后 AI 又会给出那些“赛博朋克”“未来主义”“极简主义”之类已经快被用烂的答案。
作者建议第一轮故意只让 AI广泛产生方向，不深入设计。
例如：

我要为一个 AI 产品建立一种大胆、独特的视觉语言。

请尽可能多地提出 Creative Direction。

每个方向只需要：

  • 一个名字

  • 一两句话描述

不要深入展开。

不要做页面结构。

不要写代码。

当前目标只是最大化设计空间。

Go broad, not deep.

尽量避开常见的：

  • SaaS

  • Cyberpunk

  • Purple gradient

  • Glassmorphism

我希望看到跨领域的灵感来源，比如建筑、工业设计、电影、游戏、印刷、音乐、机械、自然、艺术装置等。

然后人开始介入。
假设其中有一个方向叫：
Industrial Control Panel
这时候不要直接让 AI 开始写代码。
先告诉它自己的真实感受：

Industrial Control Panel 这个方向我有兴趣。

我的感觉是：

  • 我喜欢它的触觉感，希望按钮有机械反馈感。

  • 但不要做成复古卡通式的拟物设计，那样容易显得廉价。

  • 我希望整体组件语言高度一致。

  • 不要大量使用无聊的灰色渐变。

  • 可以引入少量颜色和材质，让页面有机械设备的真实感。

  • 整体应该克制，而不是到处堆工业元素。

根据这些反馈，把这个设计方向进一步 sharpen。

暂时不要写代码。

继续迭代几轮以后，再说：

现在把我们已经确定的设计语言整理成一个简洁、明确、可执行的 Build Prompt。

这个 Prompt 将交给另一个 Coding Agent 创建第一版 POC。

保留核心设计原则，但不要过度规定实现细节，让执行 Agent 仍然拥有设计空间。

这里最重要的一件事是：
人的 Taste 开始进入生成循环。
如果只是让 AI 自己想一个创意，再把 AI 的创意原封不动交还给 AI，
最终依然只是模型自己的平均值。
只有人的：
喜欢。
讨厌。
犹豫。
判断。
选择。
不断进入 Context，
最终设计才会逐渐变成：
只有你才可能做出来的东西。

05

第三招：不要让设计者自己给自己打分

这是我认为整篇文章里最重要的方法。
我们现在使用 Coding Agent，经常是：

做一个页面。

做完之后：

你看看哪里还能优化。

然后：

再高级一点。

问题在于：
负责设计的人，也是负责审稿的人。
而且还是同一个 Context。
这个 Agent 知道：
自己为什么这样设计。
CSS 怎么实现。
哪些地方刚刚改过。
哪些地方修改成本很高。
这些信息都会产生强烈的Anchoring。
它很难真正否定自己的方案。
于是 Anshu 引入了第二个 Agent：
Design Critic。
Implementer 负责实现。
Critic 负责审美判断。
而且 Critic 有一个非常重要的限制：
只允许看 Screenshot，不允许看源码。
原文给出了完整的循环逻辑。
我们可以整理成下面这个 Prompt：

我要你继续优化当前页面。

但是不要由你自己判断设计质量。

每一轮执行下面的流程：

  1. 在浏览器中打开当前页面。

  2. Capture Screenshot。

  3. 创建一个全新的 Design Critic Agent Context。

  4. Critic 只能看到：

    • 当前 Screenshot

    • Design Brief

    • Reference Images

  5. Critic 不允许看到：

    • Source Code

    • Implementation Details

    • Previous Critiques

    • Previous Iterations

Critic 需要判断：

  • 当前设计正在追求什么视觉语言？

  • 如果由一家世界级设计工作室执行，它会是什么样？

  • 当前版本与这个标准之间最大的差距是什么？

请重点检查：

  • Composition

  • Visual hierarchy

  • Typography

  • Spacing

  • Color

  • Visual rhythm

  • Consistency

  • Interaction

  • Details

同时主动寻找：

  • 过度设计

  • 常见 AI Pattern

  • 无意义装饰

  • 模板化布局

Critic 的反馈必须：

  • 简洁

  • 具体

  • 可以执行

  • 不要写空泛审美描述

最后给当前设计一个 1—10 分的评分。

根据 Critic 的意见修改页面，然后重新 Screenshot，再开始下一轮。

不要让 Critic 因为实现成本而降低质量标准。

原文甚至把结束条件设置为：
Critic 独立认为页面达到 9/10 以上。
不过作者也特别提醒：
不要让 Agent 无限迭代。
最好先限制一两轮，观察是否真正收敛，否则 Critic 可能永远不满意，最后只是疯狂烧 Token。

06

不要问“漂亮吗”，给 Critic 一个视觉参照系

这里还有一个很容易被忽略的细节。
一个很差的 Critic Prompt 是：

看看这个 UI 漂不漂亮。

因为“漂亮”没有标准。
即便写成：

判断它有没有 AI 味。

仍然很模糊。
更好的方法是：
提供 Reference。
比如上传：
4 个你认为真正顶级的设计。
加上自己的页面 Screenshot。
然后说：

这里有 5 张设计图。

其中 4 张来自专业设计作品，第 5 张是我们的产品。

不要复制任何一个参考设计。

把前 4 张看作：

  • Quality Bar

  • Moodboard

  • Taste Baseline

从以下维度比较我们的设计：

  • Polish

  • Typography

  • Composition

  • Visual hierarchy

  • Spacing

  • Originality

  • Taste

找出最明显的质量差距。

不要说“更加高级”“更加现代”这种空泛描述。

请指出具体应该修改什么，以及为什么。

原文特别强调：Reference 应该被理解为基准和 Moodboard，而不是复制对象。
这一点让我想到一个很有意思的理解：
过去我们总试图：
用文字完整描述审美。
但视觉信息转成语言，本来就是有损的。
与其花几百字告诉 AI：
什么叫简洁。
什么叫高级。
什么叫克制。
不如直接告诉它：
我要达到这组作品的 Quality Bar。
Reference Image 某种意义上，就变成了设计过程里的：
Visual Loss Function。

07

第四招：不要让 Coding Agent 永远只会写 CSS

Coding Agent 有一个很明显的习惯：
能用代码解决的问题，就尽量用代码解决。
所以当它需要制造“视觉效果”的时候，很容易出现：
Gradient。
Glow。
Blur。
SVG Blob。
Pattern。
Glassmorphism。
原因很简单。
这些东西：
写代码最快。
但方便，也意味着容易模板化。
所以作者会明确要求 Agent：
主动使用 Image Generation。
例如可以直接告诉 Codex：

当前页面在结构上没有问题，但视觉上仍然过于依赖 CSS。

不要继续通过：

  • Gradient

  • Glow

  • Decorative shape

  • Background blur

来制造所谓的设计感。

使用 Image Generation 为这个页面增加真正独特的视觉资产。

根据当前 Design Direction 判断最适合生成什么：

  • Hero visual

  • Texture

  • Illustration

  • Product environment

  • Abstract visual

必要时把生成图像与：

  • Shader

  • WebGL

  • 3D

  • CSS effects

结合起来。

图片必须属于整个设计系统，而不是随便插入一张装饰图。

完成后在浏览器中逐屏检查视觉效果。

如果 Agent 本身带有 Image Generation 能力，就应该直接让它调用。
如果没有，也应该把图片生成作为设计 Pipeline 中独立的一环。
这背后其实是一个重要变化：
Coding Agent 不应该只是：
Code Generator。
它可以成为一个 Orchestrator：
调用代码。
调用图像模型。
调用浏览器。
调用 Screenshot。
调用 Critic。
甚至继续调用视频模型。

08

第五招：把视频生成模型当成 UI 动效工具

文章里还有一个非常有意思的做法。
现在绝大多数人使用视频生成模型，想到的还是：
短片。
广告。
UGC。
AI 视频。
但其实视频模型可以成为非常强的：
Motion Design Tool。
作者展示了两个方法。
第一种：
生成复杂循环动画
例如页面 Hero 中有一个玻璃晶体。
不要用 CSS 模拟。
可以告诉 Agent：

把当前 Hero 静态图替换成一段无缝循环动画。

动画内容：

  • 晶体缓慢裂解

  • 分裂后的碎片在空间中旋转

  • 保持整体构图稳定

  • 玻璃产生真实折射

  • 折射应该受到页面背景颜色影响

  • 同时产生真实的高光、阴影和 caustics

为了让折射可信：

先按照网页真实背景生成完整视频，再通过 Video Matting 移除背景。

最终动画必须能够自然嵌入当前页面，看起来像实时 UI Motion，而不是播放器中的一段视频。

输出后检查：

  • Seamless loop

  • Background edge

  • Compression artifacts

  • Visual consistency

这种复杂的：
玻璃折射。
碎裂。
粒子。
真实物理运动。
如果完全依赖代码实现，成本可能非常高。
而生成式视频提供了一条完全不同的路线。

09

一个更有意思的玩法：用视频插值制作滚动转场

第二个玩法我觉得更值得关注。
现在视频模型已经可以：
从 Frame A 插值到 Frame B。
于是可以先准备两个状态：
产品初始状态。
产品结束状态。
生成中间视频。
然后不要“播放视频”。
而是把视频帧绑定到：
Scroll Progress。
用户往下滚动，视频一点一点前进。
于是整个产品会发生非常自然的连续运动。
文章用行李箱做了一个例子。
可以整理成：

创建一个以 Suitcase 为核心视觉的 Landing Page Demo。

页面包含三个连续状态：

State 1： 行李箱漂浮在空中。

State 2： 行李箱落到地面，并自然打开。

State 3： 行李从画面顶部落下，并整齐进入箱子。

工作流程：

  1. 使用 Image Generation 创建第一个 Keyframe。

  2. 使用 Video Generation 从 State 1 插值到 State 2。

  3. 取第一段视频最后一帧，作为下一段生成的起始 Frame。

  4. 再生成 State 2 → State 3。

  5. 保持：

    • Camera

    • Lighting

    • Product geometry

    • Background

    • Material 高度一致。

  6. 不要自动播放这些视频。

  7. 把 Video Progress 映射到页面 Scroll Progress。

用户滚动页面时，应该像直接操纵整个动画过程。

确保所有状态切换连续，不出现明显跳帧。

这已经不是传统意义上的“写前端”。
而是：
代码 + Image Model + Video Model + Interaction Design
共同完成一个页面。

10

第六招：最后一轮不要再增加任何东西

做到这里，AI 通常已经能做出非常复杂的视觉效果。
但这时候还有一个问题：
AI 非常善于添加，却很少主动删除。
如果你告诉它：

再优化一下。

它大概率理解成：
再加点东西。
于是：
多一个 Glow。
多一个 Icon。
多一个 Label。
多一个 Animation。
多一个 Container。
多一个 Accent Color。
而优秀设计最终经常发生在完全相反的方向：
Subtraction。
文章里的案例，就是删除了大量 Glow、Gradient、无意义容器、标签和自定义控件，让页面重新回到真正简洁的状态。
我会把原文的这个方法进一步工程化成一个专门的：
Subtraction Pass Prompt

现在进入最终 Subtraction Pass。

这一轮禁止新增：

  • UI Element

  • Decoration

  • Animation

  • Color

  • Label

  • Container

你只能：

  • 删除

  • 合并

  • 简化

  • 弱化

  • 重排

检查页面中的每一个元素。

对每个元素问三个问题：

  1. 它是否承担真实的信息功能？

  2. 它是否强化视觉层级或者品牌语言？

  3. 删除它以后，页面是否真的会变差？

如果三个问题都不能得到明确肯定答案，就优先删除。

特别检查：

  • 无意义 Glow

  • Gradient

  • 多余 Card

  • Decorative shape

  • 重复 Label

  • 无意义 Icon

  • 不必要的 CTA

  • 过度 Animation

  • Random accent color

目标不是让页面“显得设计得很多”。

目标是让每一个还存在的元素，都有存在的理由。

这个 Pass，我认为以后甚至可以成为 AI 前端项目的固定步骤。
因为很多时候：
高级感并不是加出来的，而是删出来的。

11

再专门做一次“AI 味审查”

原文公开页面从 Technique 7 开始进入付费区，目前只能确认这一节标题就是：
Remove AI tells。
所以这一部分我不把下面的内容冒充成原文 Prompt，而是根据前面整套方法进一步整理一个自己实际会使用的：
AI Tells Audit。

对当前页面进行一次 AI-generated design audit。

不要修改功能，只寻找那些一眼容易让人感觉“这是 AI 做的”的视觉模式。

重点检查：

  • Purple / blue gradient 是否滥用

  • Glow 是否没有明确作用

  • Glassmorphism 是否只是装饰

  • 是否大量使用等宽 Feature Cards

  • 是否所有元素都使用相同 Rounded Rectangle

  • 是否过度使用 Pill

  • Hero 是否又变成“左边标题、右边大图”

  • Section 是否机械重复： eyebrow → headline → paragraph → cards

  • 是否存在过多无意义的小 Icon

  • Animation 是否只是为了证明页面有动画

  • Accent color 是否到处散落

  • 页面是否存在明显模板化节奏

对每一个发现的问题：

说明：

  1. AI tell 是什么。

  2. 为什么它显得模板化。

  3. 应该删除、重构还是替换。

不要为了“去 AI 味”而故意把设计做奇怪。

目标是让设计显得：

Intentional，而不是 Generated。

这个词我觉得很准确：
Intentional。
真正优秀的设计，并不一定复杂。
但你会感觉：
这里为什么是 24px。
为什么留这么大的白。
为什么只有一个颜色。
为什么这句话这么短。
为什么这个按钮在这里。
全部都是：
故意的。
而不是模型走到这里顺手生成的。

12

真正的关键，不是 Prompt，而是设计 Harness

把整篇文章的方法连起来看，会发现：
它真正讲的其实已经不是：
怎样写一个更好的 Prompt。
而是：
怎样建立一套 AI Design Harness。
完整流程可以变成：
Creative Exploration
↓
Random Seed
↓
Human Taste Injection
↓
Design Brief
↓
Implementer Agent
↓
Browser Screenshot
↓
Independent Design Critic
↓
Iteration
↓
Image / Video Generation
↓
Subtraction Pass
↓
AI Tells Audit
↓
Human Final Judgment
以前我们的工作模式是：

Prompt → HTML / CSS → Done

而现在开始变成：

Harness → Agent Loop → Evaluation → Iteration → Convergence

模型可能完全一样。
最终质量却完全不一样。

13

如果让我真正用 Codex 做一个网站，我会这样下指令

如果把整篇文章浓缩成一套实际工作流，我会给 Codex 一个这样的总 Prompt：

你不仅是这个项目的 Frontend Engineer，也负责协调完整的 Design Process。

不要直接开始写页面。

Phase 1 — Discover

先探索多个差异足够大的视觉方向。

使用外部随机 Seed 打破默认设计模式。

主动避免标准 AI SaaS 风格。

我们讨论并选定 Creative Direction 后再继续。

Phase 2 — Define

把确定的视觉方向整理为明确 Design Brief：

  • Visual language

  • Typography

  • Color

  • Composition

  • Spacing

  • Motion

  • Imagery

  • Interaction

建立一组 Reference Images 作为 Quality Bar，但不要复制。

Phase 3 — Implement

实现第一版页面。

不要局限于 CSS。

根据需要主动使用：

  • Image generation

  • 3D

  • Shader

  • Video generation

Phase 4 — Critique

每次完成后：

  1. 在 Browser 中运行页面。

  2. Capture Screenshot。

  3. 创建独立 Design Critic。

  4. Critic 只能看最终画面、Design Brief 和 Reference。

  5. Critic 不得看到源代码和历史 Critique。

  6. 根据 Critic 的反馈进行修改。

最多先执行两轮，判断是否明显收敛。

Phase 5 — Subtract

完成后进入一次只允许删除、不允许增加的 Subtraction Pass。

删除所有不能增强：

  • Usability

  • Hierarchy

  • Brand identity

  • Emotional impact

的元素。

Phase 6 — Audit

最后执行 AI Tells Audit。

主动寻找模板化布局、Glow、Gradient、Glassmorphism、Rounded Card、无意义 Icon 和过度动画。

页面最终应该看起来像经过明确设计决策得到的作品，而不是 AI 一次生成的结果。

最后再交给我做人类审查。

我认为这比寻找某一个“世界级 UI Prompt”有价值得多。
因为 Prompt 只解决一次任务。
而 Harness 可以解决：
以后所有任务。

结语

AI 写 UI 的门槛正在快速下降。
代码已经越来越不稀缺。
图片也不稀缺。
动画开始不稀缺。
3D 和视频同样正在快速进入 Agent 的能力边界。
真正稀缺的东西逐渐变成：
Taste。
但 Taste 也并不意味着：
所有审美决定都只能由人亲手完成。
一个更有意思的方向是：
把我们的审美标准、设计流程、评价机制和取舍原则，
逐渐写进一个可以重复运行的系统里。
让 Implementer 负责执行。
让 Critic 负责挑错。
让 Reference 定义 Quality Bar。
让工具扩展视觉能力。
让 Subtraction 负责收敛。
最后，人只保留最重要的工作：
判断。
所以我读完这篇文章之后，最大的感受反而不是：
AI 原来可以把 UI 做得这么漂亮。
而是：
我们正在从Prompt Engineering，走向另一个更加重要的阶段——
Harness Engineering。
模型提供能力。
Harness 组织能力。
而最终决定作品上限的，
依然是人是否知道：
什么值得被留下。

相关学习资料