メインコンテンツまでスキップ

生成事例

ここでは、プロンプトから実際に資材を生成した事例を紹介します。 事例ごとに、プロンプト例、生成される成果物、成果物のイメージを示します。

経費精算申請​

プロンプト例​

推論を極力使用せず、スキルセットに従って、以下仕様で成果物を作成してください。

- 「経費精算申請」ワークフローと、対応する申請・承認画面を作成
- 申請画面：「使用目的」（選択・必須）、「経費発生日」（必須）、「金額」（必須）、「備考」（任意）
- サンプルでインストールされている「サンプル会社」をベースにする
- 基本ルートは 申請 -> 承認（課長） -> 承認（サンプル課２１） -> 終了
- ただし、金額が２万円以上の場合は、承認（課長） のあとに 承認（部長） が必須
- 申請画面で入力したデータは、独自テーブルを使わずユーザデータに保存
- その他は適当に決めてください。 もし迷ったら質問してください。

生成される成果物​

  • IM-Workflow インポートデータ（XML）
  • 経費精算 申請画面（JSSP）
  • 経費精算 処理画面（JSSP）
  • 経費精算 詳細画面（JSSP）

成果物のイメージ​

expense_approval_request-01

ダッシュボード画面​

プロンプト例​

あなたはフロントエンドの開発者です。
ダッシュボードを想定した画面を作成したいので、以下仕様で画面のひな形を作成してください。

機能名： product_dashboard

## 画面仕様

- 以下の部品で構成されたダッシュボード
  - 製品売上実績グラフ（棒グラフ）
  - 会社の利益グラフ（棒グラフ）
  - 売上金額と目標金額
  - 今日のスケジュール
  - ログインユーザがやるべきタスクの達成グラフ（円グラフ）とタスク一覧
  - ワークフローの未処理案件一覧
- レイアウト
  - グリッドレイアウトで配置
  - 配置場所はおまかせ
- データ
  - 実際のデータではなく、ダミーでよい

生成される成果物​

  • 製品管理 ダッシュボード画面（JSSP）
  • ルーティングテーブル（XML）

成果物のイメージ​

product_dashboard-01 product_dashboard-02

ウィザード形式の入力画面​

プロンプト例​

あなたはフロントエンド開発のエキスパートです。
以下の要件に従い、自社製品の出荷手続き申請画面を構築してください。
実装はプロジェクトの開発標準に則ること。

## 前提

- 製品マスタ・部品マスタ・顧客マスタなど、検索や参照が必要なデータはすべてダミーデータで構わない
- API連携部分はモック関数で代替し、画面の動作確認ができる状態にすること

## アプリ概要

製品出荷の申請をステップウィザード形式で行うSPAです。
申請者は各ステップを順に進め、最終的に出荷申請を提出します。

## ステップ構成（全6ステップ）

### Step 1: 基本情報入力
以下のフォームフィールドを配置する：

**申請情報**
- 申請番号（自動採番・読み取り専用）
- 申請日（デフォルト: 今日）
- 申請者名
- 申請部署（ドロップダウン）
- 優先度（通常 / 急ぎ / 特急）

**顧客情報**
- 顧客コード（入力 or 検索）
- 顧客名
- 担当者名
- 連絡先（電話・メール）

**配送先情報**
- 配送先名称
- 郵便番号・住所（都道府県〜番地・建物名）
- 配送先担当者・連絡先
- 配送時間帯指定（午前 / 午後 / 指定なし）
- 特記事項（テキストエリア）

### Step 2: 製品・部品構成（BOM）
- 出荷対象製品の選択（製品コード・製品名・型番）
- 数量入力
- 選択した製品に紐づくBOM（部品表）をテーブル表示
  - 部品コード / 部品名 / 必要数 / 単位
- 複数製品を追加可能

