Projetando sua aplicação

​

Trabalhando com IA no design

​

Mudanças globais

​

Cores do 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.

​

Fontes

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, navegar em Brand Fonts e All fonts, ou clicar em Upload Fonts para adicionar as suas próprias.
4. Clique em Save & Apply para aplicar as mudanças em toda a aplicação.

​

Mudanças por elemento

​

Cores

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.

​

Tipografia

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.

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 pelas fontes e clique em uma para aplicá-la. Passe o mouse sobre uma fonte com uma seta > para ver os pesos disponíveis e clique em um peso para aplicá-lo.

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.

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:
   • Alinhamento: esquerda, centro, direita ou justificado.
   • Caixa: nenhuma, maiúsculas, minúsculas ou capitalizar.
   • Decoração: nenhuma, sublinhado, tachado ou itálico.

​

Espaçamento

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

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

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

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.

​

Temas e modos

​

Temas de design

Neumorphism

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:

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

Glassmorphism

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:

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.

Estilo Material

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:

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

Claymorphism

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:

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.

Neo brutalism

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:

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

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.

​

Movimento e feedback

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.

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

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.

​

Truques rápidos

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.

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

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

O que é Tailwind CSS e como leio seus nomes de classe?

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.

Como desfaço mudanças da IA ou restauro uma versão anterior do meu design?

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.

Como excluo um elemento da minha aplicação?

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 .