途虎设计智能体：从 Figma 拼装到规范工程化闭环

项目分四阶段推进：先在 Figma 内用组件库完成拼装提效；再升级为「设计知识库 → HTML 原型」可预览交付；随后面向业务 / 产品自助出稿，建设质量保障与强约束流程；最终把设计硬约束、专业指南与 Token 沉淀为可执行的 Agent Skill、自动检测 Hook，并配套可视化编辑、元素定位与本地预览手册，形成「规范可执行、改码可约束、质量可检测」的工程化闭环。设计师逐步从主操作者，转为规范沉淀与质量抽检的支撑角色。

阶段一Figma 内组件拼装提效

主用户：设计师｜交付载体：Figma 组件库拼装稿｜目标：先把「重复页面」从零画变成规范拼装

阶段定位

智能体能力建设的起点，不是直接跨到代码生成，而是先解决设计侧最高频、最确定的问题：大量页面其实可以由既有组件按规则拼装完成。阶段一将工作收敛在 Figma 内部，围绕组件库做「识别—匹配—拼装—微调」，验证自动化提效是否成立，并为后续知识库与 HTML 交付积累结构化资产。

核心做法

• 组件优先：页面生成以组件库拼装为主，限制自由绘制，保证规范一致。
• 规则匹配：根据页面类型与模块诉求，匹配导航、列表、卡片、坑位等既有组件。
• 模板化拼装：沉淀首页、列表、详情等常见结构模板，缩短从需求到初稿时间。
• 设计师闭环：Agent / 半自动流程负责拼装初稿，设计师做布局取舍与细节精修。

阶段价值与边界

• 价值：快速验证「组件复用率高、拼装可提效」；统一视觉与交互规范；为知识库沉淀组件描述与页面结构。
• 边界：交付仍在 Figma，非设计角色参与门槛高；难以支撑业务 / 产品直接出稿与多角色无门槛预览。

阶段一成果

• 确认重复性界面需求适合「组件拼装」路径，而不是每次从零设计。
• 沉淀可复用的组件匹配与页面结构经验，为后续知识库建设打底。
• 暴露 Figma 交付对业务 / 产品协作的门槛，推动进入 HTML 交付阶段。

阶段二从设计知识库到页面原型自动生成

角色：项目负责人 / 产品经理 / 核心开发者｜周期：2026.3 – 2026.6｜交付载体：375×812 可预览 HTML

项目概述

在阶段一 Figma 组件拼装验证可行后，进一步将「知识结构化 → RAG 检索接地 → LLM 规划再渲染 HTML」串成可复用工作流。交付载体从 Figma 升级为 375×812 可预览 HTML，让产品、设计、研发更早对齐。本阶段目标是能生成、能预览、能协作；独立设计质量检测放在阶段三。

立项论证（样本可行性，非验收 KPI）

同步调研 Figma Make、Magic Patterns 等：通用生成强，对企业内组件库 / 规范 / 历史资产的可检索调用弱，多角色预览不足，明确自研方向。

体验框架：RICH

借鉴 Ant Design X 等 Agent 界面范式，落地为途虎设计搭档体验：

• Role 角色：Agent 负责检索与初稿；设计师保留判断与精修，不把 Agent 当终稿作者。
• Intent 意图：LLM 抽取页面目标、模块、字段、交互等结构化槽位；不确定则展示待确认项。
• Conversation 会话：多轮反馈驱动再生成；控制单轮上下文，避免历史无限堆叠。
• Hybrid UI 混合界面：对话、任务状态、命中组件/规则、HTML 预览同屏，检索依据可见。

技术链路与五段任务流

技术：知识库结构化入库 → RAG 召回并要求引用命中条目（降幻觉，≠合规质检）→ LLM 先规划模块结构再渲染 HTML → 人在回路预览精修。

1. 唤醒：选择首页 / 列表 / 详情等任务模板，明确尺寸与业务场景，缩小生成空间。
2. 表达：输入自然语言、Markdown 规范、组件说明等；附件进上下文前做范围裁剪。
3. 理解：LLM 提取目标、结构、文案、数据项与交互，输出可检查的结构化理解。
4. 确认：展示命中的知识库、组件与布局规则引用列表，降低黑盒感。
5. 反馈：输出 HTML 预览，自然语言迭代后精修；本步不做硬约束机检与自检留证。

系统架构闭环

设计知识库 → RAG 语义检索 → LLM 规划与生成 → HTML 预览评审 → 人工精修。关键不是「让 AI 画图」，而是把内部设计知识转化为可检索、可生成的结构化资产。此阶段以生成与预览协同为主，尚未建立独立的设计质量检测环节。AI 边界：召回不等于规范通过；LLM 仍可能漏模块；多方案受 Token/时延约束，宜少量对照。

使用前后对比

阶段二成果

• 交付载体由 Figma 转为可直接预览的 375×812 HTML，打通多角色评审。
• 样本可行性在工程上得到验证：重复性结构需求可出可讨论初稿；119/150、75.3% 表述的是覆盖空间，本阶段不宣称质量验收完成。
• 红虎、蓝虎业务线复用「知识库 + 生成 + 预览」路径，验证可复制性。
• 协作升级为共同预览反馈；同时暴露「能生成仍不可信」，推动阶段三补质量检测。

