Skip to main content
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

Projetando sua aplicação com IA

Para o painel Theme, fontes e estilização global dentro de uma aplicação, veja Personalizando o design da sua aplicação.

​
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: Uma boa ordem para um redesign completo:
  1. Defina primeiro o visual geral: cores e fontes no painel Theme.
  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í:
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:
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:
Depois que você revisar:

​
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

Escolhendo entre opções de design da IA

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

Refinando uma opção de design na visualização expandida

​
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:
Direções alternativas:
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

A barra de ferramentas do modo Edit

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:

​
Usando AI Controls

Use os AI Controls 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:
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:
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.
Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a versão em inglês.