FlowstepのデザインをJPGまたはPNG画像ファイルとしてダウンロード

デザインを共有またはハンドオフする準備ができたら、Flowstepを使用すると、それを静止画像としてエクスポートできます。JPGまたはPNGのいずれかです。どちらの形式も設計ツール、プレゼンテーションソフトウェア、ブラウザ全体で広くサポートされているため、AI生成デザインを必要な場所に持ち込むことができます。

​

デザインをエクスポートする方法

​

JPG vs PNG: どの形式を使うべき?

​

コードをエクスポート

画像以外に、CodeボタンはあなたのデザインをReact + Tailwindコードとしてエクスポートします。スニペットをコピーするか、完全なバンドルをZIPとしてダウンロードできます。単一の画面、複数の選択した画面、またはファイル全体を一度にエクスポートできます。複数の画面をエクスポートする場合、各画面は独自のコンポーネントファイルになり、画面間に設定したナビゲーションは生成されたコードにワイヤードされるため、エクスポートされたアプリはエンドツーエンドでクリック可能です。バンドルは自己完結型です。デザインで使用されている画像（チャットパネルに添付したものを含む）は、public/assets/フォルダに含まれており、コードはローカルパス参照があるため、エクスポートはそのまま実行されます。 ダウンロードされたファイル（画像とコードバンドル）は、それぞれが属する画面にちなんで命名されます（画面が名前なしの場合はファイル名にフォールバック）。これにより、多くの画面で作業する際にエクスポートを簡単に識別できます。

​

デザインをコーディングエージェントに送信

ファイルをダウンロードする代わりに、デザインをAIコーディングアシスタントに直接渡すことができます。ツールバーのSend to your coding agentをクリックするか、エクスポートダイアログを開いて同じオプションを選択して、エージェント用の貼り付け準備ができたプロンプトをコピーします：

あなたのエージェントはMCP経由でこれらの画面を読み、リポジトリ内でそれらを構築します。このプロンプトをClaude、Cursor、または希望のエージェントに貼り付けます。

プロンプトはあなたのエージェントにFlowstep MCPサーバー経由で画面を取得し、コードベースでそれらを再構築するように指示します。単一の画面、複数の選択した画面、またはファイル全体を一度に渡すことができます。プロンプトはあなたが選択したものに適応します。 これはFlowstep MCPサーバーを使用するため、最初にMCPクライアントを接続してください。サポートされているクライアントについてはMCPサーバーの概要を参照し、クイックスタートで接続してください。