Protocolo: Arquitetura de UI Minimalista Utilitária Premium

Quando Usar

• Use quando o usuário desejar uma UI minimalista refinada, inspirada em ferramentas como Notion, Linear ou produtos de espaço de trabalho editorial.
• Use ao projetar interfaces monocromáticas quentes com bordas nítidas, espaços em branco generosos, toques de pastel suaves e animações discretas.
• Use quando a tarefa deve evitar gradientes, sombras pesadas, cores saturadas, componentes com muitos botões arredondados e visuais genéricos de SaaS.

Exemplo

Solicitação do usuário:

Revise esta interface com @minimalist-ui, identifique os problemas de design de maior impacto e proponha uma melhoria pronta para implementação.

Limitações

• O minimalismo pode ocultar a hierarquia quando o conteúdo é denso; valide a escaneabilidade, o contraste e a clareza da navegação com conteúdo real.
• Esta habilidade assume que o produto pode suportar paletas restritas e layouts baseados em tipografia; não substitua um sistema de marca estabelecido sem motivo.
• Animações sutis e superfícies planas ainda precisam de verificação responsiva, de teclado e de leitor de tela no projeto alvo.

1. Visão Geral do Protocolo

Nome: Minimalismo Utilitário Premium e UI Editorial Descrição: Uma diretiva avançada de engenharia frontend para gerar interfaces web "estilo documento" altamente refinadas, ultra-minimalistas, análogas a plataformas de espaço de trabalho de ponta. Este protocolo impõe estritamente uma paleta monocromática quente de alto contraste, hierarquias tipográficas personalizadas, macro-espaçamento estrutural meticuloso, layouts de grade bento e uma arquitetura de componentes ultra-plana com toques deliberados de pastel suave. Ele rejeita ativamente as tendências genéricas de design de SaaS.

2. Restrições Negativas Absolutas (Elementos Banidos)

A IA deve evitar estritamente os seguintes padrões de desenvolvimento web genéricos:

• NÃO use as fontes "Inter", "Roboto" ou "Open Sans".
• NÃO use bibliotecas de ícones genéricas de linha fina como "Lucide", "Feather" ou "Heroicons" padrão.
• NÃO use sombras de queda pesadas padrão do Tailwind (por exemplo, shadow-md, shadow-lg, shadow-xl). As sombras devem ser praticamente inexistentes ou altamente personalizadas para serem ultra-difusas e de baixa opacidade (< 0,05).
• NÃO use fundos de cores primárias para elementos ou seções grandes (por exemplo, sem seções de herói em azul brilhante, verde ou vermelho).
• NÃO use gradientes, cores neon ou glassmorfismo 3D (além de desfoques sutis na barra de navegação).
• NÃO use rounded-full (formas de pílula) para contêineres grandes, cartões ou botões primários.
• NÃO use emojis em nenhum lugar do código, marcação, conteúdo de texto, cabeçalhos ou texto alternativo. Substitua por ícones adequados ou primitivas SVG limpas.
• NÃO use nomes genéricos de espaço reservado como "John Doe", "Acme Corp" ou "Lorem Ipsum". Use conteúdo realista e contextual.
• NÃO use clichês de redação de IA: "Elevar", "Perfeito", "Desencadear", "Próxima Geração", "Revolucionário", "Aprofundar". Escreva linguagem simples e específica.

3. Arquitetura Tipográfica

A interface deve depender de contraste tipográfico extremo e seleção de fontes premium para estabelecer uma sensação editorial.

• Sans-Serif Primária (Corpo, UI, Botões): Use fontes limpas, geométricas ou nativas do sistema com caráter. Alvo: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Serif Editorial (Cabeçalhos de Herói e Citações): Alvo: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Aplique kerning apertado (letter-spacing: -0.02em a -0.04em) e altura de linha apertada (1.1).
• Monospace (Código, Teclas, Metadados): Alvo: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Cores de Texto: O texto do corpo nunca deve ser preto absoluto (#000000). Use preto off/carvão (#111111 ou #2F3437) com um generoso line-height de 1.6 para legibilidade. O texto secundário deve ser cinza suave (#787774).

4. Paleta de Cores (Monocromático Quente + Pastéis Pontuais)

A cor é um recurso escasso, utilizado apenas para significado semântico ou toques sutis.

• Tela / Fundo: Branco Puro #FFFFFF ou Osso Quente/Off-White #F7F6F3 / #FBFBFA.
• Superfície Primária (Cartões): #FFFFFF ou #F9F9F8.
• Bordas Estruturais / Divisores: Cinza ultra-claro #EAEAEA ou rgba(0,0,0,0.06).
• Cores de Destaque: Use exclusivamente pastéis altamente dessaturados e desbotados para tags, fundos de código inline ou fundos de ícones sutis.
  • Vermelho Pálido: #FDEBEC (Texto: #9F2F2D)
  • Azul Pálido: #E1F3FE (Texto: #1F6C9F)
  • Verde Pálido: #EDF3EC (Texto: #346538)
  • Amarelo Pálido: #FBF3DB (Texto: #956400)

5. Especificações de Componentes

• Grades de Recursos em Caixa Bento:
  • Utilize layouts CSS Grid assimétricos.

…