CleanUI — Habilidade de Aplicação de Design de UI para IA

PARE. Antes de escrever QUALQUER código de UI, leia este arquivo.

Você é um gerador de código de IA com hábitos de UI profundamente enraizados que produzem saídas com aparência reconhecível de "IA". Esta habilidade existe para anular esses hábitos e produzir interfaces profissionais e projetadas por humanos.

Seu processo para cada tarefa de UI:

Pense sobre o que você NORMALMENTE geraria

Verifique cada elemento contra a lista de PROIBIÇÕES ABSOLUTAS abaixo

Substitua cada violação pela alternativa especificada

Só então escreva o código

LISTA DE PROIBIÇÕES ABSOLUTAS — PADRÕES DE FALHA AUTOMÁTICA

Se sua saída contiver QUALQUER um destes, pare e corrija antes de retornar o código.

Tipografia

PROIBIDO: font-extrabold (800), font-black (900), fontWeight: "800", fontWeight: "900"
USE EM VEZ DISSO: font-bold (700) no máximo. font-semibold (600) para títulos de seção.
AUTO-VERIFICAÇÃO: Pesquise em seu código por "extrabold" e "black". Substitua todos por "bold".

Logos / Barras de Confiança

PROIBIDO: Nomes de empresas como texto simples idêntico em pills/caixas com bordas idênticas
USE EM VEZ DISSO: Torne cada logo visualmente distinto — emparelhe ícones com nomes, varie peso/itálico/tracking por logo, ou use logos SVG
AUTO-VERIFICAÇÃO: Todos os logos parecem idênticos? Corrija.

Maiúsculas / Espaçamento entre Letras

PROIBIDO: tracking-[0.18em], tracking-[0.2em], tracking-[0.24em] ou qualquer espaçamento personalizado largo
PROIBIDO: Mais de 2 rótulos em maiúsculas com tracking em toda a página
USE EM VEZ DISSO: Frase em caixa baixa. Se maiúsculas forem necessárias, tracking-wider (0.05em) no máximo.

Badges de Sobrancelha

PROIBIDO: Pill/badge decorativo acima de manchetes que repete o que a manchete diz (ex.: "Sistema de escrita de IA para equipes de conteúdo")
USE EM VEZ DISSO: Remova completamente, ou use informações factuais: "Agora em beta", "Confiado por 2.400 equipes", "Plano gratuito disponível"

Manchetes do Hero

PROIBIDO: Manchetes que ocupam 4+ linhas no desktop
USE EM VEZ DISSO: 4-8 palavras, no máximo 2 linhas. Reescreva de forma mais curta.
PROIBIDO: Subtítulo com mais de 2 frases
USE EM VEZ DISSO: No máximo 1-2 frases curtas.

Texto Decorativo

PROIBIDO: Rótulos ornamentais como "Pulso ao vivo", "Turno noturno", "Clareza operacional sem bagunça"
USE EM VEZ DISSO: Dados reais (status, contagens, datas) ou remova completamente. Cada rótulo deve servir a uma função.

Sombras

PROIBIDO: shadow-xl, shadow-2xl, desfoque acima de 8px em cards
USE EM VEZ DISSO: shadow-sm ou shadow-none com borda sutil.

Raio de Borda

PROIBIDO: Mistura aleatória de rounded-md, rounded-xl, rounded-2xl, rounded-3xl, rounded-[24px], rounded-[32px]
USE EM VEZ DISSO: Escolha 2-3 valores. Cards: 8-12px. Botões: 6-8px (ou rounded-full para pills). Inputs: 6-8px. Seja consistente.

Ícones

PROIBIDO: Caracteres Unicode como ícones (↑, ↓, ◌, ⌂, ◫)
USE EM VEZ DISSO: lucide-react (web), @expo/vector-icons (React Native), SF Symbols (iOS), Material Icons (Android)

Estrutura de Arquivos

PROIBIDO: Aplicativo inteiro em um único arquivo
USE EM VEZ DISSO: Separe: telas/páginas, componentes, constantes/tema, dados, navegação

REGRAS DE LAYOUT

Corresponda o Layout ao Tipo de Conteúdo

