企业官网建设流程全解析

现在做 AI 产品、尤其是涉及界面生成方向的团队，都在聊"图工程（Graph Engineering）"。以前我们讲程序化生成、讲模板拼装，后来讲大模型直接出 UI，再往后大家发现一个尴尬现实：模型能不能生成是一回事，生成出来的东西好不好、符不符合设计规范、能不能直接交到用户手里是另一回事。这时候，"图工程"就变成了一个玩法极其丰富的领域——它不只是知识图谱、不只是数据结构里的图，它更接近一种工程思维：把界面元素、设计规范、交互逻辑、评估维度全部结构化地组织起来，让 AI 不仅能产出 UI，还能像资深设计师一样有自己的判断力。

这篇文章想分享的是我在这条链路里最实战的一块经验：UI 设计评估技能的开发与沉淀。也就是说，怎么从零搭一套可复用的评估能力，让 AI 产出的界面有人把关、有数据支撑、能持续迭代。这不是纯理论，也不是某个模型的黑盒魔法，而是我和团队在多个项目里反复验证过、可以直接抄的工程化打法。适合正在做 AI 生图、智能设计工具、低代码平台，或者想把自己的设计评审流程数字化的人来参考。里面有一部分是方法框架，有一部分是实操记录，还有不少是踩坑之后才明白的细节。

1. 图工程在 UI 评估中的定位与价值

1.1 先搞清楚图工程到底管什么

很多人第一次听到"图工程"这三个字，第一反应是复杂网络、图数据库、社群挖掘那一套。但在 UI 设计评估这个场景里，图工程的核心不是去爬网络关系，而是把评估这件事本身建模成一张可执行的图谱。节点是评估项，边是评估项之间的依赖和冲突逻辑，整张图就是一个人机协作的评估决策网。

举个例子。你让大模型生成一个电商首页的 UI 图，传统做法是生成完直接丢给设计师肉眼审一遍。设计说得出口的只有"差点意思""不够高级""这块有点乱"。这种反馈对模型改进毫无帮助，因为它不是结构化的，没法回流到训练数据里。而图工程要做的事情，就是把"差点意思"拆解成具体节点：色彩对比度是否达标、字体层级是否清晰、卡片间距是否符合 8pt 栅格、按钮的点击热区是否足够。每个节点有独立的判断逻辑，节点之间又有联动关系——比如对比度不达标可能连带影响可读性，可读性又影响用户完成任务的效率。整张评估图一旦建好，AI 就能像一个带打分表的设计总监一样工作。

这套思路最早我们从缺陷归纳开始做的。项目里投喂了大量设计师评审记录，慢慢发现人工评审看似主观，其实背后有高度一致的范式：先看整体感受，再查视觉细节，再走交互流程，最后落到可用性风险。这个范式就是图工程最初的骨架。它解决的最大痛点，是把"评估靠拍脑袋"变成了"评估靠图谱驱动"。

1.2 为什么 AI UI 评估绕不开图结构

如果是传统软件测试，评估逻辑基本是线性的：功能点一个接一个验证，每项 pass/fail。但 UI 评估天然是网状的。一个按钮的颜色、位置、文案、状态，四个维度互相影响；一屏内不同模块的视觉权重互相作用；一个交互链路里多个页面的反馈方式要一致。你没法用一个线性的 if-else 列表去穷举这些关系，但用图结构，天然就能表达"模块 A 的问题会在什么条件下触发模块 B 的扣分"。

再说一个更实际的原因：用工成本。如果每评估一轮 UI 都要靠人来打分，那 AI 生图的效率优势就全被抹平了。我们的项目里，模型吞吐一轮可以出 30-50 张图，人工全量审根本不现实。所以必须把评估能力前置到模型侧，让模型在生成后、交付前，自己跑一遍评估图谱。这里图工程的价值就显现出来了：它能把人类设计师几十年的经验量化成一批节点和边，然后在不眠不休的前提下跑几万次评估，把质量门槛守在最前面。人工只需要处理图谱判定为"有争议"或者"中风险"的边界案例。

