이것은 새로운 통합입니다. Send to Replit은 Claude가 디자인의 목적지로 Replit을 제공할 때만 Claude의 Send to… 메뉴에 나타납니다. 사용 가능 여부는 Claude에 의해 제어되므로 모든 계정에서 아직 표시되지 않을 수 있습니다. 전달을 수락하면 Claude가 Replit 동의 화면에서 Access apps, Create and manage apps, Stay signed in to this application 범위를 요청합니다.
작동 방식
전달 과정은 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가 요청하는 접근 권한 — Access apps, Create and manage apps, Stay signed in to this application — 을 검토한 다음 연결을 승인합니다.
가져오는 항목
Replit은 디자인을 단일 자체 완결형index.html 파일로 가져옵니다. 가져오기는 Claude가 디자인에 포함한 시각적 레이아웃, 스타일링, 에셋을 보존합니다.
가져오기는 동작하는 시작점을 제공합니다. 디자인이 정적 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