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

# Transformar um design do Claude em um app

> Envie um design do Claude para o 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 = "Agent converts your static design into an interactive app and configures it to run on Replit"

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.

<Note>
  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.
</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 na tela de design do Claude, o design independente que você transfere para o 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 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](https://replit.com).
* 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.

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

  <Step title="Abrir o menu Enviar para">
    Selecione **Compartilhar** e, em seguida, abra o menu **Enviar para…**. O 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 Enviar para… do Claude listando o 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="Escolher o Replit">
    Selecione **Replit** para iniciar a transferência para sua conta Replit.
  </Step>

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

    <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 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" width="2000" height="1143" data-path="images/claude-to-app/replit-oidc-consent.png" />
    </Frame>
  </Step>

  <Step title="Escolher um workspace">
    Escolha o workspace Replit onde você deseja que o novo projeto seja criado e, em seguida, confirme.
  </Step>
</Steps>

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.

<Frame>
  <img src="https://mintcdn.com/replit/70U9gqQfBoL-Qmp0/images/claude-to-app/agent-task-preview.png?fit=max&auto=format&n=70U9gqQfBoL-Qmp0&q=85&s=24d5529ff1ff555b7d0ee14c620829e4" width="2000" height="1154" data-path="images/claude-to-app/agent-task-preview.png" />
</Frame>

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

* **[Agent](/references/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](/references/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](/references/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

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

* [Importar de um provedor](/pt/build/import-from-providers)
* [Transformar um design Figma em um app interativo](/pt/build/figma-to-app)