Agent智能体开发及上下文工程项目介绍
赋范空间 · 项目实战
AI Agent 三大范式 · 案例集
从平台到员工 · Agent Studio 编排开发平台 → FF-Autopilot 7×24 自主运营 → FF-CoWorker 一人公司 AI 员工系统
立即学习：大模型 Agent 智能体开发实战 →
| 指标 | 数值 |
|---|---|
| Projects | 3 |
| Pages | 26 |
| 后端 | 100% 真后端 |
项目总览
Project ① · Agent Studio
通用 Agent 编排开发平台 · 装能装 · 跑能跑 · 看能看 · 算能算（9 页）
Project ② · FF-Autopilot
7×24 目标驱动型 AI 代理系统 · 设定目标后无人值守（5 页）
Project ③ · FF-CoWorker
一人公司 AI 员工系统 · 6 个虚拟员工 7×24 在岗（12 页）
Project ① · Agent Studio
通用 Agent 编排开发平台 · 装能装 · 跑能跑 · 看能看 · 算能算
把业界四大运行时（Agent Skills · MCP · Tool Calling · Model Router）+ 五种 Agent 模式 · Trace + Eval 装进一个可视化 Studio。21 页 · 79 按钮全 wire · 8 个真后端 API。
技术栈：Next.js 15 · TypeScript · ReactFlow · SSE · Skills Spec · MCP · Anthropic SDK · OpenAPI
核心亮点
- 8 种节点色 + Memory→Agent 连线流光 · DAG 拖拽即跑
- Skills 三级渐进披露（meta / body / scripts）真演示
- Trace 瀑布 + Eval Lab 双卷尺评估 Agent 表现
一、门面 · 工作台
Landing
三色渐变大字 + SVG DAG 流光 · 4 大运行时 + 3 档定价
技术实现
- radial gradient 柔和光
- SVG 手绘 DAG + 流光
- 定价 CTA 3 按钮真 toast 反馈
亮点
- 品牌小药丸 + ●●● 三色 stats：20 pages / 5 patterns / 4 runtimes / 100% 真后端
- 点「免费开始」跳转 /dashboard
Dashboard
4 张 stats + sparkline · Agent 列表 · Runtime 健康监测
技术实现
- polyline + 半透明填充 sparkline
- 状态 healthy/degraded 色系区分
- table + grid 双栏
亮点
- 12,847 调用 +24% 趋势
- Runtime 健康 4 卡 + 比例 bar
- 呼吸灯告警图标
二、编排与运行时
Agent Studio
ReactFlow DAG 拖拽画布 · 8 种节点色 · 运行按钮真调 SSE
技术实现
- 8 种节点色：tool / skill / mcp / llm / memory / branch / input / output
- Memory→Agent 连线流光
- 运行按钮调 /api/agents/run
亮点
- 左 Node Palette 拖拽入场
- 中画布 smoothstep 连线
- 运行完 toast 显示 span count
Live Run · ReAct
实时事件流 + ReAct loop 可视化 · think/act/observe 三段着色
技术实现
- fetch + ReadableStream 真流式
- 10+ SSE 事件类型：thought / action_chosen / tool_call_start / skill_discovered 等
- Thought 流式带光标 · Action JSON + Observation 原文
亮点
- Skill 3 层披露流水线：L1 frontmatter（20tk）→ L2 body（600tk）→ L3 script invoke（0tk）
- 真 DuckDuckGo web_search，返回 Abstract + Related 原文
- 每轮 ReAct 卡片独立，Thought/Action/Observation 三段色分
Trace Waterfall
调用瀑布 + 时间轴 · span 颜色分类 · 点击展开 args/output
技术实现
- flatten tree 带 depth 缩进
- 横条 left=start，width=duration
- 6 色 kindMeta
亮点
- 复制 JSON · clipboard 真写入
- 导出 blob download：trace-{id}.json
- 分享：复制当前 URL
三、运行时四大规范
Skills Hub
Agent Skills 市场 · 读真 .skills/*/SKILL.md · 三级渐进披露
技术实现
- frontmatter 解析
- install 状态写 data/skills-installed.json
- ProgressiveReveal 3 级 state 机
亮点
- Level 1 always loaded（~20 tokens）
- Level 2 on trigger：点触发加载 body 动画
- Level 3 on invoke：点 invoke 加载 scripts
MCP Servers
10 个 MCP server · install 真写 data/mcp-installed.json
技术实现
- table + 健康呼吸灯
- capability 3 格：tool / resource / prompt
- manifest JSON 格式化 + 复制
亮点
- Smithery / Glama / 官方 三 registry 标签筛选：全部 / 已装 / 健康 / 异常
- Power 开关真 POST /api/mcp
Model Router
智能路由 · cost-aware · fallback 链 · 各 model 配额可视
技术实现
- view state 切换
- 堆叠条图 input+output 双色
- 热图 24 格 5 档色
亮点
- 真拉 OpenRouter /models，346 个
- 12 次 failover 告警
- Router 分 3 档 + fallback
Eval Lab
数据集 + judge model · 跑分对比 · 通过率 / latency / cost 三维表
技术实现
- polygon 6 轴 · dashed 基线
- bar 基线+当前双层覆盖
- blob CSV download
亮点
- faithfulness / answer_relevancy / tool_call_accuracy 等 6 指标
- LLM-as-judge 运行态
- CSV 导出真落盘
Project ② · FF-Autopilot
7×24 目标驱动型 AI 代理系统 · 设定目标后无人值守
新建一个目标 → Plan Tree 自动拆解 → 多 Agent 并行执行 → 关键节点人工审批。覆盖 5 大主流社媒平台，30 天浓缩 1 分钟回放。
技术栈：Next.js 15 · TypeScript · SSE · Anthropic Claude · D3 · Floating UI · HITL
核心亮点
- 自然语言托管 KPI · 不写复杂 prompt · 时间压缩 1 / 7 / 30 / 90 天
- 关键节点人工接管 · Approvals 收件箱乐观更新 · 已处理项 strikethrough
- Timeline 全周期回放 · 30 天 → 1 分钟 · 老板手机巡视
一、门面与工作台
Landing
深空背景 · 三色渐变标题 · 六大功能模块 + 三步走价值主张
技术实现
- radial-gradient 双光源 + grid texture 1px line
- 呼吸动画 dot · breathe 2.4s ease-in-out
- CTA 大按钮真路由 → /dashboard
亮点
- 定位语「目标驱动型 AI 代理系统」直陈功能
- 六大功能模块覆盖运营全链路
- 按动作付费 · 不按座位
Dashboard
多 Goal 概览 · KPI Rings 实时刷新 · Multi-Agent Lanes 时序混排
技术实现
- SSE EventSource 实时拉取 mock-script 事件流
- KPI Rings 用 SVG circle stroke-dasharray 动画
- Multi-Agent Lanes 时序混排 + agent 头像 cluster
亮点
- 永远有数据：走 mock-data + SSE fallback
- Approval 待办计数实时更新到顶部 badge
- 跨 goal 视角看 Agent 资源占用
二、目标驱动 + HITL
Goals 目标管理
自然语言输入 · Plan Tree 自动拆解 5-7 节点 · 真 LLM API 调用
技术实现
- 真 Claude API 调用，无 key 时走 mock fallback
- Plan Tree D3 force-directed layout，节点色分 phase
- 状态机：input → planning → ready
亮点
- 自然语言托管 KPI，不写复杂 prompt
- 时间压缩选项：1 天 / 7 天 / 30 天 / 90 天
- Plan Tree 即生成即可视化
Approvals 收件箱
通过/修改/驳回三档 · 已处理项视觉反馈 · 真接 /api/approve
技术实现
- 整页 client component + useState 乐观更新
- 通过/驳回真接 /api/goals/[id]/approve
- 命中度评分 0.87 静态展示 · 草稿浮窗预览
亮点
- 关键节点人工接管，高风险动作自动暂停
- 已处理项视觉反馈 strikethrough + 徽章
- 批量通过支持快捷操作
Timeline 回放
事件流时间线 · 圆点跳转任意时刻 · hover 显示 thought bubble
技术实现
- setCursor 状态驱动，圆点 onClick 跳转
- thought bubble 用 Floating UI middleware
- 速度切换 1x / 2x / 5x · setInterval 节流
亮点
- 30 天浓缩 1 分钟，老板手机即可巡视
- 事件圆点 hover 即看 Agent 思考
- 关键节点高亮，异常事件红色标记
Project ③ · FF-CoWorker
一人公司 AI 员工系统 · 6 个虚拟员工 7×24 在岗
Office 等距俯视图 · 6 路 SSE 流式工具调用编排 · 每个员工独立 context · 飞书一句话触发任意员工。自动 Gitee PR / 飞书日报 / 抖店 BI 拉取。
技术栈：Next.js 15 · TypeScript · Sonnet 4.6 · SSE · framer-motion · 飞书 webhook · Gitee API
核心亮点
- 6 路真 LLM 并发 · 不是模拟动画 · 独立 context 跨员工互不干扰
- 员工剧本完全不同 · 陈昊修 bug / 沈墨拉数据 · 不同 prompt + 不同工具集
- 飞书一句话触发 · @员工 + 任务 → 真启动 Agent · 闭环到 IM
一、门面 · 一人公司定位
Landing 全景
米黄书法风格首页 · 6 工位等距俯视图嵌入 · 8 大机制 + 5 类落地模板
技术实现
- Source Serif Pro + 米黄主题（区别 Autopilot 深空）
- 等距 isometric 俯视图用 SVG path + 6 头像组件
- 滚动锚点 nav 跟随 + 章节淡入
亮点
- 「一人公司」叙事统领全页，不堆功能词
- 米黄主题区别于其他 Agent 系统的赛博风
- 滚动叙事 7 章节自然过渡
Hero 首屏
「一个人 + 6 个 AI 员工 = 一家公司」· 三色强调 + Office 预览
技术实现
- h1 56px Source Serif Pro · 关键词 em 三色描边
- stats 4 段栅格，数字与场景对应
- CTA 双按钮 → /office + /scenarios
亮点
- 「老板 + AI 员工」一目了然
- 首屏即建立人格化叙事
- 暖色调降低 AI 系统冰冷感
二、Office Orchestra · 6 路并发
Office 等距俯视
6 工位等距俯视 · 中央老板小王空座 · 每个头像背后是 sub-agent
技术实现
- SVG 等距 grid，6 工位坐标手工排版
- 每工位 hover 高亮，显示员工 chip 卡片
- 「一键运行一天」按钮置顶，进入 orchestra 模式
亮点
- 等距视角避免「列表感」，真办公室隐喻
- 空闲态画面安静，与运行态形成对比
- 6 员工人格化 chip，立即建立认知
Orchestra 运行中
6 卡格各自跑工具调用 · 顶部聚合数字实时累加 · 右侧事件流时序混排
技术实现
- 6 路 SSE 并发 · Promise.all + AbortController
- 事件流右侧栏，time-bucket 分组渲染
- 顶部数字 spring 动画累加 · framer-motion
亮点
- 真 6 路并发，不是模拟动画
- 独立 context 跨员工，互不干扰
- 事件流时序混排，一眼看「谁在干啥」
Orchestra 完成
6 卡片陆续完成 · 60+ 工具调用 · 产出 8 件成品（PR/报告/数据/回复）
技术实现
- 每卡片 done state，绿色 check + 成品 chip
- 全员统计板汇总 token 用量 + 工具调用计数
- 「成品」分类色：PR / 报告 / 数据 / 客户回复
亮点
- 「6 路真 LLM 跑一天的活」可视证据
- 产出物可点击查看（PR 链接 / 报告全文）
- token 用量透明，老板心里有数
三、单员工独立工作流
陈昊（Alex）
单员工详情 · 8 大机制 token 占用条 · 工作历史 timeline
技术实现
- 员工 metadata 来自 employees.ts 静态注册
- 8 机制 progress bar，实时 token 占用
- 「运行 Agent」按钮触发 SSE 流
亮点
- 每员工角色独立，不共享 context
- 8 机制可视占比，透明运行成本
- 角色卡通头像 + 中文名，强人格化
Alex 推理中
phase 推进到「调工具」· 8 机制按真实推理量级亮起
技术实现
- 真接 Sonnet 4.6，stream tool_use 事件
- phase 状态机：think → tool_call → write → done
- 当前调用工具高亮，历史调用淡化
亮点
- 真 LLM 推理，不是预录脚本
- 8 机制亮度对应实际 token 消耗
- 看 Agent「干活」的过程感最强
Alex 完成 · Gitee PR
Gitee PR !419 已创建 · 关联 issue #412 · 测试 14/14 绿
技术实现
- 调 Gitee API 真创建 PR，不 mock
- 关联 issue 自动从对话上下文提取
- 测试结果回填到完成态卡
亮点
- 真实 PR 链接可点，工程可信度
- 关联 issue，完整闭环
- 测试通过率作为完成标志
沈墨（Lucas）拉数据
拉昨日抖店 GMV + 小红书种草 + 私域转化漏斗 · 飞书 #daily-bi 推送
技术实现
- 每员工不同 system prompt + 不同工具集
- 沈墨工具：抖店 OpenAPI / 小红书爬虫 / 飞书
- BI 报告 markdown 模板，自动套用
亮点
- 员工剧本完全不同，不是换头像
- 真接抖店 / 小红书 API，数据真
- 飞书自动推送，闭环到 IM
四、触发与落地
飞书指挥中心
@陈昊 修 bug / @江雨 跟客户 / /hire 招新员工 · 每条对应真员工剧本
技术实现
- 飞书机器人 webhook，解析 @员工 + 任务指令
- 路由到对应 employee.ts 启动
- /hire 触发 employee onboarding 流
亮点
- 「一句话指挥」最低门槛交互
- 历史指令示例，用户照抄即可
- /hire 招新员工，系统可扩展
场景模板
5 类一人公司模板 · 每模板含目标 + 推荐员工组合 + 预期产出周期
技术实现
- scenarios.ts 静态模板，5 个真案例
- 每模板卡 chip 显示推荐员工组合
- 「采用此模板」一键填充 office 配置
亮点
- 模板源自真实独立开发者案例
- 员工组合推荐，降低新手门槛
- 从模板到运行 1 步即可
真实案例数据
Heygen 50 人 26 亿美金 / 妙鸭 7 天 PV 过亿 / 00 后开发月入 ¥10 万
技术实现
- 每模板独立卡片，benchmarks 数据可点开
- case study 来自公开报道，标注来源
- 「适合你吗」自评清单嵌入
亮点
- 真案例数字，不空喊「降本增效」
- 5 类覆盖独立开发者主流路径
- 自评清单帮用户判断匹配度
赋范空间 · 「体验课 · 项目实战」 AI Agent 三大范式 · 案例集 · 3 Projects · 26 Pages · 单文件自包含 · 可离线打开