第 01 期 | 项目背景与双模式需求概览

⏱ 预计阅读 4 分钟 更新于 2026/5/7
💡 进群学习加 wx: agentupdate
(申请发送: agentupdate)

本教程基于真实项目复盘，记录使用 Claude Code Teams 模式开发「双模式网页计算器」（老年模式 + 标准模式）看完整过程。重点覆盖 Teams 配置、避坑指南、tmux 协作、通知机制、上下文管理等实战问题。

1.1 项目概览

1.1.1 产品需求

单页网页计算器，支持两种 UI 模式：

模式 目标用户 按钮尺寸 字体大小 特性
标准模式 普通用户 48×48px 18-20px 完整功能、现代配色
老年模式 65 岁以上 80×80px 28-36px 高对比 WCAG AAA、简化操作、长按清空

技术约束：纯 HTML/CSS/JS，无框架，无外部依赖，支持离线。

1.1.2 团队组成

Agent 职责 可并行 实际模型
team-lead（你） 规划、协调、验收 - Glm-5
ui-dev HTML 结构 + CSS 主题 + 响应式 + ARIA ✅ 立即 claude-opus-4-7
logic-dev 计算引擎 + 表达式解析 + 键盘 + DOM 绑定 ✅ 立即 claude-opus-4-7
qa-engineer 测试框架 + 单元/集成/E2E/无障碍测试 ❌ 等前两者完成 claude-opus-4-7

1.1.3 最终文件结构

teamtest/
├── CLAUDE.md                # 项目约定（agent 行为规则）
├── requirement.md           # 需求规格（中文）
├── task_plan.md             # 分阶段计划
├── progress.md              # 会话进度日志
├── findings.md              # 技术决策记录
├── bugs.md                  # Bug 追踪
├── index.html               # 语义化 HTML（ARIA 标签、按钮 ID）
├── style.css                # 双模式 CSS 变量主题
├── app.js                   # Shunting-yard 计算引擎 + DOM 绑定
├── test-runner.js           # 轻量测试框架
├── test.js                  # 单元测试（48 用例）
├── test-dom.js              # DOM 集成测试
├── test-a11y.js             # 无障碍测试
├── test-runner.html         # 浏览器测试运行器
├── .claude/
│   └── settings.json        # 权限白名单（auto-approve）
└── scripts/
    ├── setup-team.sh        # tmux 环境初始化
    └── start-team.md        # Teams 启动步骤