使用 Spec-kitty + Claude 从零构建答题游戏

spec-kitty 则是由社区（Priivacy-ai）在spec-kit 基础上进行的二次开发，加入了更多针对复杂项目和多 AI 代理协作的实战功能。

spec-kitty 是在原版的基础上，增加了一套 “AI 自动打工”的工程系统：

物理隔离：用 Git Worktree 开辟独立空间，AI 随便改，不弄乱你的主代码。
自动闭环：不仅会写代码，还会自动运行、自动改错、自动测试。
可视化：提供 Web 看板，像管理员工一样点点鼠标就能监控 AI 进度。
精准控制：通过“宪法”和“任务拆解”大幅降低 AI 乱写代码（幻觉）的概率。

spec-kitty 支持的 Agent 如下：

Claude Code
GitHub Copilot
Gemini CLI
Cursor
Qwen Code
opencode
Windsurf
Kilo Code
Auggie CLI
Roo Code
Codex CLI

使用步骤：

spec-kitty init — 在项目中初始化 spec-kitty
切换到 Agent 中
1. /spec-kitty.constitution — 定义项目的技术栈、编码约束、严禁事项
2. /spec-kitty.specify — 明确需求
3. /spec-kitty.clarify — 进一步细化规格中的模糊点，可选
4. /spec-kitty.plan — 生成实现计划和设计文档
5. /spec-kitty.research— 可行性研究，可选
6. /spec-kitty.tasks — 生成工作包和可执行任务
7. 执行任务，依次完成所有任务
  1. /spec-kitty.implement — 实现需求
  2. /spec-kitty.review — 检查代码
8. /spec-kitty.accept – 验证，可选
9. /spec-kitty.merge — 合并所有分支

.kittify / kitty-specs 目录需要提交到 git 仓库中，目录中不需要提交到内容 spec-kitty 会自动识别并添加到 .gitignore 文件中

初始化#

在项目中执行命令 spec-kitty init . 完成项目的初始化。这里选择的 Agent 是 claude code

1
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
2
│                                                                                                                                                                                                                                                                                                                             │
3
│  Specify Project Setup                                                                                                                                                                                                                                                                                                      │
4
│                                                                                                                                                                                                                                                                                                                             │
5
│  Project         test-card-mey                                                                                                                                                                                                                                                                                              │
6
│  Working Path    /Users/xzl/Desktop/test-card-mey                                                                                                                                                                                                                                                                           │
7
│                                                                                                                                                                                                                                                                                                                             │
8
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
9

10
✓ git detected - will be used for version control
11

12
Agent Selection Strategy
13
This determines how agents are chosen for implementation and review tasks.
14

15
Single agent mode: Claude Code will do both implementation and review
16
Auto-detected script type: POSIX Shell (bash/zsh)
17
Selected AI assistant(s): Claude Code
18
Selected script type: sh
19
Selected mission: Software Dev Kitty
20
Initialize Specify Project
21
├── ● Check required tools (ok)
22
├── ● Select AI assistant(s) (Claude Code)
23
├── ● Select script type (sh)
24
├── ● Select mission (Software Dev Kitty)
25
├── ● Activate mission (Software Dev Kitty (per-feature selection))
26
├── ● Claude Code: fetch latest release (packaged data)
27
├── ● Claude Code: download template (local files)
28
├── ● Claude Code: extract template (commands generated)
29
├── ● Claude Code: archive contents (templates ready)
30
├── ● Claude Code: extraction summary (commands ready)
31
├── ● Claude Code: cleanup (done)
32
├── ● Ensure scripts executable (0 updated)
33
├── ● Initialize git repository (existing repo detected)
34
├── ● Finalize (project ready)
35
└── ● Install git hooks (3 hook(s) installed)
36

37
Project ready.
38

39
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Agent Folder Security ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
40
│                                                                                                                                                                                                                                                                                                                             │
41
│  Some agents may store credentials, auth tokens, or other identifying and private artifacts in the agent folder within your project.                                                                                                                                                                                        │
42
│  Consider adding the following folders (or subsets) to .gitignore:                                                                                                                                                                                                                                                          │
43
│                                                                                                                                                                                                                                                                                                                             │
44
│  - Claude Code: .claude/                                                                                                                                                                                                                                                                                                    │
45
│                                                                                                                                                                                                                                                                                                                             │
46
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
47

