不知道大家这两年，有没有焦虑过，如何让AI做出有审美的网站?

最近这段时间，我在小红书上刷到了非常多漂亮的网站。

之前，我会觉得审美是一个偏私人化的东西，它背后体现出来的是一个人的阅历、看过的东西、认知水平，你很难把这些东西全塞到一段提示词里。

我每次让AI帮我写网页，都是反复说再好看一点、高级一点。

但对AI而言，人类眼里的好看和高级到底是什么？

直到我前段时间看到 Y Combinator 今年一期设计评审报告，才意识到这条路从根上就不通。

评审嘉宾是Cron的设计者 Raphael Schaad，他跟 YC 合伙人一口气点评了六个用 AI 工具做的创业公司官网，给了一个很直接的建议：不要一上来就让 AI 设计你的网站、再去改它吐出来的东西。

所以我开始换一个角度思考，或许不是 AI 没有审美，而是我没有找到把自己的审美准确传递给它的方式。

审美确实是私人的，但它可以被拆解成具体的、可描述的设计决策——色值、字体、间距、禁区。找到这个翻译方法，AI 就能 get 到你要的风格。

正好昨天豆包 2.1 Pro 刚发布，它在 Coding 和 VLM（视觉理解）能力上做了比较大的提升。

我拿它测试了一下，发现它的审美能力也有了非常大的提升。

比如这两个案例，也是我在motionsites复制提示词，用豆包 2.1 Pro跑出来的。

下面给大家详细分享一下测试过程。

1

先分享一个核心思路。

Anthropic 的工程师今年做了大量实验，发现 AI 在工艺层面，如排版、间距、色彩和谐等，都可以拿到不错的分数，真正做不好的是设计感和原创性。

也就是说，如果你不提供方向，它就输出训练数据里出现频率最高的那个统计平均值。

即便你反复说再好看、高级一点，它也只是在那个统计平均值附近微调。

所以正确的做法应该是反过来：先定方向，再生成。

那具体怎么定呢？

我从 Anthropic 那份业内超 27 万次安装的 frontend-design 文档里学到一个方法，叫两遍工作法。

第一遍，在 AI 写任何代码之前，先把设计方向定死，包含三样东西👇

a、制定设计 token：直接给到明确的数值，如主色 #F5F1E8，辅色 #1A1A1A，点缀色 #C4956A，标题字体 Cormorant Garamond，正文 Source Sans，圆角 2px，主间距 48px。

b、禁止list：如明确禁用 Inter、Roboto、Arial、Space Grotesk 这些字体，禁止紫色渐变、禁止无意义的滚动淡入、禁止堆叠卡片网格。

c、签名元素：指定整个页面最该被记住的那一个视觉锚点，其余全部保持克制。

第二遍是自检：如果换一个差不多的需求，AI 会不会给出几乎一样的方案？

只有确认这份方案是为这个项目量身定的，才开始让 AI 写代码。

这套方法听起来很麻烦，但产出质量相比之前之前完全不是一个量级的。

2

案例一：杂志风落地页。

这里主要想测一下豆包 2.1 Pro的前端代码生成能力和排版审美。

下面是它的完成效果，一次性给出了完整可运行的单 HTML 文件，七个区块全部实现。CSS Grid 和 Flexbox 用得很规范，没出现选择器打架导致间距错乱的问题。

3

案例二：高端电商产品详情页。

这里我主要想看一下它复杂交互状态管理，让它做了一个虚构香薰品牌 Sylvan Dusk 的电商页，可以看到它产出的网站以及几乎接近真实品牌官网水准。

4

案例三：字体排版艺术展。

这里主要测的是豆包 2.1 Pro审美理解的深度。

我要求它做一个「字体排版艺术展」网页，展示 10 个经典排版设计模式。

总体来说，给了方向之后能输出有内容深度的文字，作为一个排版教学展示页，完成度可以打 7 分。

5

我还测了一个截图还原星露谷像素界面👇

整体风格非常像素风，可以加入心愿单也可以加入对比单，同时也配备了音效反馈：

左侧的筛选都是可以帮我们更快搜索到心仪的游戏，右侧会显示游戏细节，每个不同风格的游戏都做了像素风适配：

6

总的来说，豆包 2.1 Pro 的Coding 和 VLM（视觉理解）能力又完成了惊人的一跃，在约束范围内产出质量相当不错的结果。

而且，2.1pro写代码的速度非常快，在国产模型里的coding能力是第一梯队。

Steve Jobs 说过，归根结底还是品味，你得接触人类做过的最好的东西，然后把它带进创作。

品味没变，表达品味的方式变了。

但只要用对方法，你依旧可以用AI做出非常有审美的网站。