阶段三质量保障与流程优化

主用户：业务 / 产品（直接产出设计稿）｜设计师：非日常主使用方，更多参与规范沉淀、硬约束定义与抽检 / Review

使用角色重新定义

阶段一完成 Figma 组件拼装验证，阶段二打通「Agent + HTML」后，真正高频使用的人逐渐变成业务与产品：他们需要快速出一版可讨论、可评审的设计稿，而不是再排队等设计师开稿。设计师不再是主操作链路的中心，而是把经验沉淀为规则、组件与 Review 标准，在关键节点抽检。

为什么必须做阶段三

当「谁都能生成」之后，问题从「会不会画」变成「生出来能不能信、能不能交」。阶段一、二解决了拼装与 HTML 交付，但阶段三之前没有设计质量检测环节——没有系统化自检、硬约束闸门与 Review Agent，合规主要靠人工肉眼与口头确认。业务侧最常见的失败并不在审美，而在流程与证据：

• 流程跳步需求还没说清，就直接进入代码实现，后期大改。
• 理解偏差复杂任务缺少澄清，Agent 按错误假设出稿，反复返工。
• 质量无证口头说「做完了」，但没有自检记录，评审仍要靠人肉盯。
• 上下文浪费提示词过长、历史资料堆叠，Token 飙升，响应变慢、成本变高。
• 资产乱用该复用历史 HTML / 知识库时从零生成，风格不一致、重复造轮子。

阶段目标

在 HTML 交付能力之上，面向业务 / 产品自助出稿，主导建设「需求分析 → 计划评审 → 代码实现」全链路强约束与闭环反馈，让非设计同学也能走出一条「说得清、生得对、交得出、查得了」的路径。

全链路强约束：怎么走完一条可靠出稿路径

五大机制设计

1）需求输入侧治理

业务同学最容易「一句话开工」。阶段三把输入侧做成闸门：先识别意图难度，再决定是直出还是澄清。澄清问题控制在 ≤3 个，既避免审讯式问答，又确保关键信息到位——背景是什么、目标指标是什么、策略边界在哪里。

2）复杂任务 Plan 框架

Plan 不是给设计师看的设计说明，而是给业务 / 产品看的「执行清单」。模板包含：

• PRD 解构：页面类型、模块清单、主流程与异常态。
• 指标对齐：这次改版要对齐的业务目标或体验指标。
• 历史查询：业务逻辑、冲突点、可借鉴经验、Wiki、数据源、历史设计稿。
• 策略输出：信息架构、视觉层次、交互模式建议。
• Token 限额：限制 Plan 与上下文总量，防止「资料堆越多、生成越漂」。

3）历史资源取源优先级

为业务自助出稿建立明确取源链路，减少「每次都从零猜」：

4）交付自检机制

业务交付前先过「能不能交」清单，而不是把问题留给评审会：

• 流程完整性：是否跳过澄清 / Plan / 实现中的必经步骤。
• 视觉严重问题：错位、重叠、大面积占位图等不可评审项。
• 交互死链：点击无响应、页面无法滚动、弹层无法关闭等阻断体验问题。

自检结果作为「验证证据」随交付物一起流转，改变以往口头完成、无据可查的状态。

5）设计 Review Agent 解耦

生成链路服务业务出稿；评审能力独立成 Review Agent，避免长链路互相干扰。Review 关注「业务稿是否踩线」，而不是替业务重新做设计：

• 文案是否重复、空洞，是否与业务逻辑一致；
• 硬约束是否遵循（圆角、间距、安全区等）；
• 组件覆盖度是否达标，有无随意自造组件；
• 全流程文案是否一致（标题、按钮、空态、提示语）。

设计师通过规则配置与抽检介入，把经验规模化，而不是成为每个需求的瓶颈。

业务出稿前后变化

阶段三成果与数据表现

• 业务 / 产品自助出稿时，流程跳步与硬约束错误率显著下降，逼近「错误率降低约 60%」目标。
• 交付具备可核验证据，评审从「感觉不对」转向「哪一条没过」。
• 精简提示词与结构化 Plan 后，相同需求下 Token 消耗约降低 40%，响应更快、成本更可控。
• 复杂任务完成率提升约 20%，因需求模糊导致的反复改错明显减少。
• 设计师从日常改稿中释放出来，更多投入规范沉淀与高难度样本处理。

技术沉淀与向阶段四延伸

• 沉淀可复用的质量保障流程模板：难易判断、Plan 结构、自检项、Review 维度。
• 沉淀可量化的评审方法，如硬约束遵循比例、组件覆盖度等计算公式，便于持续迭代阈值。
• 将「口头规范」进一步拆成硬性约束、设计专业知识与 Token 表，为阶段四 Agent Skill 与自动检测打底。
• 探索将最终生成 HTML 自动写入 Git，实现版本化管理与追溯，为业务持续改版与 CI 流水线打基础。

