企业官网建设流程全解析

做前端和做UI设计的这两年，多多少少都被AI生成结果气到过。你写一句“做一个仪表盘”，它真敢给你一整屏蓝紫色渐变卡片，指标倒是齐，但配色、间距、圆角、字体层级全在你审美底线附近疯狂试探，这种体验用一个词总结就是“AI随机发挥”。Stitch 就是冲着这个问题来的——它是一款面向UI生成场景的AI工具，核心价值不是“能画界面”，而是让“AI随机发挥”变成“对需求精准输出”。简单说，你给它的不是一句话需求，而是一份设计工单、几个视觉锚点、一组明确约束，它按规格交付，而不是靠猜。

我会用自己实际跑过的项目当线索，从 Stitch 的生成机制讲起，然后是可直接抄的提示词模板、参考图锚定方法、组件级约束技巧、迭代调优姿势，最后给一个完整实战案例。适合被AI出图结果气到摔键盘的前端工程师、想提高出图效率的UI设计师，以及在做AI应用开发的独立开发者。如果你刚接触AI生成UI，这篇也可以当入门地图用。

1. 为什么AI生成的UI总是“随机发挥”

1.1 三个根源：提示词太糊、上下文缺失、反馈太长

先别急着怪模型不够聪明。我在大量实测里发现，AI生成UI失控的80%问题，都出在输入信息量不足，而不是模型能力。第一个根源是提示词太模糊。你说“做一个登录页”，AI的候选池里有几十种登录页形态：居中卡片、左右分栏、覆盖式弹窗、极简单行输入……它只能猜你最想要哪一种，而猜的结果通常是有视觉冲击力、但不符合产品定位的那个。这就是典型的“信息缺失，模型被迫补全”：你越少说，它替你决定越多。

第二个根源是上下文缺失。UI从来不是一个孤立的页面，它背后有整套设计语言：主色、间距系统、圆角规则、组件状态、目标用户、品牌调性。AI只拿到几句话，无从知道这些隐藏约定。于是它会在第一版给你一个适合活动页的渐变风格，第二版又变成适合数据后台的深色风格，同一批对话里风格都能跳三次，因为没有任何东西在“锚定”它。

第三个根源是反馈链路太长。传统文本对话里改UI，流程是你说“左边一点”，AI改一遍；你说“再左一点”，它再改一遍；你说“背景太亮了”，它把整个配色一起动了。每一轮都可能引入新随机性，而且很多工具根本没有“局部精准修改”能力，只能全量重画，改一处崩三处。迭代成本极高，最后你就放弃了，自己动手改HTML。

1.2 把AI当“外包设计师”：从一句话需求到设计工单

想明白这三个根源，解决方案其实也清楚了：别把AI当“你只管说，我来办”的许愿机，要把它当成一个“能力很强、但记性很差、又特别顺从的外包设计师”。你给外包设计师的需求是这样的：项目背景、参考图、页面信息架构、组件清单、交互状态、配色值、断点规则。只要这些给齐，他做出来的东西就算不全对，也在你的射程范围内。AI也是一样的逻辑。

我经常用一个点菜的类比。你进餐厅只说“来条鱼”，厨师能给你端出红烧、清蒸、烤鱼、刺身，因为你没做任何约束。如果你说“清蒸鲈鱼，一斤左右，不要姜丝，用蒸鱼豉油，出锅淋一勺热油”，不管谁做，成品八九不离十。Stitch 这类工具的价值，就是让你的“点菜话术”能被AI完整理解并执行，把你模糊的审美偏好翻译成它听得懂的规格说明。

所以整篇指南的核心方法论就一句话：结构化描述加约束条件，加视觉锚点，加迭代反馈。只要你围绕这四个要素操作，AI基本不会再对着空气创作。

2. Stitch 到底在帮你控制什么

2.1 文本生成不是聊天，是“带着规格书开工”

Stitch 最基础的入口是文本生成，但你得把它当成一种特殊的“规格书输入”，而不是聊天框。它支持自然语言直接生成UI代码，常见输出有 HTML加CSS、Tailwind、React、Vue 这几种。我本人最推荐 Tailwind：因为类名本身就是一套约束。AI生成原生CSS时，经常搞出莫名其妙的负margin、absolute定位和 z-index 叠层，而 Tailwind 的原子类把大部分间距、颜色、布局都限制在工具类范围内，即使AI跑偏，跑偏幅度也小得多。

