企业官网建设流程全解析

最近接了个后台管理系统的单子，客户要求“风格干净、层级清楚、最好能在一周内出全套界面”。换作两年前，我大概会打开 Figma 从组件库开始逐个画，但这次我只用了一个下午跑通风格方向，后面几天全靠一套 AI 辅助工作流把整套 UI 框架、页面模板和交互状态都补齐了。

不少设计师朋友问我现在 AI 到底能帮到什么程度。我的回答一直很明确：AI 设计早就不是“输入一句话生成一张好看的图”那么肤浅了。真正值钱的用法，是从一张概念图扩展到一整套 UI 资源，把 AI 从一个“灵感生成器”升级成“设计合伙人”。这篇文章我来拆一拆这套工作流是怎么搭起来的，里面有哪些工具、哪些参数、哪些坑，以及最关键的——设计师的价值到底该放在哪里。

1. 认清 AI 设计的真实边界：它不是替你做设计，而是陪你做设计

1.1 从“生成一张图”到“做完一套 UI”，到底多了什么

每个人接触 AI 设计基本都是同一个路径：先在网站上看到别人用 Midjourney 生成一张很惊艳的插画，自己也去试，发现只要英文 Prompt 写得好，确实能出大片级的效果。但真的要把 AI 用到企业级 UI 项目里，就需要冷静下来看它到底能干什么。

我拆一下“一套 UI”需要交付什么：不只是几张界面图，而是风格规范、颜色体系、字号层级、组件状态（hover、点击、禁用、加载）、响应式布局逻辑、甚至标注和切图。这个时候单纯“一张图”的生成逻辑就走不通了。AI 可以给你 100 张漂亮界面图，但如果你没法把它们拆成 Design Token（设计变量）、没法统一间距和圆角体系、没法导出符合工程规范的表情符号资源，那这些图就只能停在概念阶段。

所以从“一张图”到“一套 UI”之间，差的不是生成能力，而是结构化能力。AI 擅长的是发散——给你不同的视觉可能性，而设计师擅长的是收敛——从可能性里提取规则、制定标准。这就是我强调的：AI 负责量，你负责质。

1.2 设计师对 AI 的几个常见误解

第一个误解：AI 生成的结果就是最终交付物。我见过不少新人直接把 Midjourney 生成的主视觉贴到提案里，结果客户问“那我们的登录页、数据看板、表格页长什么样？”直接哑口无言。AI 出的是“灵感碎片”，不是“完整方案”。

第二个误解：AI 会取代设计师。这个说法从 2022 年就开始热炒，但真正跑过完整项目的人都清楚，AI 目前连“正确理解业务需求”都做不到。产品经理说“这个页面需要强调转化率”，AI 只会给你一个金光闪闪的按钮，它不知道这个企业的主色调是什么、目标用户是谁、之前的交互问题出在哪。它没参与过你的评审会，没听过用户访谈，它的“审美”来源于巨量数据，而不是你的产品语境。

第三个误解：用 AI 不需要学习。越熟练的设计师越清楚，AI 设计工具的 prompt 本质上是一种“意图编程语言”。你写 “modern SaaS dashboard, blue theme, rounded corners, dark sidebar” 和写一段精细的 ControlNet 配置和局部重绘指令，效果完全是两种东西。RAG（检索增强生成）和 LoRA（低秩适配）这些词虽然不用背得滚瓜烂熟，但基本逻辑必须懂，不然就是拿钻石当石头用。

1.3 AI 设计在真实工作流中的三个正确打开姿势

我实践下来，AI 在 UI 设计流程里有三个最值得投入的位置：

第一是探索期。给它预算口头禅般说“我要一套面向 Z 世代社交产品的 UI”，让它生成几十张风格扫描，这个时候“多而杂”就是优点。第二是局部补全期。有了主视觉后，让 AI 基于同一风格补充空状态、404 页面、弹窗场景，省下大量机械重复时间。第三是组件标注期。用视觉模型识别 AI 生成稿里的颜色、字号、间距，自动翻译成代码变量，这个环节熟练之后能省三分之二的标注时间。

