> ## 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 um website para o Replit Design

> Recrie um website ao vivo como um frame de design no Replit Design, depois refine-o com sugestões e chat, e construa-o em um app.

⏰ *Tempo estimado: 10 minutos*

Às vezes o design do qual você quer partir já está no ar na web: seu site atual, ou uma página cujo visual você quer recriar. O Import from URL recria um website como um frame de design que você pode explorar, refinar e transformar em um app interativo.

Você vai usar [creative-studio-landing.replit.app](https://creative-studio-landing.replit.app), uma landing page construída pela Replit para um estúdio criativo, como exemplo.

## Antes de começar

Você precisa de:

* Uma [conta Replit](https://replit.com).
* A URL de um website público, ou o exemplo acima.

## Importe o website

<Steps>
  <Step title="Copie a URL do site">
    Use seu próprio site, ou copie o exemplo: `https://creative-studio-landing.replit.app`.

    <Frame caption="O site de exemplo: Kosmo Studio, uma landing page de estúdio criativo.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/url-example-site.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=267942c299f996750150594e6b48b55d" alt="A landing page da Kosmo Studio com a manchete We craft bold ideas and visuals that truly work, acima de um leque de cartões de arte" width="3440" height="2160" data-path="images/design/import-from-url/url-example-site.webp" />
    </Frame>
  </Step>

  <Step title="Abra o Replit Design">
    Vá para [replit.com/design](https://replit.com/design) e selecione **Import URL** abaixo da caixa de prompt. O Agent recria o visual e a sensação do site como ponto de partida.

    <Frame caption="Import URL na página inicial do Replit Design: cole um link para qualquer website.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/design-import-url.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=e4cbc39f9f040bcb1b4950984d27bcd2" alt="A página inicial do Replit Design com a opção Import URL selecionada e uma dica de ferramenta lendo Paste a link to any website and Agent will recreate its look and feel as a starting point" width="2293" height="1322" data-path="images/design/import-from-url/design-import-url.webp" />
    </Frame>
  </Step>

  <Step title="Cole a URL e comece a construir">
    Selecionar **Import URL** preenche antecipadamente o prompt: *"Recreate the look and feel of this website:"*. Cole sua URL depois dele e selecione **Start**.

    <Frame caption="O prompt de recriação pré-preenchido com a URL de exemplo, pronto para começar.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/design-url-prompt.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ed6fcfa2a942facfe2d4ede695445926" alt="A caixa de prompt do Replit Design lendo Recreate the look and feel of this website seguida da URL de exemplo, com o botão Start" width="2293" height="1322" data-path="images/design/import-from-url/design-url-prompt.webp" />
    </Frame>
  </Step>
</Steps>

O Agent recria o site como um frame de design no seu projeto.

<Frame caption="A landing page recriada da Kosmo Studio como um frame de design no Replit Design.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/url-import-result.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=25c050750522f9306c84091ccb147e86" alt="A landing page recriada da Kosmo Studio como um frame de design no Replit Design, com a execução marcada como concluída no painel de chat" width="1600" height="1004" data-path="images/design/import-from-url/url-import-result.webp" />
</Frame>

## Deixe do seu jeito

Selecione o frame importado e comece a remodelá-lo:

* **Siga uma [sugestão](/pt/design/explore-suggestions)**: a importação chega com próximos passos propostos, como uma variante editorial escura, uma viewport mobile ou uma página de contato. Cada uma é gerada como um novo frame, então o original permanece para comparação.
* **[Converse sobre isso](/pt/design/chat-about-your-design)**: use o campo abaixo do frame e explique em suas próprias palavras, *"troque as fotos do portfólio"*, *"deixe a tipografia do hero mais pesada"*.

<Frame caption="O frame importado selecionado, com próximos passos sugeridos propondo uma variante editorial escura, uma viewport mobile e uma página de contato.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/import-from-url/url-make-it-yours.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=d0ec30760d7803f73c8edd1a4427dcbd" alt="O frame recriado do Creative Studio selecionado no Replit Design, com o painel de Próximos passos sugeridos ao lado propondo uma variante editorial escura, uma viewport mobile, uma página de contato e abordagens diferentes" width="1600" height="1004" data-path="images/design/import-from-url/url-make-it-yours.webp" />
</Frame>

## Próximos passos

<CardGroup cols={3}>
  <Card title="Explorar sugestões" icon="lightbulb" href="/pt/design/explore-suggestions">
    Explore o que criar em seguida, um clique de cada vez.
  </Card>

  <Card title="Visual Editor" icon="pen-to-square" href="/pt/design/visual-editor">
    Refine texto, cores, espaçamento e imagens diretamente.
  </Card>

  <Card title="Construa seu design" icon="hammer" href="/pt/design/build-your-design">
    Transforme o frame finalizado em um app funcional.
  </Card>
</CardGroup>