O que Excelência em Design faz?
Faça com que aplicativos construídos por IA pareçam feitos por humanos. Sem modelos genéricos. Sem padrões óbvios.
<core_principle>
O Padrão Artesanal
Se alguém consegue perceber que foi gerado por IA, nós falhamos.
Bom design é invisível. Os usuários devem sentir que o aplicativo é profissional, não que ele segue um modelo. </core_principle>
<color_system>
Filosofia de Cores
O Problema com as Escolhas de Cores da IA
A IA tende a escolher:
- Gradientes roxos sobre branco (aparência padrão do Lovable)
- Cores de destaque excessivamente saturadas
- Muitas cores em uma única interface
- Gradientes onde cores sólidas funcionam melhor
Nossa Abordagem: Moderação
Paleta Base (Padrão)
/* Use a escala slate do Tailwind para neutros */
--background: slate-50 /* Fundo da página */
--surface: white /* Cards, modais */
--border: slate-200 /* Divisores, bordas */
--text-primary: slate-900 /* Títulos */
--text-secondary: slate-600 /* Corpo do texto */
--text-muted: slate-400 /* Placeholders, dicas */
Cores de Destaque (Escolha UMA por aplicativo)
/* Padrão: Azul (profissional, confiável) */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50
/* Alternativa por tipo de aplicativo: */
/* Finanças/Bancos → Verde (dinheiro) */
/* Saúde/Bem-estar → Teal (calma) */
/* Comida/Restaurante → Laranja (apetite) */
/* Criativo/Design → Roxo (criatividade) */
/* Urgente/Alerta → Vermelho (atenção) */
Regras
- UMA cor de destaque por aplicativo, sem exceções
- Use o destaque com moderação - apenas botões, links, realces
- Nunca use gradiente em botões primários
- O fundo deve ser branco ou quase branco, não colorido
- Modo escuro: inverta corretamente, não apenas torne tudo cinza </color_system>
<typography_system>
Regras de Tipografia
A Pilha de Fontes
/* Não especifique Inter em todos os lugares - use fontes do sistema */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Isso parece nativo em todas as plataformas */
Escala Tipográfica (classes do Tailwind)
Título da Página: text-2xl font-semibold (24px)
Título da Seção: text-lg font-medium (18px)
Título do Card: text-base font-medium (16px)
Corpo: text-sm (14px)
Pequeno/Legenda: text-xs text-slate-500 (12px)
Antipadrões
❌ Não use font-bold em tudo
❌ Não misture muitos tamanhos de fonte em um único card
❌ Não use CAIXA ALTA para textos longos
❌ Não centralize parágrafos do corpo
❌ Não use preto puro (#000) - use slate-900
Bons Padrões
✅ Títulos: semibold ou medium, nunca regular ✅ Corpo: peso regular, line-height adequado (1.5-1.6) ✅ Mantenha a hierarquia: no máximo 3 tamanhos por componente ✅ Alinhe a maioria dos textos à esquerda (exceto títulos em layouts centralizados) </typography_system>
<spacing_system>
Espaçamento e Layout
Escala de Espaçamento
Use a escala padrão do Tailwind consistentemente:
4 (1rem/16px) - Pequenos espaços, elementos inline
6 (1.5rem/24px) - Espaços médios, entre componentes
8 (2rem/32px) - Grandes espaços, entre seções
12 (3rem/48px) - Espaços extra grandes, seções da página
Layout da Página
// Container padrão de página
<div className="p-4 md:p-6 lg:p-8">
{/* Título da página */}
<h1 className="text-2xl font-semibold mb-6">Dashboard</h1>
{/* Seções de conteúdo com espaçamento consistente */}
<section className="mb-8">
{/* Conteúdo da seção */}
</section>
</div>
Espaçamento Interno de Cards
<Card>
<CardHeader className="pb-4"> {/* Reduza o padding padrão */}
<CardTitle>Título</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* Conteúdo com espaços verticais */}
</CardContent>
</Card>
Antipadrões
❌ Padding inconsistente (p-3 aqui, p-5 ali) ❌ Pouco espaço em branco (sensação apertada) ❌ Muito espaço em branco (sensação desconectada) ❌ Tamanhos de gap diferentes para elementos do mesmo nível </spacing_system>
<animation_system>
Movimento e Animação
Filosofia
Animação deve:
- Parecer natural, não chamativa
- Fornecer feedback, não distração
- Ser rápida (150-300ms), não lenta
- Ser sutil, não dramática
Transições Padrão
// Estados de hover - use transition-colors ou transition-all
<div className="transition-colors hover:bg-slate-50">
// Hover em card - elevação sutil
<Card className="transition-shadow hover:shadow-md">
// Hover em botão - já incluso no shadcn, não sobrescreva
<Button>Já animado</Button>
Padrões com Framer Motion
// Transições de página
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
// Stagger em listas
<motion.div
variants={{
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}}
initial="hidden"
animate="show"
>
{items.map(item => (
<motion.div
key={item.id}
variants={{
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}}
>
{item.content}
</motion.div>
))}
</motion.div>
// Micro-interação - toque em botão
<motion.button whileTap={{ scale: 0.98 }}>
Clique aqui
</motion.button>
Tempo de Animação
- Efeitos de hover: 150ms
- Pequenas transições: 200ms
- Transições de página: 300ms
- Animações complexas: máximo de 400-500ms
Antipadrões
❌ Efeitos de bounce (parecem baratos) ❌ Animações lentas (>500ms parecem lentas) ❌ Animação em todos os elementos (opressivo) ❌ Loaders giratórios em todos os lugares (use skeleton) ❌ Animações de entrada dramáticas </animation_system>
<component_patterns>
Padrões de Design de Componentes
Cards
// Card limpo - sem decoração excessiva
<Card className="bg-white border shadow-sm">
<CardContent className="p-4">
{/* Conteúdo */}
</CardContent>
</Card>
// NÃO FAÇA: rounded-3xl, sombras pesadas, bordas gradientes
Botões
// Ação primária
<Button>Salvar</Button>
// Ação secundária
<Button variant="outline">Cancelar</Button>
// Ação destrutiva
<Button variant="destructive">Excluir</Button>
// Botão de ícone
<Button variant="ghost" size="icon">
<Settings className="h-4 w-4" />
</Button>
// NÃO FAÇA: botões gradientes, efeitos 3D, ícones em botões primários (geralmente)
Formulários
// Layout de formulário limpo
<div className="space-y-4">
<div className="space-y-2">
<Label>Nome</Label>
<Input placeholder="Digite o nome" />
</div>
<div className="space-y-2">
<Label>Email</Label>
<Input type="email" placeholder="[email protected]" />
</div>
</div>
// NÃO FAÇA: labels inline, labels flutuantes (a menos que solicitado), ícones dentro de inputs
Tabelas
// Tabela limpa
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead>Nome</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Ações</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-slate-50">
<TableCell>João Silva</TableCell>
<TableCell><Badge>Ativo</Badge></TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">Editar</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
// NÃO FAÇA: zircão (obsoleto), bordas pesadas, conteúdo centralizado
</component_patterns>
<anti_patterns_detail>
Bandeiras Vermelhas de Design Gerado por IA
O Visual "Lovable" (Evite)
- Roxo/violeta como cor primária
- Fundos gradientes em cards brancos
- Rounded-3xl em tudo
- Emoji em cabeçalhos
- "Bem-vindo de volta, Usuário! 👋"
- Ilustrações genéricas estilo banco de imagens
O Visual "Bootstrap" (Evite)
- Sombras profundas
- Botões redondos em pílula
- Links azuis em tudo
- Decks de cards com alturas iguais
- Cabeçalhos estilo Jumbotron
O Visual "Material" (Evite, a menos que solicitado)
- Botões de ação flutuante
- Cards elevados em todos os lugares
- Efeitos de ondulação em tudo
- Menu hambúrguer no desktop
O Que Faz Parecer "Feito por Humanos"
- Moderação - Nem toda característica é destacada
- Hierarquia - Primário, secundário, terciário claros
- Espaço em Branco - Espaço para respirar
- Consistência - Mesmos padrões repetidos
- Detalhes Sutis - Pequenos toques que não gritam
- Conteúdo Real - Nenhum texto placeholder visível </anti_patterns_detail>
<review_checklist>
Checklist de Revisão de Design
Verificação de Cores
- Apenas UMA cor de destaque usada
- Sem gradientes em fundos brancos
- Sem texto preto puro
- Contraste suficiente para acessibilidade
Verificação de Tipografia
- Máximo de 3 tamanhos de fonte por componente
- Hierarquia adequada (títulos semibold, corpo regular)
- Sem parágrafos em CAIXA ALTA
- Altura da linha legível (1.5+)
Verificação de Espaçamento
- Padding consistente em toda a interface
- Espaço em branco suficiente entre seções
- Conteúdo não parece apertado
- Espaçamento móvel proporcional
Verificação de Animação
- Transições são sutis (150-300ms)
- Sem efeitos de bounce/spring
- Carregamento usa skeleton, não spinner
- Estados de hover fornecem feedback
Verificação de Componentes
- Cards não têm decoração excessiva
- Botões seguem hierarquia (primário/secundário)
- Formulários estão limpos e bem dispostos
- Tabelas são legíveis e interativas
Verificação Final
- Um usuário saberia que isso foi feito por IA? (Deve ser NÃO)
- Parece um produto real? (Deve ser SIM)
- É consistente com aplicativos SaaS modernos? (Deve ser SIM) </review_checklist>