UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录

文档文章

平台与维护
网站概述功能开发与版本更新记录关于协作
Template 库
Prompt 看板Style 看板
Agent 工作流
Agent 深度解析项目创作页与 Agent 工作流Agent 输出链路Prompt Agent EvalsDesign System PanelsKnowledge Base GuideDeepSeek Agent 故障复盘
UI DESIGN LAB文档中心

公开阅读 Markdown 文档，管理员可进入编辑页维护。

Agent 输出链路

Agent 输出链路

用前端可视化看板说明 Full Prompt、代码、保存作品和作品分析页之间的数据转换关系。

返回文档中心

章节预览

先记住一句话第一阶段：Agent 把上下文编译成 Full Prompt第二阶段：Full Prompt 转成代码第三阶段：生成结果先成为 workflow 草稿第四阶段：Save work 把草稿发布成作品第五阶段：作品分析页把作品重新组织成看板前端对应关系维护规则
Agent Output Path

从 Full Prompt 到分析看板的可视化路径

这张前端看板把一次生成拆成可追踪的数据资产：Full Prompt 是合同，代码是实现，保存动作把草稿发布成作品，分析页再用 Prompt、HTML、Design.md 和 Skills 生成可阅读的看板。

Runtime Path
Planning
Agent 输出

用户输入、素材和 Skills 被整理成 overview、designSystem、siteTemplate 与 fullPrompt。

siteTemplatefullPromptdesignSystemSections
Contract
Full Prompt

Full Prompt 是最终代码生成合同，要求模型保留结构、文案、素材、样式和验收条件。

generation.fullPromptworkflow_run_versions.full_prompt
Artifact
代码产物

HTML 路径直接产出 htmlCode；React/Vite 路径先产出 projectFiles，再构建并内联为 htmlCode。

htmlCodeprojectFilesartifactKind
Draft
草稿版本

生成结果先落入 workflow_run_versions，保留版本号、QA、构建日志和画布状态。

versionIdbuildLogqaReportworkflowGraph
Publish
显式保存

Save work 调用保存接口，把当前 workflow version 复制到 generated_pages。

generatedPageIdprompthtml_codedesign_md
Review
分析看板

作品页读取保存字段，解析 HTML、Design.md、Full Prompt 和 Skills，渲染 Style / Prompt / Code 看板。

buildWorkAnalysisWorkDesignSystemBoardWorkPreviewPanel
Generation Routes
HTML path

普通规划结果会把 fullPrompt 放进 HTML 生成请求，模型返回单文件 HTML，经 normalizeHtml 后成为 iframe 预览。

fullPrompt -> htmlSystemPrompt -> htmlCode
Direct full-prompt path

完整生产 prompt 可先压缩成实现 brief，再并行生成 CSS、body 和 script，由 htmlFromParts 组装。

fullPrompt -> CSS/body/script -> htmlCode
React/Vite path

DeepSeek full prompt 默认生成真实 React/Vite 文件包，服务端运行 Vite build，再把构建结果内联回 htmlCode。

fullPrompt -> projectFiles -> Vite build -> htmlCode
Field Mapping
Full Promptworkflow_run_versions.full_promptgenerated_pages.prompt分析页 Prompt tab
HTMLworkflow_run_versions.html_codegenerated_pages.html_codePreview iframe / Code tab
React/Vite sourceworkflow_run_versions.project_filesgenerated_pages.project_filesCode artifact
Design.mdworkflow_run_versions.design_md_zh/engenerated_pages.design_md_zh/enStyle board tokens
Canvas stateworkflow_run_versions.workflow_graphgenerated_pages.workflow_graph回到 Agent 编辑
Skillsworkflow_runs.selected_skill_slugsgenerated_page_skillsSkill map
Source Evidence
生成编排src/lib/generation/workflow.tsrunWorkflowGenerate / generateReactViteWithModel
SSE 与版本src/app/api/generate/workflow/stream/route.tsinsertVersion / sendStandardArtifacts
保存发布src/app/api/generate/workflow/save/route.tsPOST /api/generate/workflow/save
工作台前端src/components/project-workflow.tsxmergeArtifact / saveCurrentVersion
分析页面src/app/[locale]/create/[id]/page.tsxbuildWorkAnalysis + board components

Agent 输出到作品分析看板的转换路径

这篇文档解释 Full Prompt -> 代码 -> 保存作品 -> 分析看板 这条链路。它不是新的生成逻辑，而是把现有 Agent 工作流、保存接口和作品分析页之间的数据关系写清楚，方便后续维护和排查。

先记住一句话

Full Prompt 是生成代码的合同，htmlCode/projectFiles 是按合同产出的实现，Save work 把草稿版本发布成 generated_pages，作品分析页再读取保存下来的 Prompt、HTML、Design.md 和 Skills，解析成 Style、Prompt、Code 等看板。

Rendering diagram...

第一阶段：Agent 把上下文编译成 Full Prompt

