🦔

Team Kitで要件定義からモックアップまでを自動化しよう

に公開
mockup
要件定義
teamkit
tech

今回は、AIエディタ（Claude Code）と連携して開発プロセスを劇的に効率化するツール「Team Kit」について紹介します。

要件定義書を書いたり、画面遷移図を作ったり、モックアップをコーディングする作業に時間を取られていませんか？
Team Kitを使えば、自然言語で書いたメモから、仕様書や動くモックアップを自動生成できます。

今回は、「施設管理システム」 を例に、その具体的な使い方をステップバイステップで解説します。

🚀 インストール

まずはTeam Kitをプロジェクトにインストールしましょう。以下のコマンドを実行するだけです。

# カレントディレクトリにインストール
curl -fsSL [https://raw.githubusercontent.com/tango238/teamkit/main/install.sh](https://raw.githubusercontent.com/tango238/teamkit/main/install.sh) | bash -s -- .

これで .claude/commands/teamkit に必要なコマンド群が配置されます。

📝 Step 1: 初期要件を書く

まず、作りたい機能の概要を README.md に書きます。 今回は「施設管理」機能を作ってみましょう。

specs/FacilityManagement/README.md というファイルを作成し、以下のように記述します。

もっと曖昧な仕様でも構わないのですが、その場合はこの後の工程の /teamkit:check を何回か実行して詳細にしたほうが良いです。

# 施設管理

## 背景

施設の運営には、施設・部屋タイプ・部屋の基本情報の管理が不可欠である。これらの情報は予約管理や料金設定の基盤となるため、正確かつ最新の状態を保つ必要がある。

## 目的

- 施設の基本情報を一元管理し、複数施設を効率的に運営できるようにする
- 部屋タイプごとの特性を管理し、多様な宿泊ニーズに対応する
- 各部屋の状態を適切に管理し、予約可能性や清掃対象の判定を正確に行う

## 主要アクター

- 施設管理者
- 清掃スタッフ

## 業務概要

施設管理では、施設・部屋タイプ・部屋の登録、更新、削除、参照を行う。施設情報には名称、住所、チェックイン/チェックアウト時刻などが含まれ、部屋タイプには収容人数、喫煙可否が設定される。各部屋は部屋番号と部屋タイプに紐づけられ、状態ステータスによって予約可能性が制御される。

## 要求

### 施設管理者
施設情報・部屋タイプ・部屋情報の登録・更新を行う

⚙️ Step 2: 要件定義を生成する

書いた README.md を元に、AIが詳細な要件定義を生成します。

/teamkit:create-feature FacilityManagement

このコマンドを実行すると、feature.yml という構造化された仕様ファイルが生成されます。AIが曖昧な部分を補完し、開発に必要な形に整理してくれます。

feature.yml は骨格部分になるため、ある程度の流れや情報の構造はこのファイルで固めておくとモックアップの再生成時にブレが少なくなります。

✅ Step 3: 要件をチェックする

（※このステップはスキップできます）

生成された要件に抜け漏れや矛盾がないか、AIにチェックさせましょう。

/teamkit:check FacilityManagement

AIがプロの視点で仕様をレビューし、改善点を check.md にリストアップしてくれます。 例えば、「部屋の削除時に、予約が入っている場合の挙動が定義されていません」といった鋭い指摘が返ってきます。

指摘内容を確認し、修正が必要な項目には [o] を付けます。

そして、以下のコマンドで反映させます。

/teamkit:update-feature FacilityManagement

これで仕様が明確になりブラッシュアップされました。

🎨 Step 4: モックアップを生成する

ここからがTeam Kitの真骨頂です。仕様書から、実際にブラウザで動くHTMLモックアップを生成します。

/teamkit:create-mock FacilityManagement

このコマンド一つで、以下の処理が自動で行われます。

  • ユーザーストーリー作成: 誰がどう使うかを定義
  • ユースケース抽出: 具体的な操作フローを定義
  • UI定義: 画面の構成要素を定義
  • 画面遷移図作成: 画面間の流れを可視化
  • HTML生成: Tailwind CSSを使ったモダンなUIを生成

生成された specs/FacilityManagement/mock/index.html をブラウザで開くと、実際にクリックして画面遷移できるモックアップが完成しています！

🔄 Step 5: フィードバックで改善する

生成されたモックアップを見て、「ここの項目を分けたいな」と思うことがあるでしょう。 そんな時も、自然言語でフィードバックを送るだけです。

/teamkit:feedback FacilityManagement -p "施設の住所は「郵便番号」「都道府県」「市区町村」「番地」「建物名・部屋番号」に分けてください"

AIがこの要望を理解し、 関連する仕様書（ユーザーストーリーやユースケース、画面遷移図、画面設計書）とモックアップの両方を修正 する計画を立てます。

※一部抜粋

内容を確認して、適用が必要な項目には [o] を付けます。

-p もしくは --preview オプションをつけているとモックアップが即時変更され、フィードバック内容を画面で確認することができます。この場合は TODO が [ ] ではなく [p] で登録されます。

フィードバックを全プロセスに適用するには以下のコマンドで適用します。

適用対象となるTODOは [o] もしくは [p] にマークされたTODOです。

/teamkit:apply-feedback FacilityManagement

これで、 仕様書とモックアップの整合性を保ったまま、修正が完了しました。

💡 まとめ

Team Kitを使うと、「要件を書く → モックアップを作る → 確認する → フィードバックする」 というサイクルを非常に高速に回すことができます。

ドキュメントとUIの乖離が少ない: 常に仕様書からモックアップが生成されるため
手戻りの削減: 早い段階で動くモックアップで確認できるため
エンジニアは本質に集中: 定型的な要件定義からの設計やドキュメント作成から解放される
ぜひ、あなたのプロジェクトでもTeam Kitを試してみてください！

Discussion