Flowstep は自然言語プロンプトから UI 画面を生成し、アイデアからビジュアルデザインへを数秒で実現できます。コンセプト検証用の単一画面が必要な場合でも、ユーザージャーニー全体をカバーする完全な画面セットが必要な場合でも、よく書かれたプロンプトがあれば十分です。
デザインを生成する
1
新規プロジェクトを開く
Flowstep ダッシュボードから新規プロジェクトを作成するか、画面を追加したい既存のプロジェクトを開きます。
2
プロンプトを記述する
希望する画面の説明を入力します。アプリの種類、ユーザーゴール、予想される内容について具体的に記述してください。
3
生成する画面数を指定する
デフォルトでは、Flowstep は単一画面を生成します。複数画面が必要な場合は、プロンプトで明示的に指定してください。Flowstep は 1 つのプロンプトから最大 6 つの画面を生成できます。
4
生成
プロンプトを送信します。Flowstep が画面を生成し、エディターに表示します。確認または改善の準備ができています。
単一画面 vs. 複数画面
単一プロンプトから 1 つの画面または最大 6 つの画面を生成できます。どちらのアプローチもデザイン作業の異なる段階に適しています。- 1 つの画面 — 特定の UI 状態、コンポーネント、または焦点を絞ったコンセプトを探索するのに最適です。
- 複数画面 — フローのマッピング、レイアウトオプションの比較、またはユーザージャーニー全体を素早くカバーするのに最適です。
その他のプロンプト方法
テキスト入力だけではありません。次の方法も使用できます：- ファイルを添付 — ドラッグ&ドロップ、ファイルピッカー、またはペーストを使用して、画像 (JPG、PNG、WEBP) またはドキュメント (PDF、MD、TXT) を最大 3 MB ずつプロンプトに追加します。プロンプトで添付画像を参照すると、Flowstep がそれを生成された画面に組み込みます。リファレンスの使用 を参照してください。
- プロンプトを音声入力 — プロンプトバーのマイクボタンをクリック (または Mac で Cmd+Shift+V、Windows で Ctrl+Shift+V を押す) して、最大 60 秒間話します。文字起こしが既に入力したテキストに追加されます。
- Flowstep に Web を検索させる — プロンプトで必要な場合 (たとえば、「Stripe の料金ページをクローン」) に、Flowstep は Web を検索してページのブランディング (色、フォント、ロゴ、UI コンポーネント) を読み込み、それを生成された画面に使用できます。Flowstep は独自に検索するかどうかを判断するため、すべてのプロンプトで必ずトリガーされるわけではありません。復元された Web サイトは元のものとは異なる画像とナビゲーションを使用することに注意してください。
- デザインガイドラインを設定 — ファイル内のすべての生成に適用されるスタイルルールを定義します。デザインガイドライン を参照してください。
効果的なプロンプトの書き方
プロンプト記述時には、以下の原則を念頭に置いてください：- Flowstep が画面を正しくサイズ設定できるように、プラットフォーム (モバイル、デスクトップ、タブレット) を指定します。
- UI 要素だけでなく、ユーザーのゴールを記述します。Flowstep は意図からレイアウトを推測します。
- デザインに重要なラベル、アクション、データなどの主要なコンテンツを含めます。
- 「複数画面を生成」または「完全なユーザージャーニーをカバー」などのフレーズを使用して、複数画面出力をトリガーします。