48
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Next Steps ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
49
│                                                                                                                                                                                                                                                                                                                             │
50
│  1. You're already in the project directory!                                                                                                                                                                                                                                                                                │
51
│  2. Available missions: software-dev, research (selected per-feature during /spec-kitty.specify)                                                                                                                                                                                                                            │
52
│  3. Start using slash commands with your AI agent (in workflow order):                                                                                                                                                                                                                                                      │
53
│     - /spec-kitty.dashboard - Open the real-time kanban dashboard                                                                                                                                                                                                                                                           │
54
│     - /spec-kitty.constitution - Establish project principles                                                                                                                                                                                                                                                               │
55
│     - /spec-kitty.specify - Create baseline specification                                                                                                                                                                                                                                                                   │
56
│     - /spec-kitty.plan - Create implementation plan                                                                                                                                                                                                                                                                         │
57
│     - /spec-kitty.research - Run mission-specific Phase 0 research scaffolding                                                                                                                                                                                                                                              │
58
│     - /spec-kitty.tasks - Generate tasks and kanban-ready prompt files                                                                                                                                                                                                                                                      │
59
│     - /spec-kitty.implement - Execute implementation from /tasks/doing/                                                                                                                                                                                                                                                     │
60
│     - /spec-kitty.review - Review prompts and move them to /tasks/done/                                                                                                                                                                                                                                                     │
61
│     - /spec-kitty.accept - Run acceptance checks and verify feature complete                                                                                                                                                                                                                                                │
62
│     - /spec-kitty.merge - Merge feature into main and cleanup worktree                                                                                                                                                                                                                                                      │
63
│                                                                                                                                                                                                                                                                                                                             │
64
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
65

66
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Enhancement Commands ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
67
│                                                                                                                                                                                                                                                                                                                             │
68
│  Optional commands that you can use for your specs (improve quality & confidence)                                                                                                                                                                                                                                           │
69
│                                                                                                                                                                                                                                                                                                                             │
70
│  ○ /spec-kitty.clarify (optional) - Ask structured questions to de-risk ambiguous areas before planning (run before /spec-kitty.plan if used)                                                                                                                                                                               │
71
│  ○ /spec-kitty.analyze (optional) - Cross-artifact consistency & alignment report (after /spec-kitty.tasks, before /spec-kitty.implement)                                                                                                                                                                                   │
72
│  ○ /spec-kitty.checklist (optional) - Generate quality checklists to validate requirements completeness, clarity, and consistency (after /spec-kitty.plan)                                                                                                                                                                  │
73
│                                                                                                                                                                                                                                                                                                                             │
74
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
75

76
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Spec Kitty Dashboard Started ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
77
│                                                                                                                                                                                                                                                                                                                             │
78
│  Dashboard URL: http://127.0.0.1:9237                                                                                                                                                                                                                                                                                       │
79
│  Port: 9237                                                                                                                                                                                                                                                                                                                 │
80
│                                                                                                                                                                                                                                                                                                                             │
81
│  The dashboard is running in the background and will continue even after                                                                                                                                                                                                                                                    │
82
│  this command exits. It will automatically update as you work.                                                                                                                                                                                                                                                              │
83
│                                                                                                                                                                                                                                                                                                                             │
84
│  Tip: Run /spec-kitty.dashboard or spec-kitty dashboard to open it in your browser                                                                                                                                                                                                                                          │
85
│                                                                                                                                                                                                                                                                                                                             │
86
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
87

88
Updated .gitignore to exclude AI agent directories:
89
  • .claude/
90
  • .codex/
91
  • .opencode/
92
  • .windsurf/
93
  • .gemini/
94
  • .cursor/
95
  • .qwen/
96
  • .kilocode/
97
  • .augment/
98
  • .roo/
99
  • .amazonq/
100
  • .github/copilot/
101
  • .kittify/.dashboard
102
Created .claudeignore to optimize AI assistant scanning
103
Saved agent configuration (preferred strategy)

在初始化完成后，进入 claude code. 输入 /spec-kitty 就能看见相关的指令了。也可以使用 spec-kitty verify-setup 验证初始化是否正确。

定义项目规章 spec-kitty.constitution#

在项目中切换到 claude code，执行指令 /spec-kitty.constitution 定义项目的技术栈、代码风格、严禁事项。

听着是不是与 skills 中对项目组件、样式的定义有重叠？这里可以直接引用 skills，例如：

1
## H5 Mobile Styling Standards
2

3
Applies to all mobile/H5 views. Reference the `h5-style-guide` skill for full details.

这里可以说吗项目的技术栈，引用 skils / mcp / 提示词 / 任意文件来约束、补充说明。这里就是一个大纲，说明项目相关的内容。

1
❯ /spec-kitty.constitution
2

