画面設計書テンプレートは以下のユースケースでご利用いただけます。
| 用途 | エージェント | プロンプト例 |
|---|---|---|
| 要件から画面設計の生成 | ドキュメントエージェントライトエージェント | xxxのユースケースドキュメントを参考に、必要なフロントエンド画面を設計し、画面設計書テンプレートの様式に沿って出力して。本システムの技術スタックを考慮すること。 |
| イメージから画面設計の生成 | ドキュメントエージェントライトエージェント | 添付の画面イメージを元に、必要なフロントエンド画面を設計し、画面設計書テンプレートの様式に沿って出力して。本システムの技術スタックを考慮すること。 |
| ソースコードから画面設計の生成 | フルスタックエージェント | |
| フロントエンドエージェント | xx画面について関連するソースコードを分析し、画面設計書テンプレートに沿って設計情報を出力して。コードから明確に読み取れた内容のみを出力すること。 |
要件から画面定義書を作成するケースを元に説明します。
プロンプト1：テンプレート変更を実行する
エージェント：ドキュメントエージェント
💡本テンプレートをお使いいただく際は、お使いの言語やフレームワークに合わせてドキュメントエージェントに以下のように指示し、作り変えてからご利用ください。 「@画面設計書テンプレート を{言語/フレームワーク名}用に作り変えて」 本ドキュメントではReact用に作り替えた上で、テンプレートを活用しています。
<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />
@画面設計書テンプレート をReact用に作り変えて
</aside>
プロンプト2：画面定義書作成を実行するプロンプト
エージェント：ドキュメントエージェント
「テンプレート変更を実行するプロンプト」を実行して作成したテンプレートを指定して、以下のように指示してください
<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />
@会員情報更新 のユースケースドキュメントを参考に、必要なフロントエンド画面を設計し、 @画面設計書テンプレート の様式に沿って出力して。
</aside>