UIモック 自動生成

アーキテクチャ図(データフロー)

🎨 UIモック 自動生成 デザイン・クリエイティブ

入力

画面要件

ツール

ChatGPT

整理

ツール

v0

UI生成

ツール

Figma

取り込み

確認

人間

調整

GENAI& 自動化ブループリント

構築ステップ

1. 1 ChatGPTで画面要件を整理
2. 2 v0でUIを生成
3. 3 Figmaへ取り込み
4. 4 デザイナーが調整

AIに使うプロンプトサンプル

この構成図のAIステップでそのまま使えるプロンプト例です。コピーして調整してご利用ください。

ChatGPT：整理 テキスト生成 コピー

あなたは「デザイン・クリエイティブ」領域のプロフェッショナルです。
自動化フロー「UIモック 自動生成」の工程『整理』を担当します。

# 入力（下の """ の中に実データを貼り付け）
画面要件:
"""
（ここに画面要件の内容を貼り付け）
"""

# 実行内容
整理を行ってください。

# 出力形式
- 要点を3〜5個の箇条書き(各40字以内)
- 最後に一言サマリー

# 制約・トーン
- 日本語。事実ベースで、根拠の薄い断定や誇張は避ける。
- 不明点や前提が必要な箇所は［要確認］と明示する。