UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin

Docs

Platform
Site OverviewDevelopment LogCollaboration Guide
Template Library
Prompt BoardStyle Board
Agent Workflow
Agent Deep DiveProject Workflow AgentAgent Output PathPrompt Agent EvalsDesign System PanelsKnowledge Base GuideDeepSeek Agent Incident Notes
UI DESIGN LABDocumentation

Read public Markdown docs; admins can maintain them in editor pages.

Agent Output Path

Agent Output Path

A visual guide to how Full Prompt, code, saved works, and the created-work analysis board connect.

Back to docs

Chapter preview

One SentenceStage 1: Agent Compiles Context Into Full PromptStage 2: Full Prompt Becomes CodeStage 3: Output First Becomes A Workflow DraftStage 4: Save Work Publishes The DraftStage 5: The Analysis Page Reorganizes The Saved WorkFrontend TouchpointsMaintenance Rules
Agent Output Path

Visual path from Full Prompt to analysis board

This board turns a generation run into traceable assets: the Full Prompt is the contract, code is the implementation, Save publishes the draft as a work, and the analysis page renders Prompt, HTML, Design.md, and Skills back into boards.

Runtime Path
Planning
Agent output

User input, assets, and Skills become overview, designSystem, siteTemplate, and fullPrompt.

siteTemplate
fullPrompt
designSystemSections
Contract
Full Prompt

The Full Prompt is the final code-generation contract for structure, copy, assets, style, and acceptance criteria.

generation.fullPromptworkflow_run_versions.full_prompt
Artifact
Code artifact

The HTML path returns htmlCode directly; the React/Vite path stores projectFiles, builds them, and inlines the result as htmlCode.

htmlCodeprojectFilesartifactKind
Draft
Draft version

Generated output first lands in workflow_run_versions with version, QA, build log, and canvas state.

versionIdbuildLogqaReportworkflowGraph
Publish
Explicit save

Save work calls the save route and copies the current workflow version into generated_pages.

generatedPageIdprompthtml_codedesign_md
Review
Analysis board

The work page reads saved fields, parses HTML, Design.md, Full Prompt, and Skills, then renders Style / Prompt / Code boards.

buildWorkAnalysisWorkDesignSystemBoardWorkPreviewPanel
Generation Routes
HTML path

Standard planning output sends fullPrompt into the HTML request, and normalizeHtml turns the model response into iframe-ready htmlCode.

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

Complete production prompts can become a compact implementation brief, then CSS, body, and script are generated in parallel and assembled by htmlFromParts.

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

DeepSeek full prompts default to real React/Vite files; the server runs Vite build and inlines built assets back into htmlCode.

fullPrompt -> projectFiles -> Vite build -> htmlCode
Field Mapping
Full Promptworkflow_run_versions.full_promptgenerated_pages.promptAnalysis 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_graphReturn to Agent editing
Skillsworkflow_runs.selected_skill_slugsgenerated_page_skillsSkill map
Source Evidence
Generation orchestrationsrc/lib/generation/workflow.tsrunWorkflowGenerate / generateReactViteWithModel
SSE and versionssrc/app/api/generate/workflow/stream/route.tsinsertVersion / sendStandardArtifacts
Save and publishsrc/app/api/generate/workflow/save/route.tsPOST /api/generate/workflow/save
Workflow frontendsrc/components/project-workflow.tsxmergeArtifact / saveCurrentVersion
Analysis pagesrc/app/[locale]/create/[id]/page.tsxbuildWorkAnalysis + board components

Agent Output to Work Analysis Board

This document explains the Full Prompt -> code -> saved work -> analysis board path. It does not introduce a new generation flow. It documents how the existing Agent workflow, save route, and created-work analysis page exchange data.

2026-05-18 update: workflow versions and generated pages now also carry Prompt Intelligence fields: intent_profile, decision_brief, design-system panel/token/trace JSON, prompt-template payload, prompt-quality report, prompt trace, and interaction state. The created-work Style board reads panel data first and falls back to DESIGN.md.

One Sentence

Full Prompt is the code-generation contract, htmlCode/projectFiles are the implementation artifacts, Save work publishes the draft version into generated_pages, and the analysis page reads the saved Prompt, HTML, Design.md, and Skills back into Style, Prompt, and Code boards.