文本模式最适合干两件事。第一件是快速搭建信息架构，比如你要做一个数据报表页，先用几句话把头部筛选区、指标卡片区、走势图区、明细表格区的位置关系定下来，让AI先生成稿，再看问题。第二件是做结构验证，新项目不知道布局怎么摆，先让AI出三版结构对比，选逻辑最顺的一版继续深化。这阶段不要把精力花在配色调圆角上，那是后面的事。

这里有个容易犯的错：一上来就让AI“做一个精美的大屏数据可视化”。大屏涉及设备尺寸、图表库、自动刷新，一句“精美”解决不了任何事。正确做法是先定信息层级、再定技术方案，最后才谈“风格稍微现代一点”。规格越细，生成结果的可用性越高。

2.2 参考图与线框图：视觉锚点比形容词有用

Stitch 支持上传设计稿、截图、手绘线框图，然后用图片识别加提示词理解的方式，把它们转换成可编辑代码。这一步是“免于随机发挥”的关键武器。人类设计师看到“简洁、现代、有点科技感”会自行脑补，AI也一样会脑补，但你丢给它一张参考图，它至少知道你说的“简洁”是白底大留白，还是卡片式弱阴影。

我建议的姿势是这样的：给参考图时不要只丢图，配合一段定位说明，比如“图1我只要它的配色逻辑，图2参考卡片间距，图3看表格信息密度”。你还可以直接在图片上用标注工具圈出重点区域，写上“这个区块的圆角是16px”或“标题用深灰，不要纯黑”。Stitch 的图片理解力足够读懂这些标注，比你在文本框里用形容词描述半天高效得多。

如果你手里有设计系统的产物，比如 Figma 导出的颜色变量、圆角令牌、SVG组件，直接传给它，这种结构化视觉输入对AI来说比什么“高端大气”都好使。它不是在“看懂”你的风格，它是在把你的风格变成它生成代码时的参照系。

2.3 组件级编辑与设计令牌：改细节不推倒重来

Stitch 的另一个关键机制，是把生成结果拆成组件树。左边是页面结构，右边是当前选中组件的属性面板，间距、字号、颜色、圆角都能单独调整，而且这些修改会作为“局部补丁”保留下来，不会因为后面重开一轮对话就消失。这个机制打破了我前面说的“全量重画死循环”，你可以在生成结果上像改原型一样逐个锁细节。

和组件级编辑配套的是设计令牌。简单说就是把颜色、间距、字体、圆角这些容易变的值抽成变量，写在页面顶部的 CSS 自定义属性里。我通常让AI把所有主题性参数写进:root{}，比如主色、辅助色、基准间距、圆角值、字体栈。这样后面想换肤、适配暗色模式，只需要改这部分变量就行，AI生成的其余组件代码不用动。这也是保证多页面一致性的最实用手段：不同页面都引用同一套令牌，就不会出现这个页面偏蓝、那个页面偏紫的情况。

这套机制的背后思路，是把AI当作“可以局部修改的代码生成器”，而不是“一次性的出图工具”。你要主动使用它的组件面板和令牌系统，每次修完一个细节，等于给这个节点钉了一颗图钉，后续生成再飘也不会飘出这颗图钉的圈。

3. 精准生成UI样式的完整实操流程

3.1 第一步：把需求写成一个“设计工单”

我习惯把提示词之前的准备动作叫“写设计工单”，因为工程师开给前端团队的那种工单，天然包含了背景、范围、字段、交互要求，这些东西正好也是AI缺的。一份可用的UI设计工单至少包含以下几块：

• 项目背景：一句话，比如“面向小团队的项目管理看板，用户是研发负责人”。
• 页面类型：登录页、数据明细页、设置页、仪表盘。
• 目标用户和使用场景：这点很重要，同样的按钮，面向C端用户的App和面向B端后台的视觉权重完全不一样。
• 主要模块和功能：列出这个页面必须有哪几个区块，每个区块里有什么元素。
• 数据字段：最好把真实字段名列出来，AI就不至于拿“张三”“李四”来填功能演示数据。
• 操作动作：每个按钮点击后的结果，以及按钮的视觉优先级。
• 风格基调：两到四个词即可，例如“简洁、白底、蓝紫主色、信息密集”。

