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

# Redesenhar seu site existente

> Recrie seu site atual como um frame de design, compare direções lado a lado e depois construa a vencedora.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Seu site funciona, mas parece datado, e descrever um redesign não convence ninguém. Recrie
o site publicado como um frame de design no Replit Design, explore direções ao lado do
original e construa a que vencer. A importação recria a aparência e a sensação como ponto
de partida, não uma cópia pixel a pixel da sua marcação. Cada direção chega como um novo
frame, então o original permanece no canvas para comparação.

## Ideal para

* Designers que precisam mostrar um redesign ao lado do site atual, não apenas descrevê-lo.
* Fundadores que estão renovando um site cujo conteúdo está certo, mas cujo visual está cansado.

## Antes de começar

Tenha a URL pública da página que você quer retrabalhar. Decida o que precisa sobreviver ao
redesign (a oferta, a navegação e as provas) e o que está em aberto. Nada que esteja atrás
de um login será importado.

## Dê o prompt ao agente

Acesse [replit.com/design](https://replit.com/design) e selecione **Import URL** abaixo da
caixa de prompt. O prompt já vem preenchido; cole sua URL depois dele.

<AiPrompt>
  Recrie a aparência e a sensação deste site: \[URL]. Pare no frame de design.
  Não comece a construir um app.
</AiPrompt>

Quando o frame chegar, descreva o redesign em si:

<AiPrompt>
  Mantenha a oferta, a navegação e as provas do original. Gere três direções
  para o hero e a tipografia.
</AiPrompt>

## O que esperar

Três direções chegam como frames separados ao lado da importação, com a oferta, a
navegação e as provas mantidas em cada uma. Você compara quatro coisas: o site que tem e
três formas de ele poder parecer. Avalie-as como telas inteiras antes de olhar os
detalhes. Refine a vencedora conversando sobre ela ou clicando nos elementos no
[Visual Editor](/pt/design/visual-editor).

Quando uma direção estiver certa, selecione o frame e escolha **Build** para
[transformá-lo em software de verdade](/pt/design/build-your-design). Você escolhe o
caminho: um novo app no mesmo projeto, ou o app do seu site existente reestilizado para
combinar com o frame. O Agent cria um checkpoint antes, então os dois caminhos podem ser
revertidos.

## Adapte ao seu caso

<AiPrompt>
  Mantenha o layout como está e mude apenas a linguagem visual: a escala
  tipográfica, o ritmo de espaçamento e a cor. Coloque ao lado do original.
</AiPrompt>

<AiPrompt>
  Recrie as páginas de preços e de contato na direção vencedora para que o site
  inteiro combine.
</AiPrompt>

## Solução de problemas

<AccordionGroup>
  <Accordion title="A importação não corresponde ao original">
    O Import URL recria a aparência e a sensação, não a marcação. Nomeie as
    partes que precisam ser idênticas e depois ajuste-as pelo chat ou pelo
    Visual Editor.
  </Accordion>

  <Accordion title="Uma página atrás de um login não é importada">
    A importação exige uma URL pública. Recrie essa página a partir de uma
    captura de tela.
  </Accordion>

  <Accordion title="Você acha que perdeu o original">
    Você não perdeu. Cada geração chega como um novo frame, e a importação
    permanece no canvas. Selecione-a para comparar.
  </Accordion>

  <Accordion title="O redesign descartou seu conteúdo">
    Diga que o texto, a navegação e as provas vêm do original e que apenas a
    direção visual está em aberto.
  </Accordion>
</AccordionGroup>

## Relacionados

<CardGroup cols={2}>
  <Card title="Crie seu design system" href="/pt/use-cases/create-design-system">
    Extraia o visual vencedor para que a próxima página já comece alinhada à marca.
  </Card>

  <Card title="Revisar um site publicado" href="/pt/use-cases/review-a-live-website">
    Verifique links, layout e acessibilidade depois que o redesign estiver no ar.
  </Card>
</CardGroup>