企业官网建设流程全解析

我以前最怕的就是“拼 UI”这四个字。不是不会写，也不是审美多差，而是从拿到需求到界面真正能上线，中间那段反复磨细节的过程实在太折磨人。像素差一像素、间距不统一、组件状态漏几个、换了个字体布局又塌了——这些问题不大，但架不住多，一次迭代能吃掉两三个下午。自从把 AI 引入 UI 工作流之后，我手动“拼界面”的比例已经压缩到只剩最后 10% 的验收和微调，剩下的大量重复工作基本都交给了 AI 助手和自动化流程。这篇文章就把我这段时间的完整路线、实操细节和踩坑记录一次性摊开，给还在用“人工硬拼”方式写界面的朋友做个参考。适合谁看？前端开发、独立开发者、UI 设计师，以及那些被“改 20 遍配色”逼疯的产品经理，都能从这里找到能直接抄作业的东西。

1. 内容整体设计与思路拆解

1.1 为什么说“拼 UI”这件事让人头大

很多人以为“拼 UI”就是照着设计稿写几个 div，真做起来才知道坑全在后面。一份稍微像样的界面，背后至少包含四层工作量：一是结构层，要决定页面骨架、布局方式、组件嵌套关系；二是样式层，要处理间距、配色、字号、圆角、阴影这些视觉细节；三是状态层，hover、focus、disabled、loading、empty、error 这些状态一个都不能少；四是交互层，弹窗、抽屉、滚动联动、数字滚轮、拖拽排序，每项都是独立的小工程。

传统做法里这四层是串行推进的——设计稿出来，前端照着还原，后端给接口，联调再走一轮。任何一个环节的微小改动，都会沿链路向后传导。比如设计稿里按钮圆角从 8px 改成 12px，看着只是一行代码的事，但如果改的是设计系统里的全局圆角 token，那所有组件都得重新走一遍视觉回归。更别提遇到 UI 框架版本升级、组件库换肤、多端适配这种话题，光是把状态都补一遍就够写一整周。以前我经常在改一个间距时顺带搞坏另一个布局，最后只能靠“肉眼找 bug”，效率低到离谱。

1.2 AI 到底能在哪些环节真正帮上忙

我试过把 AI 丢进不同环节做对比，最终发现它最擅长的不是“从零创造惊艳设计”，而是把“从需求到界面”这条流水线上那些确定性高、重复度高、规则明确的环节吃掉。具体来说有四块：

第一块是设计阶段的方案生成。给它一段需求描述，它能直接输出配色方案、字体层级、间距体系、组件风格，甚至整页的布局线框图。这一步解决的是“从空白到第一版”的启动成本，过去要憋半天，现在十分钟就能出三个候选方向。

第二块是代码阶段的组件实现。给它一个设计稿截图，或者一段描述，它能生成结构完整的 HTML/CSS，也能生成 Vue、React 组件代码，包括响应式规则、伪类状态、过渡动画。这里的质量已经不只是“能用”，而是“可维护”——变量名、样式拆分、组件粒度，都能达到中等偏上工程师的水平。

第三块是自测阶段的视觉走查。让 AI 介入截图对比、样式一致性检查、间距异常识别，比人眼靠谱得多。以前每次大改版都要让测试同学从头点一遍，现在让 AI 跑一遍自动化截图和断言，几分钟就能把明显问题筛出来。

第四块是迭代阶段的批量修改。比如“所有按钮的 hover 颜色加深 10%”，这种全局性改动在过去要么全局搜索替换，要么逐个手改。现在只要把设计 token 改掉，再用 AI 把相关组件的样式统一刷新一遍就行，漏改率大幅下降。

1.3 方案选型：全自动 vs 人机协同

尝试“全自动”生成 UI 的时候，我踩过不少坑。早期我试过让 AI 一口气把整个后台系统全部生成，结果第一屏效果惊艳，往下滚动就开始崩：组件风格漂移、间距体系混乱、交互状态缺失。原因很简单，AI 生成是概率性的，前几屏它记住了你的上下文，越往后越容易“自由发挥”，尤其是没有明确设计 token 约束的情况下。