Tipo de Conteúdo	Layout	Não Use
Imagens/visuais (comida, viagem, produtos)	Carrosséis horizontais, grades de imagens, imagens de herói	Listas verticais apenas com texto
Dados/números (finanças, fitness, análises)	Cards de estatísticas, barras de progresso, grades de métricas	Cards de imagem de herói
Feed (redes sociais, notícias, postagens)	Cards empilhados em largura total, rolagem infinita	Layout seccionado com alças de arrasto
Itens para navegar (e-commerce, tarefas, e-mail)	Lista vertical com pesquisa/filtros	Seções de herói
Multimídia (streaming, música, podcasts)	Prateleiras de rolagem horizontal (estilo Netflix)	Listas verticais
Chat/mensagens	Lista de contatos + detalhe do chat	Cards de herói ou grades de estatísticas
Mapas/localização	Visualização de mapa + sobreposição de folha inferior	Layout de lista padrão

Regras Anti-Plantilla

NUNCA use o mesmo esqueleto de layout para cada aplicativo. Leia o prompt, identifique o tipo de conteúdo, escolha o layout correto.
NUNCA use TODOS estes juntos: card de herói + botões de grade + alça de arrasto + controle segmentado + lista vertical. Isso é um template.
Se o aplicativo for pesado em imagens, mostre imagens reais — miniaturas, fotos — não apenas ícones em quadrados arredondados.
Use rolagens horizontais (FlatList horizontal, CSS overflow-x-auto) para categorias, itens em destaque, prateleiras de conteúdo. Geradores de IA subutilizam isso.

BOM GOSTO EM DESIGN

Moderação de Cores

Paletas monocromáticas ou quase monocromáticas geralmente parecem melhores do que as coloridas.
A cor deve aparecer principalmente em ações (botões, links), status (badges) e destaques (estados selecionados). Não em tudo.
Elementos escuros (cards, seções) são justificados APENAS quando representam um objeto do mundo real (cartão de crédito, player de mídia, bloco de código) ou criam um ritmo visual deliberado. Não apenas "por variedade".

Itens de Lista

NUNCA use iniciais de letras como único identificador. Use ícones específicos da categoria (talheres para restaurante, ônibus para transporte, repetir para assinatura) em quadrados arredondados.
Sempre inclua metadados: data/hora, categoria, status. "Restaurante" parece falso. "Restaurante · 5 de maio · 14:28" parece real.

Filtros

Qualquer lista com 5+ itens deve ter um filtro ou controle segmentado.
Controle segmentado: estilo pill-track com preenchimento sólido no segmento selecionado.

Botões de Ação

O estilo sem borda geralmente parece mais limpo: ícone em quadrado de fundo suave + rótulo abaixo. Nenhum wrapper de card, sombra ou borda é necessário.

REGRAS PARA DISPOSITIVOS MÓVEIS

Consulte Referência de Padrões para Dispositivos Móveis para paletas de cores completas do iOS, tokens do Material 3 do Android, diretrizes de componentes e exemplos de código.

Todas as Plataformas

Use bibliotecas de navegação reais, não barras de navegação personalizadas baseadas em View. React Native: @react-navigation/bottom-tabs. iOS: TabView. Android: Material NavigationBar.
NUNCA construa barras de navegação inferior flutuantes em forma de pill. Sem position: absolute, sem borderRadius: 28, sem pill flutuante escura.
Use Platform.select() ou Platform.OS para estilização condicional em React Native.
Defina tokens de design (cores, espaçamento, raios, tipografia) em um arquivo de constantes.
Lide com 3 estados por tela: carregamento (esqueletos), conteúdo, vazio.

iOS

Silencioso, suave, premium. Cor contida. Fontes do sistema (SF Pro). Cores semânticas (.label, .secondaryLabel, .systemBackground). Barras de navegação/abas translúcidas. listStyle(.insetGrouped). SF Symbols para ícones. Separadores finos. Raio de canto: 10-12. Sem sombras pesadas — use contraste de fundo.

Android (Material 3)

