# フロントエンドコンポーネント設計書生成 — 運用ガイド

## 基本情報

| 項目 | 内容 |
|------|------|
| 業種 | IT・開発 |
| ユースケース | フロントエンドコンポーネント設計書生成 |
| WFパターン | `start → llm(コンポーネント設計) → template(TypeScript型定義整形) → end` |
| RAG | なし |
| 検証結果 | E2E pass |
| デモURL例 | http://localhost/workflow/jVqWiMtNUswGQz9c |

## 概要

画面要件とフレームワークを入力として、コンポーネント分割・Props/State定義・データフローを生成する。

## デモ手順

1. DDF Web UI (`/dashboard`) を開く
2. 「フロントエンドコンポーネント設計書生成」の「デモ生成」ボタンをクリック
3. 業種「IT・開発」、UC「フロントエンドコンポーネント設計書生成」が自動入力される
4. 「デモ生成開始」をクリック
5. 生成完了後、デモURLを顧客に共有


## テスト入力例

### 入力例1
```
React + TypeScript + Material UI v5。画面: ユーザー管理ページ。機能: テーブル表示（ソート・フィルター・ページネーション）、ユーザー詳細モーダル（プロフィール編集）、ロール変更ドロップダウン、CSV一括エクスポート、検索バー（リアルタイムフィルター）。状態管理: Zustand。API: REST（SWR でフェッチ）。
```


## 顧客への説明ポイント

- 「これは自動生成されたプロトタイプです。本番利用には追加の設計・開発が必要です」
- 「御社の実データ/ドキュメントを使えば、さらに精度の高いデモをお見せできます」
- 「Self-hostedなので、御社のデータは外部に出ません」

## AI品質評価コメント

出力は意味のあるテキストであり、フロントエンドコンポーネント設計というユースケースのテーマに沿っています。「ユーザー管理ページ」という具体的な画面や「React + TypeScript + Material」という具体的な技術スタックに言及しており、入力クエリ固有の要素を含んでいます。汎用的なテンプレートのみではなく、デモとして見せられる最低限の品質は満たしています。ただし、出力が短いため、全体の網羅性や詳細な品質は評価できませんが、提示された部分においては合格基準を満たしています。

## 次のステップ（受託提案）

1. 顧客の実データでカスタマイズデモ（POC: 5-10万円）
2. 本番環境設計・構築（受託開発）
3. 既存システム（kintone/Salesforce等）とのAPI連携
4. 運用保守サポート