Dev Team Workflow — Copilot Agents 插件
四角色协作的软件开发工作流插件：一个主控编排者 + 四个专业子Agent，模拟真实软件开发团队的协作模式。
技术栈
- 前端：Vite + React + TypeScript + MUI (Material UI)
- 设计：Figma（通过 MCP 服务器直接操作画布）
- 测试：Chrome 自动化截图 + Playwright E2E
依赖项
本插件引用了以下外部插件、Skills 和 MCP 服务。使用前请确保已安装。
必需插件
| 插件 | 来源 | 用于 Agent | 说明 |
|---|
| superpowers | obra/superpowers | Dev, PM | TDD、系统化调试、验证、头脑风暴等开发方法论 |
| superpowers-chrome | obra/superpowers-chrome | Tester | Chrome 浏览器自动化，截图、DOM 操作、表单填充 |
| project-planning | github/awesome-copilot (plugins/project-planning) | PM | Epic/Feature PRD、技术 Spike、实现计划 |
| frontend-web-dev | github/awesome-copilot (plugins/frontend-web-dev) | Tester | Playwright 网站探索和 E2E 测试生成 |
必需 MCP 服务
引用的 Agents（来自 awesome-copilot）
| Agent | 用于 | 说明 |
|---|
gem-designer | Designer | 通用 UI/UX 设计决策（布局、主题、色彩、可访问性） |
gem-designer-mobile | Designer | 移动端设计规范（iOS HIG / Android Material Design 3） |
gem-browser-tester | Tester | 视觉回归测试（基线截图对比） |
accessibility-runtime-tester | Tester | 运行时无障碍测试（键盘导航、WCAG 合规） |
frontend-performance-investigator | Tester | 前端性能分析（Core Web Vitals、Lighthouse） |
devtools-regression-investigator | Tester | 回归 bug 复现与证据收集 |
Figma Skills 清单
| Skill | 说明 |
|---|
figma-use | 强制前置 — Figma Plugin API 底层执行器 |
figma-generate-design | 从需求创建完整屏幕设计 |
figma-generate-library | 构建设计系统/组件库/变量令牌 |
figma-create-new-file | 创建新的 Figma 文件 |
figma-create-design-system-rules | 生成项目级设计系统规则 |
figma-code-connect | Figma 组件与代码组件的映射 |
安装依赖
在 VS Code Extensions 视图中搜索 @agentPlugins，找到并安装以下插件：
obra/superpowersobra/superpowers-chromegithub/awesome-copilot（包含 project-planning、frontend-web-dev）figma/mcp-server-guide
安装
方式一：从源仓库安装（推荐）
- 打开 VS Code
- 打开命令面板（
⇧⌘P）
- 输入
Chat: Install Plugin From Source
- 输入仓库地址：
https://github.com/craipy-hub/agents_workflow
- VS Code 会自动克隆并安装插件
方式二：添加到插件市场配置
在 settings.json 中添加：
"chat.plugins.marketplaces": [
"craipy-hub/agents_workflow"
]
然后在 Extensions 视图中搜索 @agentPlugins 即可找到并安装。
方式三：本地插件注册
# 克隆仓库
git clone https://github.com/craipy-hub/agents_workflow.git ~/my-plugins/agents_workflow
在 settings.json 中注册：
"chat.pluginLocations": {
"/Users/yourname/my-plugins/agents_workflow": true
}
方式四：项目级安装（仅当前项目可用）
将插件文件复制到项目中：
# 作为 git submodule
git submodule add https://github.com/craipy-hub/agents_workflow.git .github/copilot/agents_workflow
# 或直接克隆
mkdir -p .github/copilot
git clone https://github.com/craipy-hub/agents_workflow.git .github/copilot/agents_workflow
项目级安装的好处：
- 只在当前项目中生效，不影响其他项目
- 可以和项目代码一起版本控制
- 团队成员 clone 项目后自动获得这些 Agent
Hook 约束原型
这个仓库现在包含一版基于 Copilot hooks 的协作约束原型，用来把 Team Lead 和子 Agent 的配合流程从“提示约定”升级为“可执行守卫”。
启用条件
- 使用支持 Copilot hooks 的 VS Code 预览版本
- 在
settings.json 中开启 agent-scoped hooks：
"chat.useCustomAgentHooks": true
- 打开本仓库后，VS Code 会自动加载 .github/hooks/workflow-guard.json
当前原型约束了什么
- Team Lead 只能直接调用委派和流程管理相关工具：
runSubagent、manage_todo_list、vscode_askQuestions
- 任意 Agent 调用
vscode_askQuestions 时，必须保留自定义输入入口；如果把 allowFreeformInput 设为 false，全局 PreToolUse hook 会直接拒绝
- SessionStart、SubagentStart、SubagentStop 会写入运行态审计信息，便于排查编排链路
- 如果 Team Lead 已经开始编排（更新了 todo）但没有真正委派任何子 Agent，则 Stop hook 会阻止它直接结束
相关文件
运行态文件
Hook 会把会话状态写到 .github/hooks/.state/，该目录已经加入 .gitignore。
注意事项
- Copilot hooks 仍处于 Preview，事件字段和加载行为后续可能变化
- 官方建议不要让 agent 自动改写 hook 脚本本身，避免自修改后立即执行
- 这一版原型只收紧最稳定的边界，没有把 PM → Designer → Dev → Tester 的完整状态机一次性写死，以免误伤不同任务类型
插件结构
agents_workflow/
├── plugin.json # 插件元数据（Copilot 格式）
├── .claude-plugin/plugin.json # Claude Code 兼容
├── agents/ # Agent 定义
│ ├── team-lead.agent.md # 主控编排者
│ ├── project-manager.agent.md # 项目经理
│ ├── designer.agent.md # UI 设计师
│ ├── developer.agent.md # 开发者
│ └── tester.agent.md # 测试员
├── README.md
├── USAGE.md # 使用示例
└── LICENSE
架构概览