这三个位置每一个都有对应的工具和参数细节，下面我按一条真实项目流程来讲。整个过程并不复杂，但需要你坐下来花一天时间把每个环节跑通。

2. 一套可以复用的 AI 辅助 UI 设计实操流程

2.1 用 AI 做风格探索和情绪板

先讲项目启动阶段。传统做法是翻各种灵感网站，收集几十张参考图，再用白板工具贴成 moodboard，客户看了一头雾水。换成 AI 之后，我通常会用 Flux 或 Midjourney 配合精心设定的 prompt 快速生成风格候选。

我举一个最近做的智慧园区后台项目为例。客户只给了两个字“科技感”，但“科技感”这个词在制造业客户眼里可能是深蓝渐变加金属质感，在互联网客户眼里可能是毛玻璃加浅色主题。如果我直接按自己的理解走，大概率会被打回重做。于是我用了以下 prompt 模板：

dashboard UI design, dark mode, [特定行业属性], data visualization, left sidebar, top header, [色彩暗示], [质感关键词], glowing accents, high fidelity, 4k, UI/UX design shot

然后跑三轮：第一轮主题深蓝色系 + 科技线条感；第二轮浅色主题 + 大圆角 + 轻量投影；第三轮暗色主题 + 霓虹配色方案。每轮 4-6 张，每张图都刻意让 AI 只生成“整体氛围”，不追求细节正确。这样十几分钟就能让客户选方向。等客户说“就要第二种了”，我再回到 Figma 里去定义真正的 Design Token，这才是正确的顺序。

这里的关键是不要试图让 AI 生成“最终设计稿”，因为生成式 AI 对文本和精细控件的精度还达不到生产级水准。它的定位是“帮你把客户审美偏好探测出来”，这一步走对了，后面返工率极低。

2.2 从单张页面图扩展到整套 UI 的关键步骤

客户确认方向之后，就进入“扩展”环节：一张主视觉如何变成登录页、首页、列表页、详情页、表单页、异常页这一整套。

我的方法是先把主视觉拆解成设计元素，而不是直接让 AI“设计整个系统”。比如这张主视觉有一个特定风格的顶部导航、一套卡片阴影、一个圆角按钮，我把这些元素的特征提取出来，用文字描述交给 AI 做扩展。举个例子，如果主视觉的卡片是“深灰背景、16px 圆角、细白描边”，那我就把这句话写进后续所有 prompt 里，保证生成出来的登录页和仪表盘能延续同一套视觉基因。

具体操作时我会用 ComfyUI 搭一个简单的工作流：上传主视觉作为参照图，用 ControlNet 锁住构图和风格特征，再配合 IP-Adapter（图像提示适配器）让每张扩展图保持风格一致。有些设计师嫌 ComfyUI 学习曲线陡，但它的价值就在这一步——通过节点式工作流，你可以精准控制“哪部分沿用哪部分”，而不是全靠模型随机发挥。

我强烈建议设计师至少学一点点 Stable Diffusion WebUI 或 ComfyUI 的基础。Midjourney 是“傻瓜相机”，但你要做一整套餐 UI，就必须上“可调光圈快门的单反”。ComfyUI 里模型选错了、VAE 没加载，出来的颜色就是灰蒙蒙的。这些问题排查起来很烦，但它是扩展工作流稳定性的基础。

2.3 设计稿到代码：UI 层的落地细节

这里要讲一个很多纯视觉设计师容易忽略的点：AI 生成图再好看，最终还是要交给开发落地。如果 AI 产出的只是图片，那前端工程师要把每一个圆角、每一个颜色、每一个字重重新“猜”一遍，过程极其痛苦。所以我在设计转代码这一层，会刻意让 AI 参与“组件代码生成”。