3
⏺ Searched for 1 pattern (ctrl+o to expand)
4

5
⏺ User answered Claude's questions:
6
  ⎿  · Do you want to establish a project constitution? → Minimal
7

8
⏺ Phase 1: Technical Standards
9
  These are the non-negotiable technical requirements that all features must follow.
10

11
  ---
12

13
⏺ User answered Claude's questions:
14
  ⎿  · What languages and frameworks are required for this project? → TypeScript + React (Frontend)
15

16
⏺ User answered Claude's questions:
17
  ⎿  · What testing framework and coverage requirements apply? → Jest + Vitest, coverage optional
18

19
⏺ User answered Claude's questions:
20
  ⎿  · What are the performance and scale expectations? → Standard web app
21

22
⏺ User answered Claude's questions:
23
  ⎿  · What are the deployment constraints or platform requirements? → Docker + Kubernetes
24

25
⏺ Constitution Summary
26

27
  ---
28
  Technical Standards:
29
  - Languages: TypeScript + React (Frontend)
30
  - Testing: Jest + Vitest, tests required but no strict coverage target
31
  - Performance: Standard web app — page load < 3s, smooth 60fps interactions
32
  - Deployment: Docker + Kubernetes
33

34
  Governance: Defaults (PR-based amendments, review-time compliance)
35

36
  Estimated length: ~50-60 lines
37

38
⏺ User answered Claude's questions:
39
  ⎿  · Proceed with writing the constitution? → /Users/xzl/Desktop/test-card-mey/.agents/skills/vercel-react-best-practices 与 /Users/xzl/Desktop/test-card-mey/.agents/skills/h5-style-guide
40

41
⏺ It looks like you want to incorporate your existing skill files into the constitution. Let me read them.
42

43
⏺ Searched for 2 patterns, read 4 files (ctrl+o to expand)
44

45
⏺ Got it — I'll bake the key standards from both skills into the constitution. Writing now.
46

47
⏺ Bash(mkdir -p /Users/xzl/Desktop/test-card-mey/.kittify/memory)
48
  ⎿  Done
49

50
⏺ Write(.kittify/memory/constitution.md)
51
  ⎿  Wrote 114 lines to .kittify/memory/constitution.md
52
       1 # test-card-mey Constitution
53
       2
54
       3 > Auto-generated by spec-kitty constitution command
55
       4 > Created: 2026-02-25
56
       5 > Version: 1.0.0
57
       6
58
       7 ## Purpose
59
       8
60
       9 This constitution captures the technical standards and coding conventions for
61
      10 test-card-mey. All features and pull requests should align with these principles.
62
     … +104 lines (ctrl+o to expand)
63

64
⏺ Constitution written to .kittify/memory/constitution.md.
65

66
  What was captured:
67

68
  - Technical Standards — TypeScript + React, Jest/Vitest, standard web perf targets, Docker + Kubernetes
69
  - React Performance — References the vercel-react-best-practices skill with the full 8-category priority ordering (from CRITICAL waterfalls/bundle to LOW advanced patterns)
70
  - H5 Styling Standards — Full rules from the h5-style-guide skill: style solution priority, unit conventions (rem/px via postcss-pxtorem, 750px base), camelCase naming, CSS property order, and the complete code review checklist
71

72
  Next steps:
73
  - Run /spec-kitty.specify to create a feature spec (constitution will automatically guide it)
74
  - Share .kittify/memory/constitution.md with your team for review
75
  - Run /spec-kitty.constitution anytime to update it

明确需求 spec-kitty.specify#

这一步需要说明的内容是需要实现什么样的需求，从产品经理的角度描述需求，不参杂任何技术角度的问题。

例如 “帮我实现一个可以在PC与手机端与平板端使用的答题游戏网页。” 而不是“帮我实现几个基于React + Nextjs + TaildWin……”，然后 claude code 会向你确认需求，后续都是交互式的回答与修改即可，最终确认没问题即可自动生成需求规格说明等记录文档。

1
❯ /spec-kitty.specify
2

3
⏺ What feature would you like to build? Describe it in a sentence or two — what it does and who it's for.
4

5
  WAITING_FOR_DISCOVERY_INPUT
6

7
❯ 帮我实现一个可以在PC与手机端与平板端使用的答题游戏网页。
8

9
⏺ 好的！这是一个答题游戏网页，跨 PC / 手机 / 平板使用。让我了解一下核心玩法。
10

11
  问题 1 / 3
12

13
  答题游戏的核心模式是什么？
14

15
  - 单人闯关 — 玩家独自答题，通关/计分，类似知识竞赛
