これは新しいインテグレーションです。Send to Replit は、Claude がデザインの送信先として Replit を提供するときにのみ Claude の Send to… メニューに表示されます。利用可能かどうかは Claude が制御するため、すべてのアカウントにまだ表示されない場合があります。ハンドオフを受け入れると、Claude は Replit の同意画面で アプリへのアクセス、アプリの作成と管理、このアプリへのサインイン維持 のスコープをリクエストします。
仕組み
ハンドオフは Claude で始まり、Replit で完了します：- Claude のデザインキャンバスで自己完結型のデザインを構築します。
- Claude の Share → Send to… メニューから Replit にデザインを送信します。
- Claude が Replit アカウントにアクセスすることを承認し、ワークスペースを選択します。
- Replit がデザインを静的な
index.htmlファイルとしてプロジェクトを作成します。 - Agent が Turn this Claude design into a real app タスクを引き受けてインタラクティブにします。
始める前に
以下が必要です：- Replit アカウント。
- Claude のデザインキャンバスにデザインがある Claude アカウント。
- 新しいプロジェクトを作成するターゲットの Replit ワークスペース。
Claude から Replit にデザインを送る
Claude のデザインを使って構築を始めましょう。
Replit へのアクセスを承認する
Claude would like to access your Replit account というタイトルの Replit 同意画面で、Claude がリクエストするアクセス — アプリへのアクセス、アプリの作成と管理、このアプリへのサインイン維持 — を確認してから接続を承認します。
インポートされるもの
Replit はデザインを単一の自己完結型index.html ファイルとしてインポートします。インポートによりデザインに含まれるビジュアルレイアウト、スタイリング、アセットが保持されます。
インポートにより動作する出発点が得られます。デザインは静的 HTML として届くため、インポート後に動作、データ、インタラクティビティを追加する必要があります。
インポートされないもの
ハンドオフはデザインを運びますが、完全なアプリケーションではありません。以下はインポートに含まれません：- バックエンドロジックとサーバーサイド機能。
- データベースや保存されたデータ。
- 動作するフォーム、状態、ナビゲーションなどのインタラクティビティ。
Agent にデザインをインタラクティブにさせる
インポート後、Agent がワークスペースで Turn this Claude design into a real app タスクを開始します。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:- Replit Agent: Get help with feature work, debugging, and refactoring
- Replit Deployments: Publish your app
- Collaborate: Build with teammates