高速プロトタイピング

はじめに

Acsimから出力可能なデータから、プロトタイプ作成に必要なドキュメントおよびプロンプトを取得することで、高速なプロトタイプ構築を実現します。
ToBe業務フローの作成、および画面一覧・機能一覧を生成していることが前提となります。

1. メニュー「プロトタイプ生成」にアクセス

「プロトタイプ生成」画面を開き、表示されたガイドに従って必要データをエクスポートします。
システム選択 で対象のシステムアクターを選択し、画面下部にある まとめてエクスポート ボタンを押下してください。基本的には、すべてを選択して進めてください

エクスポートしたら「2.デザイン選択」へ進みます。

2. デザイン仕様書をダウンロード

「2.デザイン選択」画面を開いたら、 デザイン仕様書をダウンロードする ボタンを押下します。

Acsim Docsのデザイン仕様書ダウンロードページに遷移するので、お好みのデザインテンプレートを選んで ダウンロード ボタンを押下してください。

ダウンロードが完了したら「3.プロンプト生成」へ進みます。

3. プロンプトを生成・コピー

「3.プロンプト生成」画面を開いたら、プロンプトをつくります。
基本は 固定プロンプト はそのままで進めてください。実行したけど上手くいかず追加で条件を指定したいなどの事項があれば 任意プロンプト に入力してください。

画面下部の 最終プロンプト（固定 + 任意） に表示されるテキストを コピー ボタンでコピーしましょう。

テキストをコピーしたら「4.プロトタイプ生成」へ進みます。

4. プロトタイプを生成

「4.プロトタイプ生成」画面を開いたら、利用するAIサービスを選択してプロトタイプを生成します。
ここでは v0（ブイゼロ） を使用する手順を説明します。

4-1. v0にアクセス

v0でプロトタイプ生成 ボタンを押下すると、v0（Vercel社が提供するAI Reactコンポーネント生成サービス）のチャット画面が新しいタブで開きます。
※前提として、v0のアカウントをお持ちの方のみがご利用可能です。

4-2. ファイルを添付し、プロンプトを貼り付けて実行

v0のチャット画面が開いたら、以下の2つを入力欄にセットして送信します。

1. ファイルを添付 — ステップ1、2でダウンロードした業務フローや該当システムの画面一覧/機能一覧、デザイン仕様書などをチャット入力欄にドラッグ＆ドロップまたはクリップアイコン（添付ボタン）から添付します
2. プロンプトを貼り付け — ステップ3でコピーした 最終プロンプト（固定 + 任意） のテキストを、チャット入力欄に貼り付けます（なお、このプロンプトである必要はありません。自由に調整ください）

ファイルとプロンプトの両方がセットされていることを確認したら、 送信ボタン を押してチャットを実行してください。

4-3. 生成結果を確認

v0がプロンプトとファイルの内容を解析し、Reactベースの画面プロトタイプを自動生成します。
生成が完了すると、画面左側にv0の応答（作成したコンポーネントの説明など）、画面右側にプロトタイプのプレビューが表示されます。プレビュー上で実際にクリックやページ遷移など、インタラクティブに動作を確認できます。