节点化的优势还体现在快速调整上。某个阶段我们特别注重视觉表现力，那评估图里"视觉冲击力"这个节点的权重就调高；某个阶段我们在打磨可用性，那"指引清晰度"和"误操作风险"的相邻边就加强。这种灵活度，是传统的整体评分模型做不到的——它一改全局就变，容易顾此失彼。图工程能精确到分支调整，这是它在这个场景里不可替代的核心原因。

1.3 从"评估"到"技能开发"的思维转变

大多数团队做评估，停留在"打一个分"的层面。图工程思维下，评估不是打分，是技能开发。什么意思？就是你得相信 AI 的评估能力本身是可训练的，不是上线了一个规则系统就完事。它的评分依据、它的覆盖率、它对设计趋势的敏感度，都要像带新人一样，一点点培养起来。

具体落到执行上，就是不能把评估图谱当成静态配置。我们内部把它当作一套"会成长的技能包"。比如最初图谱只有 12 个节点，覆盖色彩、字体、间距这类基础视觉项。跑了两周后发现，视觉类节点都还敏感，但交互类节点的召回率不行——AI 界面上的错误状态、hover 态、空态，这些评审中经常被忽略。于是图谱升级到 26 个节点，并且给交互节点的边加上了时间因素：同一个页面，首屏阶段关注什么、用户滚动后关注什么，是完全不同的评估焦点。图谱一旦开始按场景动态调整，它才真正从一个静态检查表变成一套"技能"。

这点对想复制的团队来说极为关键。别指望第一天就搭出完美评估图，也别迷信某个业界标准直接抄过来就能用。评估技能开发是一个持续喂养的过程：每次人工介入拦截下来的问题，都要反查图谱哪里漏了、哪里判断模糊，然后针对性补丁。迭代到后面，图谱的每个节点背后都有明确的样本支撑，评审意见中"为什么扣分"也有据可循。这个阶段的评估能力，才谈得上"开发完成"。

2. UI 设计评估技能的搭建方法论

2.1 评估维度的拆分与层级设计

搭评估技能的第一步，永远不是写代码，也不是找模型，而是把评估维度拆干净。我建议拆成三个层级：体验层、规范层、风险层。三个层级之间不是并列关系，而是递进关系。

体验层最接近人类直觉，回答的是"第一眼好不好看、舒不舒服"。拆出来的子项包括视觉层级是否清晰、主次信息是否分明、风格调性是否统一。规范层更理性，回答的是"做没做对"：色彩对比度、字体字号体系、间距栅格、圆角一致性、图标粗细规范这些硬指标。风险层评估的是"会不会出事故"：核心操作是否容易被误触、错误提示是否充分、空数据状态是否提供了有效引导、无障碍访问是否达标。三层各司其职，体验层负责掐住审美下限，规范层负责守住专业度，风险层负责兜住用户底线。

层级设计好了之后，每层内部还要画节点关系。比如体验层的"视觉层级清晰"和规范层的"字体字号体系"是强关联的，字号梯度混乱几乎必然导致层级模糊，但两者也有不同：规范层可以做客观度量，体验层更多依赖模型对"整体感受"的判断。所以在搭建图谱时，我会把规范的节点放在底层作为硬性过滤条件，体验的节点放在上层作为加权参考。逻辑上，任何硬性过滤失败，直接触发降级评估，不再浪费时间跑上层的高成本模型推理。这个"先硬后软"的顺序，能让评估成本降低不少，我后面实际验证过。

2.2 硬性指标与主观判断的平衡策略

凡是做 UI 评估的人都会遇到一个灵魂拷问：审美这么主观的东西，机器凭什么打分？我的回答是：审美里其实有 70% 是可量化的客观规律，剩下 30% 才留给主观偏好。评估技能开发能不能成，关键看你有没有把那 70% 挖干净。

硬性指标这块不用多说，WCAG 对比度、8pt 栅格、字体最小可读尺寸、可点击区域不小于 44x44px，这些都是现成的标准，直接入图谱当硬节点。真正考验功夫的是主观判断部分怎么半量化。我们的做法是引入"基准锚定法"：定期挑一批在各维度上表现优秀、中等、偏差的样图，作为评估参照系。模型在评估新图时，先做相似度比对，找到最近邻锚点，再以锚点的已知评分作为先验，对当前图打分。这个做法本质上把纯主观判断转变成了"相对位置的判断"，稳定性提升明显。

