1. 为什么AI生成的界面总有一股“同一个模子刻出来”的味道
你肯定有过这种体验：让AI帮你写一个登录页、一个后台管理面板、一个产品落地页，出来的东西乍一看挺规整，但看多了就会发现——它们长得几乎一模一样。清一色的紫色渐变按钮、圆角卡片、居中的大标题配副标题、三列等宽的功能介绍区，甚至连阴影的模糊半径都像是同一个师傅教的。
这不是你的错觉。我自己在React项目里反复用AI辅助生成界面，前后对比了不下五十个页面，最后总结出一个规律：AI生成界面的“同质化”不是偶然，而是训练数据分布、默认设计token、以及缺乏视觉层级意识三者叠加的必然结果。训练数据里高频出现的模式会被模型优先复现，而设计token如果没有被显式约束，模型就会退回到最“安全”的那套配色和间距方案。
那这个问题能不能治？能。而且不需要你从头学设计理论，只需要在给AI下指令的时候，把五条美学准则嵌进去。这篇文章就是把这五条准则拆开讲透，每一条都配上HTML、CSS、JS层面的具体落地方法，以及我在React项目里实测有效的操作步骤。不管你是刚接触前端的新手，还是已经能写复杂组件的老手，这套东西都能直接抄作业。
核心关键词先摆出来：frontend-design、HTML、CSS、JS、React。这五个词贯穿全文，因为美学准则最终都要落到代码上，光讲理念没有意义。
2. 五条美学准则的整体设计思路与选型逻辑
2.1 为什么是这五条，而不是十条二十条
设计准则这种东西，列多了等于没列。AI的上下文窗口有限，你塞进去三十条规则，它真正能稳定执行的可能就前五条。所以我筛选的标准很明确：每一条都必须能直接翻译成CSS属性或HTML结构决策，且彼此之间不重叠。
这五条分别是：视觉层级、留白节奏、色彩克制、字体对比、动效节制。它们覆盖了一个界面从“能看”到“好看”的绝大部分决策点。视觉层级解决“用户先看什么”，留白节奏解决“元素之间呼吸感”，色彩克制解决“不花哨但不单调”，字体对比解决“文字有性格”，动效节制解决“不晕但也不死板”。
我试过把这五条拆成十二条更细的规则喂给AI，结果生成质量反而下降了——模型在太多约束下会开始“平均化”处理，最后又回到那个模子脸。五条是一个甜点区，足够具体，又不至于过载。
2.2 每条准则背后的“反AI默认”逻辑
AI的默认行为是什么？我观察下来有这么几个固定套路：标题一律用font-weight: 700、按钮一律border-radius: 8px、卡片阴影一律0 4px 6px rgba(0,0,0,0.1)、主色一律偏紫或偏蓝、段落间距一律1.5rem。这些默认值单独看都没问题，但组合在一起就形成了那种“AI味”。
所以每条准则的核心任务，都是打破一个具体的AI默认值。视觉层级打破的是“所有元素一样重”，留白节奏打破的是“均匀分布”，色彩克制打破的是“紫色渐变依赖”，字体对比打破的是“单一字重走天下”，动效节制打破的是“要么全无要么全有”。
理解了这个逻辑，你在写prompt的时候就知道该怎么说了。不是笼统地说“设计得好看一点”，而是精确地说“标题和正文的字重差至少拉开300，主色饱和度控制在60%以下，卡片阴影用两层叠加而不是单层”。
2.3 在React项目中的落地位置
这五条准则在React项目里应该放在哪一层？我的做法是分三层落地。第一层是设计token层，用CSS变量或者styled-components的theme对象定义好间距阶梯、字重阶梯、色彩阶梯。第二层是组件层，每个基础组件（Button、Card、Input）在实现时就内置准则约束。第三层是页面组装层，用布局组件控制留白节奏和视觉层级。
这样做的好处是，当你让AI生成一个新页面时，它只需要在组装层工作，底层的准则已经被token和组件锁死了。即使AI想“偷懒”回到默认值，也会被组件样式覆盖掉。下面这张表是我在实际项目中用的token阶梯，你可以直接参考：
| Token类型 | 阶梯值 | 用途 |
|---|---|---|
| 间距 | 4/8/12/16/24/32/48/64px | 所有margin和padding |
| 字重 | 400/500/600/800 | 正文/辅助/小标题/大标题 |
| 字号 | 12/14/16/20/24/32/48px | 对应不同层级 |
| 圆角 | 4/8/16/24px | 按元素重要性递增 |
| 阴影 | 两层叠加 | 见3.2节 |
3. 视觉层级与留白节奏的代码级实操
3.1 视觉层级：让用户的眼睛有路可走
视觉层级的本质是控制对比度。AI生成的界面之所以平，是因为所有元素的视觉重量差不多。标题虽然大一点，但颜色不够重；按钮虽然有颜色，但和背景的对比不够强。结果就是用户的眼睛在页面上乱逛，找不到重点。
我的做法是用三个维度同时拉开层级：字号、字重、颜色。具体来说，一级标题用font-size: 48px配font-weight: 800配color: #1a1a1a，二级标题用32px/600/#333，正文用16px/400/#555，辅助文字用14px/400/#888。这样即使把页面变成灰度图，层级依然清晰。
在CSS里我会这样写：
:root { --text-primary: #1a1a1a; --text-secondary: #555555; --text-tertiary: #888888; --weight-heavy: 800; --weight-medium: 600; --weight-normal: 400; } .heading-1 { font-size: 48px; font-weight: var(--weight-heavy); color: var(--text-primary); line-height: 1.2; } .heading-2 { font-size: 32px; font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.3; } .body-text { font-size: 16px; font-weight: var(--weight-normal); color: var(--text-secondary); line-height: 1.6; }注意：字重不要用700，直接用800。700和600在屏幕上差别太小，AI默认就爱用700，你改成800才能拉开差距。
在React组件里，我会把这些封装成<Heading level={1}>这样的组件，level直接映射到对应的class。这样AI生成页面时只需要写<Heading level={1}>标题</Heading>，层级自动就对了。
3.2 留白节奏：不是留白越多越好，而是要有呼吸感
AI生成界面的另一个通病是留白要么太均匀要么太随意。均匀的问题是所有区块间距一样，页面像表格；随意的问题是AI会随机给一些元素加margin，导致节奏混乱。
我的解决方案是用间距阶梯强制节奏。具体规则：相关元素之间用8px或12px，同组元素之间用16px或24px，不同组之间用32px或48px，区块之间用64px。这样页面自然就有了“紧凑-舒缓-紧凑”的节奏。
在CSS里我会用gap而不是margin来控制间距，因为gap不会产生外边距折叠，行为更可预测：
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .section { padding: 64px 0; } .card-content { display: flex; flex-direction: column; gap: 12px; }实操心得：在给AI的prompt里直接写“用gap控制间距，不要用margin”，生成出来的布局会干净很多。margin是AI产生间距混乱的主要来源。
3.3 阴影的两层叠加法
AI默认的阴影是box-shadow: 0 4px 6px rgba(0,0,0,0.1)，这个阴影的问题是太“硬”，像贴上去的。我的做法是用两层阴影叠加：一层近距离的锐利阴影模拟接触面，一层远距离的柔和阴影模拟环境光。
.card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08); }第一层0 1px 2px让卡片和背景之间有明确的边界，第二层0 8px 24px让卡片有浮起来的感觉。两层叠加出来的效果比单层自然得多，而且不会显得脏。
4. 色彩克制与字体对比的落地方法
4.1 色彩克制：从“紫色渐变依赖”里逃出来
AI对紫色渐变有一种执念。我统计过自己生成的页面，超过六成的按钮默认是紫色到蓝色的渐变。原因很简单：训练数据里这种配色出现频率最高，而且它在浅色背景上确实“安全”。
但安全不等于好看。我的做法是主色饱和度压到60%以下，且全页面只用一个主色。辅助色只用中性灰阶，强调色只在需要用户点击的地方出现。具体来说，主色我用hsl(210, 50%, 45%)这种偏灰的蓝，而不是hsl(260, 80%, 60%)那种艳紫。
:root { --primary: hsl(210, 50%, 45%); --primary-hover: hsl(210, 50%, 38%); --neutral-100: hsl(210, 10%, 96%); --neutral-200: hsl(210, 10%, 90%); --neutral-800: hsl(210, 10%, 20%); } .button-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: background 0.2s ease; } .button-primary:hover { background: var(--primary-hover); }注意：不要用纯黑
#000和纯白#fff。纯黑在屏幕上太刺眼，纯白背景看久了会累。用hsl(210, 10%, 20%)代替黑，用hsl(210, 10%, 98%)代替白。
4.2 字体对比：一个字重走天下是AI的通病
AI生成界面时，经常整个页面只用400和700两个字重。结果就是标题和正文的对比不够，页面看起来“平”。我的做法是至少用四个字重：400给正文，500给辅助信息，600给小标题，800给大标题。
如果项目允许，我还会引入字体家族对比。比如标题用Georgia这样的衬线体，正文用Inter这样的无衬线体。衬线体自带一种“正式感”，无衬线体则更现代，两者搭配能产生明显的视觉层次。
.heading-serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 800; letter-spacing: -0.02em; } .body-sans { font-family: Inter, -apple-system, sans-serif; font-weight: 400; letter-spacing: 0; }实操心得：标题加
letter-spacing: -0.02em会让大字更紧凑，看起来更“贵”。正文保持letter-spacing: 0或者0.01em，保证可读性。这个细节AI默认不会做，你手动加上去，页面质感立刻不一样。
4.3 在React里用theme对象锁死色彩和字体
在React项目里，我会把色彩和字体定义在theme对象里，然后通过Context或者styled-components的ThemeProvider注入。这样AI生成组件时，只要用theme.primary而不是硬编码颜色，色彩克制就自动生效了。
const theme = { colors: { primary: 'hsl(210, 50%, 45%)', primaryHover: 'hsl(210, 50%, 38%)', textPrimary: 'hsl(210, 10%, 20%)', textSecondary: 'hsl(210, 10%, 40%)', neutral100: 'hsl(210, 10%, 96%)', }, fonts: { heading: 'Georgia, serif', body: 'Inter, sans-serif', }, weights: { normal: 400, medium: 500, semibold: 600, heavy: 800, }, };5. 动效节制与完整实操流程
5.1 动效节制：不是不要动效，而是只在该动的地方动
AI生成界面时，动效有两个极端：要么完全不加，页面死气沉沉；要么到处加transition: all 0.3s，鼠标划过任何东西都在动，看久了头晕。
我的原则是只在三个地方加动效：按钮的hover和active状态、卡片的hover浮起、以及页面加载时的入场动画。其他地方一律不加。而且动效时长控制在150ms到250ms之间，缓动函数用ease-out，因为ease-out在结束时减速，感觉更自然。
.card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12); } .button { transition: background 0.15s ease-out, transform 0.1s ease-out; } .button:active { transform: scale(0.98); }注意：不要用
transition: all。all会导致一些你不想动的属性也产生过渡，比如颜色变化、边框变化，页面会显得很“躁”。明确写出要过渡的属性。
5.2 完整实操流程：从prompt到页面
下面是我实际用的完整流程，你可以直接照着做。
第一步：准备设计token文件。在项目里新建tokens.css，把前面说的间距、字重、字号、圆角、阴影、色彩全部定义成CSS变量。
第二步：封装基础组件。用React封装Button、Card、Heading、Text四个组件，每个组件内部引用token变量。这一步做完，AI就不需要关心底层样式了。
第三步：写prompt时嵌入五条准则。我的prompt模板是这样的：
请用React生成一个[页面类型]页面。 要求： 1. 视觉层级：标题用48px/800字重，正文16px/400字重，辅助文字14px/400字重。 2. 留白节奏：用gap控制间距，相关元素8-12px，同组16-24px，不同组32-48px，区块64px。 3. 色彩克制：只用theme.primary一个主色，中性色用灰阶，不要紫色渐变。 4. 字体对比：标题用serif字体，正文用sans-serif字体，字重至少四个层级。 5. 动效节制：只在按钮hover和卡片hover加动效，时长150-250ms，用ease-out。 使用我已经封装好的Button、Card、Heading、Text组件。第四步：检查生成结果。重点看三个地方：标题和正文的字重差是否够大、间距是否用了gap而不是margin、有没有出现紫色渐变。如果有一项不对，直接在prompt里追加一条修正指令重新生成。
第五步：微调。AI生成的页面通常还需要手动调一下阴影和圆角。把卡片阴影换成两层叠加，圆角按元素重要性调整（按钮8px、卡片16px、模态框24px）。
5.3 一个完整的React页面示例
下面是我用这套流程生成的一个产品功能介绍页的核心代码，你可以直接复制到项目里跑：
import React from 'react'; import './tokens.css'; const Heading = ({ level, children }) => { const Tag = `h${level}`; const classMap = { 1: 'heading-1', 2: 'heading-2', 3: 'heading-3', }; return <Tag className={classMap[level]}>{children}</Tag>; }; const Text = ({ variant = 'body', children }) => { return <p className={`text-${variant}`}>{children}</p>; }; const Card = ({ children }) => { return <div className="card">{children}</div>; }; const Button = ({ children, onClick }) => { return ( <button className="button-primary" onClick={onClick}> {children} </button> ); }; const FeaturePage = () => { return ( <main className="page"> <section className="hero"> <Heading level={1}>让界面不再千篇一律</Heading> <Text variant="secondary"> 五条美学准则，从代码层面解决AI生成界面的同质化问题。 </Text> <Button>开始使用</Button> </section> <section className="features"> <Card> <Heading level={3}>视觉层级</Heading> <Text variant="body">用字号、字重、颜色三个维度拉开对比。</Text> </Card> <Card> <Heading level={3}>留白节奏</Heading> <Text variant="body">用间距阶梯强制产生呼吸感。</Text> </Card> <Card> <Heading level={3}>色彩克制</Heading> <Text variant="body">一个主色，其余全用中性灰阶。</Text> </Card> </section> </main> ); }; export default FeaturePage;配套的CSS：
.page { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .hero { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 96px 0 64px; text-align: center; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 64px 0; } .card { padding: 32px; border-radius: 16px; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12); }6. 常见问题与排查技巧实录
6.1 AI还是生成紫色渐变怎么办
这是最高频的问题。我的解决办法是在prompt里明确禁止，而不是说“用蓝色”。说“用蓝色”AI可能给你一个艳蓝，还是不对。要说“主色用hsl(210, 50%, 45%)，禁止使用任何渐变，禁止使用饱和度超过60%的颜色”。把具体数值写进去，AI的执行率会高很多。
如果还是不行，就在CSS里加一条全局覆盖：
button, .button { background-image: none !important; }6.2 间距还是乱怎么办
检查生成结果里有没有margin。如果有，全部替换成父容器的gap。另外检查有没有margin: 0 auto这种居中写法，在flex布局里应该用align-items: center代替。
6.3 字重对比不够怎么办
把标题字重从700改成800，正文从400改成400但颜色从#333改成#555。如果还不够，给标题加letter-spacing: -0.02em，视觉上会更紧凑更重。
6.4 页面看起来还是“平”怎么办
大概率是阴影不够。把单层阴影换成两层叠加，第二层的模糊半径加大到24px以上。另外检查卡片背景是不是纯白，如果是，改成hsl(210, 10%, 99%)，和页面背景hsl(210, 10%, 96%)形成微弱对比。
6.5 常见问题速查表
| 问题 | 原因 | 解决方法 |
|---|---|---|
| 紫色渐变 | AI默认配色 | prompt里写具体hsl值，禁止渐变 |
| 间距混乱 | 用了margin | 全部换成gap |
| 层级太平 | 字重差不够 | 标题800，正文400，颜色拉开 |
| 页面死板 | 没有动效 | 按钮hover和卡片hover加ease-out |
| 页面太躁 | transition: all | 明确写出过渡属性 |
| 阴影太硬 | 单层阴影 | 换成两层叠加 |
| 圆角不统一 | 没有圆角阶梯 | 按钮8px，卡片16px，模态框24px |
6.6 一个我踩过的坑
有一次我让AI生成一个后台管理页面，prompt里写了“用gap控制间距”，结果AI在flex容器里用了gap，但在grid容器里还是用了margin。后来我发现问题是AI对grid的gap支持理解不稳定。解决办法是在prompt里明确写“grid和flex都用gap，禁止使用margin控制间距”。加上这一句之后，生成结果就干净了。
另外还有一个坑是字体。AI默认会用system-ui字体栈，这个字体栈在不同系统上渲染效果差异很大。我的做法是在token里明确指定Inter作为正文字体，并且用@font-face或者Google Fonts引入。这样不管用户在什么系统上，看到的字体都是一致的。
7. 把五条准则变成项目里的“设计护栏”
这套东西我用了大概半年，最大的体会是：不要指望AI一次就生成完美的界面，而是要把准则变成项目里的“护栏”。护栏的意思是，即使AI想跑偏，也会被token和组件拉回来。
具体做法就是在项目里建一个design-guardrails目录，里面放三个文件：tokens.css定义所有设计变量，components.jsx封装所有基础组件，prompt-template.md存好给AI的prompt模板。每次让AI生成新页面，先把这三个文件的内容贴进上下文，然后再写具体需求。
这样做的好处是，你的项目会逐渐形成自己的视觉语言，而不是每次生成都换一个风格。时间长了，你会发现AI生成的页面开始有了“你的味道”，而不是那个千篇一律的模子脸。
最后分享一个小技巧：如果你用的是React，可以在开发环境里加一个DesignAudit组件，它会在页面右下角显示当前页面的字重使用数量、间距值分布、色彩数量。如果字重少于三个、间距值超过八种、色彩超过五种，就说明页面可能又跑偏了。这个组件我写了大概五十行代码，但帮我省下了大量肉眼检查的时间。
