阶段一 · Figma 拼装
组件优先、规则匹配、模板化拼装。主用户是设计师，交付仍在 Figma，验证「重复页面可规范拼装」。
AI Agent · Design Productivity · TUHU UED
从 Figma 拼装到规范工程化闭环
四阶段推进：Figma 组件拼装提效 → 知识库到 HTML 原型 → 业务 / 产品自助出稿与质量闸门 → 设计硬约束、专业指南与 Token 沉淀为 Agent Skill、自动检测与协同工具。设计师从主操作者，转为规范与质量支撑角色。
TUHU Design Agent
生成一个途虎燃油车首页，包含车型区、搜索、快捷服务入口、运营资源位与商品推荐。
已识别页面类型：C 端首页。正在检索「车型区」「金刚宫格」「运营坑位」「375×812 移动端布局」相关规范。
输出 3 套可预览 HTML 方案，并标注命中的组件、布局规则和待人工确认项。
79.3%样本：UI 组件复用率
119/150样本：具备 Agent 出稿结构
↓60%跳步与规则错误目标
↓40%生成 Token 消耗目标
Skill+实现 / 检测双链路落地
FOUR PHASES
一条演进线：拼装 → 交付 → 自助 → 工程化
能力建设按阶段下沉：先验证组件拼装，再打通 HTML 交付，再让业务自助可靠出稿，最终把设计流程写入源码改稿与自动检测。
阶段二 · HTML 预览
知识库 + RAG 检索 + LLM 生成 375×812 HTML；RICH 协作体验。全员可打开预览，此阶段尚无独立质量检测。
阶段三 · 质量保障
补齐过检：意图判定、澄清、Plan、取源、自检与 Review Agent；主用户转为业务 / 产品。
阶段四 · 规范工程化
硬约束 × 专业指南 × Token；design-implement / design-token-check + Hook；编辑器、点选定位、本地预览。
RICH EXPERIENCE MODEL
用 RICH 框架定义设计智能体体验
借鉴 Agent 界面范式，落地为途虎设计搭档：检索 + 初稿生成可解释，设计师保留精修；不确定意图展示待确认，而非假装完全理解。
Role 角色
Agent 负责规则检索与初稿输出；设计师保留判断、取舍与精修，不把 Agent 当成终稿作者。
Intent 意图
从自然语言 PRD 抽取页面目标、模块、字段与交互等结构化槽位；有不确定则标出待确认项。
Conversation 会话
多轮反馈驱动再生成：替换模块、调整排序、补充状态；控制上下文，避免历史无限堆叠。
Hybrid UI 混合界面
对话、任务状态、命中组件/规则与 HTML 预览同屏，让检索依据可见，降低黑盒感。
TASK FLOW
从“输入需求”到“输出可预览原型”
五段体验流：唤醒 → 表达 → 理解 → 确认 → 反馈。确认步展示检索命中依据；本阶段不做硬约束机检与自检留证。
01 唤醒选择页面任务首页、列表、详情等模板，明确尺寸与场景，缩小生成空间。
02 表达输入 PRD / 规范自然语言、Markdown、组件说明；附件进上下文前做范围裁剪。
03 理解解析意图与模块LLM 输出可检查的结构化理解：目标、结构、文案、数据项、交互。
04 确认展示命中依据知识库条目、组件与布局规则引用列表，供人确认后再渲染。
05 反馈生成并迭代原型HTML 预览 + 自然语言再生成；质量检测闸门在阶段三补齐。
COMPONENT THINKING
把 AI 能力拆成可复用的体验组件
途虎设计智能体将 AI 能力拆成可复用的交互组件，沉淀稳定的 Agent 体验模式，避免每个需求都重新设计一套 AI 体验。
Welcome任务欢迎与能力说明
让用户知道智能体能生成什么、需要输入什么、结果能用于什么阶段。
Prompts提示模板
内置首页、列表页、活动页等高频模板，帮助产品和业务快速表达需求。
Attachments文档与规范输入
支持 PRD、页面结构、组件规范、业务文案等资料作为上下文。
Bubble生成过程反馈
用对话气泡解释当前正在解析、检索还是生成，减少等待焦虑（阶段二不宣称自动校验通过）。
ThoughtChain检索依据可视化
展示命中的组件、规则来源和待确认项，让人判断「依据是否站得住」，而非黑盒一次出图。
PreviewHTML 原型预览
输出移动端页面预览，产品、研发和业务无需打开设计工具也能评审。
SYSTEM ARCHITECTURE
知识库、RAG 检索、LLM 生成与预览协作
对业务：人人能打开预览、看得见用了哪些依据。对研发：知识库结构化 + RAG 引用命中 + LLM 先规划再渲染 HTML。RAG ≠ 质量检测；过检在阶段三。
设计知识库
页面模式、组件、布局规则结构化入库，优先可引用 ID。
→
RAG 检索
按意图召回相关规范与组件；生成时引用命中条目，降低臆造。
→
LLM：规划 → HTML
先出模块/字段清单给人核对，再渲染 375×812 预览页。
HTML 预览
产品、研发、业务直接打开对齐；阶段二尚无独立质检闸门。
←
设计师精修
保留判断权，处理视觉细节与复杂交互。
←
会话式再生成
自然语言改模块/排序后再生成；可视化编辑后续补齐。
BEFORE / AFTER
从设计师手动出图，升级为自助出稿 + 规范工程化
| 环节 | 使用前 | 使用后 |
|---|---|---|
| 需求输入 | 口头或文档描述，多轮对齐后才能开始设计。 | 自然语言/PRD 进入 Agent，输出可检查的结构化理解；复杂任务再 Clarification/Plan（阶段三）。 |
| 方案输出 | 设计师手动拼装组件，通常先输出 1 套方案。 | 可出 HTML 初稿预览；需要时少量对照方案。业务自助出稿能力在质量闸门后加强。 |
| 组件复用 | 依赖设计师经验手动搜索组件，容易遗漏规范。 | RAG 召回并展示命中依据；源码侧强制复用核查与 Token 检测在阶段四。 |
| 评审协作 | Figma 门槛较高，非设计角色理解成本大。 | HTML 全员可开；自检与 Review 证据随交付流转。 |
| 样式质检 | 人工走查，易遗漏圆角 / 间距 / 色值规范。 | Token 脚本 diff 扫描 + Hook 改完即检，可自动修复。 |
| 迭代与定位 | 每次调整都需设计师改稿；找文件靠 grep 猜。 | 自然语言迭代 + 可视化编辑 / 元素点选直达源码。 |
PHASE 03 · QUALITY
业务自助出稿：说得清、生得对、交得出、查得了
阶段一、二解决了拼装与 HTML 交付，但阶段三之前没有设计质量检测环节。当「谁都能生成」后，问题变成「能不能信」。阶段三补齐自检 / Review 闸门，主用户切到业务 / 产品，设计师转为规范沉淀与抽检支撑。
01意图判定简单直出；复杂强制澄清，每轮 ≤3 问补齐背景 / 目标 / 策略。
02Plan 可评审PRD 解构、指标、历史查询、设计策略与 Token 限额；确认后再实现。
03取源优先级用户素材 → Git 历史 HTML → 知识库 Figma/URL → 从零兜底。
04交付自检流程完整性、视觉严重问题、交互死链，证据随交付流转。
05Review 解耦独立 Review Agent：文案、硬约束、组件覆盖、全流程文案一致。
业务 / 产品（主用户）
描述需求、确认 Plan、发起生成、自检交付，带着证据推进评审与上线沟通。
设计师（支撑角色）
沉淀硬约束与组件规范、配置 Review 规则、处理复杂样本、做质量抽检与争议仲裁。
PHASE 04 · DESIGN PROCESS × SKILLS
设计流程进源码：可执行、可检测、可协同
阶段四把口头规范拆成硬约束、专业指南与 Token，封装为 Agent Skill 与 Hook；配套可视化编辑、元素点选与本地预览，在加油等业务线验证可迁移。
硬约束 · Must
375×812、标准顶/底栏、全页 Flex、List/Card 间距结构、热区 ≥44、Token 禁硬编码。违反即不合规。
专业指南 · 走查
识别区→价值区→操作区；标题 Y < 价格 Y < CTA Y；现价最大 / 原价删除线；单区一个强 CTA。
Token + tokens.css
色 / 间距 / 圆角(0/2/4/8) / 描边 / 阴影 / 字号字重合法唯一来源；工程侧 --ued* 变量落地。
design-implement按规矩改真实页面
问清 → 计划 → 复用现成组件 → 按合法颜色/间距/圆角改 → 自检。既跟现有页一致，也跟途虎规矩一致。
design-token-check改完自动查样式
扫本次改动的圆角、间距、颜色等；能明确判定的违规可自动改到合法值并汇报。
PostToolUse Hook改完即检
助手一改页面就触发检查，不合格会拦住并说明原因。
HTML Editor MVP可视化微调
图层、属性、对齐测距、预览，并安全写回，少反复手改。
element-picker点哪里改哪里
在预览页点选，定位到对应业务位置，少靠猜文案找文件。
UI Local Guide本地预览手册
按步骤把业务预览跑起来，方便设计同学亲眼验效果。
IMPACT
项目结果与可扩展价值
从拼装验证到业务自助，再到规范进工程：重复性 UI 可自动化，出稿可留证，源码改稿可约束、可检测，并在跨业务线复用。
效率与覆盖
119/150 样本可直接出初稿，覆盖约 75.3% 重复性 UI；复杂任务完成率目标提升约 20%。
质量可证明
跳步 / 规则错误目标 ↓60%；自检 + Review 证据替代口头完成；Token 消耗目标 ↓40%。
规范可执行
硬约束 × 指南 × Token 三层文档；实现 Skill + 检测 Skill + Hook，形成「改码即合规」闸门。
协同可复制
编辑器 / 点选定位 / 本地预览降低门槛；加油等业务线复用同构 Skill 与 Hook。