機能単位のモックアップ生成

機能（Feature）単位でREADME.mdから仕様書とHTMLモックアップを一括生成するワークフローです。

ワークフロー概要

README.md
  │
  ▼
generate（以下を自動的に順次実行）
  ├─ generate-workflow   → workflow.yml + status.json
  ├─ generate-usecase    → usecase.yml
  ├─ generate-ui         → ui.yml
  ├─ generate-screenflow → screenflow.md
  ├─ generate-mock       → mock/*.html
  ├─ generate-manual     → manual.md          （--manual / --all）
  │   └─ --capture       → mock/screenshots/  （--capture / --all）
  └─ generate-acceptance-test → acceptance-test.md （--test / --all）
  │
  ▼
モックアップを確認
  │
  ├─→ feedback ─→ feedback.md（フィードバックを記録）
  │     │
  │     ▼
  │   apply-feedback ─→ 全仕様ファイルに反映 → モック再生成
  │
  ▼
完了

ステップ1: 要件定義（README.md）

.teamkit/<feature-name>/README.md に要件を記述します。以下の項目を含めると、質の高い仕様書が生成されます。

  • 背景: なぜこの機能が必要か
  • 目的: 達成したいこと（箇条書き推奨）
  • 主要アクター: 誰がこの機能を使うか
  • 業務概要: 業務の全体像
  • 要件: アクター別の具体的な要件

ステップ2: 仕様書とモックアップの一括生成

/teamkit:generate YourFeature
/teamkit:generate YourFeature --all    # マニュアル・テスト・スクリーンショットも生成

generate は以下のコマンドを自動的に順次実行します。workflow.yml が存在しない場合は自動生成されます。

2-1. generate-usecase → usecase.yml

ロバストネス分析に基づくユースケースを生成します。

Actor → Boundary（画面） → Control（ロジック） → Entity（データ）

2-2. generate-ui → ui.yml

ユースケースからUI定義を生成します。画面ごとに以下を定義します。

  • 入力フィールド（テキスト、セレクト、日付など）
  • 表示フィールド（読み取り専用情報）
  • タブ、フィルター、アクション
  • バリデーションルール
  • 関連モデル、連携情報

2-3. generate-screenflow → screenflow.md

ユースケースとUI定義から画面遷移図を生成します。ユーザーロール別のフロー、メインフローと代替フロー、画面間の条件分岐が含まれます。

2-4. generate-mock → mock/*.html

UI定義から実際のHTMLモックアップファイルを生成します。

  • mock/index.html - 機能のトップページ（画面一覧）
  • mock/screens.yml - 画面生成状況の管理ファイル
  • mock/<screen_name>.html - 各画面のモックアップ

生成物の確認

.teamkit/YourFeature/mock/index.html をブラウザで開くと、生成されたすべての画面を一覧できます。各画面では、画面レイアウト、フィールド配置、入力フォーム、ボタンの遷移先、一覧画面のフィルターなどが確認できます。

フィードバックと改善

モックアップを確認した後、改善点があれば フィードバック機能 を使って仕様を修正できます。 

# プレビュー付きフィードバック
/teamkit:feedback YourFeature -p "住所フィールドを分割してください"

# フィードバックの適用
/teamkit:apply-feedback YourFeature

関連ガイド