Design Agent 工作流
定义
Design Agent 工作流是以 AI Agent 为主要协作界面，将产品意图转化为可交付界面或前端工程，并允许在生成后继续进行可视化、定向和全局调整的迭代流程。它面向“不熟悉软件开发但有明确体验想法”的使用者，也可供专业设计与前端人员提高产出上限。
在本文档中的语境
本文将其描述为“先对齐、再计划、最后执行”的设计即代码流程：用户先用自然语言说明想做什么、希望呈现何种体验；Agent 通过追问补足需求；随后输出待确认的设计计划；确认后生成页面或工程；用户再在对话与画布中持续修改。 需求输入可以从产品意图、目标用户和体验目标出发，例如“为高中教学设计可交互的 3D 实验室”，不要求用户预先给出 React、动画库或三维实现等完整技术方案。Agent 的职责之一是把这类意图进一步转化为可执行的需求和技术决策。
典型流程
- 描述目标：用户说明产品场景、内容主题、视觉气质、互动体验或参考方向；输入可以不含软件开发术语。
- 追问澄清：Agent 不应立即生成，而是追问缺少的信息，帮助明确页面范围、交互重点、内容组织及约束。
- 生成并确认设计计划：计划可包含交付产物、技术方案、页面结构、交互设计和风险评估。用户在此阶段确认方向，避免在错误方向上直接产出大量代码。
- 生成页面或工程：Agent 根据已确认计划生成可运行的页面或前端工程。本文案例中，输出为带 3D 交互的 React + Vite 工程，而不只是静态 HTML。
- 在画布和对话中迭代：生成后，用户根据视觉和交互效果进行局部或全局调整，直到结果满足验收要求。
关键机制
需求澄清与计划确认
将“方向对齐”放在执行之前，是提高首次生成匹配度的核心机制。用户不必替 Agent 预设全部实现细节，但应在 Agent 的追问和计划确认中补足决定体验质量的信息。 计划确认不仅用于决定做哪些页面，也用于明确技术方案、交互复杂度和潜在风险；它把生成从一次性提示词输出转为可审阅、可介入的协作过程。
关键设计决策由用户参与
主题色、字体、圆角、间距、字号、交互取舍等会显著影响整体感受，也可能牵连较大范围的实现。用户应在这些关键节点做选择或确认，而不是将全部判断交给 Agent。 这种“在关键节点做决策”的方式，既降低非技术用户的使用门槛，也能让首版生成更贴近预期。
画布直接编辑
生成页面可在画布中直接调整基础视觉属性，包括颜色、位置、间距、边框和字体；调整应实时生效。相较于每次改色都在对话框中描述并等待重新生成，直接编辑更适合高频、明确的小改动。
框选修改
当用户只想修改页面的一部分时，可在画布上框选目标内容，再说明所需变化。它避免了用文字反复定位“导航栏左上角的按钮”等对象，尤其适用于难以准确描述的局部元素。
全局样式参数
配色、间距、圆角和字号等高频全局项可被暴露为可调参数，支持拖拽并实时预览。全局样式调整若完全依赖对话式改代码，可能等待较久，也更容易影响其他实现；参数化编辑提供了更直接的控制面。
细节与边界
Design Agent 并不等于保证一次性还原任何复杂网站。本文的极限测试认为，具备复杂 3D 场景、连续滚动与高强度动效的网站，当前 AI 难以一次百分之百复现。 输出质量受多项条件共同约束：模型是否具备足够的视觉理解能力，能否正确理解参考素材；是否能生成复杂交互；生成代码能否直接运行；以及人工是否进行了设计与工程验收。缺少视觉能力时，Agent 对录屏或视觉参考的理解可能产生偏差。 对于特别复杂的 3D 场景和连续滚动动效，生成结果可能出现卡顿；代码也不一定每次都能一次运行通过，仍可能需要人工调试。因此，“可交付工程”应理解为可继续维护和迭代的起点，而非免除专业检查的最终保证。 这类流程降低了 UI 设计和前端实现的门槛，但并未消除专业能力的价值：专业人员仍可在需求判断、设计取舍、交互质量、工程质量和验收上获得更高上限。
与设计即代码的关系
Design Agent 工作流体现了 设计即代码 的实践：设计结果不再只是难以修改的交接文件，而是团队可共同维护的视觉资产与工程产物。它不同于仅以云端矢量协作为核心的传统设计工具，强调从设计决策到可运行代码之间的连续迭代。 若需要稳定复用品牌视觉规则，可将 DESIGN.md 或 网站设计系统蒸馏 产生的颜色、字阶、圆角、间距和组件规范作为 Agent 的上下文与约束，减少“高级一点”等模糊描述带来的偏差。