现在主流方案有两个。一是直接用 Figma 里的 AI 插件（如 Figma Make Design 或 Anima），让 Figma 的自动布局和变量系统配合 AI 将设计稿转为代码。二是用 Claude 或大模型直接读取设计稿截图，生成 Tailwind 或 Vue 组件代码。我自己的习惯是：为了让 AI 生成的代码更符合项目规范，我会在 prompt 里先注入项目使用的 UI 框架信息。比如我的项目用的是某热门 Vue UI 框架，我会把框架的组件命名和样式变量让 AI 提前“学习”，再让它生成代码，这样产出可直接使用的程度高很多。

还有一个容易翻车的点：UI 层的状态管理。AI 生成代码时通常只会给你“默认状态”，但按钮的 hover、loading、disabled 这些状态它不一定考虑。所以框架选型时要做好状态覆盖，这个不是 AI 的锅，而是你自己的工作流里要有一个“状态补充”清单，跑完 AI 后逐项补样式。

3. 原理与工具：AI 图片生成、ComfyUI 与 UI 自动化

3.1 AI 图片生成原理简述：为什么 AI 能“无中生有”

我尽量用不拗口的方式讲一下底层逻辑。现在的 AI 图片生成主流是扩散模型（Diffusion Model），它的思路是“先学会加噪，再学会去噪”。训练时把大量真实图片逐级加噪，让模型观察到“一个干净图片变成纯噪点”的完整过程；生成时反着来，随机给一个纯噪点，模型一步一步根据文本条件的指引把噪点去掉，最后还原出图像。这也是为什么生成结果有种“从马赛克中浮现”的视觉效果。

那 UI 设计为什么不能直接用这套逻辑？因为 UI 里有大量“文字内容”和“精密几何结构”，扩散模型对文字生成的能力虽在提升（比如 SD3.5、Flux 的文本渲染已远胜 SD1.5），但要生成像素级精准的组件仍然容易出错——刚生成的按钮文字可能拼写错误，也可能按钮边缘歪斜。所以要理解：AI 生成图的定位是“视觉概念”，不是“设计系统”。

那 ComfyUI 在这个链条里起到什么作用？它本质上是一个节点式图像生成工作流引擎，把“模型选择、采样参数、ControlNet、IP-Adapter、LoRA、潜空间放大”这些模块像乐高一样连接起来。同是一句 prompt，在 WebUI 里你只能看到结果，在 ComfyUI 里你能看到“哪一层决定了构图、哪一层决定了色彩风格、哪一层决定了细节纹理”。扩展性墙强得多，适合生产级工作流。

3.2 ComfyUI 为什么成了设计师的刚需（含下载模型失败排查）

设计师第一次接触 ComfyUI，最先卡住的问题就是“模型下载失败”或者“模型加载出错”。我在这个上面帮不少人排过障，最常见的原因其实就三种：

第一是网络源不稳定。HuggingFace 和部分境外存储在国内访问并不稳定，下载大模型时容易中断。更麻烦的是断点续传不可靠，文件下载一半就显示损坏。解决方案是找一些国内可用的镜像站下载，或者利用支持断点续传的下载工具提前把模型放到指定目录，而不是依赖 ComfyUI 内置下载器。

第二是指定目录放错位置。很多新手把模型放到了根目录的其他文件夹，导致界面里根本找不到模型。检查路径时要区分：checkpoints（大模型）、loras（LoRA 模型）、vae（变分自编码器）、controlnet（控件模型）各归各的目录，不能图省事堆一起。

第三是模型版本不匹配。你用了一个 SD1.5 时代的老 LoRA，却放在一个基于 SDXL 的 checkpoint 上跑，生成出来的图基本全是噪点或风格完全乱掉。这个排查方式也很简单，看到图片已经崩坏就先看模型文件名的后缀和说明，官方网站都有版本标注。

我把排查顺序整理成一个表，方便大家照做：

3.3 AI Agent 和多 AI 协作：从提示词到工作流

