> ## 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. # O que é o Replit Design > O Replit Design é um conjunto de ferramentas de design para gerar design frames a partir de prompts, explorar as sugestões da IA e manter tudo dentro do padrão da marca com sistemas de design. 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](https://replit.com/design), ou selecione **Design** abaixo do campo de criação na home do seu workspace. Quatro formas de começar: * **[Prompt](/pt/design/design-your-first-screen)**: descreva o que você quer e gere seus primeiros frames. * **[Templates](/pt/design/start-from-a-template)**: 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](/pt/design/import-figma-designs-into-replit-design)**: traga um design do Figma ou do [Claude](/pt/design/import-claude-designs-into-replit-design), ou recrie um site [a partir da sua URL](/pt/design/import-a-website-into-replit-design) ou de uma captura de tela. * **[Sistema de design](/pt/design/design-systems-explained)**: 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 ## 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](/pt/design/explore-suggestions)**: selecione um frame e o Replit Design propõe o que tentar em seguida, um clique de cada vez. * **[Um modelo diferente](/pt/design/explore-with-different-models)**: 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 ## Refine Molde o vencedor da forma que parecer mais natural: * **[Chat](/pt/design/chat-about-your-design)**: explique ao Agent com suas próprias palavras, sobre o quadro inteiro ou um frame de cada vez. * **[Visual Editor](/pt/design/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](/pt/design/toolbar#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](/pt/design/toolbar#generate)**: 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 ## Construa Quando um frame estiver certo, entregue-o ao Agent. Um design aqui nunca é apenas uma imagem, é a especificação para um software real. * **[Construa seu design](/pt/design/build-your-design)**: transforme o frame em um novo app funcional. * **[Restilize um app existente](/pt/design/frames#build)**: aplique a aparência do frame a um app que você já tem. A barra de ações de um frame selecionado com as ações Build e Focus 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](/pt/billing/ai-billing) para detalhes sobre planos. ## Escale Torne o próximo design mais rápido que o anterior: * **[Crie um sistema de design](/pt/design/create-a-design-system)**: 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](/pt/design/apply-design-system)**: 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 ## 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 Gere seus primeiros design frames a partir de um prompt, sem necessidade de experiência em design.