16
  - 多人实时对战 — 多个玩家同时在线抢答，房间制（类似 Kahoot）
17
  - 多人轮流答题 — 同一设备/房间轮流作答，适合聚会场景
18
  - 练习/刷题模式 — 无时间压力，用于学习复习
19

20
  WAITING_FOR_DISCOVERY_INPUT
21

22
❯ 帮我实现一个可以在PC与手机端与平板端使用的答题游戏网页。
23

24
⏺ 好的！这是一个答题游戏网页，跨 PC / 手机 / 平板使用。让我了解一下核心玩法。
25

26
  问题 1 / 3
27

28
  答题游戏的核心模式是什么？
29

30
  - 单人闯关 — 玩家独自答题，通关/计分，类似知识竞赛
31
  - 多人实时对战 — 多个玩家同时在线抢答，房间制（类似 Kahoot）
32
  - 多人轮流答题 — 同一设备/房间轮流作答，适合聚会场景
33
  - 练习/刷题模式 — 无时间压力，用于学习复习
34

35
  WAITING_FOR_DISCOVERY_INPUT
36

37
❯ 多人轮流答题，在一个网页上进行
38

39
⏺ 明白了！同一页面上多人轮流作答，聚会/桌游风格。
40

41
  问题 2 / 3
42

43
  题目内容怎么来？
44

45
  - 内置题库 — 预设好一批题目，开箱即用
46
  - 主持人/管理员自定义 — 游戏开始前手动输入题目和答案
47
  - 两者都要 — 有默认题库，也支持自定义
48

49
  WAITING_FOR_DISCOVERY_INPUT
50

51
❯ 两者都要 — 有默认题库，也支持自定义
52

53
⏺ 问题 3 / 3
54

55
  游戏规则细节是什么？（可多选，没有要求就选默认）
56

57
  - 计时答题 — 每题有倒计时，超时算错
58
  - 计分制 — 答对得分，可有速度加成
59
  - 答错扣分 — 答错会扣分
60
  - 纯娱乐 — 不计分，只看对错，重在参与
61

62
  你期望玩家人数范围大概是多少？（比如 2-8 人）
63

64
  WAITING_FOR_DISCOVERY_INPUT
65

66
❯ 1～12人
67

68
⏺ 完美。我已经有足够的上下文了。
69

70
  ---
71
  Intent Summary — 多人轮流答题游戏
72

73
  功能标题: Multiplayer Turn-Based Quiz Game
74

75
  一个响应式答题游戏网页，支持 1-12 名玩家在同一页面上轮流作答。
76

77
  核心功能：
78
  - 玩家设置 — 游戏开始前输入玩家数量（1-12）和名字
79
  - 题目来源 — 内置默认题库 + 主持人可在游戏前自定义题目/答案
80
  - 轮流机制 — 每轮显示当前玩家，展示题目，等待作答
81
  - 题型 — 单选题（多选项，含正确答案）
82
  - 计分 — 答对得分，答错不扣分，最终展示排行榜
83
  - 计时 — 每题有倒计时（默认合理秒数）
84
  - 结束 — 所有题目完成后显示最终排行榜
85
  - 设备适配 — PC / 平板 / 手机全端响应式布局
86

87
  Mission: software-dev
88

89
  这个理解准确吗？有需要调整的地方吗？
90

91
❯ 题目来源 — 内置默认题库 + 自定义的题库 （可自定义新增题库）多个题库合并
92

93
⏺ 明白了，更新理解：
94

95
  题目来源（更新）：
96
  - 内置默认题库 — 预设题目，开箱可用
97
  - 自定义题库 — 可新建多个独立题库，每个题库有名称和题目列表
98
  - 题库合并 — 开始游戏前，可勾选多个题库（内置 + 自定义任意组合），合并后随机抽题
99

100
  所以游戏流程大概是：选择题库 → 设置玩家 → 开始答题 → 排行榜
101

102
  这个理解对吗？确认后我就开始生成规格说明。
103

104
❯ 对的
105

106
⏺ Bash(spec-kitty agent feature create-feature "multiplayer-turn-based-quiz-game" --json)
107
   ...
108
   ...
109

110
⏺ 规格说明已生成并提交。
111

112
  ---
113
  Feature 001-multiplayer-turn-based-quiz-game — 完成
114

115
  文件位置:
116
  - kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md — 主规格说明
117
  - kitty-specs/001-multiplayer-turn-based-quiz-game/meta.json — 元数据
118
  - kitty-specs/001-multiplayer-turn-based-quiz-game/checklists/requirements.md — 质量检查清单（全部通过）
