Skip to main content
Um design criado no Claude mostra como uma experiência deve ser. Com a opção Send to Replit do Claude, você pode repassar esse design para a Replit, onde ele se torna um projeto e o Agent o transforma em um app funcional e interativo.
Esta é uma integração nova. Send to Replit aparece no menu Send to… do Claude apenas quando o Claude oferece a Replit como destino para o seu design. A disponibilidade é controlada pelo Claude, então a opção pode ainda não aparecer para todas as contas. Ao aceitar a transferência, o Claude solicita os escopos Access apps, Create and manage apps e Stay signed in to this application na tela de consentimento da Replit.
O design Velocity aberto no canvas de design do Claude, o design autocontido que você repassa para a Replit para transformar em um app interativo

​
Como funciona

A transferência começa no Claude e termina na Replit:
  1. Você constrói um design autocontido no canvas de design do Claude.
  2. Você envia o design para a Replit pelo menu Share → Send to… do Claude.
  3. Você autoriza o Claude a acessar sua conta Replit e escolhe um workspace.
  4. A Replit cria um projeto com seu design como um arquivo index.html estático.
  5. O Agent assume uma tarefa de Turn this Claude design into a real app e o torna interativo.
Isso é o Claude enviando um design para a Replit por meio de uma conexão de app autorizada. Você não configura nada na Replit antes — o fluxo começa a partir do Claude.

​
Antes de começar

Você precisa de:
  • Uma conta Replit.
  • Uma conta Claude com um design no canvas de design do Claude.
  • Um workspace de destino na Replit para o novo projeto.

​
Envie um design do Claude para a Replit

Comece no Claude com o design a partir do qual você quer construir.
1

Abra seu design no Claude

No Claude, abra o design que você quer transformar em um app.
2

Abra o menu Send to

Selecione Share, depois abra o menu Send to…. A Replit aparece como destino.
O menu Send to… do Claude listando a Replit como destino ao lado do Claude Code
3

Escolha Replit

Selecione Replit para iniciar a transferência para sua conta Replit.
4

Autorize o acesso da Replit

Na tela de consentimento da Replit intitulada Claude would like to access your Replit account, revise o acesso solicitado pelo Claude — Access apps, Create and manage apps e Stay signed in to this application — depois autorize a conexão.
A tela de consentimento da Replit intitulada Claude would like to access your Replit account, mostrando os escopos Access apps, Create and manage apps e Stay signed in com um seletor de workspace
5

Escolha um workspace

Escolha o workspace da Replit onde você quer que o novo projeto seja criado, depois confirme.
Depois de confirmar, a Replit cria um projeto a partir do seu design e o abre no workspace.

​
O que é importado

A Replit importa o design como um único arquivo index.html autocontido. A importação preserva o layout visual, o estilo e os recursos que o Claude incluiu no design. A importação oferece um ponto de partida funcional. Como o design chega como HTML estático, você ainda precisa adicionar comportamento, dados e interatividade após a importação.

​
O que não é importado

A transferência carrega o design, não um aplicativo completo. Os itens a seguir não fazem parte da importação:
  • Lógica de backend e funcionalidade do lado do servidor.
  • Um banco de dados ou dados armazenados.
  • Interatividade, como formulários funcionais, estado e navegação.
O Agent adiciona essa funcionalidade quando transforma o design em um app real.

​
Deixe o Agent tornar o design interativo

Após a importação, o Agent inicia uma tarefa Turn this Claude design into a real app no workspace. O Agent trabalha a partir do seu design estático e constrói o comportamento interativo que o design sugere.
O design de aluguel de supercarros Velocity enviado do Claude, aberto como um frame de design do Claude no Replit Design com a tarefa do Agent marcada como concluída no painel de chat

O design Velocity do Claude como um frame no Replit Design, com a execução do Agent concluída.

Abra o Preview quando a tarefa terminar para testar o resultado. Compare o app em execução com seu design original do Claude e confirme:
  • O layout e o estilo correspondem ao design o suficiente.
  • Botões, formulários e navegação funcionam como esperado.
  • O app continua funcionando após uma atualização da página.
Se algo estiver faltando ou incorreto, descreva a mudança para o Agent e deixe-o refinar o app.

​
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:

​
Cobrança

Transformar um design em um app funcional usa o Agent, o que pode consumir créditos. O uso de créditos depende de quanto o Agent constrói em cima do design importado.

​
Relacionados