后来我换成了“人机协同”的路线：AI 负责产出候选方案和基础代码，我负责制定规则、验收结果、修正方向。整个流程像带实习生——你给它清晰的任务书和参考样例，它交出一版可用的东西，你做 code review 时把问题标注出来，它再迭代。这套模式跑下来最稳，也是我后面要详细讲的重点。

另外在工具选型上，我目前主要用的是几个组合：设计阶段用支持生成式 AI 的 Figma 插件和独立的文本生成工具出草稿；开发阶段用 VS Code / PyCharm 里的 AI 编程助手（比如 Fitten Code、GitHub Copilot、通义灵码）来补全和生成组件代码；UI 自动化测试阶段用 Maestro 这类工具做移动端流程回归，配合截图对比工具做视觉走查。不要盲目追求“一个工具干完所有事”，把每个环节选最顺手的工具组合起来，才是效率最高的方案。

2. 核心细节解析与实操要点

2.1 写 UI 生成提示词的四个关键要素

很多朋友用 AI 生成界面，出来的东西“一眼假”，问题八成出在提示词太笼统。只写一句“帮我设计一个后台登录页”，AI 只能给你一个中规中矩的模板，跟你的业务场景、品牌调性完全不搭。我总结了一套四要素写法，基本覆盖所有 UI 生成场景：场景定义、风格定义、结构定义、约束定义。

场景定义是交代“这是什么界面、给谁用、解决什么问题”。比如“一个面向充电站运营商的监控大屏，核心是查看设备状态和告警信息，使用人群是运维人员，操作频率高，需要在弱光环境看清”。这句描述直接决定了配色、字体大小和信息密度。

风格定义要给出具体的视觉方向，不要只写“好看”“现代”。好的写法是“扁平化 + 高对比度深色主题，主色 #00D4AA，强调色 #FFB020，圆角 4px，间距单位 4px 的倍数”，这样 AI 才能在同一个视觉坐标系里工作。

结构定义是告诉 AI“页面上有哪些区块，区块的优先级顺序”。可以用一句话描述区域划分：顶部导航 + 左侧设备列表 + 中央地图 + 右侧告警轮播 + 底部统计栏。AI 对结构的理解直接影响布局合理性，这一段写得越细，生成结果越接近可用。

约束定义是防呆条款，把所有“不能出现”的事情写清楚。比如“不使用卡片阴影过重的风格”“不生成任何示例用户隐私信息”“所有图标用线条风格而非填充风格”。这些约束能省掉后期大量返工时间。

2.2 从设计稿到前端代码：人机协作的关键一步

当 AI 给出设计稿或线框图后，接下来进入代码生成阶段。这里有一个关键思维转变：不要让 AI“自由发挥”写代码，而是先定好代码骨架和设计 token，再让 AI 往里面填内容。

具体操作是我会在项目里先维护一份tokens.css，定义颜色、字号、间距、圆角、阴影这些设计变量。然后在给 AI 的提示词后面直接附上这份 token 代码，要求它生成的组件必须引用这些 CSS 变量，不允许写入魔法值。这么做的好处是后续全局改版只需要改 token，AI 生成的代码会自动跟着变，不会出现“改一个主题要全球替换样式”的悲剧。

拿到 AI 生成的组件代码后，我的处理流程是三步走：先做静态检查，看结构和语义是否合理；再做浏览器里的视觉比对，拿 AI 生成稿和实际渲染结果对比；最后做交互状态补全，因为很多 AI 模型初版生成时会漏掉 focus、disabled、empty 这些状态，需要人工补充边界。交互状态补全这事不能省，我见过不少项目上线后才发现“按钮没有禁用态”“弹窗关闭没有焦点回收”，这些都是 AI 生成代码的盲区。

2.3 用 AI 做 UI 自测：视觉回归与一致性检查

UI 改动最怕的不是“改错了”，而是“改 A 坏了 B”。传统做法靠人肉回归，点完一遍手都抽筋。我现在的做法是把视觉回归自动化，让 AI 充当额外的“眼睛”。

在 Web 端，我用 Playwright 截图 + 像素对比工具做基线对比：每次改动前后跑一组固定页面的全屏截图，把 diff 图交给 AI 视觉模型分析，它能直接说出“侧边栏宽度异常”“第三行文字溢出”“按钮颜色不一致”这类结论。在移动端，我用 Maestro 配一组关键路径的 UI 测试，比如登录、搜索、下单流程，每个步骤断言关键控件的可见性和文本内容。

