OX
OPEN-OX

// docs / section-generation

Section 生成

站点 UI 的主路径已收敛为:单一 architect_agent 拟定全局 chrome, 再由每个页面的 page_implement_agent 工具闭环编写 page.tsx 及页面级组件。下文描述该路径及与之配套的 Hero skill 发现; 历史上的「逐文件 generate_section 批量步骤」不再作为主路径。

概览

核心实现见 ai/flows/generate_project/runGenerateProject.ts 中的 generatePages ai/flows/generate_project/steps/pageImplementAgent.ts 内的 runPageImplementAgentplan_project 已为每页写入 pageDesignPlan(叙事、层级、约束), Agent 以 design-system、预读的 layout.tsx / globals.css、目录树与用户旨意为上下文, 自主决定拆分哪些组件文件,并以工具调用落盘;收尾必须调用 page_implementation_complete

上游:规划与数据

plan_project(提示词见 ai/flows/generate_project/prompts/steps/planProject.agent.md)把「仅有页面、尚无 section」的蓝图, 扩展为 PlannedProjectBlueprint:为每个页面推导 sections[],并为每个 section 挂上 designPlan

布局形态(顶 nav / sidebar / 工具栏 / 页脚 / 无 chrome 等)由下游页面实现 Agent 自行决定,plan_projectanalyze_project_requirement 都不负责预先指定全局 chrome。

编排与并行

apply_project_design_tokensarchitect_agent 必须先于任意 page_implement_agent 完成,以避免 globals / layout 竞态。 全部页面的 Page Agent 在 Architect 结束后用 Promise.all 并行启动; 每页步骤名为 page_implement_agent:{slug},拓扑与日志中可按 slug 区分。

Hero 运行时 Skill

当策略判定需要为首页 Hero 注入额外特效指引时,会在该页 Agent 启动前调用 discoverAndSelectSkill(内部候选来自技能清单 + 关键词 fallback), 仅将选中技能的正文注入该页 Agent 的 user 消息;这不是全局步骤,也不替代用户在前端选择的 styleGuide(后者走设计系统生成)。

// runGenerateProject.ts — 每页并行
const pageOutcomes = await Promise.all(
  blueprint.site.pages.map((page) =>
    runPageImplementAgent({ page, designSystem, projectContext, heroSkillPrompt, ... })
  )
);

单次页面的 Prompt

System:分层拼接

Page Implement Agent 的 system 由 frontend.mdsteps/pageImplementAgent.md 以及 shared/agentRuleBundles.ts 指定的 prompts/rules/*.mdtailwindMappingGuidesection.defaultoutputTsx 等)顺序拼接。可按环境变量 PAGE_IMPLEMENT_AGENT_EXTRA_RULES 追加规则 id。

User:契约 + 任务

User 消息包含完整 design-system.md、序列化后的 pageDesignPlan、站点路由与项目语境,以及预先注入的只读快照: 当前 app/layout.tsxapp/globals.csscomponents/app/ 的目录树摘要。 若存在 Hero skill 正文,则一并附加。详见 Prompt 拼装 Trace

验证与重试

Agent 工具写入的文件仍会经过统一的格式化(如 Prettier);路由级错误主要由后续的 typecheck_generatedrun_buildrepair_build 捕获。

这里的验证主要由 Agent 自身与后续构建网关承担;不要在页面 Agent 内重复跑完整 next build(除非排查具体错误),全局验证由流水线统一调度。

下游组装

Page Agent 负责目标路由文件及其拆出的组件;全局 shell 已由 Architect 锁定。 流水线在全部页面完成后执行依赖安装、可选范围类型检查与生产构建。

更完整的步骤序号与并行关系见 AI 生成流水线