119

120
  规格摘要:
121

122
  ┌──────────┬──────────────────────────────────────────────────────────────────┐
123
  │   项目   │                               内容                               │
124
  ├──────────┼──────────────────────────────────────────────────────────────────┤
125
  │ 用户故事 │ 4 个（P1 核心游戏流程 → P4 响应式适配）                          │
126
  ├──────────┼──────────────────────────────────────────────────────────────────┤
127
  │ 功能需求 │ 22 条（FR-001 ~ FR-022）                                         │
128
  ├──────────┼──────────────────────────────────────────────────────────────────┤
129
  │ 成功标准 │ 6 条可量化指标                                                   │
130
  ├──────────┼──────────────────────────────────────────────────────────────────┤
131
  │ 边界情况 │ 6 个已定义                                                       │
132
  ├──────────┼──────────────────────────────────────────────────────────────────┤
133
  │ 关键实体 │ 5 个（QuestionBank、Question、Player、GameSession、Leaderboard） │
134
  └──────────┴──────────────────────────────────────────────────────────────────┘
135

136
  核心假设（已记录在 spec）:
137
  - 纯客户端，localStorage 持久化，无需后端
138
  - 单设备共享屏幕，无网络多人
139
  - 仅支持单选题，中文内置题库，答对得 1 分
140

141
  ---
142
  下一步:
143
  - /spec-kitty.clarify — 进一步细化规格中的模糊点
144
  - /spec-kitty.plan — 生成实现计划和设计文档
145
  - /spec-kitty.tasks — 生成工作包和可执行任务

这里可以看见已经自动给出了下一步的操作说明 /spec-kitty.clarify，/spec-kitty.plan，/spec-kitty.tasks

细化需求 spec-kitty.clarify#

在 Claude code 中输入 /spec-kitty.clarify ，等待 AI 验证和抛出问题。

1
❯ /spec-kitty.clarify
2

3
⏺ Bash(spec-kitty agent feature check-prerequisites --json --paths-only)
4

5
⏺ Read 1 file (ctrl+o to expand)
6

7
⏺ 已加载规格说明并完成覆盖度扫描。发现以下几个需要澄清的关键点，我将逐一提问。
8

9
  ---
10
  问题 1 / 5 — 答题后的推进方式
11

12
  玩家答完一题（或超时）后，系统如何进入下一题？
13

14
  Options: (A) 自动推进 — 显示答案结果约 3 秒后自动进入下一轮 · (B) 手动推进 — 显示答案结果后，需有人点击"下一题"按钮才推进 · (C) 短暂展示后需确认 — 先显示对错，再出现一个"继续"按钮，所有人确认后才推进
15

16
  WAITING_FOR_DISCOVERY_INPUT
17

18
❯ C
19

20
⏺ ✓ 答案记录：答题结果先展示，然后由人点击"继续"推进。正在更新规格说明……
21

22
⏺ Update(kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md)
23

24
⏺ ---
25
  问题 2 / 5 — 换人过渡屏
26

27
  每位玩家答完题、点击"继续"后，切换到下一位玩家时，是否需要一个过渡屏（例如："轮到 [玩家名] 了 — 请接过设备，点击开始"）？
28

29
  Options: (A) 需要 — 每次换人都有过渡屏，防止上一位玩家看到下一题 · (B) 不需要 — 直接显示下一题，玩家名在题目页面上方展示即可
30

31
  WAITING_FOR_DISCOVERY_INPUT
32

33
✻ Baked for 36s
34

35
❯ B
36

37
⏺ ✓ 答案记录：换人无过渡屏，直接展示下一题，当前玩家名显示在题目页顶部。正在更新规格说明……
38

39
⏺ Update(kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md)
40

41
⏺ ---
42
  问题 3 / 5 — 每局题目数量
43

44
  开始游戏时，是否可以设定本局要答的题目数量（而不是默认使用所选题库的全部题目）？
45

46
  Options: (A) 固定全部 — 永远使用所选题库中的全部题目，无需设置 · (B) 可自定义 — 主持人可在开始前设置本局题目数量上限（如"只答 20 题"）
47

48
  WAITING_FOR_DISCOVERY_INPUT
49

50
❯ 设定游戏的轮数
51

52
⏺ ✓ 答案记录："轮数"作为游戏配置项 — 主持人在开始前设定本局要进行几轮，一轮 = 每位玩家各答一题。正在更新规格说明……
53

54
⏺ Update(kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md)
55

56
⏺ ---
57
  问题 4 / 5 — 自定义题库的导入/导出