举个例子，我要做一个移动端账单明细页，工单可以写：“个人记账App的账单明细页，用户是大学生，功能有：展示月度收支汇总、按日期分组的消费记录、点击记录进入详情。字段包括月份结余、分类图标、金额、备注。风格偏清新，白底，主色用薄荷绿，金额正负用红绿区分，卡片间距统一8px的倍数。”到这里，你不用写“请帮我做一个漂亮页面”，AI已经知道自己该干嘛了。

3.2 第二步：一份可以直接抄的提示词模板

有了工单，提示词就是把它翻译成AI更容易执行的指令。我目前比较稳定的一套模板长这样，你可以直接抄去改成自己的需求：

你是一名资深UI工程师。请为【移动端账单明细页】生成完整代码。 - 技术栈：HTML + Tailwind CSS，仅输出一个 <main> 区块内的内容 - 设备与断点：移动端优先，基础宽度375px；在768px以上时，卡片改为两列网格 - 设计令牌： --color-primary: #34D399; --color-success: #10B981; --color-danger: #EF4444; --color-text: #1F2937; --color-text-sub: #6B7280; --radius-md: 8px; --space-unit: 8px; - 布局结构：页面标题区 / 月度汇总卡片 / 按日期分组的明细列表 / 底部悬浮的新增按钮 - 组件清单：返回箭头与标题、汇总金额卡片、日期分组行、单条记录行、底部圆角悬浮按钮 - 数据：用本地mock数据，字段为：日期、分类图标、分类名称、备注、金额、收入/支出标记 - 视觉规则：背景浅灰 #F9FAFB；卡片白色，圆角8px，阴影用 border 和浅阴影，不使用大面积模糊阴影；条目标题16px/600，金额14px/500，备注12px/400 - 交互状态：支出金额红色、收入金额绿色；悬浮按钮是主色实心，按下态变暗 - 禁止项：不要用渐变、不要玻璃拟态、不要自定义引入额外字体、不要省略任何一条记录组件

你会注意到我把“禁止项”单列了。AI是顺从型模型，你不说不能做什么，它就会凭“审美惯性”给你加料。你禁止了渐变，它就不会手滑给你铺一个大瀑布。你禁止额外字体，它也不会为了营造氛围引入一个根本加载不到的外网字体。负面提示词是控场的关键，不是可选项。

3.3 第三步：用参考图把视觉方向“钉”进对话

如果你对视觉风格有比较明确的倾向，比如“就像支付宝账单那样清爽”，别指望AI知道支付宝长什么样、现在改成什么样了。正确做法是从网上截一张感受最接近的界面，或者自己用 Figma 随意拼一个低保真布局，传进 Stitch，然后在提示词里写清“这张图只参考它的布局和间距节奏，配色重新设计”。

参考图最好附带标注。我通常会在截图里圈出几个关键位置，写上：顶部这个区间距离、卡片圆角大约、列表行的分割方式。Stitch 能识别图片中的文字和手绘箭头，这些标注会让它理解得更具体。这个环节不需要多精致的图，低像素的线框图也行，它要的是视觉锚定，不是美术素材。

使用参考图还有一个避坑点：如果参考图来自网上别人的产品，尽量不要做像素级复刻。你可以在提示词里写明“借鉴布局与色彩比例，但图形元素全部重新绘制”，这既是给AI的约束，也是提醒自己注意分寸。实战中，把参考图当作“方向锚”而不是“拷贝源”，产出的结果反而更符合你的真实需求，因为它会保留参考图的气质，又不会照抄出你不想要的细节。

3.4 第四步：用组件清单和布局结构管住生成

组件清单这一步千万别省。很多人让AI生成页面只给一个整体描述，比如“做一个用户中心”，出来的东西可能什么都有，却偏偏没有你真正要的“退出登录按钮”。AI的补全本能会倾向于丰富功能，而不是贴合你的具体入口。所以我在提示词里一定会列一个组件清单，具体到“这个页面必须有：头像上传区、昵称修改输入框、手机号绑定状态、消息通知开关、清除缓存按钮、退出登录按钮”。

