Skip to main content
Claudeで構築されたデザインは、体験がどのように見えるべきかを示しています。Claudeの Send to Replit オプションを使えば、そのデザインをReplitに引き渡すことができ、Replitではプロジェクトとして取り込まれ、Agentが動作するインタラクティブなアプリに変換します。
これは新しいインテグレーションです。Send to Replit は、Claudeがデザインの送信先としてReplitを提供する場合にのみClaudeの Send to… メニューに表示されます。利用可能かどうかはClaudeが制御するため、すべてのアカウントにまだ表示されない場合があります。ハンドオフを受け入れると、ClaudeはReplitの同意画面で Access apps、Create and manage apps、Stay signed in to this application のスコープをリクエストします。
Claudeのデザインキャンバスに開かれたVelocityデザイン。Replitに引き渡してインタラクティブなアプリに変換する自己完結型のデザイン

​
仕組み

ハンドオフはClaudeで始まり、Replitで完了します。
  1. Claudeのデザインキャンバスで自己完結型のデザインを構築します。
  2. Claudeの Share → Send to… メニューからReplitにデザインを送信します。
  3. ClaudeがReplitアカウントにアクセスすることを承認し、ワークスペースを選択します。
  4. Replitがデザインを静的な index.html ファイルとしてプロジェクトを作成します。
  5. Agentが Turn this Claude design into a real app タスクを引き受けてインタラクティブにします。
これは、Claudeが承認済みのアプリ接続を通じてReplitにデザインを送信するフローです。Replit側で事前に何かを設定する必要はありません — フローはClaudeから始まります。

​
始める前に

以下が必要です。
  • Replitアカウント。
  • ClaudeのデザインキャンバスにデザインがあるClaudeアカウント。
  • 新しいプロジェクトの作成先となるReplitワークスペース。

​
ClaudeからReplitにデザインを送る

構築したいデザインを開いた状態でClaudeから始めます。
1

Claudeでデザインを開く

Claudeで、アプリに変換したいデザインを開きます。
2

Send toメニューを開く

Share を選択してから Send to… メニューを開きます。Replitが送信先として表示されます。
Claude Codeと並んでReplitが送信先として表示されたClaudeのSend to… メニュー
3

Replitを選択する

Replit を選択して、Replitアカウントへのハンドオフを開始します。
4

Replitへのアクセスを承認する

Claude would like to access your Replit account というタイトルのReplit同意画面で、Claudeがリクエストするアクセス — Access apps、Create and manage apps、Stay signed in to this application — を確認してから接続を承認します。
「Claude would like to access your Replit account」というタイトルのReplit同意画面。Access apps、Create and manage apps、Stay signed inのスコープとワークスペースピッカーが表示されている
5

ワークスペースを選択する

新しいプロジェクトを作成したいReplitワークスペースを選んで確定します。
確定すると、Replitはデザインからプロジェクトを作成し、そのワークスペースで開きます。

​
インポートされるもの

Replitはデザインを単一の自己完結型 index.html ファイルとしてインポートします。インポートでは、Claudeがデザインに含めたビジュアルレイアウト、スタイリング、アセットが保持されます。 インポートによって、動作する出発点が得られます。デザインは静的HTMLとして届くため、インポート後に動作、データ、インタラクティビティを追加していくことになります。

​
インポートされないもの

ハンドオフが運ぶのはデザインであり、完全なアプリケーションではありません。以下はインポートに含まれません。
  • バックエンドロジックとサーバーサイド機能。
  • データベースや保存されたデータ。
  • 動作するフォーム、状態、ナビゲーションなどのインタラクティビティ。
Agentがデザインを実際のアプリに変換する際に、これらの機能を追加します。

​
Agentにデザインをインタラクティブにさせる

インポート後、Agentはワークスペースで Turn this Claude design into a real app タスクを開始します。Agentは静的デザインをもとに作業し、そのデザインが示唆するインタラクティブな動作を構築します。
Claudeから送信されたVelocity高級車レンタルデザインが、Replit Design内でClaudeデザインフレームとして開かれ、チャットパネルにAgentのタスク完了が表示されている

Claudeから届いたVelocityデザインが、Agentの実行完了とともにReplit Designのフレームになった状態。

タスクが完了したらPreviewを開いて結果をテストします。実行中のアプリと元のClaudeデザインを比較し、次を確認してください。
  • レイアウトとスタイリングがデザインに十分近い。
  • ボタン、フォーム、ナビゲーションが期待通りに動作する。
  • リフレッシュ後もアプリが動作する。
何かが欠けていたり、ずれていたりする場合は、Agentに変更内容を説明してアプリを改良させましょう。

​
Configure and run your app

During import, . If your app needs changes, use these Project Editor tools:
  • Agent: Refine features, debug issues, and make code changes
  • Secrets: Add API keys and environment variables
  • Workflows: Set the Run command for your app

​
Continue your journey

Now that you’ve imported your , explore these next steps:

​
料金

デザインを動作するアプリに変換するにはAgentを使用するため、クレジットが消費される場合があります。クレジットの使用量は、インポートされたデザインの上にAgentがどれだけ構築するかによって異なります。

​
関連情報