58

59
  用户能否将自定义题库导出为文件（方便分享或备份），或从文件导入题库？
60

61
  Options: (A) 不需要 — 题库仅存本设备，无导入/导出功能 · (B) 仅导出 — 可将题库导出为文件（如 JSON），方便备份 · (C) 导入+导出 — 可导出也可从文件导入，支持跨设备共享
62

63
  WAITING_FOR_DISCOVERY_INPUT
64

65
✻ Sautéed for 1m 8s
66

67
❯ C
68

69
⏺ ✓ 答案记录：支持题库导出（JSON 文件）和从文件导入，实现跨设备共享。正在更新规格说明……
70

71
⏺ Update(kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md)
72

73
⏺ ---
74
  问题 5 / 5 — 排行榜同分处理
75

76
  游戏结束时，若多名玩家得分相同，排行榜如何排列？
77

78
  Options: (A) 相同排名 — 同分玩家并列同一名次（如并列第 2） · (B) 按答题顺序 — 同分时轮次靠前的玩家排名更高 · (C) 按名字字母序排列同分玩家
79

80
  WAITING_FOR_DISCOVERY_INPUT
81

82
✻ Crunched for 30s
83

84
❯ A
85

86
⏺ ✓ 答案记录：同分玩家并列相同名次。正在写入并完成最终验证……
87

88
⏺ Update(kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md)
89

90
⏺ ---
91
  澄清完成 — 5 / 5 问题已回答
92

93
  规格说明已更新并提交：kitty-specs/001-multiplayer-turn-based-quiz-game/spec.md
94

95
  修改的章节：
96
  - Clarifications / Session 2026-02-25 — 新增，记录 5 条问答
97
  - Functional Requirements / Gameplay — FR-006、FR-008、FR-009 更新
98
  - Functional Requirements / Game Setup — 新增 FR-005b（轮数设置）
99
  - Functional Requirements / Question Bank Management — 新增 FR-017b、FR-017c（导入/导出）
100
  - Functional Requirements / End of Game — FR-019 更新（同分并列）
101
  - Key Entities — GameSession 更新（含轮数字段）
102
  - Edge Cases — 问题池不足时的提示说明更新
103

104
  覆盖度总结：
105
  - 功能范围与行为 — Resolved
106
  - 领域与数据模型 — Resolved
107
  - 交互与 UX 流程 — Resolved（答题推进方式、换人方式均已明确）
108
  - 非功能质量属性 — Clear（性能指标已在规格中定义）
109
  - 集成与外部依赖 — Resolved（JSON 导入/导出格式已明确）
110
  - 边界情况与错误处理 — Clear
111
  - 约束与取舍 — Clear
112
  - 术语一致性 — Clear
113
  - 完成信号 — Clear
114

115
  下一步：执行 /spec-kitty.plan 生成实现计划和设计文档。
116

117
✻ Worked for 46s

生成实现计划和设计文档 spec-kitty.plan#

1
❯ /spec-kitty.plan
2

3
⏺ 已加载规格说明。这是一个中高复杂度功能（多屏幕状态机 + 本地持久化 + 导入/导出），需要确认几个架构决策。
4

5
  ---
6
  规划问题 1 / 4 — 项目起点
7

8
  当前 test-card-mey 是全新项目还是已有代码基础？
9

10
  Options: (A) 全新项目 — 从零搭建，需要初始化脚手架 · (B) 已有 React/TypeScript 项目 — 在现有代码库中新增此功能 · (C) 有框架但无业务代码 — 已初始化脚手架（如 Vite + React），但业务代码为空
11

12
  WAITING_FOR_PLANNING_INPUT
13

14
❯ C
15

16
⏺ Read 1 file (ctrl+o to expand)
17

18
⏺ 已确认：Vite + React 19 + TypeScript + Ant Design v6 + Tailwind + Less，完全符合宪法。
19

20
  ---
21
  规划问题 2 / 4 — 状态管理
22

23
  游戏会话有复杂状态（当前玩家、轮次、分数、题目池等），选用哪种状态管理方案？
24

25
  Options: (A) Zustand — 轻量全局状态库，适合游戏状态机，推荐 · (B) React Context + useReducer — 纯内置方案，无额外依赖 · (C) Redux Toolkit — 功能完整但相对重量级
26

27
  WAITING_FOR_PLANNING_INPUT
28

29
✻ Cooked for 39s
30

31
❯ A
32

33
⏺ ---
34
  规划问题 3 / 4 — 页面导航
35

36
  游戏有多个视图（设置 → 答题 → 结果 → 题库管理），如何处理视图切换？
