企业官网建设流程全解析

1. 为什么“AI 味”成了前端 UI 的头号公敌

1.1 什么是“AI 味”，它到底丑在哪里

先说说我自己的经历。去年我帮一个朋友看他用 AI 生成的一个后台管理页面，打开的一瞬间我就笑了——不是说它不能用，而是那种扑面而来的“AI 味”实在太典型了：紫色到蓝色的渐变按钮、圆角 12px 的卡片、居中大标题配一行灰色副标题、三个图标并排的功能区、底部再来一句“立即体验”。这套组合拳，你只要用过几次 AI 生成 UI，闭着眼睛都能背出来。

所谓“AI 味”，本质上是模型在缺乏具体设计约束时，退回到训练数据里最高频、最安全的那套视觉方案。它不丑，但它是“平均值”——就像让一百个人画一张脸然后取平均，出来的结果一定是一张没有记忆点的脸。具体表现我总结成这么几类：

• 配色趋同：紫蓝渐变、靛蓝主色、大面积浅灰背景，几乎成了默认皮肤。
• 间距随意：8px、12px、16px、24px 混着用，没有一套统一的间距刻度。
• 层级扁平：标题、正文、辅助文字之间只靠字号区分，字重和颜色对比度不够，扫一眼抓不到重点。
• 组件同质：按钮、卡片、输入框长得都差不多，缺少品牌识别度。
• 文案空洞：占位文字永远是“Lorem ipsum”或者“这里是描述文字”。

新手最容易踩的坑，就是把“AI 能生成 UI”等同于“AI 能生成好 UI”。这两者之间隔着一整套设计系统。你要做的不是让 AI 替你设计，而是给 AI 一套规则，让它按规则产出。

1.2 从“能看”到“能打”，中间差的是什么

我见过太多新手项目，第一版 demo 出来挺唬人，一旦要加第二个页面、第三个页面，整个视觉就崩了。为什么？因为没有设计系统兜底。第一个页面是 AI 即兴发挥的，第二个页面又是另一次即兴发挥，两次发挥之间没有共享的“语言”，拼在一起自然像两个不同的人做的。

设计系统解决的正是这个问题。它把颜色、字体、间距、圆角、阴影、动效这些原子级的决策提前定死，变成一套可复用的变量和组件。之后无论是你自己写，还是让 AI 帮你写，都从这套变量里取值，产出的东西自然是一致的。

打个比方：设计系统就像做菜的“底料”。你先把底料炒好，后面炒什么菜都从这锅底料里舀一勺，味道就不会跑偏。没有底料，每次现炒现调，十道菜十个味。

所以这篇手册的核心思路很明确：先建系统，再谈生成。下面我会从零开始，带你走一遍从“识别 AI 味”到“搭出一套能约束 AI 的设计系统”的完整流程。适合谁看？前端新手、独立开发者、想用 AI 提效但被“AI 味”劝退的产品同学，都合适。不需要你有多少设计基础，跟着做就行。

2. 动手之前：把设计系统的地基打牢

2.1 设计令牌：把“感觉”变成“数字”

设计系统最底层的东西叫设计令牌（Design Token）。说白了，就是把所有视觉决策从“感觉”翻译成“数字”，存成变量。这一步是整件事的地基，地基没打好，后面全是空中楼阁。

我建议新手从这五类令牌入手，一个都别少：

关键点在于刻度化。比如间距，不要随手写 13px、17px，而是定一套 4 的倍数刻度：4、8、12、16、24、32、48、64。所有间距都从这套刻度里取。颜色也一样，主色不要只定一个，而是定一整条色阶（50 到 900），这样浅色背景、深色文字、悬停态、禁用态都有对应的值可用。

我踩过的坑是：一开始图省事，只定了主色和几个中性色，结果做到悬停态和禁用态的时候发现没颜色可用，只能临时调透明度，调出来的效果脏兮兮的。后来老老实实把色阶补全，问题一下就没了。

2.2 用 CSS 变量还是 Tailwind 配置

令牌定好了，得有个地方存。新手常见的两条路：CSS 自定义属性（CSS Variables）和Tailwind 的配置文件。我的建议是——两个都用，各司其职。

CSS 变量适合存那些需要在运行时动态切换的值，比如主题色、暗色模式。它的好处是浏览器原生支持，改一个变量全站生效，不需要重新构建。

