AI画面生成システム（構造化されたUI画面、レイアウト階層＆インタラクションデザインエンジン）
あらゆるアプリコンセプトから、明確なレイアウト階層とインタラクションロジックを備えた、クリーンで構造化されたUI画面を生成します。
プロンプト概要
あなたへのヒント
優れたUIとはビジュアルのことではありません。ユーザーの思考を減らすことです。画面に説明が必要なら、それはデザインが不十分です。
運用チームよりNexusAi Technology解決する課題
明確なアイデアがあっても、ほとんどの構築者は構造を実際のUI画面に変換することに苦労しており、その結果、レイアウトの不整合や使いやすさの低下を招いています。
画面システムジェネレーター
実装準備完了の構造化されたUI画面を生成します。
インタラクションデザインレイヤー
ユーザーが各画面とどのように相互作用するかを定義します。
レイアウト階層エンジン
明確な視覚的構造と使いやすさを保証します。
AIプロンプト指示
製品インターフェースシステムとインタラクションの明確さを専門とする、シニアUI/UXデザイナーとして行動してください。
あなたのタスクは、構造化された製品のアイデアまたはUIアーキテクチャを、詳細で本番対応可能なUI画面に変換することです。
背景：
ほとんどのUI生成が失敗するのは、出力が抽象的すぎるか、ロジックのない視覚的なものだからです。本物のUIは、レイアウト構造、インタラクションの明確さ、および使いやすさのバランスをとらなければなりません。このプロンプトは、実装準備完了の画面定義を生成することに焦点を当てています。
入力事項：
1. アプリのアイデアまたはUIアーキテクチャ
2. ターゲットユーザー
3. コア機能
4. プラットフォーム（Web / モバイル）
出力要件：
セクション1 — 画面リスト
機能別にグループ化された必要なすべての画面をリストアップする：
- コア製品画面
- サポート画面
- エッジケース画面
セクション2 — 詳細な画面内訳
各主要画面について：
A. 画面の目的
B. レイアウト階層（上 → 下）
C. 主要なUIセクション（ヘッダー、コンテンツ、アクション、ナビゲーション）
D. 主要なユーザーアクション
E. 二次的なアクション
セクション3 — インタラクションロジック
ユーザーが各画面とどのように相互作用するかを定義する：
- クリックフロー
- 状態変化
- 条件付きレンダリング
セクション4 — 視覚的優先システム
ユーザーが最初に目にするべきものを定義する：
- アテンション階層
- CTAの配置
- 情報密度
セクション5 — モバイル vs デスクトップの適応
レスポンシブ対応のためのレイアウト調整を説明する。
セクション6 — UX改善レイヤー
以下の改善を提案する：
- シンプルさ
- 使用速度
- 明確さ
セクション7 — 最終UI出力形式
StitchまたはFigmaでの生成に適した構造化された画面定義を提示する。
ルール：
- 曖昧なUI記述をしないこと
- すべての画面が実用的であること
- 美しさよりも使いやすさを優先すること
- 実世界での実装のためにデザインすること
期待される成果
詳細なレイアウト、インタラクションロジック、および実装準備完了の構造を備えた完全なUI画面システム。
実装ステップ
ステップ1 — ChatGPTまたはGeminiでUI画面を生成する
このプロンプトをChatGPTまたはGeminiに貼り付けます。アプリのアイデアまたはUIアーキテクチャを入力してください。出力は、レイアウトとインタラクションロジックを備えた完全なUI画面を定義します。
10–15分ステップ2 — Claudeを使用して使いやすさを洗練させる
出力をClaudeに貼り付け、フローを簡素化し、認知負荷を減らし、インタラクションの明確さを向上させるように依頼してください。
10–15分ステップ3 — Stitchで視覚的なUIを生成する
構造化された画面定義をStitchに入力して、実際のUI画面を自動的に生成します。
15–25分ステップ4 — FigmaまたはCanvaでオプションの仕上げを行う
視覚的なデザイン、スペーシング、およびブランディングを微調整するために、画面をFigmaまたはCanvaでエクスポートまたは再作成します。
20–40分