### Step 3: 在庫照会・出荷判定
- Step 2で選択した部品に対して在庫照会を実行
- 各部品の在庫状況をテーブルで表示
  - 部品コード / 部品名 / 必要数 / 在庫数 / 過不足 / ステータス（○充足 / △一部不足 / ×不足）
- 全体判定結果を表示
  - **出荷可能**: 全部品が充足 → 次ステップへ進行可
  - **一部不足**: 不足部品のリストと代替案の表示
  - **出荷不可**: アラート表示、申請保留 or 差し戻し

### Step 4: 部品引当・製造シミュレーション
- 出荷可能と判定された部品の引当（予約）処理の確認画面
- 引当対象の部品一覧（引当数・倉庫ロケーション）
- 製造プロセスシミュレーション結果の表示
  - 工程名 / 所要時間 / 担当ライン
  - ガントチャート風の視覚表示（簡易）
- 推定製造リードタイム

### Step 5: スケジュール・コスト確認
**集荷・配送スケジュール**
- 製造完了予定日
- 集荷可能日（予測値）
- 希望出荷日（入力）
- 配送予定日
- 配送手段（ドロップダウン: チャーター便 / 混載便 / 宅配便 / 自社便）
- タイムライン表示（視覚的）

**コスト明細**
- 製品原価（小計）
- 製造コスト
- 梱包費
- 配送費
- その他費用
- 合計金額
- 利益率（自動計算・表示）

### Step 6: 申請確認・提出
- 全ステップの入力内容をサマリーとして一覧表示
- 添付ファイルのアップロードエリア（仕様書・図面等）
- 承認ルート表示（申請者 → 上長 → 出荷管理部門）
- 備考・社内連絡欄
- 「申請する」ボタン（確認ダイアログ付き）
- 「下書き保存」ボタン

## UI/UX要件

- ステップウィザード形式のナビゲーション（上部にステップインジケーター）
- 現在のステップ・完了済みステップ・未到達ステップを視覚的に区別
- 「戻る」「次へ」ボタンでステップ間を移動
- 各ステップにバリデーション（必須項目の未入力チェック）
- テーブルは見やすくストライプ表示
- ステータスはカラーバッジで視覚化

生成される成果物​

  • 製品出荷手続き申請 入力ウィザード画面（JSSP）
  • ルーティングテーブル（XML）

成果物のイメージ​

sample_wizard-01 sample_wizard-02 sample_wizard-03

休暇申請画面​

プロンプト例​

@leave-request-prompt を参照し、成果物を作成してください。

この例で参照している @leave-request-prompt の仕様書は、休暇申請の仕様書サンプルにまとめています。 本ページがプロンプトの実例を示すのに対し、仕様書サンプルは同じ題材を仕様書の切り口で詳しく解説しています。

生成される成果物​

  • IM-Workflow インポートデータ（XML）
  • 休暇申請 申請画面（JSSP）
  • 休暇申請 処理画面（JSSP）
  • 休暇申請 詳細画面（JSSP）
  • 休暇申請 アクション処理（JSSP）
  • ルーティング設定（XML）
  • DDL / DML（PostgreSQL・Oracle・SQL Server）

成果物のイメージ​

leave_request-01 leave_request-02

物品購入申請​

プロンプト例​

@purchase-of-goods-prompt を参照し、成果物を作成してください。

この例で参照している @purchase-of-goods-prompt の仕様書は、物品購入申請の仕様書サンプルにまとめています。 本ページがプロンプトの実例を示すのに対し、仕様書サンプルは同じ題材を仕様書の切り口で詳しく解説しています。

生成される成果物​

  • IM-Workflow インポートデータ（XML）
  • 物品購入申請 申請画面（JSSP）
  • 物品購入申請 処理画面（JSSP）
  • 物品購入申請 詳細画面（JSSP）
  • 物品購入申請 アクション処理（JSSP）
  • ルーティング設定（XML）
  • DDL / DML（PostgreSQL・Oracle・SQL Server）

成果物のイメージ​

purchase_request-01 purchase_request-02