项目创作页把用户消息、上传素材、模型选择和 Skills 发送到 workflow stream 接口。服务端在 runWorkflowGenerate 中决定走普通规划、完整生产 prompt 转换、HTML 生成路径或 React/Vite 路径。

普通需求会先得到一组规划字段：overview、designSystem、designSystemSections、siteArchitecture、contentInput、siteTemplate 和 fullPrompt。如果用户粘贴的是完整生产 prompt，系统会先把它转成 SiteGenerationTemplate，再编译成最终 Full Prompt。

第二阶段：Full Prompt 转成代码

当前有三条主要代码生成路径：

  • 普通 HTML 路径：fullPrompt 被放入 HTML 生成请求，模型返回完整单文件 HTML，服务端用 normalizeHtml 规整成 htmlCode。
  • Direct full-prompt 路径：完整生产 prompt 先形成一个压缩实现 brief，再并行生成 CSS、body 和可选 script，最后由 htmlFromParts 组装成 htmlCode。
  • React/Vite 路径：DeepSeek full prompt 默认生成 React/Vite 文件包，服务端运行 Vite build，把构建后的 CSS 和 JS 内联回 htmlCode，同时保留 projectFiles、buildLog 和 qaReport。

无论哪条路径，作品预览和保存后的作品页都优先依赖 htmlCode，因为 iframe、社区发布和分析页都能直接消费单文件 HTML。

第三阶段：生成结果先成为 workflow 草稿

生成完成后，SSE 接口会把结果写入 workflow_run_versions。这里保存的是一次可恢复的草稿版本，不等于正式作品。

关键字段包括：

  • full_prompt：本次代码生成使用的 Full Prompt。
  • html_code：可预览的最终 HTML。
  • artifact_kind：html 或 react-vite。
  • project_files：React/Vite 源码文件包。
  • build_log 和 qa_report：构建与质量检查信息。
  • design_md_zh/en：给分析看板和复用沉淀使用的设计说明。
  • site_template、site_architecture、content_input：网站规划层数据。
  • workflow_graph：右侧画布节点位置、状态和连线。

前端 ProjectWorkflow 通过 artifact:complete SSE 事件把这些字段合并进 artifacts，所以工作台上的 Full Prompt、Code 和 Preview 看到的是同一份版本数据。

第四阶段：Save work 把草稿发布成作品

用户点击 Save work 后，前端调用 /api/generate/workflow/save。保存接口不会重新生成代码，而是读取当前 workflow_run_versions，把版本字段复制到 generated_pages。

字段映射可以这样理解：

  • workflow_run_versions.full_prompt -> generated_pages.prompt
  • workflow_run_versions.html_code -> generated_pages.html_code
  • workflow_run_versions.project_files -> generated_pages.project_files
  • workflow_run_versions.design_md_zh/en -> generated_pages.design_md_zh/en
  • workflow_run_versions.workflow_graph -> generated_pages.workflow_graph
  • workflow_runs.selected_skill_slugs -> generated_page_skills

保存成功后，系统还会反写 workflow_run_versions.generated_page_id，让草稿版本和正式作品互相关联。之后从作品分析页点“编辑/更新”，就能回到同一个 workflow 继续迭代。

第五阶段：作品分析页把作品重新组织成看板

作品分析页读取 generated_pages。如果作品有关联的 workflow draft，页面会优先使用 draft 中的 fullPrompt、htmlCode 和 designMd，这样编辑后未脱节的版本能被正确展示。

随后页面会做三件事：

  1. generatedPageToTemplate 把保存作品转成通用 TemplateWithRelations 结构。
  2. buildWorkAnalysis 从 HTML 和 Skills 中推断颜色、字体、按钮、布局、动效、区域和特殊技能映射。
  3. WorkDesignSystemBoard 和 WorkPreviewPanel 把 designMd + fullPrompt + htmlCode + analysis 渲染成 Style、Prompt 和 Code 看板。

因此分析看板不是重新生成作品，而是对已保存作品的证据化整理。

前端对应关系

  • 项目工作台：src/components/project-workflow.tsx
  • 保存接口：src/app/api/generate/workflow/save/route.ts
  • 作品详情页：src/app/[locale]/create/[id]/page.tsx
  • 分析逻辑：src/lib/work-analysis.ts
  • Style / Prompt / Code 看板：src/components/work-design-system-board.tsx
  • 预览面板：src/components/work-preview-panel.tsx

维护规则

当下面任一行为变化时，需要同步更新本文档：

  • Full Prompt 的结构或含义变化。
  • HTML、Direct Prompt 或 React/Vite 生成路径变化。
  • workflow_run_versions 或 generated_pages 字段映射变化。
  • Save work 的保存模式变化。
  • 作品分析页新增或移除 Style、Prompt、Code、Skill 相关看板。

这条链路的核心边界是：生成发生在 workflow，发布发生在保存接口，分析发生在作品页。不要把这三个阶段混成一个不可追踪的一次性动作。