另外要注意，不要试图在同一个模型里同时既做生成又做评估。经验之谈是，生成模型和评估模型最好分开。生成模型追求创造力和多样性，评估模型追求稳定性和可解释性，两者目标函数不同，硬揉在一起通常两边都做不好。我们现在的技术栈是：生成阶段用擅长大规模设计的模型，评估阶段跑一套独立的、精调的评分模型加上部分规则引擎。在评估这侧，不求语言花哨，只求判断稳定。

2.3 评估流程的编排逻辑

图谱有了、指标拆好了，接下来还要把它们编排成一个可执行的流程。这步如果做得糙，好图谱也会被执行出烂结果。

我的编排逻辑由粗到细分四个阶段来走：全局体检、区块细查、链路走查、综合定级。全局体检阶段，模型对整张 UI 图做一次快速扫描，目标是用低成本模型快速识别出明显硬伤，比如对比度不足、元素溢出、内容截断。这个阶段像体检里的基础测量，不求全但求快。区块细查阶段，把界面按坐标划分成多个功能区，比如导航区、内容卡片区、操作栏、反馈区，每个区块独立跑一遍评估图谱的对应子图。这里要注意区块之间的上下文——一个区块单独看可能都合格，但并排放在一起可能有视觉权重失衡，所以区块评估结束后还要跑一轮"区块关系检查"。

链路走查针对的是多页面场景。输入是一组 UI 图组成的用户流程，评估图谱会检查页面与页面之间的逻辑连续性和视觉一致性。比如列表页到详情页，筛选条件有没有传递；比如从暗色按钮到主色按钮，全流程里主操作色是否保持一致。综合定级是最后一步，把所有维度的得分汇总，按权重算出总分，同时输出一句人话结论，比如"整体优秀，但表单区按钮层级略显混乱，建议降低辅助按钮的视觉权重"。这一步最关键，因为评估做出来是要被人看、被人改的，光给分数不给解释，落地价值折半。

整个流程跑下来，一张图从输入端到输出端大约要经历三轮不同模型的计算。成本不低，但对比人工评审的耗时和一致性劣势，这点算力投入完全值得。更重要的是，每一轮评估结果都会写入评估日志，作为后续训练迭代的素材，这部分后面再详细说。

3. 实操中出现的高频问题与干扰项处理

3.1 大模型评估中的幻觉与偏见

把评估工作交到大模型手里，最让人头疼的就是幻觉和偏见。明明图上按钮是蓝色的，模型偏说成绿色；明明只有两个模块，模型非说视觉元素分布均匀，但实际上第三个模块已经溢出边界了。这类问题在初期跑了大量真实案例后，如果发现出现频率高，我们考虑通过几个方向去缓解。

第一个缓解方向是交叉验证。同一张评估图，让模型先按整体印象打分，再按区块逐项打分，最后把两者作对比。如果整体印象分和区块汇总分差距过大，系统会自动标记"疑似幻觉"并降低该次评估的可信度。第二个方向是引入目标检测模型作为前置预处理器，先把 UI 图中的按钮、文本块、图片区域、卡片边框等元素识别出来，输出结构化的元素清单给评估模型。评估模型基于清单去判断，而不是凭肉眼看图，幻觉率会显著下降。第三个方向是刻意让评估模型输出推理依据，要求它在扣分时引用具体坐标区域和具体的视觉特征描述。这一步能过滤掉大量"言之无物"的模糊评分。

偏见问题同样麻烦。模型的评估结果会被当前热门的设计风格影响，比如前两年流行玻璃拟态时，模型对玻璃质感元素的评分普遍虚高。我们的处理策略是在训练数据里刻意加入"风格中立样本"——同一张抽象的布局图，分别用不同风格渲染，评分标准只聚焦布局逻辑，而不是风格表现。这样图谱对"这个方案适不适合当前场景"的判断会更冷静，不至于被时尚风向带跑。

3.2 多页面一致性评估的难点

UI 评估单页做得好还不够，实战中真正折磨人的是多页面场景的评估。多页面评估难在一致性涉及的内容太多了：视觉风格是否统一、交互模式是否一致、文案语气是否有连续性、页面间的跳转逻辑是否顺滑。