这套流程搭建起来之后，最直观的变化是回归成本从小时级降到分钟级。以前每改一版 UI 都要拉上几个人手点，现在机器先跑一遍，剩下的人力只用来复核 AI 不确定的差异点。

2.4 多端规范化：iOS、Android、小程序一次到位

做过多端项目的朋友都知道，iOS 和 Android 的 UI 规范差异很大：导航栏高度、返回手势、日期选择器样式、安全区适配，每端都有一套自己的规矩。我以前做双端时经常在细节上“打架”，一边改完另一边忘改。

AI 在这里帮了大忙。我会在提示词里直接塞入平台规范摘要，比如“iOS 下遵循 HIG，导航栏高度 44pt，列表左对齐 16pt，使用 system font；Android 下遵循 Material Design 3，使用 48dp 最小点击区域，强调色跟随主题”。AI 生成的组件会按不同平台输出差异版本，我再通过条件编译统一管理。即使是 Unity 里的 UI 数字滚轮、Android Studio 里密布的 UI 控件、Vue 里嵌入的复杂表格组件，同样可以用“规范提示词 + 组件化封装”的思路减少重复劳动。

3. 实操过程与核心环节实现

3.1 案例背景：做一个充电桩监控看板

下面用一个我实际做过的小项目来完整走一遍流程：给充电桩运营方做一个实时监控看板，需要展示设备状态、充电功率曲线、告警信息、今日收益，并且要适配室内的 21:9 大屏和运维手机端。这个项目的典型性在于：信息密度高、实时性强、多端适配、深色界面。整个开发过程我把传统“设计→切图→前端→联调”的流程压缩成了“AI 设计→AI 写码→我调接口→AI 自测”四步。

3.2 步骤一：用 AI 生成设计稿与配色方案

我先写了一段结构化的需求描述，强调信息层级和深色主题。AI 给出了三套方向：一套是科技蓝为主调的冷色方案；一套是碳黑 + 荧光绿的工业感方案；一套是接近地图 App 的暗色方案。我选中了第二套，因为运营方需要在弱光环境长时间盯屏幕，高对比度的荧光绿做强调色更合适。

接着我把选中的风格细化成设计 token，写进一个专门的设计系统文档里：背景 #0B0F14、主文字 #E6EDF3、强调色 #00E676、告警色 #FF5252、间距基准 4px、圆角 8px、标题层级用 20/28/34 三档。AI 基于这套 token 生成了完整的页面线框图和组件样式预览，包括设备状态卡片、实时功率曲线图、告警滚动列表，整个过程大概 20 分钟出了基本盘。

到这里我强烈建议你做一件事：把这套 token 保存为项目里的正式文件，不要只当提示词素材。后面所有 AI 生成的代码都引用这套 token，就等于把“AI 自由发挥的变量”锁死了，产出质量会稳定很多。

3.3 步骤二：让 AI 写出页面骨架与组件代码

拿到设计稿后，我没有让 AI 直接“一键生成整个页面”，而是按“骨架 → 组件 → 细节”三个阶段递进。

第一阶段生成整体布局，只要求输出左右结构的容器、栅格布局、响应式断点。第二阶段逐一生成各组件：设备状态卡片、功率曲线图（用 SVG 实现）、告警列表、统计栏。第三阶段做细节增强，比如数字滚轮效果、hover 提示、告警闪烁动画。

这里有一个值得分享的提示词写法：我会在提示词里附上“组件验收标准”，让 AI 自己对照检查再输出代码。标准里包含“是否使用了设计 token”“是否有空态和加载态”“是否支持键盘操作”“是否处理好溢出文案”。AI 看到这些要求后，生成质量会明显提升一个档次，因为它会在输出前做一轮自我约束。

实际上手时我会用 Vue 3 + TypeScript 作为主框架，AI 生成的组件代码基本都是可以直接粘贴进项目的格式，遇见个别语法错误直接让 AI 修复。整页骨架加组件半天内完成，以往手写这段骨架至少要两天。