:root { --color-primary-500: #4f46e5; --color-primary-600: #4338ca; --color-gray-100: #f3f4f6; --space-4: 1rem; --space-6: 1.5rem; --radius-md: 0.5rem; --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); }

Tailwind 的配置则适合把令牌映射成工具类，让你写样式的时候直接bg-primary-500、p-4、rounded-md，不用记具体数值。它的好处是约束强——你配置里没定义的刻度，工具类里就没有，想乱写都写不出来。

// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { 500: 'var(--color-primary-500)', 600: 'var(--color-primary-600)', }, }, spacing: { 4: 'var(--space-4)', 6: 'var(--space-6)', }, borderRadius: { md: 'var(--radius-md)', }, }, }, };

这么一套下来，你的项目里就有了一个“唯一真相源”。改主题色？改一个 CSS 变量，全站跟着变。想加个新间距？先在令牌里加，再在配置里映射，最后才能用。这个流程看着麻烦，但它逼着你保持克制，而克制正是摆脱“AI 味”的关键。

2.3 组件库选型：别从零造轮子

新手最容易犯的第二个错，是觉得“用组件库显得不专业”，非要自己从零写按钮、写输入框。我劝你打消这个念头。组件库帮你解决的是可访问性、键盘导航、边界状态这些又枯燥又容易出错的问题，这些恰恰是 AI 生成代码最容易忽略的地方。

选型上我给几个方向，你按项目需求挑：

• 追求开箱即用、样式统一：选那种自带设计语言、组件齐全的库，适合快速搭后台、搭工具类产品。
• 追求高度可定制、无样式约束：选那种只提供行为逻辑、不提供样式的“无头组件库”，样式完全由你的设计令牌控制，适合对品牌一致性要求高的项目。
• 追求轻量、只想要几个基础组件：选那种按需引入、体积小的库，适合落地页、营销页。

我的实操经验是：组件库负责“行为”，设计令牌负责“外观”。把组件库的默认样式尽量剥离，用你的令牌重新皮肤化。这样既拿到了组件库的可靠性，又保住了自己的视觉识别度。具体做法通常是覆盖组件库的主题变量，或者用它的classNames之类的 API 注入你的工具类。

注意：不要同时引入两套组件库。我见过有人既想要 A 库的表格又想要 B 库的弹窗，结果两套样式互相打架，打包体积还翻倍。选定一套，缺什么自己基于令牌补，比混用省心得多。

3. 核心实操：手把手搭一套能约束 AI 的 UI 骨架

3.1 第一步：定色板，告别紫蓝渐变

色板是整个视觉的第一印象，也是“AI 味”最重灾区。我的做法是：主色只选一个，然后围绕它生成完整色阶。

具体怎么选主色？别选那种烂大街的紫蓝。你可以从品牌 logo 里取色，可以从一张你喜欢的照片里取色，甚至可以从一个你欣赏的产品里借鉴思路（注意是借鉴思路不是照抄）。选好一个基准色后，用工具生成 50 到 900 的色阶。手算也行，大致规律是：50 最浅接近白，500 是基准色，900 最深接近黑，中间按明度均匀过渡。

除了主色，你还需要一套中性色（灰阶）和几个语义色（成功绿、警告黄、危险红、信息蓝）。中性色负责承载大部分界面，语义色负责传递状态。这里有个经验：中性色不要用纯灰（R=G=B），稍微带一点主色的色相，整个界面会显得更协调、更“高级”。比如主色是靛蓝，中性色就往蓝灰方向偏一点点。

:root { /* 主色阶 */ --color-primary-50: #eef2ff; --color-primary-100: #e0e7ff; --color-primary-500: #4f46e5; --color-primary-600: #4338ca; --color-primary-700: #3730a3; /* 中性色阶（略带蓝调） */ --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-500: #64748b; --color-gray-900: #0f172a; /* 语义色 */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; }

定完之后，给自己立个规矩：界面里出现的每一个颜色，都必须来自这套令牌。想用个新颜色？先加进令牌再说。这条规矩能挡掉 90% 的“AI 味”。

3.2 第二步：定排版，让文字有呼吸感

排版是新手最容易忽略、但提升最明显的部分。AI 生成的页面往往字号层级混乱、行高局促、字重单一，读起来累。你要做的是定一套排版刻度。

我的建议是定 6 到 8 个字号，从最小到最大覆盖所有场景：

几个关键经验：正文行高不要低于 1.5，否则密不透风；标题行高要比正文紧，1.2 到 1.4 之间比较合适；字重不要只用 400 和 700，中间加个 500、600，层级会更细腻。另外，正文每行控制在 60 到 75 个字符宽度最舒服，太宽了眼睛要来回扫，太窄了频繁换行。

字体选择上，中文项目我一般用系统字体栈打底，保证加载速度和渲染一致性，需要品牌感的地方再引入一款特色字体做标题。别一上来就引入三四种字体，加载慢不说，风格还容易打架。

3.3 第三步：定间距与圆角，统一视觉节奏

间距和圆角是“节奏感”的来源。AI 生成的页面之所以看着乱，很大原因是间距没有节奏——这里 10px 那里 15px，眼睛找不到规律。

我的做法是定一套4 的倍数刻度：4、8、12、16、24、32、48、64、96。然后给它们分配语义：

• 4 / 8：图标与文字之间、标签内部
• 12 / 16：按钮内边距、输入框内边距、卡片内边距（小）
• 24 / 32：卡片内边距（大）、区块之间的间距
• 48 / 64 / 96：页面级的大区块分隔

圆角同理，定三到四档就够：小圆角（4px）用于标签、徽章；中圆角（8px）用于按钮、输入框；大圆角（12-16px）用于卡片、弹窗；全圆角用于头像、胶囊按钮。同一个元素类型，圆角必须一致，这是纪律。

:root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; }

实操心得：定完刻度后，在项目里全局搜索一遍，把所有“非刻度值”的间距和圆角揪出来替换掉。这一步做完，页面立刻会“整”很多，那种说不清道不明的杂乱感会消失大半。

3.4 第四步：把令牌喂给 AI，让它按规矩出牌

前面三步做完，你手里就有了一套完整的令牌。现在到了最关键的一步：怎么让 AI 按这套令牌生成代码。

核心方法是在提示词里显式声明约束。不要只说“帮我生成一个登录页”，而要说清楚：用哪些颜色变量、哪些间距刻度、哪些圆角档位、字体层级怎么排。我一般会准备一段“系统提示词模板”，每次生成前贴进去：

你是一个前端开发助手。请严格使用以下设计令牌，不要引入任何未定义的数值： 颜色：主色用 var(--color-primary-500)，悬停用 var(--color-primary-600)， 背景用 var(--color-gray-50)，正文文字用 var(--color-gray-900)， 辅助文字用 var(--color-gray-500)。 间距：所有内边距和外边距只能从 var(--space-1) 到 var(--space-8) 中取值。 圆角：按钮和输入框用 var(--radius-md)，卡片用 var(--radius-lg)。 字体：正文 16px/1.6，小标题 18px/1.5 字重 600，标题 24px/1.4 字重 600。 请生成一个登录表单，包含邮箱、密码输入框和提交按钮。

这么一段约束下去，AI 产出的代码会规矩得多。当然它偶尔还是会“手滑”写个padding: 13px之类的，所以生成后你要过一遍代码审查，把漏网的硬编码值替换成令牌。这个审查动作做几次之后，你会发现 AI 越来越“听话”，因为你的提示词越来越精确。

我个人的习惯是维护一个prompt-template.md，把常用的约束段落存好，生成不同页面时按需组合。这比每次现写提示词效率高得多，也保证了不同页面之间的约束一致。

4. 从组件到页面：把系统真正用起来

4.1 先做原子组件，再做组合

有了令牌，下一步是做组件。这里有个顺序问题：先做原子组件，再做分子、组织、模板。别一上来就做整个页面，那样你会在细节里迷失。

原子组件就是按钮、输入框、标签、徽章、头像这些最小单元。每个原子组件都要把所有状态定义清楚：默认、悬停、聚焦、激活、禁用、加载。新手最容易漏的就是聚焦态和禁用态，结果用户一按 Tab 键就露馅。

以按钮为例，我一般会定义这几个变体：主按钮（实心主色）、次按钮（描边）、幽灵按钮（无边框）、危险按钮（红色）。每个变体再乘以尺寸（小、中、大）和状态。听起来多，但用令牌驱动之后，代码量其实很小：

.btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: 16px; font-weight: 500; transition: background-color 0.15s ease; } .btn-primary { background: var(--color-primary-500); color: white; } .btn-primary:hover { background: var(--color-primary-600); } .btn-primary:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .btn-primary:disabled { background: var(--color-gray-100); color: var(--color-gray-500); cursor: not-allowed; }