我们在实际做链路走查时，踩过一个典型坑：某电商项目里，列表页的筛选按钮用了带边框的次要按钮样式，到了详情页，筛选相关操作突然变成无边框的纯文字按钮。两个页面单独看都很正常，但放在一个链路里，用户会感觉"到了另一个网站"。这就是多页面一致性问题。解决这个问题的思路是给图谱增加"跨页面对齐检查"节点组，专门追踪两个页面对同一类元素的表达差异。

这类节点组的工作机制是这样：先为每个页面提取一组设计 token，比如主色值、圆角半径、字体族、按钮风格属性。然后页面间的差异值可以直接计算。超过阈值的直接标记为一致性风险，不依赖模型主观判断，纯靠规范化计算，结果相当可靠。同时我们也保留了一个模型判断层，用于处理更抽象的"风格感觉"一致性，这部分给主观分，但权重低一些。通过"硬算差异 + 软评风格"的组合方式，多页面一致性评估的可靠度提升明显。

3.3 样本偏差对评估能力的影响

评估技能的成长离不开数据喂养，但数据的质量分布直接决定能力的短板。很多团队会犯一个错误：因为收集方便，标注样本七八成都是电商类页面，做完评估模型后发现它对政务类、教育类、工具类 UI 的评估准确率惨不忍睹。这就是样本偏差导致的评估能力偏科。

我们在早期也踩过这个坑，后来定了一条规矩：每轮收集的评估样本，按场景类型强制配额。电商场景不超过 30%，工具类不低于 20%，内容阅读类 20%，剩下留给表单、数据可视化、异常状态界面等长尾场景。配额制度施行之后，评估技能对陌生场景的泛化能力提升非常明显。同时，样本标注时也要刻意均衡难易度：不要全是明显的好图和烂图，中间地带的模糊样本才是评估技能的试金石。模糊样本里设计师的主观分歧，会逼着评估图谱思考边界条件，这是高质量评估能力不可替代的养分。

如果发现某个场景的评估结果总被人工驳回，不要急着调模型的温度参数，首先回头检查一下这个场景在样本库里的占比。大概率能找到问题根源。一个健康的评估技能，需要的是分布均衡、层级丰富、边界情况充足的数据生态，而不只是大而全的表面繁荣。

4. 从评估结果到模型迭代的闭环设计

4.1 评估日志的结构化沉淀

模型评估能力真正的护城河，其实是评估日志。每跑一次评估，不管结果好坏，都会在日志里留下痕迹。这些痕迹积累到一定量级，就是模型迭代最宝贵的原料。但前提是日志不能只是随意堆叠，必须结构化到可以直接消费的程度。

我们的日志设计一般包含五个核心字段：样本标识、评估场景类型、评估图谱版本、各维度得分明细、人工复核结果。前四个字段用来追踪 AI 的表现趋势，最后一个字段尤其关键，因为只有人工复核过的结果，才有资格进入训练集。这里的一个小建议是，在人工复核界面上强制填写"修正原因"——比如"视觉分打高了，实际存在背景与文字对比度不足"或"可用性风险漏报，表单提交按钮与底部导航间距小于安全距离"。这些修正原因，会成为后续强化训练里最有价值的监督信号。

还有一点容易被忽略：日志里一定要保留"模型当时的推理依据"。哪怕这段文字是模型输出的分析内容，保留下来不仅能定位错误逻辑，还能在后续做模型精调时用作思维链示例。我们训练评估模型的"自我修正"能力时，批量提炼了几百条优秀的推理依据，作为少样本示例，效果比广告里宣称的本质改善都来得实在。

4.2 自动化回归与质量门禁

当评估技能成熟到一定程度，就要把它嵌入到生成流程里，形成自动化质量门禁。说白了，就是为 AI 生产 UI 的过程装上"出厂质检线"。我用一套三层门禁来控制质量：层一为快速规则拦截，层二为评估模型打分，层三为高危样本复审。

