> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Projetando com IA > Aprenda a projetar sua aplicação com IA: instrua-a como uma designer, ajuste elementos no modo Edit, defina limites com AI Controls e refine as opções que ela oferece. A IA está no centro de como você projeta na Base44. Descreva o que deseja em linguagem natural, e a IA atualiza código, estilos e componentes para você. O modo **Edit** permite ajustar o que você vê na tela, e os AI Controls ajudam a definir limites. Esta página cobre cada fluxo de trabalho com prompts e exemplos que você pode usar diretamente. The app editor chat making a design change to an app Para o painel Theme, fontes e estilização global dentro de uma aplicação, veja [Personalizando o design da sua aplicação](/Building-your-app/Design). *** ## Como o design funciona Você não precisa de uma ferramenta de design nem de experiência com design. O design da sua aplicação faz parte do código dela, e a IA altera esse código para você: cada mudança de design é um pedido em linguagem simples, de "deixe os botões mais arredondados" a "redesenhe esta página inteira". Há três formas de fazer uma mudança de design, e escolher a certa economiza seu tempo: | Mudança que você quer | Use | | ----------------------------------------------------------------------------- | ------------------ | | Cores ou fontes em toda a aplicação | O painel **Theme** | | Um elemento ou seção que você consegue apontar | O modo **Edit** | | Qualquer coisa maior, como novos layouts, redesigns ou uma sensação diferente | O chat de IA | **Uma boa ordem para um redesign completo:** 1. Defina primeiro o visual geral: cores e fontes no [painel Theme](/Building-your-app/Design#global-changes). 2. Peça à IA mudanças no nível de página, uma página por vez. 3. Refine elementos individuais no modo **Edit**. Nada é permanente. Você pode clicar em **Revert** em qualquer prompt para desfazer aquela mudança, ou restaurar uma versão anterior da sua aplicação pelo histórico de versões, então é sempre seguro experimentar. *** ## Projetando no chat O chat de IA é ideal para mudanças globais e decisões de design que afetam várias partes da sua aplicação. Você pode definir uma persona e um briefing uma vez, depois construir a partir daí: ```text theme={null} Você é minha designer de produto para esta aplicação. Briefing de design: - Propósito: Ajudar equipes de conteúdo a planejar, escrever e publicar artigos mais rápido. - Pessoas: Líderes de conteúdo e redatores ocupados, em laptops, durante o expediente. - Sensação: Calma, focada, moderna, confiável. Use este briefing como base para todas as sugestões e decisões de design. ``` Você também não precisa de vocabulário de design. Descreva a sensação que deseja, cite um produto cujo estilo você gosta, ou envie uma captura de tela de um design que admira e peça à IA para seguir esse estilo: ```text theme={null} Deixe esta página mais calma e mais premium. Use a captura de tela anexada como referência para o estilo geral. ``` Padrões úteis: * Peça uma crítica antes de pedir mudanças. * Peça um plano no modo Discuss, aprove-o e depois peça à IA para implementá-lo. * Sempre esclareça o escopo do design: toda a aplicação, uma página ou um elemento. Exemplo: ```text theme={null} Critique o design apenas deste dashboard. Foque em layout, hierarquia, cor, tipografia e espaçamento. Depois proponha um plano curto de pequenas mudanças. Aguarde minha aprovação antes de aplicar qualquer coisa. ``` Depois que você revisar: ```text theme={null} Aplique o plano que você propôs para este dashboard. Faça as mudanças em pequenos grupos e descreva cada grupo brevemente conforme avança. ``` *** ## Escolhendo uma opção de design Quando você pede à IA para mudar o design ou o layout de uma seção ou elemento, ela pode apresentar opções visuais para você escolher, em vez de aplicar uma mudança imediatamente. Cada opção mostra uma prévia para você ver como ficará antes de decidir. Você também pode clicar no ícone **Expand** em uma opção para vê-la em modo completo e refiná-la antes de escolher. Design options in the chat, with the Expand icon shown on a mockup Descreva uma mudança pontual, como um fundo mais claro, para ajustar apenas esses detalhes, ou peça uma direção completamente diferente para substituir aquela opção. Quando estiver do jeito certo, clique em **Apply**. Expanded design option showing a mockup preview with a change request typed below it *** ## Explorando direções de design Você pode usar o chat de IA para explorar diferentes direções antes de decidir. Não é preciso descrever seu design atual: a IA tira uma captura de tela da sua página e analisa o que realmente está lá. Ciclo de crítica: ```text theme={null} Atue como uma designer de produto sênior. Analise esta página e descreva três problemas visuais específicos. Para cada problema, escreva um prompt da Base44 que o corrigiria. Não faça nenhuma mudança ainda. ``` Direções alternativas: ```text theme={null} Crie duas opções visuais para este dashboard: - Opção A: bem minimalista, majoritariamente neutra com uma única cor de destaque - Opção B: mais expressiva, com cores mais ricas e tipografia um pouco maior Mantenha o conteúdo e o layout iguais. Descreva cada opção em um resumo curto e aguarde minha escolha. ``` Depois de escolher uma opção, você pode pedir à IA para aplicar essa direção a páginas semelhantes. *** ## Usando o modo Edit O modo **Edit** é ideal quando você quer ajustar o que vê sem reescrever tudo. Visualedittoolbar Clique em **Edit** no chat e depois selecione o elemento que deseja alterar. Você pode: * Selecionar uma seção e ajustar cores, espaçamento e layout visualmente. * Pedir à IA para reestilizar apenas uma instância de componente. * Excluir elementos que você não precisa mais usando o ícone **Delete** . * Usá-lo como um sandbox seguro antes de aplicar um padrão ao restante da sua aplicação. Clique em **Edit Element** na barra de ferramentas do Edit para pedir mudanças à IA. Por exemplo: ```text theme={null} Nesta seção selecionada: - Clareie levemente o fundo - Aumente o espaçamento vertical entre o título e o conteúdo - Use o estilo de botão primário para a ação principal e o estilo secundário para as demais ``` ```text theme={null} Apenas para este card: - Aumente o padding - Mova o ícone para a esquerda do título - Use uma sombra mais suave que combine com os outros cards da aplicação ``` *** ## Usando AI Controls Use os [AI Controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) no chat para orientar e proteger seu design. Você pode: * Definir diretrizes de design que se aplicam a todo prompt. * Congelar arquivos ou páginas específicos para que a IA não os altere. * Estabelecer um tom, como minimalista, ousado ou divertido. Exemplo de diretrizes: ```text theme={null} Diretrizes globais de design: - Prefira visuais calmos e minimalistas, com bastante espaço em branco - Use cantos arredondados com raio 12 em cards e botões - Evite gradientes pesados e efeitos de vidro - Mantenha animações sutis e respeite preferências de movimento reduzido ``` Seja sempre explícito sobre o escopo nos seus prompts. A mesma mudança pode se aplicar a toda a aplicação, a uma página ou a um único elemento, e a IA seguirá sua orientação: ```text theme={null} Atualize o estilo do botão primário e propague-o para todos os lugares onde o componente de botão primário é usado. Não altere os botões secundários. ``` ```text theme={null} Atualize apenas a seção hero da página inicial: - Mude o fundo para um gradiente suave - Aumente o tamanho do título - Use o estilo de botão primário para a chamada principal Não altere outras seções ou páginas. ``` Para proteger áreas com as quais você está satisfeito enquanto experimenta em outros lugares: * Use os AI Controls para congelar arquivos ou páginas específicos para que a IA não os altere. * Use a opção **Revert** em prompts individuais para desfazer uma única mudança. * Use o histórico de versões para voltar a um estado anterior. *** ## Perguntas frequentes Clique em uma pergunta abaixo para saber mais sobre projetar com IA. Sim. Prompts de design são mensagens do chat de IA, então usam seus créditos de mensagem da mesma forma que qualquer outro pedido no chat. O modo **Edit** estiliza um elemento ou seção por vez. O painel **Theme** altera cores e fontes em toda a sua aplicação de uma vez. Para saber mais sobre o painel Theme, veja [Personalizando o design da sua aplicação](/Building-your-app/Design). Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a [versão em inglês](/).