3.4 步骤三：把 AI 生成的组件接到真实数据上

AI 生成的东西再好，最后总归要接真实数据。这里是最容易出现翻车的地方，因为 AI 生成时用的都是 mock 数据，接口返回结构一变就会崩。

我的做法是先把接口文档结构发给 AI，让它根据字段生成对应的 TypeScript 类型定义和 Mock 数据工厂，再让组件基于类型定义而不是后端具体字段来渲染。这样后端改字段名，我只需要同步改类型，组件代码基本不用动。

此外还要注意实时数据的刷新策略。看板要求每 10 秒拉一次状态数据，但功率曲线要保持平滑变化。我给 AI 的描述是“用定时器轮询接口，并用滑动窗口保留最近 30 个数据点”，AI 生成的效果还不错。反倒是后期把“数据变化动画”加进去时，AI 尝试了多种过渡效果都没达到预期，最后我手动手写了一段补间动画。这也很正常——AI 擅长的是“按规则生成”，但“符合产品情感化表达”的动画细节还是得人来做。

3.5 步骤四：用 AI 跑一遍界面回归测试

页面开发完，推进到真实设备之前先过一遍自动化测试。我搭了一个最小的回归流程：桌面端用 Playwright 访问各个路由截图，手机端用 Maestro 跑一遍关键路径，再把所有截图交给 AI 做视觉对比，重点检查样式是否和设计稿一致、组件状态是否完整。

第一次跑下来 AI 报告了三个问题：告警列表在空数据时高度塌陷、统计栏数字换行导致错位、低分辨率下图例遮挡了曲线数据。前两个我手动修复，第三个通过调整响应式断点解决。整个回归加重测花了一个小时出头，比之前人工测试省了大概半天时间。

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

4.1 生成的 UI 总是千篇一律怎么办

用 AI 生成界面的一个最大问题是“模板感”：十个页面八个长得像，都是居中布局 + 大卡片 + 圆角按钮。我试过几次之后发现，问题根源在于 AI 的训练数据里本身就充斥着大量中规中矩的后台模板，如果不给强约束，它就会输出平均偏好下的“最稳答案”，而不是“最合适答案”。

要打破模板感，我的技巧是在提示词里加入“差异化锚点”。比如指定“左侧导航采用图标 + 文字双行布局”“主卡片使用极细边框线而非阴影”“首屏背景加入大字号水印式品牌词”。这些锚点会迫使 AI 跳出默认套路。另一个技巧是让 AI 参考你指定的一个优秀产品截图，直接以“这张图里的信息架构为参考，但是改成我们的业务内容”，这样能在保留优秀结构的同时避免同质化。

4.2 布局乱、样式冲突、间距不对怎么排查

AI 生成的代码出现布局问题太常见了，最常见的是三种：flex 嵌套层级深导致 flex 子项不换行、绝对定位元素在响应式断点下错位、全局样式和组件样式冲突导致间距被覆盖。

排查时我一般不从头看代码，而是先在浏览器开发者工具里直接定位出问题的元素，看它的父容器布局方式和实际生效的 CSS 规则。确定问题后，把“可能的原因 + 元素路径”发给 AI，让它生成修复补丁。这里的关键是给 AI 足够多的上下文——不只是说“间距不对”，而是说“页面左侧栏的第三个卡片内部，标题与日期之间的间距是 40px，期望是 12px，父容器是 flex column，内边距是 16px”。AI 拿到这种精确描述后，基本一次就能改对。

还有一套保险做法：把所有组件都用 CSS 变量定义间距，不写魔法值。这样即便 AI 生成的代码间距有问题，我只需要在 token 层统一修正，全页面的间距都会跟着调整，省去逐个组件排查的时间。

4.3 界面卡顿与性能问题怎么定位

“UI 界面卡顿”是高频问题，特别是接入了图表、实时刷新、复杂动画后。AI 生成的代码里最容易出现性能坑的点有三个：一是高频 setState 导致整个页面重新渲染；二是在组件里直接绘制大量 SVG/DOM 节点，不做虚拟化和节流；三是图表组件在每个数据点更新时重新创建整个实例。