快速规则拦截跑最简单的人工规则，比如图片分辨率是否达标、输出尺寸是否符合预设、是否有元素超出安全边界。这一层几乎是零算力成本，每分钟能扫几十张图，专门过滤低级错误。通过层一的图，进入评估模型打分环节。这里使用的是独立评估模型，按前文说过的评估图谱跑全量维度，输出总分和明细分。层三的触发条件是"中高评分但存在某个关键维度扣分"或者"低评分但模型自信度过高"，这些样本需要推给一个轻量级人工复审队列，确保没有误杀也没有漏网。

三层门禁设计好吗？好在它能分级处理不同质量的问题，算力花费可控，人工介入量也可控。刚开始搭这个门禁的时候，我们设定的合格线比较激进，导致大量生成图被打回重做，产品创新度反而下降了。后来调整思路：门禁不是要卡掉所有不好，而是要识别风险并分级放行。优秀的图直接进展示，中等图可以继续迭代，差图绝不进入用户视野。这样既保证了下限，又给了生成模型足够的探索空间。

4.3 评估技能的长效迭代机制

最后想聊聊怎么让评估技能本身持续进化，而不是跑几周就过期。UI 设计规范在变，平台用户习惯在变，模型能力也在变。评估技能如果停止更新，就会变成一套过时的教条。

我们的长效迭代机制，用一句话来总结就是：来自每次人工复核的反哺，都按规范回流。每周固定一次评估偏差复盘，把本周人工修正过的评估记录全量导出来，按错误类型聚类。如果发现某类错误扎堆出现，就升级图谱节点或调整评分权重。如果发现某个维度几乎没有误判，可以适当降低该维度的推理成本，把算力省给偏弱的维度。这样做的直接效果是，图谱越用越瘦，真正有效的节点权重越来越高，无效路径被自动淘汰。

另外建议团队里至少要有一个具备设计师背景的人，深度参与评估日志的检视。工程师看日志关注模型行为，设计师看日志关注设计本质，交叉审视才能发现很多单视角看不到的问题。比如有些 AI 评分极好的界面，设计师一看就摇头，原因是"整体太平均，没有视觉重心"。这种抽象的、全局性的审美判断，短期很难在规则里体现，但通过设计师的持续输入，图谱会慢慢长出对应的节点。这种人与模型互相培养的过程，才是图工程在 UI 评估里最有魅力的部分。

5. 实战心得与可复制的起步建议

5.1 最小可行评估图谱的搭建路径

听了这么多理论和框架，如果要在自己项目里起步，最容易的切入点是什么？我的建议是：跳过复杂的完美设计，直接搭一个最小可行评估图谱，先跑出第一版日志，再谈优化。

最小可行图谱包含多少节点合适？我的经验是8 到 12 个节点就够。具体选哪类节点，优先级参考是：基础视觉规范（对比度、间距、字体层级）、关键元素完整性（主要操作按钮、标题、导航入口）、内容重叠检测、明显溢出检测。这套图谱不需要覆盖所有设计细节，但一定能够拦截住最伤用户体验的低级问题。建好之后立刻接入生成流程，拿真实流量做测试。第一批评估日志大概率惨不忍睹，这是正常的，因为模型对 UI 的感知能力还是空的。关键是坚持至少两周的日志积累，两周后再去分析哪些节点误判率高、哪些场景覆盖缺失，然后做第一轮图谱升级。

一个很容易被忽视的提醒是：图谱搭建初期，人工复核率要设高一点。哪怕 90% 的 AI 评估结果都人工复核，这段时间的"麻烦"都是值得的。因为早期的评估模型完全是白纸，没有充分的人工校准，后面所有数据都会带偏。宁可在起步期多花人力把方向校准，也不要后期花十倍精力去纠偏。

5.2 团队协作中的人机分工模式

评估技能开发这件事，从来不只是算法工程师的事。一个成熟的团队协作模式里，设计师、工程、产品三个角色的职责边界要非常清楚。

设计师负责定义标准、裁决争议、持续输出评价经验，他们的时间产出是"评估维度的合理性判断"和"争议样本的最终裁决"，一定不要让他们机械地逐张打分。工程师负责把标准变成代码、搭好评估管道、分析日志数据，他们产出的评估系统的稳定性和可扩展性。产品经理负责从用户视角审视评估技能的方向是否与产品定位对齐，比如产品主打高效工具属性，那评估图谱就要更偏功能清晰度和操作效率，而不是追求视觉炫技。

