0. 先和大家打个招呼吧 
-
你是谁： 独立开发者；
-
本项目完全在 Trae IDE 中使用 AI 辅助完成，核心流程如下：
1. **需求对齐** —— 通过自然语言描述视图结构与交互逻辑，Agent 辅助生成初始骨架
2. **增量迭代** —— 逐个视图细化，每次聚焦一个功能点（如 Agent Sidebar 弹出、Breakdown 步骤器、Live Canvas 三栏）
3. **联调验证** —— 使用 Trae Browser 工具在页面中点击 → ‘Add to Chat’ 去精确选择元素并完成前端原型设计，微调和验证交互闭环
1. Demo 简介
index.html (115.6 KB)
Apex_Agent 是一个多 Agent 协作编排平台的交互式原型，旨在可视化展示从"用户一句话需求"到"代码实时预览"的完整设计，开发和管理流程
-
面向谁：核心用户是哪些人；产品经理，全栈开发,项目经理和无代码经验者
-
主要功能：
核心技术亮点：
- 终端：底部彩色日志面板，模拟 Agent 编排过程
- 项目管理全闭环：Board（看板） → Backlog（待办池） → Calendar（里程碑）三视图联动
- Story-Code 可追溯：Development 视图将用户故事与代码文件变更一一关联，支持 Diff 审查与 Accept/Decline
- 项目管理联动展示：Agent 自动化视图展示 Cron 调度 + Issue 自动创建流程
原型覆盖以下核心视图：
| 视图 | 功能 |
|------|------|
| Dashboard | 项目统计卡片、进度看板、Agent 状态网格、最近活动流 |
| Request Breakdown | 6 阶段步骤器，自动生成 Epic → Story → 8 个 Subtask，支持勾选与 Handoff |
| Board | Sprint 看板视图，故事卡片跨状态列（To Do / In Progress / In Review / Done）展示，含优先级与指派人 |
| Backlog | 按 Epic 分组的待办池，支持优先级排序与 Sprint 拉入 |
| Calendar | 发布里程碑与关键日期视图，含 Sprint Kickoff、Feature Freeze、Release 等节点 |
| Agent 自动化 | Jira Agent 自动项目管理 demo：6 个 Cron 作业、自动化流程图（需求→拆解→创建 Issue→看板同步→PR 关联） |
| Live Canvas | 三栏布局：文件列表 / 文件代码预览 / 实时画布（Code + Preview 双标签）+ ACP 终端 |
| Code | Agent 代码仓库历史，展示自动生成的文件变更记录（新增/修改/删除），含 Diff 统计 |
| Development | Story → Code 变更关联视图，侧栏选择故事、主区域查看 Diff 并 Accept / Decline |
| 性能基准 | Layer 1 微基准测试结果表格 + Layer 3 A/B 测试对比（缓存 ON vs OFF，命中率 98.8%） |
| 可观测性 | Opik LLM 评测指标（幻觉率、相关性、事实性）+ Grafana 仪表盘 mock + Prometheus 端点 |
| Agent Sidebar | 弹出式 Agent 对话面板，支持 Provider / Model / Mode 三维切换 |
2. Demo 创作思路
-
灵感来源：
-
- **直接灵感**：使用 AI 编程时，Agent 输出代码的过程如同黑盒，无法看到其内部的推理路径。将大模型的推理显式化，把思维链搬到 UI 上，是 Request Breakdown 视图的出发点。
- **场景灵感**：作为独立开发者，一人兼任产品、架构、开发多重角色，缺乏专职队友协助拆解需求和把控结构。Apex_Agent 的闭环设计，本质是为单兵作战提供的数字协作沙盘。
- **管理灵感**：传统项目管理工具（如 Jira）体量笨重且与代码库物理隔离，无法与 AI 生成流程打通。将项目管理的拆解、追踪能力内置，让 Epic/Story/Subtask 与代码文件形成关联。
- **哲学灵感**：人类在微观代码质量上难以超越大模型，与其死磕语法，不如退后一步，放弃对代码的绝对控制，转向对需求粒度和任务拓扑结构的宏观把控。想解决的问题：
-
在真实的 AI 辅助研发场景中，开发者常常面临三个痛点：
1. **需求黑盒** —— 给 Agent 一句话，它内部怎么拆解的？拆成几个故事？每个故事的边界在哪？
2. **过程不可见** —— Agent 生成了哪些文件？每个文件长什么样？代码和预览对不对得上？
3. **控制感缺失** —— 我能不能在中途介入，只选其中几个故事去实现？
Apex_Agent 的设计正是围绕这三个痛点展开的。在此基础上，进一步延伸出：
4. **管理脱节** —— 拆解后的 Story 如何追踪？看板状态如何同步？里程碑如何管理？
5. **质量不可评** —— LLM 输出的幻觉率、相关性、事实性如何量化？
-
为什么做这个方向：
智能体进化驱动产品与代码开发深度绑定，而需求实现的关键在于拆解、设计与管理的闭环。Apex_Agent 整合这三者于一身，并策略性放弃对代码的绝对控制——以换取智能体在需求与实现之间的自适应弹性，打造下一代协同开发基础设施。
3. Demo 体验地址（三选一）
index.html (115.6 KB)
（丢进浏览器即可体验）
-
### 2.2 视图编排逻辑
整个原型的视图流转模拟了一个真实的"需求 → 拆解 → 实现"闭环：
```
Request Breakdown（拆解为 Epic/Story/Subtask）
│
▼ 点击 Generate Breakdown
Select User stories
│
-
▼ Start
Live Canvas（实时预览生成的代码与界面， 左边看prd和相关产品设计文件和开发文件）
│▼ 代码生成后Code / Development（文件变更追踪 + Story→Code Diff 审查）
│ ▼ 交付后Agent 自动化（Jira Issue 自动创建与看板同步）
│ ▼ 运维监控 -
> 3. 左侧导航切换至「Board」查看 Sprint 看板，切换至「Backlog」查看待办池，切换至「Calendar」查看里程碑
> 4. 切换至「Code」查看 Agent 生成的文件变更历史
> 5. 切换至「Development」体验 Story → Code 的 Diff 审查流程
> 6. 切换至「Agent 自动化」查看 工作项 联动流程
> 7. 切换至「性能基准」查看实测 Layer 1 微基准和 A/B 测试结果
> 8. 切换至「可观测性」查看 Opik 评测指标和 Grafana 仪表盘
**分组导航逻辑：**
| 分组 | 视图 | 职责 |
|------|------|------|
| 项目管理 | Dashboard、需求拆解、Board、Backlog、Calendar、Agent 自动化 | 需求输入 → 拆解 → 看板/待办/里程碑 → Jira 联动 |
| 开发 | Live Canvas、Code、Development | 代码生成 → 文件变更追踪 → Story-Code Diff 审查 |
| 性能 | 性能基准、可观测性 | 实测数据 + 监控 |
| 系统 | 设置 | Provider/Model/Mode 配置 |
- **Agent Sidebar** 作为全局入口，用户选择 Provider（Trae / Copilot / Claude Code / Codex）、Model、Mode（Autopilot / Search / Breakdown）。当 Mode 为 `Breakdown` 时，点击发送会自动跳转到 Request Breakdown 视图。
- **Request Breakdown** 用 6 阶段步骤器（Idle → Preparing → Generating → Confirming → Ready → Handoff）可视化拆解过程，最终生成 1 个 Epic、1 个 Story、8 个 Subtask，用户可勾选想要的子任务，点击 **Start** 进入 Live Canvas。
- **Board** 展示当前 Sprint 的看板视图，故事卡片分布在 To Do / In Progress / In Review / Done 四列，每张卡片显示优先级、所属 Epic 和指派人。
- **Backlog** 按 Epic 分组展示待办池，每个待办项显示 Key、标题和优先级，支持从待办池拉入 Sprint。
- **Calendar** 以卡片列表形式展示项目关键里程碑：Sprint Kickoff、Feature Freeze、Code Review Deadline、Release、Retrospective、下一 Sprint Planning。
- **Agent 自动化** 展示 Agent 的 6 个 Cron 作业（每日站会摘要、看板同步、PR 检查等）和自动化流程图：用户输入需求 → Agent 拆解 Epic/Story → 自动创建 Issue → 看板状态同步 → PR 关联与自动更新。
- **Live Canvas** 是核心交付视图，采用三栏布局：
-
**左栏（Files，260px，可折叠）**：Story Queue + Generated Files 列表
-
**中栏（File Viewer，380px，可折叠）**：点击左栏文件即在此展示，Markdown 文件渲染为预览，代码文件以等宽字体展示
-
**右栏（Live Preview，flex:1）**：Code / Preview 双标签，Code 标签显示 iframe 的 HTML 源码，Preview 标签用 iframe 实时渲染
- **Code** 展示 Agent 自动生成的文件变更历史，每条记录显示文件路径、变更类型（新增/修改/删除）、增删行数、执行 Agent 和时间。
- **Development** 将用户故事与代码文件变更关联：左侧栏列出有代码变更的 Story，主区域展示深色主题 Diff 视图，支持 Accept / Decline。
- **性能基准** 展示 A/B 测试结果：语义缓存 ON 时命中率 98.8%，5000 次请求中 4940 次 LLM 调用被缓存替代，成本节省 98.8%。
- **可观测性** 展示 Opik LLM 评测指标和 Grafana 仪表盘 mock。
4. TRAE 实践过程
.4496347263677747:ab0789516ce26cff99dd15547d9ac141_6a4e3adc3be76928c9bb8b3c.6a4e45c013beedf788287625.6a4e45b3843a45b6d802eb65:Trae CN.T(7/8/2026, 8:42:41 PM)
.4496347263677747:cd4b0a24ff475781dbd45bfd0bb073eb_6a4e3adc3be76928c9bb8b3c.6a4eef9a13beedf7882882f4.6a4eef94843a45b6d802eb67:Trae CN.T(7/9/2026, 8:47:22 AM)
.4496347263677747:9bbce786bfa446f3d88a47911286fcdb_6a4e3adc3be76928c9bb8b3c.6a4eff9513beedf7882884b1.6a4eff86843a45b6d802eb69:Trae CN.T(7/9/2026, 9:55:33 AM)
5. 对应的报名审核通过的帖子链接