Saltar para o conteúdo principal
Um design criado no Claude mostra como uma experiência deve se parecer. Com a opção Enviar para o Replit do Claude, você pode passar esse design para o Replit, onde ele se torna um projeto e o Agent o transforma em um app funcional e interativo.
Esta é uma nova integração. Enviar para o Replit aparece no menu Enviar para… do Claude somente quando o Claude oferece o Replit como destino para o seu design. A disponibilidade é controlada pelo Claude, portanto a opção pode não aparecer para todas as contas ainda. Quando você aceita a transferência, o Claude solicita os escopos Acessar apps, Criar e gerenciar apps e Permanecer conectado a este aplicativo na tela de consentimento do Replit.
O design Velocity aberto na tela de design do Claude, o design independente que você transfere para o Replit para transformar em um app interativo

​
Como funciona

A transferência começa no Claude e termina no Replit:
  1. Você cria um design independente na tela de design do Claude.
  2. Você envia o design para o Replit pelo menu Compartilhar → Enviar para… do Claude.
  3. Você autoriza o Claude a acessar sua conta Replit e escolhe um workspace.
  4. O Replit cria um projeto com seu design como um arquivo index.html estático.
  5. O Agent inicia uma tarefa Transformar este design do Claude em um app real e o torna interativo.
Isso é o Claude enviando um design para o Replit por meio de uma conexão de app autorizada. Você não configura nada no Replit primeiro — o fluxo começa no Claude.

​
Antes de começar

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

​
Enviar um design do Claude para o Replit

Comece no Claude com o design que você deseja desenvolver.
1

Abrir o design no Claude

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

Abrir o menu Enviar para

Selecione Compartilhar e, em seguida, abra o menu Enviar para…. O Replit aparece como destino.
O menu Enviar para… do Claude listando o Replit como destino ao lado do Claude Code
3

Escolher o Replit

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

Autorizar o acesso ao Replit

Na tela de consentimento do Replit intitulada O Claude gostaria de acessar sua conta Replit, revise o acesso que o Claude solicita — Acessar apps, Criar e gerenciar apps e Permanecer conectado a este aplicativo — e, em seguida, autorize a conexão.
A tela de consentimento do Replit intitulada O Claude gostaria de acessar sua conta Replit, mostrando os escopos Acessar apps, Criar e gerenciar apps e Permanecer conectado com um seletor de workspace
5

Escolher um workspace

Escolha o workspace Replit onde você deseja que o novo projeto seja criado e, em seguida, confirme.
Após a confirmação, o Replit cria um projeto a partir do seu design e o abre no workspace.

​
O que é importado

O Replit importa o design como um único arquivo index.html independente. A importação preserva o layout visual, o estilo e os ativos 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 adiciona 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.

​
Deixar o Agent tornar o design interativo

Após a importação, o Agent inicia uma tarefa Transformar este design do Claude em um app real no workspace. O Agent trabalha a partir do seu design estático e cria o comportamento interativo que o design implica.
Abra o Preview quando a tarefa terminar para testar o resultado. Compare o app em execução com o design original do Claude e confirme:
  • O layout e o estilo correspondem ao design de forma suficientemente próxima.
  • Botões, formulários e navegação funcionam conforme o esperado.
  • O app ainda funciona após uma atualização.
Se algo estiver faltando ou incorreto, descreva a alteração 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:

​
Faturamento

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

​
Relacionados