我理解很多设计师还没听说过“Agent”这个词，简单来说，Agent 就是“一个能自己规划步骤、调用工具、迭代产出结果的 AI”。它在 UI 设计工作流里的价值这时候就体现出来了——多 AI 协作。举个例子，我搭建过这样一条链路：A 模型负责生成页面主视觉，B 模型负责把主视觉截图切成可用 UI 组件（通过视觉识别引擎），C 模型（Claude）负责把这些组件转换成 Vue 代码，最后 D 模型检查代码风格与一致性，持续迭代到通过校验为止。

过去这些步骤每一步都要人工搬图、复制提示词、切换平台，现在我会用一个工作流编排工具（比如 n8n 或 Dify）把几个模型串起来，中间用 API 调用和 Webhook 自动接力。我想要强调的是，这不是要取代你，而是省出大量“搬砖时间”让你做真正需要判断的事情。你什么时候定义一个页面完成？用户流程卡在哪一步？这才是一个设计负责人的关键决策。

3.4 UI 框架的选型参考

再聊一个经常被 AI 工作流波及的问题：前端框架选型。很多时候设计师脑海中是“漂亮的界面”，开发脑中却要考虑“这个组件库熟不熟悉、有没有足够的设计变量支持”。我自己总结过一套匹配 AI 生成内容的框架偏好：

• 管理后台类项目，我优先推荐使用头部和侧边栏分离的现代后台模板，因为 AI 生成的后台页面大多遵循这个布局，转代码时匹配度极高。
• 需要极致视觉定制、强交互效果的项目，可以考虑预制 UI 框架搭配深入调整的组合，可以让 AI 帮你做结构和样式的大框架，再做定制化。
• 如果你的团队用的是 React，那我建议优先使用 Tailwind CSS 生态，AI 模型对 Tailwind 类名的理解明显强于对复杂 CSS module 的理解，生成代码的准确率高非常多。

这里再提一个热词“UI 层”。很多开发者在 C# 或易语言里遇到“子线程更新 UI 控件”的问题，本质上是因为 UI 层不允许跨线程操作。我在设计过程中不看代码的具体细节，但我会借助“UI 层”这个概念来理解：AI 生成代码时如果直接操作 UI 层变量，容易引发状态不一致。所以在设计交接时，我会明确告诉前端“哪些是纯视觉状态、哪些是业务状态”，这能大幅减少后续 Bug 量。

4. 常见问题排查与避坑实录

4.1 模型下载失败的几种情况

除了前面讲的 ComfyUI 问题，我还遇到过一种更隐蔽的失败：AI 图片下载完成但解压失败，文件损坏，报错信息却不明显。解决了这些问题后，我又看到很多新人会忽略 checkpoint 的“哈希校验”，下载是不是完整靠猜。我的经验是：所有大模型下载完成后，先用专业的文件校验工具核对官方 SHA256 值，一次校验几秒钟，能避免半天踩坑。

另外，用“AI 无禁词聊天网页版”这类工具时，不会涉及本地模型；但如果你在本地跑开源模型，一定要注意显存占用问题。我手上这块 8G 显存的显卡，跑 SDXL 系列就几乎满负载，再加一个 ControlNet 直接爆显存。处理方式是把采样尺寸限制在 1024 以内，精度降到 fp16，再用“分块 VAE”插件提高显存利用效率。

4.2 UI 界面卡顿：是工具问题还是工作流问题

“UI 界面卡顿”是一个高频热词，但很多人的病因各不相同。我自己排查时先看三个维度：第一，模型体积是否过大；第二，实时预览是否开启（ComfyUI 里开启 high-res fix 时卡顿最明显）；第三，电脑硬件散热是否压制了性能。替多人远程排查之后我发现，超过一半的“界面卡顿”不是电脑性能不行，而是工作流里塞了太多重负载节点。这时你要学会“分阶段渲染”：先用低分辨率跑构图，确认布局后再开高分放大，能明显改善体验。

4.3 生成结果不统一：以统一风格锁定