布局结构我习惯用括号式描述，AI对这种形式理解得很准。例如页面头部 + [用户信息卡片] + [功能设置分组 * 3] + 底部安全退出区域，这样结构层次清清楚楚，它不会擅自加一个轮播图或者推荐流。这个括号式写法其实利用了对话模型对嵌套结构敏感的特点，比写一句“从上到下排列好各个区域”精确得多。

如果页面里有表单，还要精确到“行为”。你希望输入框是什么状态、校验错误时怎么显示、提交按钮的加载态是什么，这些细节决定了生成结果能不能直接拿去联调。我之前让AI生成过一个设置页，它把开关组件做成了静态灰色圆点，完全看不出开关语义，就是因为我在需求里没写“开关要有开启态、关闭态、禁用态三种视觉表现”。约束到行为层面，AI才会把交互状态当作硬需求处理。

3.5 第五步：迭代调优的正确姿势

生成结果不可能一次到位，所以迭代是必然的。但大部分人迭代的方式是无效的：只会说“再好看一点”“这个地方不舒服”“感觉不对”。这些话AI没法执行。我自己的有效反馈公式是：问题位置加预期结果加示例。比如“第二组卡片之间的间距不一致，请统一为16px”“顶部导航的标题文字颜色改为 #374151，不要使用纯黑色”“列表为空时需要一个占位插图和一行文案，文案是‘暂无记录’”。指向越具体，AI改得越准。

如果你一次报出五六个问题，建议按优先级排队，让AI先改最影响观感的一两个。模型在一个回合内处理的信息量是有限的，塞太多修改点，它顾此失彼，最后每个都改不到位。这和跟人协作是一样的，先解决阻断性问题，再打磨细节。

这一环节还要学会用 Stitch 的“局部编辑”能力：在组件树里选中那个出问题的节点，单独提交修改，不要在大对话里让AI全局重画。局部编辑只影响当前节点，回滚也容易。我每次生成完一个满意版本，都会给当前状态命名存一个版本快照，再继续下一轮调整。这样即使改坏了，也能一键回到上一版，不用从头再来。

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

4.1 高频问题速查表

速查表这东西，我建议你直接存一份。它集合了我大半年实操里踩过的大部分坑，其中“颜色令牌”和“断点定义”两个条目出镜率最高，几乎每个项目都会遇到。先定位再修，比一遍遍重画高效得多。

4.2 几个容易踩的坑

第一个坑是让AI“自由发挥一次”之后没存快照。AI有时候会给你惊喜，但这个惊喜你也留不住，你下一步加一个需求改动，整个画面可能就变了。所以在看到满意结果的那一刻，第一件事就是保存当前版本。这不是可选项，是工作习惯。

第二个坑是mock数据和真实数据对不上。AI特别喜欢给自己编数据，比如账单金额变成“今日消费：3999元”，字段完全对齐很容易出问题。如果你的页面后面要接真实接口，建议一开始就把字段结构写在提示词里，甚至在代码里直接定义mockData的类型接口，AI生成的数据就不会带偏UI设计。

第三个坑是AI的“偷懒”行为。它有时候会在连续生成多个同结构组件时写一句“这里与上方相同，省略”，然后真的就跳过了。你需要在提示词末尾加一句“每个组件请给出完整代码，不要用省略号或注释替代重复结构”。这句话能帮你省去不少在代码编辑器里手动补齐的时间。

第四个坑是过度依赖参考图。参考图只能固定视觉方向，它管不了你页面里的操作流程和信息层级。我在一次生成里传入了一张非常精美的数据可视化大屏参考图，结果AI把所有模块都做成了玻璃拟态大屏风，完全不顾这是普通后台页面。后来我明白了：参考图宁可丑一点，也要紧扣业务场景，并且一定要配文字说明它只是“风格参考”，具体布局必须听我的描述。

5. 实战案例：让一个“账单明细页”从粗放到精细

5.1 只给一句话需求，它会给你什么

