Flowstepは、自然言語のプロンプトからUI画面を生成します。アイデアから視覚的なデザインまで、数秒で進められます。コンセプトを確かめるための1画面でも、ユーザージャーニー全体をカバーする一連の画面でも、適切に書かれたプロンプトがあれば始められます。
デザインを生成する
1
新しいプロジェクトを開く
Flowstepのダッシュボードから、新しいプロジェクトを作成するか、画面を追加したい既存のプロジェクトを開きます。
2
プロンプトを書く
作成したい画面の説明を入力します。アプリの種類、ユーザーの目的、表示させたいコンテンツを具体的に書いてください。
3
生成する画面の数を指定する
デフォルトでは、Flowstepは1画面を生成します。複数の画面がほしい場合は、プロンプトでその旨を明示してください。Flowstepは1つのプロンプトから最大6画面を生成できます。
4
生成する
プロンプトを送信します。Flowstepは画面を作成してエディターに表示します。確認や調整をすぐに行えます。
新しいファイルを作成して最初のプロンプトを送信すると、Flowstepがそのプロンプトに基づいてファイルに名前を付けます。後から見つけやすくなります。すでに名前が付いているファイルや、以前のプロンプトがあるファイルは、名前がそのまま保たれます。どのファイルも、いつでも自分で名前を変更できます。
生成を停止する
Flowstepが応答している間、送信ボタンは停止ボタン（Stop Flowstep response）に変わります。クリックすると生成が停止します。複数画面のリクエストでは、完了した画面はキャンバスに残り、未完了の画面は削除されます。Flowstepが画面の構築を開始した後に停止しても、メッセージは消費されます。詳しくはメッセージと利用上限を参照してください。1画面と複数画面
1つのプロンプトから1画面または最大6画面を生成できます。どちらの方法も、デザイン作業の異なる段階に適しています。- 1画面 — 特定のUIの状態、コンポーネント、または焦点を絞ったコンセプトを検討するのに最適です。
- 複数画面 — フローを整理する、レイアウトの案を比較する、ユーザージャーニー全体をすばやくカバーする場合に最適です。
その他のプロンプトの入力方法
テキストだけが入力手段ではありません。次の方法も使えます。- ファイルを添付する — 画像（JPG、PNG、WEBP）やドキュメント（PDF、MD、TXT）を、それぞれ3 MB以内でプロンプトに追加できます。ドラッグ＆ドロップ、ファイル選択、貼り付けのいずれでも追加できます。プロンプトで添付画像に言及すると、Flowstepはその画像を生成された画面に取り入れます。詳しくはデザインリファレンスを参照してください。
- プロンプトを音声入力する — プロンプトバーのマイクボタンをクリックするか（MacではCmd+Shift+V、WindowsではCtrl+Shift+Vを押して）、最大60秒間話します。文字起こしされたテキストは、入力済みの内容の後に追加されます。
- Flowstepにウェブを調べさせる — プロンプトで必要な場合（例：「Stripeの料金ページを再現して」）、Flowstepはウェブを検索し、ページのブランディング（色、フォント、ロゴ、UIコンポーネント）を読み取って、生成された画面に使えます。調べるかどうかはFlowstepが自ら判断するため、すべてのプロンプトで行われるとは限りません。なお、再現されたWebサイトは、元のサイトとは画像やナビゲーションが異なる場合があります。
- デザインガイドラインを設定する — ファイル内のすべての生成に適用される、スタイルの共通ルールを定義します。詳しくはデザインガイドラインを参照してください。
効果的なプロンプトの書き方
プロンプトを書くときは、次の点を意識してください。- プラットフォーム（モバイル、デスクトップ、タブレット）を指定すると、Flowstepが画面のサイズを正しく設定します。
- UI要素だけでなく、ユーザーの目的を説明してください。Flowstepは意図からレイアウトを推測します。
- デザインにとって重要であれば、ラベル、アクション、データなどの主要なコンテンツを含めてください。
- 「複数の画面を生成してください」や「ユーザージャーニー全体をカバーしてください」のような表現を使うと、複数画面の出力になりやすくなります。