注意:focus-visible这个伪类，它只在键盘导航时显示聚焦环，鼠标点击时不显示，兼顾了可访问性和美观。这个细节 AI 基本不会主动帮你加，得你自己补。

4.2 用“页面模板”锁死布局骨架

原子组件做完，接下来是页面模板。模板的作用是锁死布局骨架，让所有页面共享同一套结构逻辑。常见的模板有：带侧边栏的后台布局、带顶部导航的营销页布局、居中的表单页布局、列表加详情的分栏布局。

我建议新手先做三套模板就够覆盖大部分场景：后台布局、营销布局、表单布局。每套模板定义好导航区、内容区、页脚区的位置和间距，之后所有具体页面都往模板里填内容。

这么做的好处是，当你让 AI 生成一个新页面时，可以直接说“用后台布局模板，内容区放一个数据表格”，AI 就不会从零开始瞎编布局，而是往你定好的骨架里填。产出的页面天然和已有页面风格一致。

4.3 暗色模式：一次令牌，两套皮肤

暗色模式是检验设计系统是否合格的试金石。如果你的令牌体系做得好，暗色模式几乎不需要改组件代码，只需要换一套令牌值。

:root { --color-bg: #ffffff; --color-text: #0f172a; --color-surface: #f8fafc; } [data-theme="dark"] { --color-bg: #0f172a; --color-text: #f1f5f9; --color-surface: #1e293b; }

组件里全部用var(--color-bg)、var(--color-text)这类语义变量，切换主题时只改变量值，组件自动跟着变。这里的关键是用语义变量而不是具体色值——组件里写var(--color-text)而不是var(--color-gray-900)，这样暗色模式下文字颜色才能正确反转。

我踩过的坑是：一开始组件里直接用了gray-900这种具体色阶，做暗色模式时发现要一个个改，改到崩溃。后来全部换成语义变量，暗色模式半天就搞定了。这个教训值得你提前避开。

5. 常见问题与排查技巧实录

5.1 新手高频问题速查表

5.2 三个我踩过的坑，你别再踩

第一个坑：令牌定得太细，自己都记不住。我一开始定了 20 多个间距值，结果写代码时根本想不起来该用哪个，最后还是随手写。后来砍到 8 个，反而用得很顺。令牌不是越多越好，够用就行。

第二个坑：组件库样式覆盖不彻底。我试过用工具类去覆盖组件库的默认样式，结果优先级打架，加了一堆!important。正确做法是找到组件库的主题变量或 CSS 变量入口，从源头改，而不是在表面打补丁。

第三个坑：忽略对比度。浅灰文字配白背景，看着“高级”，实际对比度不达标，弱视用户根本看不清。我现在的习惯是每次定完颜色，用对比度检查工具过一遍，正文对比度至少 4.5:1，大字号至少 3:1。这个标准是硬性的，别为了好看牺牲可读性。

5.3 让 AI 真正帮上忙的提示词技巧

最后分享几个我实测有效的提示词技巧。第一，给例子比给描述管用。与其说“生成一个简洁的卡片”，不如贴一段你已有的卡片代码，说“按这个风格生成一个用户信息卡片”。AI 模仿能力很强，给个样板它就能对齐。

第二，分步生成而不是一次到位。先让它生成结构，你审查调整；再让它填充样式，你审查调整；最后让它补状态和交互。一次生成一大坨，改起来反而费劲。

第三，明确说“不要做什么”。比如“不要使用渐变”“不要使用超过三种字号”“不要引入新的颜色”。负面约束往往比正面约束更有效，因为 AI 的默认倾向就是加东西，你得帮它做减法。

这套流程我用了大半年，从最初被“AI 味”折磨，到现在基本能做到 AI 生成、我微调就能上线。核心体会就一句话：AI 是执行者，设计系统是规则，你是定规则的人。规则定得越清楚，AI 执行得越靠谱。别指望 AI 替你做设计决策，那是你的活。把令牌、组件、模板这三层搭好，剩下的重复劳动交给 AI，效率能翻好几倍。