mente-designer

name	mente-designer
description	DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou qualquer página que precise de "feel" de agência de elite.

mente-designer — como usar esta skill

Esta skill é o calibre de gosto de um designer de elite, medido em 20 sites reais. Ela não gera páginas sozinha — ela diz o quê usar e em que dose para o resultado parecer premium.

Fluxo (5 passos)

1. Leia dna.md — as 10 leis + a fórmula-mestre. É a base de toda decisão.
2. Escolha o esqueleto por setor em fichas-por-site.md (tech/IA, luxo/wellness, food, indústria, portfólio, experiência).
3. Decida os 4 eixos antes de codar: tipo de hero (frase editorial 4-6vw OU wordmark monumental 8-21vw), base de cor (quase-preta OU clara terrosa) + 1 cor de assinatura racionada, as 2 fontes, e a mídia-rainha (vídeo-loop mudo OU frame-scrub).
4. Construa com receitas-codigo.md (padrões com calibres exatos) e peça efeitos pelo nome usando catalogo-efeitos.md (22 efeitos: stacking, wipe, pin+scrub, velocity skew, ken burns…).
5. Feche no checklist do dna.md: zero firula de entrada, no máximo 1 pin por página, ~14 telas, peso sob controle.

Arquivos

Arquivo	Conteúdo
dna.md	As 10 leis + a fórmula-mestre
fichas-por-site.md	Tabela dos 20 sites medidos + leituras transversais
receitas-codigo.md	Padrões em código com calibres medidos (boot da pilha, vídeo-fundo, wordmark, marquee, sticky, cursor…)
catalogo-efeitos.md	Glossário nomeado dos 22 efeitos, cada um com snippet
data/fingerprints.json	Dados brutos das 20 medições
demos/stacking-e-wipe.html	Demo ao vivo (rode node server.mjs → http://localhost:8091/demos/stacking-e-wipe.html)

Regras de ouro (resumo)

• Pilha única: HTML/Webflow + Lenis (sempre) + GSAP/ScrollTrigger (+ SplitType).
• 2 fontes no máximo; base neutra + 1 cor viva racionada (1-3 seções).
• Vídeo-loop mudo é a mídia rainha; frame-scrub é raro e cirúrgico.
• position: sticky em tudo, 1 único pin por página.
• Zero preloader/cursor custom/carrossel/popup por padrão — a sofisticação está no scroll.