- Gere e organize frames de design em um quadro infinito
- Itere em cada frame com chat, sugestões e a barra de ferramentas
- Direcione qualquer parte de um frame e mude só essa parte
- Traga templates e inspiração de produtos reais sem sair do quadro
O quadro de relance
- Canvas: a visão de design do Project Editor, um quadro infinito de pan e zoom que contém cada frame, forma e nota.
- Frames: cada bloco no Canvas. Frames podem ser artefatos ativos (sites, slides), mockups de design, imagens, vídeos ou gráficos vetoriais.
- Elements: as peças individuais dentro de um frame, como títulos, botões, imagens e campos de formulário.
- Chat: o chat do Agent ancorado no canvas. Descreva o que você quer criar, ou selecione um frame e peça edições pequenas ou maiores; minimize-o para um canvas em tela cheia.
- Inteligência ambiente: próximos passos sugeridos que aparecem ao lado de um frame selecionado, cada um a um clique de gerar uma nova direção. Veja Explorar sugestões para saber como funciona.
- Toolbar: a barra flutuante na parte inferior do Canvas com as ferramentas Interagir, Pan, Chat, Desenhar, Editar e Gerar.
- Painel de biblioteca: templates iniciais, inspiração selecionada pelo Mobbin, e suas próprias criações anteriores, prontas para colocar no canvas.
Como eles se encaixam
Cada componente continua de onde o anterior parou, de um quadro em branco a um design que você pode construir.1. Coloque frames no canvas
Gere frames a partir de um prompt de chat ou do menu Gerar da barra de ferramentas. Um frame pode ser um mockup de design, um app web, um app mobile, slides, uma imagem, um vídeo ou um gráfico vetorial.2. Itere em um frame
Selecione qualquer frame para trabalhar nele individualmente. Converse sobre ele com suas próprias palavras, siga uma sugestão para ramificar uma nova direção, ou Foque nele para trabalhar de perto. Quando estiver certo, Construa-o em um app ativo.
Um frame selecionado com sua barra de ações: Build, Focus e mais opções.
3. Edite, anote ou gere com a barra de ferramentas
A barra de ferramentas cobre três funções: Editar seleciona um único elemento dentro de um frame e abre o Editor Visual, Desenhar anota o quadro com esboços, setas e notas adesivas que o Agent lê, e Gerar cria as imagens, vídeos e gráficos vetoriais que seu design precisa.
Um elemento selecionado com a ferramenta Editar, com o Editor Visual aberto à direita.
4. Traga inspiração do painel de biblioteca
Para inspiração e pontos de partida, abra o painel de biblioteca. Templates chegam ao canvas como frames ativos e editáveis; a inspiração selecionada pelo Mobbin chega como uma imagem de referência estática para orientar sua próxima geração.
A aba Templates do painel de biblioteca: frames iniciais pesquisáveis, agrupados por tipo.
Explore cada componente
Canvas
O quadro infinito onde você gera, organiza e itera em frames.
Frames
Tipos de frame, a barra de ações por frame, Build e Focus.
Elements
Selecione e edite as peças individuais dentro de um frame.
Chat
Oriente o Agent sobre o quadro, um frame, ou um único elemento.
Inteligência ambiente
Próximos passos sugeridos em um clique ao lado do seu frame selecionado.
Toolbar
O catálogo completo de ferramentas, atalhos de teclado e gestos do quadro.
Painel de biblioteca
Templates, inspiração selecionada pelo Mobbin, e suas próprias criações.
Próximos passos
- Projete sua primeira tela: gere seus primeiros frames a partir de um prompt.
- O que é o Replit Design: a jornada completa do prompt ao app alinhado com a marca.