> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Importe designs do Claude para o Replit Design

> Envie um design do Claude para a Replit, crie um projeto a partir do HTML estático e deixe o Agent transformá-lo em um app interativo.

export const platform_0 = "Claude"

export const projectType_0 = "project"

export const setupDescription_0 = "O Agent converte seu design estático em um app interativo e o configura para rodar na Replit"

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.

<Note>
  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.
</Note>

<Frame>
  <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/claude-design-canvas.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=ea508bc83dc1ad35c5d3f17a511af737" alt="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" width="2000" height="1143" data-path="images/claude-to-app/claude-design-canvas.png" />
</Frame>

## 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](https://replit.com).
* 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.

<Steps>
  <Step title="Abra seu design no Claude">
    No Claude, abra o design que você quer transformar em um app.
  </Step>

  <Step title="Abra o menu Send to">
    Selecione **Share**, depois abra o menu **Send to…**. A Replit aparece como destino.

    <Frame>
      <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/claude-send-to-menu.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=de707da5fc30121d0ed31d2a0bdf128a" alt="O menu Send to… do Claude listando a Replit como destino ao lado do Claude Code" width="2000" height="1143" data-path="images/claude-to-app/claude-send-to-menu.png" />
    </Frame>
  </Step>

  <Step title="Escolha Replit">
    Selecione **Replit** para iniciar a transferência para sua conta Replit.
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/replit-oidc-consent.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=9e5607b4fdfb94c29c26967202fbf2d0" alt="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" width="2000" height="1143" data-path="images/claude-to-app/replit-oidc-consent.png" />
    </Frame>
  </Step>

  <Step title="Escolha um workspace">
    Escolha o workspace da Replit onde você quer que o novo projeto seja criado, depois confirme.
  </Step>
</Steps>

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.

<Frame caption="O design Velocity do Claude como um frame no Replit Design, com a execução do Agent concluída.">
  <img src="https://mintcdn.com/replit/5ybcLQczgFi7A9hB/images/claude-to-app/claude-design-in-replit-design.webp?fit=max&auto=format&n=5ybcLQczgFi7A9hB&q=85&s=8872ca8b827e38a916d58e52dec4748b" alt="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" width="1600" height="1004" data-path="images/claude-to-app/claude-design-in-replit-design.webp" />
</Frame>

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, {setupDescription_0}. If your app needs changes, use these Project Editor tools:

* **[Agent](/features/agent/overview)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/project-editor/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/features/workspace-tools/workflows)**: Set the **Run** command for your app

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, explore these next steps:

* [Replit Agent](/features/agent/overview): Get help with feature work, debugging, and refactoring
* [Replit Deployments](/learn/projects-and-artifacts/replit-deployments): Publish your app
* [Collaborate](/build/invite-teammates): Build with teammates

## 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

* [Importe de um provedor](/pt/build/import-from-providers)
* [Importe designs do Figma para o Replit Design](/pt/design/import-figma-designs-into-replit-design)