阶段四设计流程工程化与 Agent Skill 体系

角色：设计流程定义 / Skill 建设 / 规范检测工程化｜周期：2026.7 – 2026.8｜落地：Claude Code / Cursor Skill + Hook + 脚本 + 编辑器 + 定位工具｜验证：加油等业务线复用

阶段定位

阶段三解决了「业务能不能按流程自助出稿」；阶段四继续下沉一层：当改动发生在真实业务源码（Vue / React / 小程序等）时，如何保证 AI 与人工都按途虎移动端设计流程落地——而不是只生成一份独立 HTML。答案是把设计流程拆成可判定文档，封装为可复用 Skill，再用 Token 脚本与 Hook 做自动闸门，并用可视化编辑、元素点选、本地预览降低人机协同成本。

设计流程沉淀：硬约束 × 专业指南 × Token

将原分散的设计经验拆为三层文档，供生成式 Agent、走查与源码改稿共用；冲突优先级为：页面骨架与强制组件 > 安全无障碍 > 结构完整 > 设计专业建议。Agent 生成或检测时：先过硬性约束，再过设计专业知识。

硬性约束交付前快检（摘录）

• 顶栏须用规范 Navigation Bar；底栏须用 Home 键指示条（非 Tab 底栏替代）。
• 页面宽 375px、最小高 812px；全页 Flex，禁止绝对定位拼接（浮层 / 角标豁免）。
• List 外层水平 padding = 0；Card 距页面左右 16px、内容 padding 12px；同区不得混用两套间距。
• 金额用 tuhufont；分割线 0.5px + 体系灰；间距 / 颜色 / 圆角 / 描边 / 阴影仅允许 Token 表合法值。
• 任一不满足 → 不合规。

设计专业知识走查要点（摘录）

• 主视觉流：标题 → 价格 → CTA 垂直序正确；单视觉区域仅 1 个强 CTA。
• 现价 red6 + 最大字号；原价有删除线且权重低于现价；无原价字段时不展示删除线价。
• 列表同类卡高度差 ≤8px；核心转化路径 ≤2 步；次要描述不超过 2 行。

双 Skill 主链路

在 Claude Code / Cursor 中沉淀两套可迁移 Skill，并在「加油设计生成与检测」等业务包中复用同构结构（Skill + references + hooks + settings）。

1）design-implement：设计规范在源码内落地

面向当前项目已有源码改 UI，不另生成独立 HTML demo。最高优先级是风格双源约束：代码须同时对齐「项目已有组件 / 变量 / 单位习惯」与「途虎设计 Token / 硬约束 / 专业指南」。禁止自造风格、同功能自造组件、跳步直接改样式。

2）design-token-check：Token 静态检测与自动修复

对本次 git diff 新增 / 修改行做样式合规扫描：先按单位规则换算为实际渲染 px，再与合法 Token 表比对；明确违规可自动改为最接近合法值并汇报。

• 支持全量、`--staged`、分支 diff（如 CI：`origin/master...HEAD`）。
• 单位换算统一维护（px / px2rem / rem / rpx / 设计稿倍率），避免各脚本各写一套。
• 百分比、CSS 变量、未配置 REM_BASE_PX 的 rem、语义角色等标记「需人工确认」，禁止瞎改。
• 顶栏组件、页面边距语义、标题/价格字号比例等仍由人工或组件审查补齐，脚本不越权。

自动化嵌入：PostToolUse Hook

通过 settings 将检测挂到 Agent 写码之后：匹配 Edit|Write，触发圆角或全量 Token 检测脚本。Hook 会对未跟踪新文件临时 git add -N 纳入 diff，检测完再 reset，不留持久副作用；违规时可 block 并回传原因，形成「改完即检」闭环。

配套工具：缩短定位、编辑与预览路径

UI 本地预览手册（UI_LOCAL_DEV_GUIDE）：标准化 blackgold-ew 等仓库的环境检查、Node 版本、分支保护（禁止在 master 改码）、依赖安装与 npm start；UI 同学用固定提示词驱动 Agent 按 8 步执行，降低设计参与源码验证门槛。不执行 build / 打包。

业务线复用验证

在「加油设计生成与检测」文档包中复用同构能力：design-implement（含硬约束 / 专业指南 / Token / 素材 references）、design-token-check、PostToolUse Hook 与 settings。证明规范与 Skill 可跨业务线复制，而不是绑定单一仓库路径。

阶段四成果

• 设计流程产品化：硬约束 + 专业指南 + Token，可判定、可执行、可走查。
• AI 可控改码：意图判定 → 澄清 / Plan → 定位复用 → Token 映射 → 自检，全链路闸门。
• 质量可自动化：diff 级 Token 扫描与自动修复，Hook 嵌入 Edit/Write 之后。
• 人机协同提效：可视化编辑 + 元素点选定位 + 本地预览手册，缩短「找文件—改样式—看效果」路径。
• 跨业务可复制：加油等场景验证同构 Skill / Hook / 规范文档可迁移。

阶段四前后变化

四阶段关系