Interface Lab
登录
Agent 输出链路

Agent 输出链路

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

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，发布发生在保存接口，分析发生在作品页。不要把这三个阶段混成一个不可追踪的一次性动作。