leonxlnx/taste-skill

Protocolo: Arquiteto de UI Minimalismo Utilitário Premium

1. Visão Geral do Protocolo

Nome: Minimalismo Utilitário Premium & UI Editorial Descrição: Uma diretiva avançada de engenharia frontend para gerar interfaces web altamente refinadas, ultra minimalistas, no estilo 'documento', análogas a plataformas de workspace de alto nível. Este protocolo impõe estritamente uma paleta monocromática quente de alto contraste, hierarquias tipográficas personalizadas, macroespaços brancos estruturais meticulosos, layouts bento-grid e uma arquitetura de componentes ultra plana com acentos pastéis suaves e deliberados. Ele rejeita ativamente as tendências genéricas de design SaaS.

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

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

• 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 pesadas padrão do Tailwind (ex.: shadow-md, shadow-lg, shadow-xl). As sombras devem ser praticamente inexistentes ou fortemente personalizadas para serem ultra difusas e de baixa opacidade (< 0,05).
• NÃO use fundos coloridos primários para grandes elementos ou seções (ex.: sem seções hero azuis, verdes ou vermelhas brilhantes).
• NÃO use gradientes, cores neon ou glassmorphism 3D (além de desfocados sutis na barra de navegação).
• NÃO use rounded-full (formas de pílula) para grandes contêineres, cartões ou botões primários.
• NÃO use emojis em nenhum lugar no código, marcação, conteúdo de texto, títulos ou texto alternativo. Substitua por ícones apropriados ou primitivas SVG limpas.
• NÃO use nomes de espaço reservado genéricos como "João Silva", "Empresa XYZ" ou "Lorem Ipsum". Use conteúdo realista e contextual.
• NÃO use clichês de copywriting de IA: "Eleve", "Integrado", "Libere", "Nova Geração", "Revolucionário", "Aprofunde". Escreva linguagem simples e específica.

3. Arquitetura Tipográfica

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

• Sans-serif Primária (Corpo, UI, Botões): Use fontes limpas, geométricas ou nativas do sistema com personalidade. Alvo: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Serifada Editorial (Títulos Hero e Citações): Alvo: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Aplique espaçamento apertado (letter-spacing: -0.02em a -0.04em) e altura de linha apertada (1.1).
• Monoespaçada (Código, Teclas, Metadados): Alvo: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Cores do Texto: O texto do corpo nunca deve ser preto absoluto (#000000). Use off-black/carvão (#111111 ou #2F3437) com uma altura de linha generosa de 1.6 para legibilidade. O texto secundário deve ser cinza suave (#787774).

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

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

• Tela / Fundo: Branco Puro #FFFFFF ou Off-white Tom de Osso Quente #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 Acento: 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 Bento Box:
  • Utilize layouts de CSS Grid assimétricos.
  • Os cartões devem ter exatamente border: 1px solid #EAEAEA.
  • O raio da borda deve ser nítido: no máximo 8px ou 12px.
  • O preenchimento interno deve ser generoso (ex.: 24px a 40px).
• Chamada para Ação Primária (Botões):
  • Fundo sólido #111111, texto #FFFFFF.
  • Leve raio de borda (4px a 6px). Sem box-shadow.
  • O estado de hover deve ser uma mudança sutil de cor para #333333 ou uma micro escala transform: scale(0.98).
• Tags e Badges de Status:
  • Forma de pílula (border-radius: 9999px), tipografia muito pequena (text-xs), maiúsculas com espaçamento amplo (letter-spacing: 0.05em).
  • O fundo deve usar os Pastéis Suaves definidos.
• Acordeões (FAQ):
  • Remova todas as caixas de contêiner. Separe os itens apenas com um border-bottom: 1px solid #EAEAEA.
  • Use um ícone nítido de + e - para o estado de alternância.
• Micro UIs de Teclas:
  • Renderize atalhos como teclas físicas usando tags <kbd>: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, usando a fonte Monoespaçada.
• Chrome de Janela Falso-OS:
  • Ao simular software, envolva-o em um contêiner minimalista com uma barra superior branca contendo três pequenos círculos cinza claro (replicando os controles de janela do macOS).

6. Diretrizes de Iconografia e Imagens

• Ícones do Sistema: Use "Phosphor Icons (pesos Bold ou Fill)" ou "Radix UI Icons" para uma estética técnica, com traço ligeiramente mais grosso. Padronize a largura do traço em todos os ícones.
• Ilustrações: Esboços monocromáticos, de linha contínua e áspera, sobre fundo branco, apresentando uma única forma geométrica deslocada preenchida com uma cor pastel suave.
• Fotografia: Use imagens de alta qualidade e dessaturadas com um tom quente. Aplique sobreposições sutis (opacity: 0.04 grão quente) para mesclar fotos na paleta monocromática. Nunca use fotos de banco de imagens supersaturadas. Use placeholders confiáveis como https://picsum.photos/seed/{context}/1200/800 quando ativos reais não estiverem disponíveis.
• Fundos de Hero e Seções: As seções não devem parecer vazias e planas. Use imagens de fundo sutis em largura total com opacidade muito baixa, pontos de luz radial suaves (radial-gradient com tons quentes em opacity: 0.03) ou padrões geométricos de linha mínimos para adicionar profundidade sem quebrar a estética limpa.

7. Movimento Sutil e Microanimações

O movimento deve parecer invisível — presente, mas nunca distrativo. O objetivo é a sofisticação silenciosa, não o espetáculo.

• Entrada por Scroll: Os elementos aparecem suavemente à medida que entram na viewport. Use translateY(12px) + opacity: 0 resolvendo em 600ms com cubic-bezier(0.16, 1, 0.3, 1). Use IntersectionObserver, nunca window.addEventListener('scroll').
• Estados de Hover: Os cartões levantam com uma mudança de sombra ultra sutil (box-shadow transitando de 0 0 0 para 0 2px 8px rgba(0,0,0,0.04) em 200ms). Os botões respondem com scale(0.98) em :active.
• Revelações Escalonadas: Listas e itens de grade entram com um atraso em cascata (animation-delay: calc(var(--index) * 80ms)). Nunca monte tudo de uma vez.
• Movimento Ambiente de Fundo: Opcional. Uma única bolha de gradiente radial de movimento muito lento (animation-duration: 20s+, opacity: 0.02-0.04) flutuando atrás das seções hero. Deve ser aplicada a uma camada position: fixed; pointer-events: none. Nunca em contêineres de rolagem.
• Performance: Anime exclusivamente via transform e opacity. Sem propriedades que acionam layout (top, left, width, height). Use will-change: transform com moderação e apenas em elementos ativamente animados.

8. Protocolo de Execução

Ao ser encarregada de escrever código frontend (HTML, React, Tailwind, Vue) ou projetar um layout:

1. Estabeleça o macroespaço branco primeiro. Use preenchimento vertical massivo entre as seções (ex.: py-24 ou py-32 no Tailwind).
2. Limite a largura do conteúdo tipográfico principal a max-w-4xl ou max-w-5xl.
3. Aplique imediatamente a hierarquia tipográfica personalizada e as variáveis de cor monocromáticas.
4. Garanta que cada cartão, divisor e borda adira estritamente à regra 1px solid #EAEAEA.
5. Adicione animações de entrada por scroll a todos os blocos de conteúdo principais.
6. Garanta que as seções tenham profundidade visual por meio de imagens, gradientes ambientes ou texturas sutis — sem fundos planos vazios.
7. Forneça código que reflita nativamente esta estética editorial de alto nível, limpa e sem desordem, sem exigir ajustes manuais.