> ## 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. # Componentes do Replit Design > Conheça os blocos de construção do Replit Design: Canvas, frames, elementos, chat, inteligência ambiente, a barra de ferramentas e o painel de biblioteca, e como eles se encaixam. No fundo, o Replit Design é um canvas infinito que exibe frames. Tudo o mais nesta página é sobre como você age sobre esses frames: * 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 com regiões rotuladas: três Frames (um Site, um Design System, e um mockup de Design do supercarro APEX X1), um Elemento destacado dentro do frame do Site, o painel de Chat, a Inteligência ambiente propondo próximos passos sugeridos, a Barra de ferramentas na parte inferior, e o painel de Biblioteca aberto na aba Inspiração Sete componentes compõem o ambiente de trabalho do Replit Design: * **[Canvas](/pt/design/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](/pt/design/frames)**: cada bloco no Canvas. Frames podem ser artefatos ativos (sites, slides), mockups de design, imagens, vídeos ou gráficos vetoriais. * **[Elements](/pt/design/elements)**: as peças individuais dentro de um frame, como títulos, botões, imagens e campos de formulário. * **[Chat](/pt/design/chat-about-your-design)**: 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](/pt/design/explore-suggestions)**: 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](/pt/design/explore-suggestions) para saber como funciona. * **[Toolbar](/pt/design/toolbar)**: a barra flutuante na parte inferior do Canvas com as ferramentas Interagir, Pan, Chat, Desenhar, Editar e Gerar. * **[Painel de biblioteca](/pt/design/library-panel)**: 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](/pt/design/explore-suggestions) para ramificar uma nova direção, ou **Foque** nele para trabalhar de perto. Quando estiver certo, **Construa-o** em um app ativo. Canvas com um frame de Design APEX X1 selecionado, mostrando a barra de ações por frame na parte superior com o rótulo do tipo e as ações Build, Focus e mais opções, o frame anexado como um chip na caixa de prompt do chat ### 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. A ferramenta Editar ativa em um site de aluguel de supercarros com um elemento div selecionado, e o painel do Editor Visual mostrando controles de Texto, Layout, Cor e Borda, além dos botões Descartar e Salvar edições ### 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 com uma caixa de pesquisa, filtros de categoria e cards de templates incluindo um pôster e duas landing pages ## Explore cada componente O quadro infinito onde você gera, organiza e itera em frames. Tipos de frame, a barra de ações por frame, Build e Focus. Selecione e edite as peças individuais dentro de um frame. Oriente o Agent sobre o quadro, um frame, ou um único elemento. Próximos passos sugeridos em um clique ao lado do seu frame selecionado. O catálogo completo de ferramentas, atalhos de teclado e gestos do quadro. Templates, inspiração selecionada pelo Mobbin, e suas próprias criações. ## Próximos passos * [Projete sua primeira tela](/pt/design/design-your-first-screen): gere seus primeiros frames a partir de um prompt. * [O que é o Replit Design](/pt/design/what-is-replit-design): a jornada completa do prompt ao app alinhado com a marca.