用AI做官网，怎样把审美翻译成可执行要求？

使用AI做网站以后，一个页面从想法变成初稿，只需要很短的时间。

我们用ChatGPT重做事橙营销官网时，第一版首页很快就生成出来了。它并不难看：排版完整，颜色协调，按钮、卡片和动效也都有。但继续看下去，会发现它更像一个符合行业平均水平的营销公司网站，而不是事橙。

问题不在AI不会设计，而在于我们最初给它的很多要求仍然停留在感受层面：高端、极简、有科技感、国际化、有质感。

这些词对人来说能够传递方向，对AI来说却有太多种解释。它可能用渐变表现科技感，用大号粗体表现高端，用大量卡片表现专业，再加上一些发光、悬浮和粒子动效，让页面看起来“什么都有”。每一个选择似乎都说得通，合在一起却不一定属于这家公司。

事橙首页前后修改了30多版，全站做了110多个版本。这个过程中，我们慢慢确认：用AI做设计，真正重要的能力不是不断寻找更准确的形容词，而是把审美判断翻译成AI能够执行、团队能够复用、最终能够验收的规则。

先不要谈页面，先说清楚网站要建立什么感觉

设计不是从颜色和圆角开始的。

事橙官网升级的核心目标，是建立品牌信任。我们希望客户感受到：这是一家专业、克制、认真研究客户业务、值得长期合作的B2B营销公司。它可以有技术感，但不依赖廉价的科技特效；可以显得高端，但不靠奢华装饰；可以保持克制，但不能因此变得冷漠和空洞。

这些判断仍然不能直接交给AI开发页面，但它们提供了后续取舍的依据。

例如，如果网站的目标是建立长期信任，那么首页就不应该连续出现“立即咨询”；如果我们希望呈现真实的工作状态，就不应该用图库里的商务人物代替团队；如果AI只是提高效率的工作方式，而不是公司全部价值的来源，就不应该为了显得先进，把AI元素铺满每一屏。

审美方向的作用不是告诉AI“页面长什么样”，而是先回答：当不同方案都能成立时，我们依据什么做选择。

把抽象审美拆成九类设计规则

在这次官网实践中，我们逐渐把设计要求归纳为九个维度。它们既适用于设计师，也适用于AI。

1. 信息层级：一屏到底要讲几件事

“页面要简洁”仍然太抽象。更明确的要求是：一屏只表达一件事；主标题负责建立认知，副标题补充解释，CTA不能抢过核心信息；同一屏内不要同时出现多个视觉权重相同的标题。

信息层级解决的不是好不好看，而是访客第一眼、第二眼和第三眼分别看到什么。很多页面显得杂乱，并不是颜色太多，而是每一块内容都在争夺注意力。

2. 版式与网格：元素之间依据什么对齐

“参考Stripe的感觉”不能直接执行。我们需要继续说明，想参考的是Logo、导航、标题和正文处在同一条纵线上，还是首屏的图文比例与内容宽度。

在事橙官网里，我们要求导航和页面主体沿统一纵线对齐，控制全站内容宽度，图文模块以5:5或6:4为主，并避免把所有内容都装进居中的卡片。网格一旦稳定，不同页面即使内容不同，也会呈现出属于同一个品牌的秩序。

3. 留白与节奏：不是空得多，而是疏密有关系

大留白不等于简单地把模块拉高。真正需要定义的是：模块之间的距离大于模块内部的距离；重要内容拥有更多空间；长页面要有疏密变化，不能每一屏都保持同样的高度和信息密度。

如果整页处处都很满，用户会疲劳；如果处处都很空，页面又会显得没有内容。所谓“有呼吸感”，最终要落到模块间距、文字行长、图片比例和页面节奏上。

4. 字体与文字：先建立阅读秩序，再追求视觉冲击

字体规则需要明确字号层级、字重、行距和每行长度。事橙官网的大标题不使用过重字形，正文保持舒展的行距，标题、说明、标签也不会全部加粗。

很多AI生成页面喜欢用巨大标题制造设计感，但如果标题迫使中文频繁断行，或者正文过宽、过密，视觉张力最终会以阅读成本为代价。

5. 色彩系统：每一种颜色都要有职责

品牌名里有“橙”，不代表网站必须大量使用橙色。事橙官网最后以黑白为主、深蓝作为强调色。蓝色只用于重点信息、链接和必要交互，而不是为了让页面“更丰富”到处出现。

可执行的色彩要求，不只是给出色值，还要说明主色、辅助色和强调色分别在哪些场景使用，以及哪些颜色组合不应该出现。

6. 图片语言：真实不是一句口号，也需要规则

我们优先使用真实办公室、客户交流和工作细节，允许自然光、偏心构图和大面积负空间，不使用图库中的握手、假会议和通用商务人物，也不让AI虚构一个看起来更宽敞、更完美的办公室。

图片还要继续明确处理方式：全景负责交代空间，局部负责传递人的存在和工作气息；不同照片可以统一明暗和色温，但不能把现场感全部磨掉。主体位于画面哪一侧、给文字保留多少空间、移动端裁切后还能不能看见重点，也都属于设计要求。