37

38
  Options: (A) React Router — URL 路由，支持浏览器前进/后退，可直接分享特定页面链接 · (B) 条件渲染 — 用状态控制视图切换，无 URL 变化，更简单
39

40
  WAITING_FOR_PLANNING_INPUT
41

42
❯ A
43

44
⏺ ---
45
  规划问题 4 / 4 — 测试策略
46

47
  游戏逻辑（轮次推进、计分、题库合并等）如何测试？
48

49
  Options: (A) Vitest 单元测试覆盖核心游戏逻辑 + React Testing Library 覆盖关键交互 · (B) 仅 Vitest 单元测试覆盖纯函数逻辑，组件不写测试 · (C) 暂不写测试，先实现功能
50

51
  WAITING_FOR_PLANNING_INPUT
52

53
❯ B
54

55
⏺ 工程对齐确认：
56
  - 脚手架：Vite + React 19 + TypeScript（现有）
57
  - 状态管理：Zustand
58
  - 路由：React Router
59
  - 测试：Vitest（纯函数/游戏逻辑）
60
  - UI：Ant Design v6 + Tailwind + Less（宪法规定）
61
  - 持久化：localStorage + Browser File API（导入/导出）
62

63
  确认后我将开始生成计划文档。没问题的话直接回复确认即可。
64

65
  WAITING_FOR_PLANNING_INPUT
66

67
❯ 确认
68

69
⏺ Bash(git rev-parse --abbrev-ref HEAD)
70
  ...
71

72
⏺ 规划阶段完成。
73

74
  ---
75
  生成的文档
76

77
  ┌────────────────────────────────────────────────────────────────────────────────┬────────────────────────────────────────────────────────────────────────────────────────┐
78
  │                                      文件                                      │                                          内容                                          │
79
  ├────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
80
  │ kitty-specs/001-multiplayer-turn-based-quiz-game/plan.md                       │ 完整实现计划（技术上下文、宪法检查、项目结构、屏幕流程、状态机）                       │
81
  ├────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
82
  │ kitty-specs/001-multiplayer-turn-based-quiz-game/research.md                   │ 9 个架构决策（Zustand、React Router、File API、密集排名、计时器、pxtorem、题库格式等） │
83
  ├────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
84
  │ kitty-specs/001-multiplayer-turn-based-quiz-game/data-model.md                 │ TypeScript 接口定义、状态机、验证规则、localStorage 布局、派生值公式                   │
85
  ├────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
86
  │ kitty-specs/001-multiplayer-turn-based-quiz-game/contracts/state-contracts.ts  │ Zustand Store 接口契约                                                                 │
87
  ├────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
88
  │ kitty-specs/001-multiplayer-turn-based-quiz-game/contracts/storage-schema.json │ localStorage + 导入/导出 JSON Schema                                                   │
89
  ├────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
90
  │ kitty-specs/001-multiplayer-turn-based-quiz-game/quickstart.md                 │ 安装步骤、路由表、工作包顺序（WP-01 ~ WP-09）                                          │
91
  └────────────────────────────────────────────────────────────────────────────────┴────────────────────────────────────────────────────────────────────────────────────────┘
92

93
  宪法检查：全部通过 — 无违规项。
94

95
  覆盖度：
96
  - 功能范围 — Clear
97
  - 数据模型 — Resolved（含完整 TS 类型）
98
  - 交互/UX 流程 — Resolved（状态机 + 屏幕流）
99
  - 非功能属性 — Clear（性能目标已在 plan.md 记录）
100
  - 集成与依赖 — Resolved（Zustand persist、File API、JSON schema）
101
  - 边界情况 — Clear
102

103
  ---
104
  下一步：执行 /spec-kitty.tasks 生成工作包和可执行任务。
105

106
✻ Baked for 4m 35s

生成可执行任务 spec-kitty.tasks#

1
❯ /spec-kitty.tasks
2

3
⏺ Bash(spec-kitty agent feature check-prerequisites --json --paths-only --include-tasks)
4

5
⏺ Read 3 files (ctrl+o to expand)
6

7
⏺ 正在推导完整子任务列表并分组……生成 9 个工作包。
8

9
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks.md)
10

11
⏺ Now generate all 9 WP prompt files in parallel batches:
12

13
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP01-project-setup-and-foundation.md)
14

15
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP02-bank-store-and-persistence.md)
16

17
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP03-game-engine-and-store.md)
18

19
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP04-setup-page.md)
20

21
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP05-game-page-and-result-page.md)
22

23
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP06-leaderboard-page.md)
24