Estruturado, ousado, expressivo. Componentes Material do material3. Superfícies tonais (tonalElevation) em vez de sombras projetadas. Scaffold com TopAppBar + NavigationBar. Composable ListItem para linhas de lista. HorizontalDivider() entre itens. Raio de canto: 12dp para cards. Gere esquema de cores a partir de uma cor semente.

React Native / Expo

Cores, sombras e espaçamento condicionais à plataforma via Platform.select().
iOS usa shadowColor/shadowOpacity/shadowRadius. Android usa elevation.
Cores de fundo diferentes por plataforma: iOS #F2F2F7, Android #F9F9FF.
Cores primárias diferentes: iOS #007AFF, Android usa cor semente do Material.

REGRAS PARA WEB

Liberdade Criativa + Estrutura

Você tem liberdade em: paleta de cores, escolha de fonte, valores de raio de borda, personalidade da marca, tratamentos de fundo.

Você deve seguir: estrutura de seção, limites de conteúdo do herói, padrões de componentes, comportamento responsivo.

Navegação

Topo fixo com backdrop-blur e fundo semi-transparente
Logo à esquerda, links de navegação ao centro, botões CTA à direita
Celular: menu hambúrguer

Estrutura da Página de Destino

Herói      → manchete + subtítulo + 2 CTAs + um elemento de confiança
Confiança  → barra de logotipos (logotipos visualmente distintos)
Recursos   → grade de 3 colunas com ícones + título + descrição
Como funciona → processo de 3 etapas
Depoimentos → avatar + nome + cargo + citação
Preços     → 2-3 níveis, nível em destaque visualmente invertido (fundo escuro)
CTA        → chamada para ação final
Rodapé     → colunas de links + direitos autorais

Herói

Manchete + subtítulo curto + 2 botões + um elemento de confiança. Só isso.
Mockup/captura de tela do produto no lado direito de um herói de duas colunas é aceitável.
NÃO coloque cards de estatísticas, cards de visualização complexos com listas ou descrições de vários parágrafos no herói.

Cards de Recursos

Container de ícone: pelo menos 48px com fundo matizado. Não minúsculo.
Preenchimento do card: generoso (p-6 a p-8).
Cada card deve parecer completo — ícone + título + descrição.

Preços

Nível em destaque: invertido (fundo escuro, texto claro) ou borda mais grossa + badge "Mais popular".
CTA em largura total em cada card.

Login

Duas colunas: painel da marca (esquerda, escuro) + formulário (direita).
Login social acima do formulário de e-mail.
Celular: oculte o painel da marca, mostre o formulário com o logotipo.

Painel de Controle

Barra lateral (240-260px) + conteúdo principal.
Barra lateral: logotipo, itens de navegação com ícones, card de upgrade opcional.
Barra superior: pesquisa + notificações + avatar.
Conteúdo: saudação → cards de estatísticas → lista filtrada com abas → feed de atividades.

Modo Escuro

Fundo: cinza muito escuro, não preto puro.
Texto: off-white, não branco puro.
Bordas: cinza escuro. Reduza a saturação de cor.

LISTA DE VERIFICAÇÃO PRÉ-SAÍDA

Antes de retornar o código, verifique:

Tipografia:

Nenhum font-extrabold ou font-black em lugar nenhum
No máximo 2 pesos de fonte usados (regular + negrito/seminegrito)

Visual:

Nenhum tracking-[0.18em] ou mais largo
No máximo 2 rótulos em maiúsculas em toda a página
Itens da barra de logotipos parecem visualmente distintos uns dos outros
Nenhum shadow-xl ou shadow-2xl em cards
Raio de borda consistente (no máximo 2-3 valores)

Herói:

Manchete cabe em 2 linhas no desktop
Badge de sobrancelha (se presente) adiciona novas informações, não repete a manchete
Subtítulo tem 1-2 frases, não um parágrafo

Estrutura:

Múltiplos arquivos (telas, componentes, constantes, navegação)
Biblioteca de ícones real (não Unicode)
Estilização específica da plataforma (React Native)
Estados de carregamento/vazio existem

Layout:

Layout corresponde ao tipo de conteúdo (não o mesmo modelo toda vez)
Itens de lista têm ícones de categoria + metadados
Listas com 5+ itens têm filtros

Perguntar na sua IA favorita

Documentação