这个分工里，我最想强调的其实是设计师角色的前置化。很多团队把设计师安排在评估链路的最后一道工序，AI 出完图设计师再看。这个模式效率太低。更好的安排是，设计师直接参与到评估图谱设计的最初阶段——也就是"哪些节点该存在、哪些节点权重高"这个环节。设计师把评审经验前置到图中，模型只是经验的执行器，而不是替代设计师。这样一来，设计师的生产力被放大了几十倍，模型质量也稳步提升，才是健康的协作形态。

5.3 快速上手的三个落地动作

如果今天就要开始，不读任何长教程，直接做这三件事就能快速跑起来。

第一件，整理过去三个月的人工评审记录，就算是很随意的聊天记录也行。从里面提取高频关键词，比如"对比度""稀疏""拥挤""看不清""按钮不明显"。这些关键词，就是评估图谱最原始的节点来源。第二件，选三个关键场景，每个场景找 10 张有代表性的 UI 图，覆盖优秀、中等、较差三个水平。人工给这些图打轮廓分，作为评估模型第一轮微调的对齐基准。这一步一两天就能完成，但它决定了你的评估技能的初始品味。第三件，搭一个最简评估管道：规则过滤器在前，评分模型在后，日志记录最后。哪怕模型用的是现成的开源模型，规则只做三几条，都先把链路跑通。

这三件事做完，评估技能的 1.0 版本也就有了。后续就是靠前面说的日志回流、人工校准、图谱升级这套循环去迭代。不管做哪个具体的 UI 产品方向，这套链路是通用的。

6. 常见问题速查：评估技能开发十大坑

6.1 需求与定位层面的坑

坑一：试图用一个普适模型解决所有 UI 场景的评估。结果必然是各场景都平庸。破解方法是一开始就按场景分模型或者至少分图谱分支。坑二：把评估技能做成离线的一次性项目。UI 趋势变化快，评估能力不做持续迭代，基本一个季度就废。坑三：没有给评估模型设定优先级。什么维度都高权重，等于什么都不看重。按产品阶段明确核心评估目标是正经。

6.2 数据与训练层面的坑

坑四：全量依赖公开数据集，脱离自己产品的真实 UI 分布。公开数据只能做预训练，自己做产品必须靠自有日志持续校准。坑五：正负样本比例严重失衡。如果日志里 95% 都是高分样本，模型会失去辨识真正的烂图的能力。刻意保留和补充低分样本，跟补充高分样本一样重要。坑六：标注数据时忽略了上下文信息。同样的一个界面元素，在不同业务场景里质量标准完全不同，脱离了页面目标去评分，标注质量就会大打折扣。

6.3 工程实现与协作层面的坑

坑七：评估流程里塞了太多环节，导致单张图评估耗时过长。解决思路是分级评估，低风险图走快速通道，高风险图才走全量评估。坑八：评估结果可解释性不足。只给总分不加解释，下游设计师不信任、不愿意用。务必让每个扣分点都附带位置和原因描述。坑九：评估模型和产品数据不同步。产品流程改版、交互重构后，评估图谱没有及时更新，导致新界面被旧标准误杀。坑十：团队没有明确评估能力的负责人。评估图谱是一个活系统，没有 owner，它就是一堆无人维护的规则文件，必然慢慢腐烂。

这些坑，我们几乎都踩过。列出来不是为了吓唬人，而是想说明：评估技能开发不是一锤子买卖，它是一项需要持续投入、持续对齐、持续迭代的工程能力。谁把这个过程跑顺了，谁就握住了 AI UI 质量的真正命脉。

我自己一路走下来最深的一点体会是：图工程在 UI 评估里最迷人的地方，恰恰不是它能完全替代人，而是它能让人把时间花在更值得的地方。设计师不再需要反复盯着平庸的生成图叹气，模型也终于有了可以对话的质量语言。这种协作的默契，比我预想的要来得更扎实、更有价值。如果你正准备切入这个方向，别纠结于一步到位，先从最小可行图谱开始，拿到第一批真实评估日志，这条路自然就越走越清晰了。