Skip to main content
O Replit Design é onde você define a aparência e a sensação do seu software. Você descreve o que quer, e o Replit Design gera mockups interativos que você pode explorar e refinar. Quando um deles estiver certo, ele se torna um app funcional no mesmo projeto.
A home do Replit Design com os cartões Start with a template, Start with a prompt e Sketch, além de opções para gerar mídia, importar uma URL, importar do Figma ou recriar uma captura de tela

​
Comece do zero ou importe designs existentes

Comece em Replit Design, ou selecione Design abaixo do campo de criação na home do seu workspace. Quatro formas de começar:
  • Prompt: descreva o que você quer e gere seus primeiros frames.
  • Templates: comece a partir de uma landing page, pôster, post para redes sociais, tela mobile ou protótipo pré-construídos, e depois remixe.
  • Import: traga um design do Figma ou do Claude, ou recrie um site a partir da sua URL ou de uma captura de tela.
  • Sistema de design: comece a partir de um sistema salvo para que seu primeiro frame já esteja dentro do padrão da marca.
A página inicial replit.com/design com uma caixa de prompt, as opções Import URL, Import Figma, Recreate screenshot e Start with a design system, e uma galeria de templates abaixo

A home do Replit Design: prompt, importação ou início a partir de um template.

​
Explore variantes

Amplie as possibilidades antes de se comprometer. Cada resultado se torna um novo frame, então você nunca perde uma direção.
  • Sugestões: selecione um frame e o Replit Design propõe o que tentar em seguida, um clique de cada vez.
  • Um modelo diferente: troque o modelo por trás do Design e envie o mesmo briefing para obter uma direção genuinamente diferente.
Um frame de Website selecionado mostrando um hero do superesportivo APEX X1, com um painel Suggested next steps ao lado oferecendo chips de sugestão como Explore different approaches, Try different layouts, Explore different vibes e Surprise me

As sugestões aparecem ao lado do frame selecionado, um clique de cada vez.

​
Refine

Molde o vencedor da forma que parecer mais natural:
  • Chat: explique ao Agent com suas próprias palavras, sobre o quadro inteiro ou um frame de cada vez.
  • Visual Editor: clique em qualquer elemento e ajuste texto, cores, espaçamento e imagens diretamente. Edições simples são aplicadas ao código-fonte instantaneamente, sem gastar créditos.
  • Draw: circule problemas, aponte com uma seta para o elemento que você quer indicar, deixe uma nota adesiva. O Agent lê sua marcação.
  • Gerar recursos: crie as imagens, clipes de vídeo e gráficos vetoriais que seu design precisa, com referências anexadas para que combinem com a aparência do seu projeto.
A ferramenta Edit ativa em um site de aluguel de superesportivos com um elemento div selecionado, e o painel do Visual Editor mostrando os controles Text, Layout, Color e Border, além dos botões Discard e Save edits

Uma das quatro entradas de refinamento: o Visual Editor aberto em um elemento selecionado.

​
Construa

Quando um frame estiver certo, entregue-o ao Agent. Um design aqui nunca é apenas uma imagem, é a especificação para um software real.
A barra de ações de um frame selecionado com as ações Build e Focus

A ação Build na barra de ações de um frame selecionado.

Construir um novo app a partir de um design frame requer o plano Core ou Pro; todas as outras funcionalidades do Design funcionam em qualquer plano. Veja Cobrança para detalhes sobre planos.

​
Escale

Torne o próximo design mais rápido que o anterior:
  • Crie um sistema de design: extraia suas cores, tipografia, tokens e componentes de um design que você ama, ou gere um do zero a partir de um prompt.
  • Comece novos trabalhos a partir dele: novos artifacts são gerados dentro do padrão da marca desde o primeiro frame.
  • Traga apps existentes para o sistema: reconstrua o estilo de apps que você já tem para que tudo combine.
  • Troque de sistema: escolha ou mude o sistema por projeto.
A partir daqui, a jornada volta ao Start, e agora todo design começa dentro do padrão da marca.
O APEX X1 Design System renderizado como um guia de estilo vivo no modo foco, com uma barra lateral de cores, fontes, layout e componentes, a paleta principal, a escala de tipos e componentes de exemplo

Um sistema de design salvo renderizado como um guia de estilo vivo.

​
Quando começar no Design vs. no Build

Design e Build são dois pontos de entrada para o mesmo projeto. Build é onde o Agent faz seu software funcionar; Design é onde você molda sua aparência. Nada do que você projeta fica preso em uma ferramenta de design.
  • Comece no Design quando a aparência é a parte difícil: explore direções primeiro, construa o vencedor.
  • Comece no Build quando o comportamento é a parte difícil: deixe funcionando e depois restilize no Replit Design.

​
Próximo passo

Projete sua primeira tela

Gere seus primeiros design frames a partir de um prompt, sem necessidade de experiência em design.