Rendering diagram...

Stage 1: Agent Compiles Context Into Full Prompt

The project creation page sends user messages, uploaded assets, selected model, and Skills to the workflow stream route. The server decides inside runWorkflowGenerate whether the run should use standard planning, complete production-prompt conversion, HTML generation, or React/Vite generation.

Standard requests first produce planning fields: overview, designSystem, designSystemSections, siteArchitecture, contentInput, siteTemplate, and fullPrompt. If the user pasted a complete production prompt, the system can convert it into a SiteGenerationTemplate, then compile that structure back into the final Full Prompt.

Stage 2: Full Prompt Becomes Code

The system currently has three main code paths:

  • Standard HTML path: fullPrompt is sent into the HTML generation request, the model returns a full single-file document, and the server normalizes it into htmlCode.
  • Direct full-prompt path: a complete production prompt becomes a compact implementation brief, then CSS, body, and optional script are generated in parallel and assembled by htmlFromParts.
  • React/Vite path: DeepSeek full prompts default to a real React/Vite file pack. The server runs Vite build, inlines the built CSS and JS into htmlCode, and keeps projectFiles, buildLog, and qaReport.

All paths still produce htmlCode, because iframe preview, community publishing, and the analysis page can all consume a single HTML document.

Stage 3: Output First Becomes A Workflow Draft

After generation completes, the SSE route writes the result to workflow_run_versions. This is a recoverable draft version, not yet a saved work.

Important fields:

  • full_prompt: the Full Prompt used by this generation.
  • html_code: the final previewable HTML.
  • artifact_kind: html or react-vite.
  • project_files: React/Vite source files.
  • build_log and qa_report: build and quality metadata.
  • design_md_zh/en: design documentation for analysis and reuse.
  • site_template, site_architecture, content_input: planning-layer data.
  • workflow_graph: canvas nodes, state, positions, and edges.

The ProjectWorkflow frontend listens for artifact:complete SSE events and merges these fields into artifacts, so the Full Prompt, Code, and Preview panels are different views of the same version payload.

Stage 4: Save Work Publishes The Draft

When the user clicks Save work, the frontend calls /api/generate/workflow/save. The save route does not regenerate code. It reads the current workflow_run_versions row and copies that version into generated_pages.

Field mapping:

  • 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

After a successful save, the system writes workflow_run_versions.generated_page_id, linking the draft version back to the saved work. That is why a created-work analysis page can reopen the same workflow for editing or update the same work later.

Stage 5: The Analysis Page Reorganizes The Saved Work

The created-work analysis page reads generated_pages. If a linked workflow draft exists, the page prefers the draft's fullPrompt, htmlCode, and designMd so the latest editable version stays aligned.

The page then:

  1. Uses generatedPageToTemplate to adapt a saved work into the shared TemplateWithRelations shape.
  2. Uses buildWorkAnalysis to infer colors, typography, buttons, layout, motion, regions, and special-skill mapping from HTML and Skills.
  3. Uses WorkDesignSystemBoard and WorkPreviewPanel to render designMd + fullPrompt + htmlCode + analysis as Style, Prompt, and Code boards.

The analysis board is therefore evidence organization for a saved work, not a second code-generation step.

Frontend Touchpoints

  • Workflow workspace: src/components/project-workflow.tsx
  • Save route: src/app/api/generate/workflow/save/route.ts
  • Created-work detail page: src/app/[locale]/create/[id]/page.tsx
  • Analysis builder: src/lib/work-analysis.ts
  • Style / Prompt / Code board: src/components/work-design-system-board.tsx
  • Preview panel: src/components/work-preview-panel.tsx

Maintenance Rules

Update this document when any of these change:

  • The structure or meaning of Full Prompt.
  • The HTML, Direct Prompt, or React/Vite generation path.
  • The field mapping between workflow_run_versions and generated_pages.
  • The behavior of Save work.
  • The created-work analysis page adds or removes Style, Prompt, Code, or Skill board behavior.

The boundary to preserve is: generation happens in the workflow, publishing happens through the save route, and analysis happens on the created-work page. Do not collapse these into one opaque one-shot action.