7. 图形与组件：克制往往来自少做一层

按钮、卡片、圆角、边框和阴影都不是越完整越好。我们的规则是减少卡片套卡片，统一圆角，更多使用留白和细线建立层级，不使用强渐变、发光边缘和夸张悬浮阴影。

一个常见问题是，AI为了证明每块内容都是一个组件，会给它们加上背景、边框、圆角和阴影。结果页面很规整，却越来越像模板。很多时候，去掉其中一两层装饰，内容反而更有力量。

8. 动效与交互：只有帮助理解时才让它动

事橙官网保留了少量缓慢动效，例如圆点沿轨道移动、鼠标经过时细下划线逐渐铺开。它们的幅度小、速度慢，不会打断阅读。

因此，动效要求需要写清楚触发方式、速度、位移范围和存在目的。关闭动画以后，内容也必须保持完整。粒子、翻飞、视差和炫技转场如果不能帮助用户理解关系，就不应该仅仅因为AI能够实现而被加进来。

9. 内容与转化：设计还包括“什么时候不催促用户”

对复杂B2B决策来说，更大的按钮不一定带来更多信任。我们删掉了右上角的强转化按钮，也减少了页面中重复出现的“立即咨询”。用户先通过服务、案例、观点和真实工作了解我们，需要联系时，自然可以找到入口。

所以，内容与转化同样是审美的一部分。它决定网站是在不断推销自己，还是有耐心地让专业能力被理解。

让要求真正可执行，还需要写清楚四件事

总结下来，一条成熟的设计要求通常包含四部分：选择什么、怎么处理、避免什么、如何验收。

例如，“图片要真实、有生活感”还不够。我们会把它写成：

网站图片以真实办公、团队工作、客户交流和日常细节为主；构图允许主体偏左或偏右，并保留足够负空间；优先使用自然光和环境原色，不过度磨皮、锐化或HDR处理；避免摆拍握手、假会议、图库人物和明显的AI生成商务场景。桌面端裁切后保留主体，移动端不得只剩无意义的局部。

同样，“页面要高级、简洁、有呼吸感”可以继续翻译为：

首屏只保留一个主标题、一段不超过三行的解释和一个弱化CTA；左侧文字、右侧图片；标题与导航左边缘对齐；页面以白底黑字为主，只允许一个深蓝强调色；模块之间的留白明显大于模块内部间距；不增加与内容无关的渐变、阴影和装饰动效。

到这一步，感受才真正变成可以执行和验收的要求。

参考网站不是答案，而是拆解审美的工具

我们在官网建设过程中参考过OpenAI、Amplitude、Stripe和Mixpanel。它们不是一套风格，也不能把各自最明显的特征拼到一个页面里。

更有效的方法，是一次只解释一个参考对象的用途：借鉴这个页面的对齐方式，但不借鉴配色；借鉴另一个页面的内容节奏，但不借鉴强转化按钮；借鉴某个动效的反馈方式，但不改变已经确认的信息结构。

给AI提交参考时，可以使用这样的格式：

参考页面：［链接或截图］

我想借鉴：
1. 首屏标题与右侧图片的比例；
2. 导航、Logo和正文的纵向对齐；
3. 模块之间的留白和阅读节奏。

我不想借鉴：
1. 颜色体系；
2. 强转化按钮；
3. 大量悬浮和炫技动效。

请只修改当前页面的布局规则，不要改变已经确认的品牌文案、导航结构和全站字体。

参考网站解决的是“我想讨论哪一种具体选择”，而不是“请把它变成另一个网站”。

AI没有让审美变得不重要，而是迫使我们把它说清楚

过去做网站，企业负责人可以说“我想要高级一点”，再由设计师通过经验理解、提案和试错慢慢靠近。使用AI以后，生成和修改的速度更快，但模糊要求带来的偏差也会更快出现。

这使审美从一种难以言说的个人感觉，逐渐变成一套可以记录、讨论和复用的系统。团队不再只知道“这一版老板不喜欢”，而能说明问题出在信息层级、页面节奏、图片语言，还是组件装饰过多。

工具越来越平等以后，真正拉开差距的，可能不再是谁更快生成一个页面，而是谁更了解自己的业务，谁能作出更准确的判断，又能把这种判断翻译成机器和团队都理解的要求。

AI可以完成页面，但它不能替一家企业决定自己想成为什么样子。

这件事，仍然需要人来回答。

请把下面这些关于网站审美的感受词，翻译成可以直接执行和验收的设计要求。

请从以下九个维度分别说明：
1. 信息层级
2. 版式与网格
3. 留白与节奏
4. 字体与文字
5. 色彩系统
6. 图片语言
7. 图形与组件
8. 动效与交互
9. 内容与转化

每个维度都写清楚：选择什么、怎么处理、避免什么、如何验收。不要只改写形容词，也不要擅自改变已经确认的品牌定位、文案与页面结构。