25
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP07-bank-manager-page.md)
26

27
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP08-responsive-design-and-polish.md)
28

29
⏺ Write(kitty-specs/001-multiplayer-turn-based-quiz-game/tasks/WP09-unit-tests.md)
30

31
⏺ Now run finalize-tasks:
32

33
⏺ Bash(spec-kitty agent feature finalize-tasks --json)
34

35
⏺ ✅ 已提交（fe01bb5）。任务生成完毕。
36

37
  ---
38
  工作包汇总 — 9 个 WP，46 个子任务
39

40
  ┌──────┬────────────────────────────┬──────────┬──────────┬───────────┐
41
  │  WP  │            标题            │ 子任务数 │ 预估行数 │   依赖    │
42
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
43
  │ WP01 │ Project Setup & Foundation │ 6        │ ~350     │ 无        │
44
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
45
  │ WP02 │ Bank Store & Persistence   │ 5        │ ~380     │ WP01      │
46
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
47
  │ WP03 │ Game Engine & Game Store   │ 6        │ ~400     │ WP01      │
48
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
49
  │ WP04 │ Setup Page                 │ 5        │ ~370     │ WP02+WP03 │
50
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
51
  │ WP05 │ Game Page & Result Page    │ 5        │ ~420     │ WP03      │
52
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
53
  │ WP06 │ Leaderboard Page           │ 4        │ ~280     │ WP03      │
54
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
55
  │ WP07 │ Bank Manager Page          │ 6        │ ~450     │ WP02      │
56
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
57
  │ WP08 │ Responsive Design & Polish │ 6        │ ~380     │ WP04-07   │
58
  ├──────┼────────────────────────────┼──────────┼──────────┼───────────┤
59
  │ WP09 │ Unit Tests                 │ 3        │ ~300     │ WP02+WP03 │
60
  └──────┴────────────────────────────┴──────────┴──────────┴───────────┘
61

62
  大小验证: ✓ 所有 WP 在 280–450 行范围内，均在理想区间（200–500 行）
63

64
  并行化机会:
65
  WP01
66
   ├── WP02 ──┬── WP04 ──┐
67
   └── WP03 ──┤           ├── WP08
68
              ├── WP05 ──┤
69
              ├── WP06 ──┤
70
              └── WP07 ──┘   WP09（可与 WP08 并行）
71

72
  MVP 范围: WP01 + WP02 + WP03 + WP04 + WP05 + WP06 — 可完整运行游戏，含内置题库
73

74
  下一步: 执行 /spec-kitty.implement WP01 开始实现第一个工作包。
75

76
✻ Cooked for 14m 10s

执行任务#

轮流执行 /spec-kitty.implement 、/spec-kitty.review 直至所有的任务都为待合并状态，再执行 /spec-kitty.merge

监控面板 spec-kitty dashboard#

执行命令 spec-kitty dashboard 即可启动监控面板服务

1
xzl@xzldeMac-mini test-card-mey % spec-kitty dashboard
2

3
Spec Kitty Dashboard
4
============================================================
5

6
  Project Root: /Users/xzl/Desktop/test-card-mey
7
  URL: http://127.0.0.1:9237
8
  Port: 9237
9

10
  ✅ Status: Dashboard already running on port 9237
11

12
============================================================
13

14
✅ Opening dashboard in your browser...

在 Implement 界面中查看任务进度

一个小时后，这期间需要不断手动 /spec-kitty.implement 、/spec-kitty.review。理论上也可以写一个提示词让他按顺序自动跑完所有指令。

结果#

claude code 成本统计。AI 工作耗时 2h 2m 48s

1
❯ /cost
2
  ⎿  Total cost:            $36.45
3
     Total duration (API):  2h 2m 48s
4
     Total duration (wall): 13h 56m 49s
5
     Total code changes:    7581 lines added, 161 lines removed
6
     Usage by model:
7
         claude-haiku-4-5:  106.4k input, 9.3k output, 0 cache read, 65.9k cache write ($0.2353)
8
        claude-sonnet-4-6:  21.7k input, 213.7k output, 39.5m cache read, 1.8m cache write ($36.22)

在开发完成后，因为 Agent 使用超出时间窗口限制，手动修复了两个全局状态使用错误。

从界面效果来看需求描述中的功能都实现了。H5 与移动端的适配也还可以。界面样式美观程度一般，因为没有补充对应的要求说明，若搭配上对应的 skill 应该就能生成更美观的界面（例如 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill 或 https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md）

界面效果：https://byte-n.github.io/spec-kitty-test-question-game/