为了让你直观感受差别，我专门拿“移动端账单明细页”做过对照测试。第一版提示词就一句：“做一个移动端账单明细页。”Stitch 给了我这样一个结果：顶部是蓝紫色渐变头图，半透明玻璃拟态卡片叠在上面，消费记录用大圆角纯色图标排列，字体全部偏大，配色五彩斑斓。单看这个页面并不丑，但它完全不像一个工具型记账App该有的样子。

我把它的问题列了一个清单：渐变头图不是我要的、卡片层级不清晰、金额字段和备注挤在一起分不清主次、没有空状态、列表间距不一致。更麻烦的是，最下方的“新增按钮”做成了普通文字链接，一点按钮感都没有。这些问题的共同点，就是AI在替我做产品决定，而我没有给它任何产品约束。

这个版本也不是全无参考价值：它的信息架构其实是对的，有汇总、有明细、有入口，说明AI的基本理解能力在线。问题在于视觉执行层面完全失控。接下来要做的不是推翻重来，而是把工单补上，让它在正确骨架下收敛视觉。

5.2 第一轮迭代：补工单、补参考、补约束

第二轮我用了前面写的完整工单和提示词模板，同时上传了一张自己用一张A4纸画的线框图：顶部一个标题区、一张汇总卡片、下面按日期分组的一堆记录行、右下角一个悬浮按钮。画得很潦草，但结构明确。然后我在提示词里写清了颜色令牌、间距系统、组件清单和禁止项。

这次生成的结果，可以说是从“随机发挥”直接跳到了“可评审状态”：白底、灰背景、绿色主色、卡片整齐，间距基本在8px的倍数上，金额正负用红绿区分，分组标题也清晰。问题少了很多，但仔细看还是有几处需要收尾：汇总卡片的数字太大了，比例失调；悬浮按钮的阴影过重；分类图标用了五彩渐变底，和我要求的“不使用渐变”冲突；空状态文案缺失。

注意我并没有说它“做错了什么大方向”，而是逐个指出局部问题。这正是组件级编辑的用武之地：我直接在组件树里选中汇总卡片，把数字字号从28px改成20px；选中悬浮按钮，把阴影从大阴影改成1px边框加轻微阴影；选中分类图标，把渐变底色改成浅灰纯色底。每一步都是局部修改，改完整体结构没受任何影响。

5.3 第二轮迭代：局部微调与响应式收尾

第二轮收尾，我集中在两件事上：响应式适配和交互状态。Stitch 生成的页面在375px下看起来正常，但一拉到768px以上，卡片还是单列，白浪费宽度。我在提示词里补了一句“768px以上时，月度汇总卡片与明细列表改为两列布局”，并给出了具体断点规则，它很快就调整好了。

交互状态这块我一直很在意，因为AI默认生成的按钮没有hover态和active态，开关组件没有禁用态。我在工单里专门要求“为所有可点击组件补充hover和active状态，使用CSS变量控制颜色变化”，它在新版本里给每个按钮都补上了过渡效果。这个环节如果你不在第一版就写清楚，后面单独提出来让AI加，它往往只会改一个全局样式了事，不够精准。

最后我检查了几个关键细节：空列表时页面不能是一片白，需要显示插图和“暂无记录”文案；加载状态要有骨架屏占位；真实数据字段和mock数据字段完全一致。把这三个“非视觉”细节也约束进提示词后，这个页面才算能拿出去做正式开发。视觉上它能看，逻辑上它可用，这就不是“AI随机发挥”，而是一张可落地的UI交付物。

我个人在实际操作中的体会是，Stitch 这类工具真正的上手门槛不在“会不会用”，而在于“愿不愿意在生成前多花十分钟整理设计工单”。很多人图快，结果在迭代里花了一个多小时跟它互相拉扯，算下来反而更慢。我现在的工作流是先给自己写工单，再把它翻译成带令牌、带组件清单、带禁止项的提示词，最后用组件面板做局部微调，整个流程最多三轮就能出可用的界面。

最后分享一个小技巧，我习惯让AI把颜色、圆角、间距统一写到 CSS 的自定义属性:root{}里，而不是散落在各个组件中。这样后续想改主题、适配暗色模式，只需要换掉这十几个变量，所有组件都会自动跟随。你也可以把同一份:root{}变量用在多个页面的生成提示词里，这样即使每个页面都是单独生成的，最终拼在一起也会像同一个设计系统出来的产物。