Skip to main content
⏰ 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, uma landing page construída pela Replit para um estúdio criativo, como exemplo.

​
Antes de começar

Você precisa de:
  • Uma conta Replit.
  • A URL de um website público, ou o exemplo acima.

​
Importe o website

1

Copie a URL do site

Use seu próprio site, ou copie o exemplo: https://creative-studio-landing.replit.app.
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

O site de exemplo: Kosmo Studio, uma landing page de estúdio criativo.

2

Abra o Replit Design

Vá para 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.
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

Import URL na página inicial do Replit Design: cole um link para qualquer website.

3

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

O prompt de recriação pré-preenchido com a URL de exemplo, pronto para começar.

O Agent recria o site como um frame de design no seu projeto.
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

A landing page recriada da Kosmo Studio como um frame de design no Replit Design.

​
Deixe do seu jeito

Selecione o frame importado e comece a remodelá-lo:
  • Siga uma sugestão: 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: 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”.
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

O frame importado selecionado, com próximos passos sugeridos propondo uma variante editorial escura, uma viewport mobile e uma página de contato.

​
Próximos passos

Explorar sugestões

Explore o que criar em seguida, um clique de cada vez.

Visual Editor

Refine texto, cores, espaçamento e imagens diretamente.

Construa seu design

Transforme o frame finalizado em um app funcional.