仕様書駆動的なバイブコーディング
概要
最近は、まず要望をラフに書き出し、それを AI にインタビューさせながら issue に落とし込み、
その issue を基準に実装とレビューを回すやり方を試している。
役割
［人間］ やりたいことを書き、質問に答え、最終判断を行う。
［質問AI］ 要件を聞き出して issue を作る。レビューもする。
［実装AI］ issue に沿って実装し、レビューに対応する。
［サブエージェント］ issue と実装のみから（実装の経緯無しに）、実装が趣旨に沿っているかを判定する。
流れ
code:mermaid
%%{init: {
"themeVariables": {
"fontSize": "8px",
"messageFontSize": "9px",
"noteFontSize": "9px",
"actorFontSize": "10px"
},
"sequence": {
"diagramMarginY": 5,
"messageMargin": 7,
"noteMargin": 4,
"boxMargin": 4,
"boxTextMargin": 2,
"actorMargin": 20
}
}}%%
sequenceDiagram
participant H as 人間
participant Q as 質問AI
participant I as 実装AI
participant S as サブエージェント
rect rgb(245,245,255)
note over H,Q: I. 仕様化
H->>Q: ラフ
Q->>H: インタビュー
H->>Q:
Q->>I: issue
end
rect rgb(245,255,245)
note over I,S: II. 実装
I->>S: 実装・確認
S->>I:
I->>Q: PR
end
rect rgb(255,245,245)
note over Q,H: III. レビュー
Q->>H: 報告・質問
H->>Q:
Q->>I: PR返信
end
rect rgb(245,255,245)
note over I,S: IV. 修正
I->>S: 実装・確認
S->>I:
I->>Q: push
end
rect rgb(255,245,245)
Q->>H: 報告
end
説明
I. 仕様化
1. ［人間］ やりたいことをラフに書く
曖昧さの少ない issue を作りたいので、そのために必要な情報をインタビューしてほしいと質問AIに頼む。
2. ［質問AI］ 必要な情報を聞き出す
人間への質問を通じて、issue を作るために必要な情報を揃える。
情報が揃ったら issue を作成する。
code:mermaid
%%{init: {
"themeVariables": {
"fontSize": "8px",
"messageFontSize": "9px",
"noteFontSize": "9px",
"actorFontSize": "10px"
},
"sequence": {
"diagramMarginY": 5,
"messageMargin": 1,
"noteMargin": 4,
"boxMargin": 4,
"boxTextMargin": 10,
"actorMargin": 10
}
}}%%
sequenceDiagram
participant H as 人間
participant Q as 質問AI
participant I as 実装AI
participant S as サブエージェント
rect rgb(245,245,255)
note over H,Q: I. 仕様化
H->>Q: ラフ
loop
Q->>H: 質問
H->>Q: 回答
end
Q->>I: issue
end
II. 実装
3. ［実装AI］ issue に沿って実装する
3.1 実装
3.2 サブエージェントで確認
issue ，現在の実装，差分のみをサブエージェントに渡して、実装がissue の趣旨に沿っているかを判断させる。
趣旨に基づく判定のために，実装経緯の文脈は渡さない
3.3 修正
ダメなら修正する。
新たなサブエージェントで再度確認する。（文脈蓄積を避ける）
この流れを OK が出るまで繰り返す。
3.4 PR 作成
OK が出たら PR を作成する。
code:mermaid
%%{init: {
"themeVariables": {
"fontSize": "8px",
"messageFontSize": "9px",
"noteFontSize": "9px",
"actorFontSize": "10px"
},
"sequence": {
"diagramMarginY": 5,
"messageMargin": 1,
"noteMargin": 4,
"boxMargin": 4,
"boxTextMargin": 10,
"actorMargin": 10
}
}}%%
sequenceDiagram
participant H as 人間
participant Q as 質問AI
participant I as 実装AI
participant S as サブエージェント
Q->>I: issue
rect rgb(245,255,245)
note over I,S: II. 実装
loop
I->>S: issue・実装
S->>I: 判定（一致/不一致）
end
I->>Q: PR
end
III. レビュー
4. ［質問AI］ レビュー
4.1 PR を確認する
PR を読み、趣旨に沿っているかを確認する。
4.2 人間に報告・確認する
わからないことがあれば人間に再度インタビューする。
4.3 PRコメント投稿
問題が issue 側にある場合は、issue の追記・訂正も行う。
code:mermaid
%%{init: {
"themeVariables": {
"fontSize": "8px",
"messageFontSize": "9px",
"noteFontSize": "9px",
"actorFontSize": "10px"
},
"sequence": {
"diagramMarginY": 5,
"messageMargin": 1,
"noteMargin": 4,
"boxMargin": 4,
"boxTextMargin": 10,
"actorMargin": 10
}
}}%%
sequenceDiagram
participant H as 人間
participant Q as 質問AI
participant I as 実装AI
participant S as サブエージェント
I->>Q: PR
rect rgb(255,245,245)
note over Q,H: III. レビュー
loop
Q->>H: 報告・質問
H->>Q: 回答
end
Q->>I: PR返信（issue修正）
end
IV. 修正
5. ［実装AI］ レビュー対応
issue や PR のコメントを確認。
実装と確認をサブエージェントの OK が出るまで繰り返す。
6. ［質問AI］ 再レビュー
code:mermaid
%%{init: {
"themeVariables": {
"fontSize": "8px",
"messageFontSize": "9px",
"noteFontSize": "9px",
"actorFontSize": "10px"
},
"sequence": {
"diagramMarginY": 5,
"messageMargin": 1,
"noteMargin": 4,
"boxMargin": 4,
"boxTextMargin": 10,
"actorMargin": 10
}
}}%%
sequenceDiagram
participant H as 人間
participant Q as 質問AI
participant I as 実装AI
participant S as サブエージェント
Q->>I: PR返信・issue更新
rect rgb(245,255,245)
note over I,S: 修正
loop
I->>S: 確認
S->>I: 判定
end
I->>Q: push
end
V. 仕上げ
7. ［人間］ 確認ループ
4〜6 を、人間と質問AIの両方が OK と判断するまで繰り返す。
8. ［人間］ 最終確認
最後に成果物をチェックして、趣旨に沿っているか確認する。
OK であれば merge する。
NG なら PR にコメントを返してループに戻るか、諦めてそのブランチを捨てるかを判断する。
code:mermaid
sequenceDiagram
participant H as 人間
participant Q as 質問AI
participant I as 実装AI
participant S as サブエージェント
loop
rect rgb(255,245,245)
Q->>H: 報告・相談
H->>Q: 回答
Q->>I: レビュー
end
rect rgb(245,255,245)
I-->S: レビュー対応
I->>Q: push
end
end
note over H: merge or 破棄