> ## 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 sua aplicação
> Defina a aparência da sua aplicação na Base44 com ferramentas para estilização, cores, fontes, ativos visuais e controles avançados de personalização.
A Base44 oferece várias formas de projetar sua aplicação: o painel **Theme** para cores e fontes globais, o modo **Edit** para estilização por elemento e o chat de IA para mudanças mais amplas. Esta página cobre cada abordagem com prompts e exemplos que você pode usar diretamente.
***
## Trabalhando com IA no design
A IA está no centro de como você projeta na Base44. Basta descrever o que deseja em linguagem natural, e a IA atualiza código, estilos e componentes para você. O modo **Edit** permite ajustar o que vê na tela e os AI Controls ajudam a definir limites.
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}
You are my product designer for this app.
Design brief:
- Purpose: Help content teams plan, write, and ship articles faster.
- People: Busy content leads and writers on laptops during the workday.
- Feel: Calm, focused, modern, trustworthy.
Use this brief as the basis for all design suggestions and decisions.
```
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 the design of this dashboard only.
Focus on layout, hierarchy, color, typography, and spacing.
Then propose a short plan of small changes.
Wait for my approval before you apply anything.
```
Depois de revisar:
```text theme={null}
Apply the plan you proposed for this dashboard.
Make changes in small groups and describe each group briefly as you go.
```
O modo **Edit** é ideal quando você quer ajustar o que vê sem reescrever tudo.
Clique em **Edit** no chat e 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 não precisa mais usando o ícone **Delete** .
* Usar como um sandbox seguro antes de aplicar um padrão ao restante da aplicação.
Clique em **Edit Element** na barra de ferramentas Edit para pedir à IA que faça mudanças. Por exemplo:
```text theme={null}
In this selected section:
- Lighten the background slightly
- Increase vertical spacing between the heading and content
- Use the primary button style for the main action and secondary style for the others
```
```text theme={null}
For this card only:
- Increase padding
- Move the icon to the left of the title
- Use a softer shadow that matches other cards in the app
```
Use os [AI Controls](/Building-your-app/AI-chat-modes#setting-ai-controls) no chat para orientar e proteger seu design.
Você pode:
* Definir diretrizes de design que se aplicam a cada prompt.
* Congelar arquivos ou páginas específicas para que a IA não os altere.
* Estabelecer um tom como minimalista, ousado ou divertido.
Exemplo de diretrizes:
```text theme={null}
Global design guidelines:
- Prefer calm, minimal visuals with plenty of white space
- Use rounded corners with radius 12 on cards and buttons
- Avoid heavy gradients and glass effects
- Keep animations subtle and respect reduced motion preferences
```
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}
Update the primary button style and propagate it to all places where the primary button component is used.
Do not change secondary buttons.
```
```text theme={null}
Update only the hero section on the homepage:
- Change the background to a soft gradient
- Increase the heading size
- Use the primary button style for the main call to action
Do not change other sections or pages.
```
Para proteger áreas com as quais está satisfeito enquanto experimenta em outros lugares:
* Use AI Controls para congelar arquivos ou páginas específicas 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.
Você pode usar o chat de IA para explorar diferentes direções antes de se comprometer.
Loop de crítica:
```text theme={null}
Act as a senior product designer.
Review this page and describe three specific visual issues.
For each issue, write a Base44 prompt that would fix it.
Do not make any changes yet.
```
Direções alternativas:
```text theme={null}
Create two visual options for this dashboard:
- Option A: very minimal, mostly neutral with a single accent color
- Option B: more expressive, with richer color and slightly larger typography
Keep content and layout the same.
Describe each option in a short summary and wait for me to choose.
```
Depois de escolher uma opção, você pode pedir à IA para aplicar essa direção a páginas similares.
Quando você pede à IA para alterar o design ou layout de uma seção ou elemento, ela pode apresentar opções visuais para você escolher em vez de aplicar a mudança imediatamente. Cada opção mostra uma pré-visualização para que você veja como ficará antes de confirmar.
Selecione a opção desejada e clique em **Submit**, ou clique em **Skip** para deixar a IA decidir.
***
## Mudanças globais
O painel **Theme** permite definir cores e fontes para toda a sua aplicação em um só lugar. Qualquer mudança feita é aplicada em todos os lugares instantaneamente, então você não precisa atualizar elementos um a um.
O painel mostra uma pré-visualização da paleta atual no topo, seguida por uma lista de papéis de cor que você pode personalizar, como background, foreground, primary, secondary, card e popover. Clique em **Fonts** no topo do painel para definir a fonte da sua aplicação.
### Cores do tema
Clique em qualquer papel de cor para atualizá-la em toda a aplicação.
**Para alterar uma cor no seu tema:**
1. Clique no ícone **Theme** no topo do editor da sua aplicação.
2. Clique em qualquer papel de cor na lista para abrir o seletor de cores. A barra no topo do painel é uma pré-visualização da sua paleta atual e não é clicável.
3. Escolha sua cor arrastando o seletor, inserindo um valor hex, usando o conta-gotas para amostrar qualquer cor na tela ou escolhendo de uma paleta usando o dropdown na parte inferior do seletor.
4. Clique em **Apply** para pré-visualizar a mudança na sua aplicação.
5. Clique em **Save & Apply** no painel **Theme** para aplicá-la em todos os lugares.
Comece com sua cor primária e o fundo, depois deixe que orientem suas outras escolhas. Manter cores de foreground e background com alto contraste torna o texto legível em todos os componentes.
Se as cores do seu tema não correspondem às cores atuais da sua aplicação, você pode pedir ao chat de IA para sincronizá-las. Por exemplo: `Update my theme to match the colors used in my app`.
### Fontes
Defina as fontes da sua aplicação na aba **Fonts** do painel **Theme**. Um dropdown aparece para cada fonte que a sua aplicação usa.
**Para alterar as fontes da sua aplicação:**
1. Clique no ícone **Theme** no topo do editor da sua aplicação.
2. Clique na aba **Fonts**.
3. Clique em um dropdown e selecione uma fonte. Você pode pesquisar por nome ou navegar em **Brand Fonts** e **All Fonts**.
4. Clique em **Save & Apply** para aplicar as mudanças em toda a aplicação.
Se não vir uma aba **Fonts**, sua aplicação pode ainda não ter variáveis de fonte do tema configuradas. Peça ao chat de IA para adicioná-las: `Add theme font variables to my app so I can change fonts from the Theme panel`.
***
## Mudanças por elemento
Quando você está no modo **Edit**, pode estilizar qualquer elemento individual diretamente. Selecione um elemento e use os ícones na barra de ferramentas Edit para alterar suas cores, tipografia, espaçamento, raio dos cantos, opacidade ou adicionar classes Tailwind personalizadas. As opções disponíveis na barra de ferramentas variam conforme o tipo de elemento selecionado.
### Cores
Você pode definir a cor de fundo e a cor do texto de qualquer elemento usando as cores definidas no seu tema ou uma cor personalizada.
**Para alterar a cor de um elemento:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento que deseja alterar.
3. Clique no ícone **Colors** na barra de ferramentas Edit.
4. Selecione a parte que deseja alterar, como fundo ou texto.
5. Escolha sua cor:
* **Theme:** escolha entre os papéis de cor definidos no seu tema, como background, foreground, card e primary.
* **Custom:** arraste o seletor, insira um valor hex, use o conta-gotas para amostrar qualquer cor na tela ou escolha de uma paleta usando o dropdown na parte inferior do seletor.
6. Clique em **Apply** para confirmar a mudança.
Para elementos de imagem, a barra de ferramentas mostra um botão **Replace** em vez da opção Colors. Clique em **Replace** para trocar a imagem.
### Tipografia
Quando você seleciona um elemento de texto, a barra de ferramentas Edit mostra controles de família e tamanho da fonte. Um painel separado **Text Style** dá acesso a peso, alinhamento, decoração e transformação.
**Para editar o conteúdo do texto:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento de texto.
3. Clique no ícone **T** na barra de ferramentas Edit.
4. Digite suas mudanças no campo **Text Content**.
Se o conteúdo do texto é gerado dinamicamente, o painel Text Content mostra uma mensagem indicando que não pode ser editado diretamente. Use o chat de IA para alterar textos dinâmicos.
**Para alterar a fonte:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento de texto.
3. Clique no dropdown de família de fonte na barra de ferramentas Edit.
4. Pesquise ou navegue em **Brand Fonts** ou **All Fonts** e clique em uma fonte para aplicá-la.
O dropdown de família de fonte ainda não está disponível para todos os usuários.
**Para alterar o tamanho da fonte:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento de texto.
3. Clique no dropdown de tamanho na barra de ferramentas Edit.
4. Escolha um tamanho. Os tamanhos disponíveis vão de 12 a 128.
O dropdown de tamanho de fonte ainda não está disponível para todos os usuários.
**Para alterar o estilo do texto:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento de texto.
3. Clique no ícone **Text Style** na barra de ferramentas Edit.
4. Ajuste as configurações que deseja alterar:
* **Size:** escolha um tamanho entre XS, S, Base, L, XL, 2XL, 3XL ou 4XL.
* **Weight:** defina o peso de fino a negrito.
* **Decoration:** sublinhado ou tachado.
* **Alignment:** esquerda, centro, direita ou justificado.
* **Transform:** nenhum, maiúsculas, minúsculas ou capitalizar.
### Espaçamento
Você pode definir a margem e o padding de qualquer elemento em px, controlando cada lado independentemente.
**Para alterar o espaçamento de um elemento:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento que deseja alterar.
3. Clique no ícone **Spacing** na barra de ferramentas Edit.
4. Insira valores em px para margem e padding. Use os controles abreviados horizontal e vertical para definir ambos os lados de uma vez.
### Raio dos cantos
Você pode arredondar os cantos de qualquer elemento inserindo um valor em px.
**Para alterar o raio dos cantos de um elemento:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento que deseja alterar.
3. Clique no ícone **Corners** na barra de ferramentas Edit.
4. Insira um valor em px ou use as setas para ajustá-lo.
### Opacidade
Você pode tornar qualquer elemento totalmente opaco, semitransparente ou qualquer ponto entre os dois.
**Para alterar a opacidade de um elemento:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento que deseja alterar.
3. Clique no ícone **Opacity** na barra de ferramentas Edit.
4. Arraste o slider ou insira um valor entre 0 (totalmente transparente) e 100 (totalmente opaco).
### Classes Tailwind
Para estilização não coberta pelas outras opções, você pode inserir qualquer classe Tailwind CSS diretamente.
**Para adicionar classes Tailwind a um elemento:**
1. Clique em **Edit** no topo do editor.
2. Selecione o elemento que deseja alterar.
3. Clique no ícone **Tailwind Classes** na barra de ferramentas Edit.
4. Digite qualquer classe Tailwind CSS. Por exemplo, `shadow-lg` adiciona uma sombra grande e `border border-gray-200` adiciona uma borda sutil.
***
## Design system
Estas seções abordam como estabelecer padrões de design consistentes em toda a aplicação usando o chat de IA. Pense neles como a camada de regras que faz seu tema global e mudanças por elemento parecerem coesas.
### Sistema de cores
A cor é uma das suas ferramentas mais fortes para definir o humor e guiar a atenção. Comece definindo papéis em vez de códigos hex aleatórios. Procure:
* 1 cor primária da marca
* 1 cor secundária
* 1 cor de destaque para realces
* 3 a 5 tons de cinza neutros para fundos, superfícies e bordas
* Cores claras para estados de sucesso, aviso e erro
Você pode pedir à IA para propor e aplicar um sistema completo do zero:
```text theme={null}
Create a color system for this app:
- 1 primary brand color
- 1 secondary color
- 1 accent color for highlights
- 4 neutral grays for backgrounds, surfaces, and borders
Map colors to roles such as primary, surface, border, success, warning, error.
Ensure text on backgrounds meets accessibility contrast levels.
Apply this system across the app and replace one off colors.
```
Mantenha o significado das cores consistente. Por exemplo, use sua cor de sucesso apenas para estados positivos e sua cor de erro apenas para problemas, não para decoração.
Se já tem códigos hex de um guia de marca ou de uma ferramenta externa, cole-os e deixe a IA mapeá-los para papéis:
```text theme={null}
Use this palette and assign each hex to a role:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Define which are primary, secondary, accent, and neutral roles.
Replace hard coded colors with tokens or Tailwind classes that follow these roles.
```
Você pode enviar um screenshot ou imagem da sua paleta de cores direto para o chat de IA e pedir para aplicar as cores na sua aplicação:
```text theme={null}
Apply the colors from this image to my app.
Map each color to a role such as primary, background, foreground, and accent.
Replace existing colors across the app to match.
```
***
### Sistema de tipografia
A tipografia controla a legibilidade e o quão fácil é escanear sua aplicação. É melhor ter alguns estilos de texto claros do que muitos similares.
Defina papéis como:
* Título da página
* Cabeçalho de seção
* Texto do corpo
* Pequenos metadados como rótulos e timestamps
Você pode pedir à IA para configurar isso e aplicar em todos os lugares:
```text theme={null}
Set up a typography system:
- Page titles: largest size, bold, modern sans serif
- Section headings: medium size, semibold
- Body text: standard size, regular weight
- Metadata: small uppercase with extra letter spacing
Apply these roles consistently across all pages and remove ad hoc font sizes.
```
Você também pode mirar tamanhos mais diretamente:
```text theme={null}
Make typography more readable:
- Increase base body text size slightly
- Increase line height for paragraphs
- Ensure headings are at least 1.4x the size of body text
Keep font families the same.
```
Você pode usar fontes personalizadas e aplicá-las por meio do seu layout.
1. Obtenha o snippet de incorporação (por exemplo, do Google Fonts em [https://fonts.google.com](https://fonts.google.com)).
2. Peça à IA para adicioná-lo a `Layout.js` e integrá-lo ao seu sistema de tipos.
Exemplo de prompt:
```text theme={null}
Import the "Raleway" font from Google Fonts.
Use it for page titles and section headings.
Keep the current body font for paragraphs.
Update styles across the app to follow this rule.
```
Tente se limitar a uma ou duas famílias de fontes. Muitas fontes deixam a interface desestruturada e mais difícil de manter.
***
### Espaçamento e densidade
Espaçamento e densidade controlam o quão confortável a sua aplicação é de usar. Uma escala simples de espaçamento evita lacunas aleatórias e seções apertadas.
Você pode definir uma escala como 4, 8, 12, 16, 24 e pedir à IA para aplicá-la:
```text theme={null}
Normalize spacing using this scale: 4, 8, 12, 16, 24.
- Use larger values between major sections
- Use medium values inside cards and panels
- Use small values between labels and inputs
Reduce areas that feel cramped and avoid random spacing values.
```
Se uma página parece lotada ou vazia demais, você pode deixar o chat de IA diagnosticar e corrigir:
```text theme={null}
Look at this page and adjust spacing:
- Add more top and bottom padding around each section
- Increase the gap between rows of cards
- Ensure long paragraphs have a comfortable line length
Keep the existing colors and content.
```
***
### Elementos principais e estados
Com cor, tipo e espaçamento definidos, padronize os blocos de construção que usa em todos os lugares.
Foque em:
* Botões (primário, secundário e somente texto)
* Cards e painéis
* Barras de navegação e sidebars
* Campos de formulário (padrão, foco, erro, desabilitado)
* Chips, tags e badges, se usar
Você pode pedir à IA para detectar e unificar padrões:
```text theme={null}
Standardize core elements:
- Buttons: define primary, secondary, and text only styles
- Cards: define corner radius, padding, shadow, and header/body layout
- Navigation: define active, hover, and disabled states
- Form fields: define default, focus, error, and disabled states
Apply these patterns across the app and replace mismatched styles.
```
Isso dá a você uma linguagem reutilizável para que novas páginas pareçam pertencer ao mesmo produto.
***
## Imagens e ativos visuais
Ativos visuais como imagens, ícones e vídeos moldam como sua aplicação parece. A IA pode ajudar a criar, posicionar, estilizar e conectá-los aos seus dados e código.
Envie imagens ou vídeos ao chat de IA para dar contexto visual ao estilo, layout ou conteúdo da sua aplicação.
Você pode pedir ao chat de IA para adicionar imagens hero diretamente às suas páginas:
```text theme={null}
Add a full width hero image to the homepage that matches the current color palette.
Use a placeholder image that suggests a modern analytics dashboard.
```
Para substituir uma imagem placeholder:
1. Abra o arquivo da página relevante, como `Store.js`, na visualização de código.
2. Localize a tag `![]()
`.
3. Atualize o atributo `src` com a URL da sua própria imagem.
Você também pode enviar imagens para entidades na seção **Data** e vinculá-las a componentes para que cards e listas exibam as imagens corretas automaticamente.
Peça ao chat de IA para gerar vídeos curtos para seções visuais como heroes, prévias de produtos, tutoriais ou telas de onboarding.
Exemplo de prompt:
```text theme={null}
Create a short onboarding video for my fitness app showing a simple morning workout routine. Add it to the welcome screen above the Get Started button.
```
Gerar vídeos pelo chat de IA requer um [plano Starter](/Account-and-billing/Billing-and-plans) ou superior. Cada vídeo gerado usa os créditos de mensagem do prompt mais 1 crédito adicional de mensagem.
Você também pode permitir que pessoas gerem vídeos na sua aplicação ao vivo. Saiba mais sobre [gerar vídeos](/Integrations/built-in-integrations#generating-videos).
Imagens de referência ajudam você a guiar o design visualmente, mostrando ao chat de IA um estilo, layout, paleta de cores ou direção visual que deseja usar.
1. Clique no ícone **Upload (+)** no chat de IA.
2. Envie uma imagem de inspiração ou screenshot.
3. Diga à IA exatamente o que quer aproveitar e o que ignorar.
Ideias de prompts:
```text theme={null}
Use this reference as inspiration.
Keep my layout and content, but:
- Match the button shapes and shadows
- Match the card corner radius and border style
- Apply a similar soft gradient only to the top header
Do not copy the exact colors, just the structure and feel.
```
```text theme={null}
From this screenshot, extract design rules for:
- Color roles
- Font sizes and weights
- Corner radius and shadows
- Spacing between sections and cards
Explain the rules, then apply a similar style using my current brand colors.
```
Você pode copiar estilos visuais diretamente de uma ferramenta de design como o Figma e pedir à Base44 para aplicá-los, em vez de tentar descrever cada detalhe em palavras.
**Para copiar do Figma:**
1. No Figma, selecione o elemento cujo estilo deseja copiar.
2. Mude para o **Dev mode** e visualize o painel **Code**.
3. Copie a linha de CSS relevante, por exemplo, um fundo em gradiente: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);`
4. Na Base44, abra o **Visual Edit** e selecione o elemento correspondente.
5. Cole o estilo em um prompt de IA e diga à Base44 exatamente o que mudar, por exemplo:
```text theme={null}
Change the background style of this element to:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Keep all other styles the same.
```
Isso permite combinar gradientes, sombras, bordas e outros estilos do seu arquivo de design com muita precisão.
Ícones devem apoiar significado, não apenas decoração. Consistência é fundamental.
Tarefas comuns:
* Substitua ícones genéricos por outros mais significativos.
* Alinhe tamanhos e larguras de traço dos ícones.
* Combine ícones com rótulos de texto onde a clareza importa.
Você pode usar bibliotecas de ícones como Lucide e pedir ao chat de IA para integrá-las:
```text theme={null}
Replace generic icons with more meaningful ones:
- Use icons that clearly match each navigation item and main action
- Keep icon size and stroke width consistent
- Align icons neatly with labels in navigation, lists, and buttons
```
```text theme={null}
Update all primary call to action buttons:
- Use the "sparkles" icon to the left of the label
- Keep icon size small and padding even
- Do not add icons to secondary or destructive buttons
```
***
## Layout e responsividade
O layout controla como a informação é agrupada e escaneada. A responsividade garante que o layout funcione em todos os dispositivos.
Pense em tipos de página em vez de telas avulsas:
* Páginas de landing e marketing
* Dashboards
* Listas e tabelas
* Páginas de detalhe
* Formulários e wizards
* Configurações e páginas de perfil
Você pode pedir ao chat de IA para detectar e padronizar padrões:
```text theme={null}
Identify the main page types in this app (landing, dashboard, list, detail, form, settings).
For each type:
- Propose a consistent layout structure
- Suggest which existing components to reuse
Apply those layouts to all pages of the same type, without changing content.
```
Hierarquia e espaço em branco ajudam as pessoas a ver o que importa rapidamente.
Ideias que você pode pedir à IA para aplicar:
```text theme={null}
Improve visual hierarchy and white space on this page:
- Make the page title clearly stand out above other text
- Use consistent section headings to group content
- Add more top and bottom padding around each section
- Increase the gap between rows of cards
Avoid adding new colors or fonts.
```
Espaço em branco é especialmente importante para conteúdo denso, como dashboards e tabelas, então dê espaço para elementos-chave respirarem.
Sua aplicação precisa parecer natural em telefones, tablets e desktops.
Você pode codificar regras responsivas em um único prompt:
```text theme={null}
Make this layout responsive:
- On phones, use a single vertical column and stack sections
- On tablets, use two columns for cards where space allows
- On desktops, use three or four columns for cards
Keep images in a 4:3 aspect ratio.
Collapse the sidebar into a top menu on smaller screens.
Avoid horizontal scrolling at all breakpoints.
```
Use a pré-visualização de dispositivo no editor da Base44 para verificar como essas regras se comportam em diferentes tamanhos de tela, depois refine com prompts de acompanhamento.
### Personalizando sua aplicação para mobile
Sua aplicação Base44 ajusta automaticamente seu layout para qualquer dispositivo, mas você pode usar a pré-visualização mobile e as ferramentas de personalização do editor para ajustar como sua aplicação aparece e funciona em celulares. Isso permite criar uma experiência confortável e fluida para usuários mobile.
**Para personalizar sua aplicação para mobile:**
1. Vá para o editor da sua aplicação.
2. Clique no ícone **Screen** no topo e selecione **Mobile**.
3. Revise seu layout, navegação e conteúdo.
4. Faça mudanças conforme necessário, seja:
* Pedindo ao chat de IA para fazer mudanças no mobile.
* Usando o modo **Edit** no chat de IA para alterar o design ou layout de elementos específicos.
**Dicas para deixar sua aplicação bonita no mobile:**
* Certifique-se de que o texto está legível
* Redimensione elementos para caber na tela mobile
* Oculte ou mostre elementos conforme necessário
* Garanta que botões e ícones de botão sejam fáceis de tocar
* Verifique se as imagens estão bonitas
***
## Tipos de página
Diferentes tipos de página precisam de diferentes escolhas de design. Você pode usar estes padrões como pontos de partida e adaptá-los com a IA.
Foque em uma promessa clara, uma chamada para ação principal e uma forte hierarquia visual.
Dicas de design:
* Use um cabeçalho simples com navegação mínima.
* Faça a seção hero clara e focada, com um título curto e um botão primário.
* Use seções de apoio para benefícios, recursos e prova social.
* Mantenha formulários curtos e acima da dobra quando possível.
Exemplo de prompt:
```text theme={null}
Design the homepage as a focused landing page:
- Clean hero section with a short headline, one supporting sentence, and one primary call to action
- Follow with three key benefits in cards
- Add a simple social proof section with logos
- Keep navigation minimal
Use my existing color and typography system.
```
Dashboards devem responder "Como estou indo?" rapidamente.
Dicas de design:
* Coloque a métrica ou status mais importante perto do canto superior esquerdo.
* Agrupe métricas relacionadas em cards com títulos claros e descrições curtas.
* Evite muitos tipos de gráfico em uma tela; reutilize alguns padrões.
* Mantenha filtros e intervalos de tempo claramente visíveis e consistentes.
Exemplo de prompt:
```text theme={null}
Restructure this dashboard:
- Place the main KPI at the top left in a prominent card
- Group related metrics into a 2x2 grid of cards
- Move filters and date range controls into a clean top bar
- Reduce visual noise in charts by using consistent colors and styles
```
Listas e tabelas permitem que as pessoas escaneiem e ajam sobre muitos itens.
Dicas de design:
* Use cabeçalhos de coluna claros com espaçamento suficiente.
* Mantenha a altura das linhas confortável, não muito apertada.
* Use zebra striping ou separadores sutis de linha em tabelas grandes.
* Mantenha ações no fim da linha ou em um menu consistente.
* Adicione estados vazios, de carregamento e de erro.
Exemplo de prompt:
```text theme={null}
Clean up this table view:
- Increase row height slightly
- Use subtle row separators or zebra striping
- Align actions in a consistent column at the end
- Add a clear empty state with a short message and primary action
```
Páginas de detalhe devem deixar o objeto principal e suas ações-chave evidentes.
Dicas de design:
* Coloque o título do objeto e as ações primárias perto do topo.
* Use um layout claro com uma coluna principal e um painel lateral opcional.
* Agrupe informações relacionadas com cabeçalhos ou abas.
* Mantenha ações destrutivas visualmente distintas e posicionadas com cuidado.
Exemplo de prompt:
```text theme={null}
Improve this detail page:
- Move the main title and primary actions to the top of the page
- Use a two column layout with main content on the left and secondary info on the right
- Group related fields under small headings
- Make destructive actions clearly labeled and visually distinct
```
Formulários são onde muitos fluxos-chave acontecem. Devem parecer simples e tolerantes.
Dicas de design:
* Agrupe campos relacionados sob cabeçalhos.
* Use layout de coluna única para a maioria dos formulários.
* Mostre progresso para fluxos longos e multi-etapas.
* Coloque mensagens de erro perto dos campos e seja claro.
* Use rótulos claros e texto de ajuda.
Exemplo de prompt:
```text theme={null}
Redesign this form for clarity:
- Use a single column layout
- Group related fields under short headings
- Add clear labels and helper text where needed
- Show inline error messages under each field when validation fails
Use my existing typography and spacing system.
```
***
## Temas e modos
A direção visual é o tom geral da sua aplicação. Temas são formas de expressar esse tom usando profundidade, cor e efeitos. Na Base44, você pode abraçar um tema e ainda manter sua marca intacta.
### Temas de design
Elementos macios, extrudados, que parecem pressionados ou elevados do fundo.
Melhor para ferramentas calmas com conteúdo simples.
Características principais:
* Sombras internas e externas sutis
* Paletas suaves e monocromáticas
* Profundidade mínima e formas limpas
Ideia de prompt:
```text theme={null}
Give this app a soft neumorphic touch:
- Keep the current color palette
- Add subtle shadows to cards and primary buttons
- Avoid heavy contrast backgrounds
- Keep text contrast high for readability
```
Superfícies de vidro fosco com efeitos de transparência e desfoque.
Melhor para overlays, painéis laterais e cards selecionados.
Características principais:
* Backdrop blur
* Painéis transparentes com bordas sutis
* Efeitos sutis de brilho e reflexo
Ideia de prompt:
```text theme={null}
Apply a subtle glass effect to overlays and side panels only:
- Use translucent surfaces with blur and a thin border
- Keep backgrounds simple so text remains readable
- Maintain strong text contrast on glass surfaces
Do not apply glass effects to all cards or main content.
```
Layout estruturado, baseado em grid, com elevação clara e cor marcante.
Melhor para dashboards, ferramentas de administração e aplicações com muitos dados.
Características principais:
* Camadas de elevação claras
* Grids e alinhamento limpos
* Movimento intencional
Ideia de prompt:
```text theme={null}
Move this app toward a soft material style:
- Use clear card elevation for key sections
- Clean up alignment and grids so content lines up
- Use bold, flat colors rather than strong gradients
- Keep transitions subtle and purposeful
```
Elementos macios e fofos com formas arredondadas e sombras suaves.
Melhor para aplicações lúdicas, onboarding ou experiências mais leves.
Características principais:
* Cantos arredondados
* Paletas pastel ou suaves
* Sombras suaves e uniformes
Ideia de prompt:
```text theme={null}
Add a light clay feel to key components:
- Round the corners of cards and primary buttons more
- Use softer shadows under those components
- Keep backgrounds neutral so the app remains readable
Apply this style only to interactive elements, not long text sections.
```
Deliberadamente ousado, com blocos fortes de cor e bordas grossas.
Melhor para landing pages e ferramentas internas em que personalidade importa mais do que sutileza.
Características principais:
* Combinações de cores de alto contraste
* Bordas grossas e formas marcantes
* Tipografia crua e grids simples
Ideia de prompt:
```text theme={null}
Apply a controlled neo brutalist feel to the marketing pages:
- Use one bold accent color, one dark, and one light neutral
- Add thick borders and clear sections
- Make headings large and confident
- Keep body text highly readable
Do not apply this style to data tables or dense forms.
```
### Temas claro e escuro
Temas claro e escuro permitem que as pessoas escolham o que parece melhor e podem ajudar em diferentes ambientes.
Você pode pedir ao chat de IA para adicionar suporte a temas e um toggle.
Prompt:
```text theme={null}
Add light and dark mode support:
- Light mode: soft gray backgrounds and dark text
- Dark mode: near black backgrounds, light text, and subtle borders
- Primary and accent colors should remain readable and consistent in both modes
Add a theme toggle in the header and remember the choice per visitor.
```
O suporte a temas afeta muitos componentes, então pode levar algum tempo para a IA conectar tudo. Você também pode especificar mudanças que devem se aplicar apenas no modo claro ou apenas no modo escuro.
***
## Movimento e feedback
Movimento e feedback ajudam as pessoas a entender o que está acontecendo na tela. Você pode usá-los para fazer cliques parecerem responsivos, mostrar que algo está carregando e explicar o que fazer em seguida. Na Base44, a IA pode adicionar esses padrões para você, então não precisa codificar cada animação manualmente.
Use esta seção quando sua aplicação já funciona, mas parece um pouco plana ou estática, e você quer que pareça mais viva e tranquilizadora.
Microinterações são pequenas reações visuais ao que alguém faz, por exemplo:
* Um botão que cresce levemente e fica mais claro no hover.
* Um card que se eleva quando você passa o mouse sobre ele.
* Um ícone que faz uma pequena animação de check quando algo é salvo.
Esses efeitos deixam a aplicação responsiva sem transformá-la em desenho animado.
Você pode pedir à IA para introduzir um conjunto consistente de interações:
```text theme={null}
Add subtle interactions:
- Fade in each page on load with a short duration
- Make primary buttons gently grow and brighten on hover and focus
- Add a small lift effect to cards on hover
Respect reduced motion preferences and avoid any rapid flashing.
```
Para páginas de marketing ou promoção, você pode usar um tom mais forte:
```text theme={null}
On marketing pages only:
- Slide hero sections in from the side on first load
- Animate icons when a feature card becomes focused or hovered
- Keep animations short so the page still feels fast
```
Adicione movimento depois de estar satisfeita com cores, layout e tipografia. O movimento deve apoiar a clareza, não esconder uma estrutura fraca.
Estados de carregamento, vazio e erro são os lugares em que as pessoas frequentemente se sentem travadas. Bom feedback aqui pode tornar sua aplicação muito mais polida e tolerante.
Exemplos:
* Loading: formas de skeleton que combinam com o layout final em vez de um spinner genérico.
* Empty: uma mensagem amigável que explica o que aparecerá aqui e um botão para criar ou conectar algo.
* Error: uma explicação curta e humana e uma forma clara de tentar novamente ou obter ajuda.
Você pode pedir à IA para criar esses padrões em toda a aplicação:
```text theme={null}
Improve feedback states:
- For each main list and dashboard, add a skeleton loader that matches the layout
- Design an empty state with an icon, one line explanation, and a primary action
- Add a clear error state with a short message and a retry button where relevant
Use the existing color and typography system.
```
Essas mudanças não afetam seus dados ou lógica, apenas alteram como sua aplicação se comunica com as pessoas quando algo está carregando, faltando ou deu errado.
***
## Personalização avançada
Quando quiser ir além do que a IA e o modo **Edit** oferecem prontos, você pode trazer seu próprio código e pacotes npm. A IA ainda pode ajudar a conectar e alinhar tudo.
Você pode usar [pacotes npm](/Building-your-app/NPM-packages) para trazer movimento mais rico, efeitos visuais e componentes interativos para a sua aplicação Base44 sem construir tudo do zero. Pacotes vêm do registro público npm e são instalados pelo chat de IA no editor da sua aplicação, então você fica no mesmo fluxo de trabalho.
**Exemplos focados em design incluem:**
* Bibliotecas de animação (por exemplo, anime.js) para adicionar transições, efeitos hover e microinterações.
* Bibliotecas de componentes UI ou de movimento para lidar com modais, tooltips, carrosséis ou fluxos por etapas com padrões de interação prontos.
* Utilitários de gráficos para visualizar dados com cores, tipografia e espaçamento personalizados que combinam com sua aplicação.
* Bibliotecas de arrastar e soltar ou gestos para tornar layouts mais táteis e interativos.
* Auxiliares de data e hora para formatar timestamps e agendamentos de forma que combine com sua UI.
**Depois que um pacote é instalado, você pode usar o chat de IA para:**
* Importar as funções ou componentes corretos do pacote.
* Integrá-los ao seu layout existente e tokens de design (cores, tipografia, espaçamento, raio).
* Ajustar props, variantes e movimento para que pareçam consistentes com o resto da aplicação.
* Verificar detalhes de acessibilidade como estados de foco, navegação por teclado e preferências de movimento reduzido.
**Exemplo de prompt**
```text theme={null}
I added the framer-motion npm package. Refactor the existing card grid so each card animates on hover using framer-motion:
- Keep the current layout and copy
- Use the existing color tokens, border radius, and typography
- Respect prefers-reduced-motion and keep keyboard focus outlines clear
```
Todos os pacotes npm são código de terceiros. A Base44 não pode garantir sua qualidade ou segurança, então certifique-se de revisar o README do pacote, testá-lo na sua aplicação e confirmar se atende aos requisitos de design e desempenho do seu projeto.
Aplicações Base44 frequentemente usam utilitários Tailwind CSS. A IA pode ajudar a refatorar estilos bagunçados em algo mais sistemático.
Tarefas que você pode pedir à IA para fazer:
* Substituir estilos inline por utilitários Tailwind.
* Extrair padrões repetidos em componentes reutilizáveis.
* Mapear valores de cor para tokens de design e config Tailwind.
Exemplo:
```text theme={null}
Refactor these components to use consistent Tailwind classes:
- Replace inline style attributes with Tailwind utilities
- Use the design tokens for colors, spacing, and typography
- Document the main class combinations for navigation, cards, and buttons
```
Às vezes você quer controle preciso sobre layout, animação ou estrutura de componente. Você pode [abrir arquivos de código](/documentation/building-your-app/editing-code) diretamente e editar você mesma ou pedir à IA para fazê-lo.
Edições comuns relacionadas a design:
* Atualizar `Layout.js` para alterar wrappers globais, cabeçalhos ou rodapés.
* Ajustar provedores ou contexto de tema.
* Mudar como componentes são compostos e quais props aceitam.
Para editar o código:
1. Abra o arquivo relevante.
2. Cole um trecho de código no chat de IA.
3. Peça uma mudança, depois revise o diff ou preview.
Exemplo:
```text theme={null}
Here is my Layout.js component.
Adjust it so:
- The header is sticky on scroll
- The main content has a max width and is centered on large screens
- The background color uses the surface token from my design system
Explain what you changed in comments.
```
Escolhas de design afetam [desempenho](/Performance-and-SEO/App-performance), especialmente quando você introduz pacotes e visuais pesados.
Lembre-se:
* Use tamanhos de imagem otimizados em vez de ativos de fundo enormes.
* Evite carregar muitas animações pesadas ou bibliotecas grandes no carregamento inicial.
* Faça lazy load de seções raramente usadas, como relatórios profundos ou filtros avançados.
* Reutilize componentes compartilhados em vez de muitas cópias quase iguais.
Você pode pedir à IA uma revisão focada em desempenho:
```text theme={null}
Review this app's design from a performance perspective:
- Identify heavy visual or code related elements that might slow loading
- Suggest lighter alternatives that keep the same overall look
- Propose specific places where lazy loading or code splitting would help
```
***
## Acessibilidade
A acessibilidade faz parte de um bom design. Ela ajuda mais pessoas a usar sua aplicação confortavelmente e pode melhorar a clareza para todos.
Escolhas de cor têm impacto direto na legibilidade.
Boas práticas:
* Use forte contraste entre texto e fundo.
* Evite usar cor sozinha para transmitir significado.
* Mantenha elementos interativos como botões e links claramente visíveis em todos os estados.
* Verifique modos claro e escuro se você os suporta.
Exemplo de prompt:
```text theme={null}
Audit this app for color contrast:
- Identify text or icons with low contrast against their backgrounds
- Strengthen contrast while keeping the same general palette
- Ensure primary buttons and links are clearly distinguishable
Describe the main fixes you applied.
```
Texto legível vai além da escolha de fonte.
Boas práticas:
* Use tamanhos de fonte confortáveis em todos os dispositivos.
* Use altura de linha suficiente para parágrafos.
* Evite fontes de peso muito leve em fundos claros.
* Mantenha o comprimento de linha razoável, especialmente em telas largas.
Exemplo de prompt:
```text theme={null}
Improve text readability:
- Increase base body font size slightly
- Increase line height for paragraphs
- Ensure headings are clearly larger than body text
- Reduce very long line lengths on wide screens
```
As pessoas devem conseguir usar sua aplicação com teclado e ver onde estão.
Boas práticas:
* Garanta que Tab navegue por elementos interativos em ordem lógica.
* Garanta que os estilos de foco sejam visíveis e distintos.
* Evite armadilhas de teclado em que o foco não pode sair.
Exemplo de prompt:
```text theme={null}
Improve keyboard and focus accessibility:
- Ensure all interactive elements can be reached with Tab
- Add visible focus styles to buttons, links, and form fields
- Fix any focus order issues on this page
Describe any major changes you made.
```
O movimento pode ajudar ou atrapalhar. Algumas pessoas preferem menos dele.
Boas práticas:
* Respeite preferências de movimento reduzido.
* Evite flash rápido ou cintilação forte.
* Use animações sutis e intencionais em vez de movimento constante.
Exemplo de prompt:
```text theme={null}
Adjust animations for accessibility:
- Respect the user's reduced motion preference
- Remove or simplify large continuous animations
- Keep only short, subtle motion that helps understanding
```
Linguagem clara e descrições ajudam todos, incluindo pessoas que usam tecnologias assistivas.
Boas práticas:
* Use rótulos claros e descritivos para botões e links.
* Forneça alt text significativo para imagens importantes.
* Use cabeçalhos para estruturar conteúdo.
* Evite textos vagos como "clique aqui".
Exemplo de prompt:
```text theme={null}
Improve accessibility of labels and alt text:
- Make button and link labels more descriptive where needed
- Add or improve alt text for important images
- Ensure headings follow a clear structure
Keep the tone and brand voice the same.
```
***
## Truques rápidos
Se quiser melhorias rápidas, estas receitas curtas podem ajudar você a obter muito valor com poucos prompts.
* Introduza um sistema simples de cores e aplique-o globalmente.
* Defina papéis de texto claros e aumente a altura de linha.
* Adicione componentes básicos de card e botão e reutilize-os.
Prompt:
```text theme={null}
Polish this prototype:
- Create a simple color system and apply it across the app
- Define typography roles for titles, headings, and body text
- Standardize buttons and cards and use them consistently
Keep content and logic the same.
```
* Aumente um pouco a altura das linhas e adicione separadores sutis.
* Mova ações para uma coluna ou menu consistente.
* Adicione filtros em uma barra superior clara.
* Adicione estados de carregamento, vazio e erro.
Prompt:
```text theme={null}
Clean up this table page:
- Increase row height and add subtle row separators
- Move row actions into a consistent column at the end
- Add a simple filter bar above the table
- Add clear loading, empty, and error states
```
* Ajuste espaçamento e hierarquia.
* Atualize formas de cards e botões.
* Introduza microinterações sutis.
Prompt:
```text theme={null}
Give this app a soft visual refresh:
- Keep brand colors the same
- Improve spacing and hierarchy on each page
- Round card and button corners slightly and soften shadows
- Add subtle hover and focus states to primary actions
```
***
## Perguntas frequentes
Clique em uma pergunta abaixo para saber mais sobre projetar sua aplicação.
Tailwind CSS é um framework CSS utility-first. Em vez de escrever regras CSS personalizadas, você adiciona pequenos nomes de classe diretamente aos seus elementos para controlar cor, espaçamento, tipografia e layout. Cada nome de classe geralmente mapeia para uma única regra visual, então você pode "ler" o design pelas próprias classes.
Exemplos comuns que você pode ver:
* Cores: `bg-blue-500` define um fundo azul, `text-white` define texto branco.
* Espaçamento: `p-4` adiciona padding em todos os lados, `m-2` adiciona margem em todos os lados.
* Tipografia: `font-bold` deixa o texto em negrito, `text-lg` define um tamanho maior de texto.
* Layout: `flex` cria um container flex, `grid` cria um container grid, `items-center` centraliza itens verticalmente em uma linha flex ou grid.
Quando vir classes Tailwind na Base44, pode combiná-las para descrever o estilo completo de um elemento. Por exemplo, `bg-blue-500 text-white p-4 flex items-center` resulta em uma barra azul com texto branco, padding e conteúdo centralizado.
Para referência mais profunda e a lista completa de utilitários, consulte a documentação oficial do Tailwind CSS.
Projete para mobile, tablet e desktop separadamente, depois verifique como seus layouts se adaptam.
Use estas diretrizes ao projetar na Base44:
* Mobile: Use uma única coluna vertical, mantenha uma ação primária clara por tela e faça áreas de toque grandes com espaçamento suficiente. Mantenha o texto curto para que as pessoas não precisem dar zoom.
* Tablet: Trate o tablet como híbrido. Você pode usar menus laterais ou layouts divididos, mas mantenha botões amigáveis ao toque e evite tabelas muito pequenas ou controles densos.
* Desktop: Use a largura extra para layouts de várias colunas e sidebars. Pode adicionar efeitos hover, mas qualquer ação importante também deve funcionar com clique ou toque.
* Todos os dispositivos: Use tamanhos de fonte legíveis, evite rolagem horizontal e deixe os elementos empilharem em vez de sobreporem quando o espaço é apertado. Evite alturas fixas que cortam o conteúdo.
Você também pode pedir à IA para aplicar regras responsivas, por exemplo:
```text theme={null}
Make this layout responsive for mobile, tablet, and desktop.
Avoid horizontal scrolling and keep primary actions visible without excessive scrolling.
```
Escolhas de design têm impacto direto em quão rápido sua aplicação carrega e parece. Ao projetar na Base44, mantenha estas diretrizes em mente:
* Use tamanhos de imagem otimizados para que ativos grandes não atrasem o carregamento inicial. Prefira formatos comprimidos e evite enviar imagens muito maiores do que aparecem na tela.
* Limite animações pesadas e efeitos complexos, especialmente em aplicações com foco em mobile. Transições curtas e simples estão ok, mas evite movimento constante ou fundos animados grandes.
* Mantenha layouts limpos e focados. Menos camadas, overlays e componentes aninhados geralmente significam renderização mais rápida, especialmente em dispositivos mais simples.
* Reutilize componentes em vez de criar muitas versões ligeiramente diferentes. Componentes compartilhados são mais fáceis de cachear e manter.
* Evite carregar tudo de uma vez. Onde possível, carregue conteúdo não crítico depois, por exemplo seções secundárias, listas longas ou painéis raramente usados.
* Tenha cuidado com embeds de terceiros como mapas, players de vídeo e widgets. Inclua-os apenas onde agregam valor real e evite empilhar muitos embeds em uma única tela.
Você pode usar o controle de versão de design no chat de IA para reverter mudanças.
* Cada prompt da IA tem uma opção **Revert** que desfaz instantaneamente tudo o que aquele prompt específico alterou na sua aplicação.
* O ícone de relógio no chat de IA abre o histórico de versões. Você pode escolher uma versão salva anterior da sua aplicação e voltar a ela em um passo.
Saiba mais sobre [modos de chat de IA e histórico de versões](/Building-your-app/AI-chat-modes).
Você pode pedir ao chat de IA para remover o elemento específico ou clicar em **Edit** no chat de IA, selecionar o elemento e clicar no ícone **Delete** .
Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/).