定位技巧是先开性能面板录一段交互，看长任务集中在哪。如果长任务集中在渲染阶段，那就去查是否缺少memo、shouldComponentUpdate或 Vue 的v-memo；如果集中在脚本阶段，则要检查数据计算是否有重复的大循环。让 AI 修复时需要明确说“请保持现有功能的前提下，优化渲染性能，减少不必要的组件重渲染”，它通常会给出useMemo、useCallback、虚拟列表这些常规方案。真正复杂的没有固定优化路径，只能靠自己的判断，不能全都依赖 AI。

4.4 版本差异与生态依赖的坑

AI 辅助开发绕不开“版本差异”问题。比如很多朋友在用 ComfyUI 的整合包版本时，会纠结“v3.7 和 v3.27 有什么差异”。这类版本差异主要集中在三块：预装节点的数量与新旧、内置模型和采样器版本、不同版本对自定义节点的兼容性。每次升级大版本后，以前能跑的工作流很容易因为某个自定义节点不兼容而报错。我自己的习惯是：保持一个日常稳定的版本，另装一个最新版用来测试新功能，不要追求“永远最新”。

其他生态里的工具也一样，比如 Vue UI 库、Preline UI、EasyUI 这些组件库升级后，API 可能发生不兼容变化。AI 生成的代码基于的是它训练时的记忆，可不代表你本地的版本。所以每次升级依赖之后，一定要重新让 AI 对照你的真实版本进行代码生成，或者把 package.json 里的版本信息附在提示词里，减少跨版本代码错误。

4.5 边界状态与交互细节的遗漏

这是 AI 生成 UI 代码里最容易“埋雷”的地方。生成时 AI 默认组件处于“正常数据 + 正常交互”状态，经常遗漏的是加载态、空数据态、网络异常态、权限不足态，以及键盘操作、焦点管理、屏幕阅读器支持这些可访问性细节。

我的补救办法很简单：写好组件后让 AI 对照一份 checklist 自查，包含十项左右的边界状态。比如“这个列表为空时显示什么”“接口请求中显示什么”“点击后 500ms 内无响应怎么提示”“用户按下 Tab 键能否按预期顺序聚焦”。AI 通常会列出遗漏项并自动补齐代码，但这轮检查值得人工确认一遍，因为 AI 的自查在逻辑上存在“盲视”——它并不真正知道自己不知道什么。

5. 更进一步的玩法：从 AI 写代码到 AI Agent 辅助开发

说到这一定会有人问，既然 AI 能写组件、做测试，那是不是可以更进一步让它“自己开发”了？这是两回事。AI 写代码的本质是“根据你的要求生成片段”，而 AI Agent 的本质是“理解目标之后自主执行完整任务链”。

我实验过用 AI Agent 来干一些有明确验收标准的杂活：批量修改弹窗组件的关闭逻辑、在多个路由页面统一加权限判断、把旧版 UI 框架迁移到新版框架。这些任务的特点是“流程长但步骤明确”，Agent 只要每一步都能自查结果，就能比较可靠地跑完。

但 UI 这种涉及大量主观判断的领域，让 Agent 完全自主还有很长的路要走。我目前喜欢的方案是“人类定标准，Agent 做执行”：我把界面验收标准写成结构化规则，Agent 按规则生成页面并自测，最后由我人工确认。这比“纯手动”高效得多，也比“纯自动”可控得多。

如果你也想尝试这条路线，我建议从一个小模块开始，不要一上来就放手整个项目。比如选取一个列表页，把“分页、筛选、排序、空态、加载态”这几个功能让 Agent 完整实现，你能很快感受到它适合做什么、不适合做什么，以及在哪里需要你的介入。

说实话，尝试完这套流程后我最大的体会是：AI 不会让 UI 开发“不用做”，只会让 UI 开发“不用烦”。那些重复的、模式化的、消耗耐心的部分被压缩了，我才有精力去碰真正有意思的交互细节和设计表达。如果你也想试，建议不要一步到位追求全自动化，先从一个小页面开始跑通整个链路，找到你自己和 AI 配合的节奏，再逐步扩大范围。最后再分享一个技巧：在处理任何 AI 生成的 UI 代码前，记得先给它定好“设计 token”，这大概是我这段时间实践下来投入产出比最高的一件事了。