我自己在批量扩展 UI 页面时，最怕的问题不是“出不了图”，而是“每张图风格漂移”。早先我用 Midjourney，同一套 prompt 出来的界面每张都有自己的小心思，做大一套界面时视觉碎片感极重。后来实验发现，风格统一的关键在于给 AI 提供足够的“风格锚点”，而不是单纯描述“保持一致”。所谓风格锚点，是指明确的色值、明确的圆角数值、明确的字体匹配和明确的阴影模式。

在提示词里写 “use the color palette #0F172A and #38BDF8 as primary colors, 12px rounded corners, soft shadows, Roboto font style” 的效果，远远强于写 “keep the same style”。如果你用 ComfyUI，那就更简单——用 IP-Adapter 直接锁一张参考图，就可以保证多页面的风格牵制。

4.4 AI 辅助会带来版权与合规风险吗

在展开使用时，我从来不把 AI 生成的结果直接投入商用不做检查。这里要提醒所有设计师：不少大模型训练数据里的素材版权并不透明，所以涉及企业品牌、商业发布时，谨慎处理。我的建议是：AI 生成图只作为“灵感底稿”，商业落地前一定要重新手工优化矢量路径或视觉构图；关键的品牌 logo、吉祥物、字体则必须走传统设计流程或确保持有授权。你不用太担心 AI 会惹上官司，但要养成“AI 生成物要二次加工”的职业习惯。

5. 设计师的护城河：在 AI 时代重新定位自己

5.1 AI 能做什么，不能做什么

我列了一份“AI 能力清单”，帮你画清楚边界。

AI 做得好的事情包括：风格探索（以秒级生成几十种风格方向）、多语言 UI 文案填充（甚至可自动化）、组件级代码生成、自动切图标注、相似风格扩展复用、设计规范检查（用视觉识别找出不一致的间距或者色值）。

AI 做不好的事情包括：理解业务场景背后的用户心理（用户为什么在这个页面停留 5 秒）、定义信息架构（哪些内容第一屏、哪些内容折叠）、与开发团队实时对接时的需求语境判断、以及最重要的——为设计决策承担责任感。AI 不会因为一个页面上线后转化率下降而复盘，但你会。

5.2 设计师应该投资的三个新能力

第一，提示词结构化能力。未来 AI 生成的品质，取决于“输入约束条件”的质量。学会写结构化的 design brief，而不是一段玄学的形容词，才能真正驱动 AI。第二，工作流编排能力。至少学会一种工具把多个 AI 模块串起来操练，这个过程会让你从一个“会用 AI 工具的人”变成“能驾驭 AI 流程的人”。第三，设计与代码边界的理解力。不需要你写复杂业务逻辑，但懂 HTML/CSS/Vue 组件化概念的设计师，与开发协作的顺畅度会完全不同。

5.3 一些个人体会

我自己的感受是，AI 不会夺走设计里的“品味”和“判断力”，它只会淘汰那些只懂“搬运模板”和“画图执行”的岗位。当你把 AI 当成团队里最高效的实习生，把大量机械性工作交给它，你的时间就腾出来去做更值钱的事情——理解用户、把握商业目标、制定设计系统。

我这个月刚用这套流程做完的那套智慧园区后台，客户非常满意，但我心里清楚：真正让客户买单的不是 AI 生成的画面，而是我在整个项目里提供的结构梳理、需求拆解和风格取舍。AI 负责让我更快到达终点，而我知道终点在哪里，这才是设计师最重要的价值。

最后再分享一个小偏方：如果你第一次尝试 AI 辅助做整套 UI 觉得手忙脚乱，别慌，先把“探索风格”这一个环节用熟，其他后面再加。我从 Midjourney 入门到跑通 ComfyUI 工作流用了一个多月，中间虽然踩了不少坑，但一旦跑通了第一个项目，后面就是滚雪球式的效率提升。设计这行从来都是工具带着想法跑，这次也一样。