Sites SaaS premium

Premium SaaS Web

Esta skill codifica o que faz os templates SaaS/AI/agência mais vendidos parecerem caros. Foi destilada ao inspecionar seis sites de referência no nível CSS (OptimAI, Aigocy, Adon, Davies, Pastily, uma demo de gerador de imagem AI) e medir os valores reais que eles usam. As receitas são as técnicas reais, não suposições.

Estrutura de arquivos. Carregue apenas o que a tarefa precisa:

• directions/<nome>/style.md: um arquivo por direção visual (tokens, fontes, peças marcantes, técnicas que só aquela direção usa). Leia apenas o que você escolher.
• shared/*.md: técnicas que toda direção usa, divididas por tópico. Leia as correspondentes às seções que está construindo (mapeamento na etapa 3).

A percepção central: premium = luz controlada + contenção + movimento

Páginas baratas e páginas premium geralmente usam os mesmos componentes (hero, logos, funcionalidades, preços, FAQ, CTA). A diferença está em quatro camadas de acabamento:

1. Luz — as superfícies parecem iluminadas, não preenchidas. Brilhos são esculpidos a partir de formas desfocadas; cartões têm um brilho no canto superior esquerdo; botões têm um destaque interno e uma borda inferior interna; as bordas são fios de cabelo com 6–20% de opacidade. A luz real diminui, então nada é um bloco plano de cor.
2. Contenção — uma cor de destaque, usada em ≤5% da página. A hierarquia de texto vem da opacidade de uma cor (100 / 80 / 60 / 50%), não de muitos cinzas. No máximo duas fontes (+ uma mono opcional para rótulos). Zero decoração que não tenha significado.
3. Tipografia com tensão — o tipo de exibição é grande e com espaçamento apertado (letter-spacing −2% a −7%), line-height ≈ 1.0–1.2. Metade de um título geralmente é escurecida (opacity .5 ou um gradiente mais claro) para que o olho leia primeiro a metade forte.
4. Movimento com peso — scroll suave (Lenis), títulos que surgem palavra por palavra, texto que se preenche conforme você rola, contadores que rolam, marquees que nunca param, cartões que empilham. Tudo desacelera (nada linear), nada quica, e tudo respeita prefers-reduced-motion.

Se uma saída tiver apenas os componentes, mas não essas quatro camadas, ela parecerá um tema Bootstrap gratuito, não importa quantas seções tenha.

Fluxo de trabalho

1. Leia o briefing, escolha UMA direção

Escolha uma direção desta tabela e leia seu directions/<pasta>/style.md (conjunto completo de tokens + suas técnicas marcantes). Não leia as outras direções.

Direção (pasta)	Sensação	Melhor para	Fonte
Ember Dark (ember-dark)	Azul-marinho/preto profundo, brilho laranja/vermelho ou azul esculpido, CTA com borda arco-íris, rótulos de botão mono	Ferramentas AI, ferramentas dev, aplicativos SaaS	OptimAI
Tactile Light (tactile-light)	Zinco/branco sujo, botões esqueuomórficos brilhantes, cartões com brilho, um destaque quente (vermelho), hero emoldurado com render 3D	Agências AI, B2B SaaS, consultorias	Aigocy
Editorial Mono (editorial-mono)	#111 puro sobre #F0F0F0, grotesk 140px com tracking −7%, grade de fios de cabelo, texto de preenchimento por scroll, sem sombras	Agências, estúdios, serviços premium	Adon
Noir Spotlight (noir-spotlight)	Preto, um destaque neon, palavra gigante interagindo com uma foto, fundo shader/WebGL, cartões de projeto empilhados	Marcas pessoais, portfólios, tech criativa	Davies
Warm Playful (warm-playful)	Papel branco sujo quente, tinta quase preta, verde musgo→dourado, cartões brancos de 28px, notas manuscritas, dispositivo sangrando na borda, preços com foto de fundo	Apps de desktop/menu-bar, utilitários, ferramentas indie e de consumo, software de compra única	Pastily

Se o usuário não especificou e for SaaS/AI, o padrão é Ember Dark. Mude para Warm Playful quando o produto for um utilitário nativo/desktop/mobile, uma ferramenta indie ou de fundador solo, ou o briefing disser amigável, acessível, aconchegante, "não corporativo" (mesmo que nunca diga "SaaS"). Ember Dark faria um aplicativo de clipboard de $9 parecer infraestrutura empresarial. Misturar direções é como as páginas ficam confusas. Pegar emprestada uma técnica de outra direção é aceitável, desde que a paleta e o tipo permaneçam coerentes.

Diga ao usuário em uma linha qual direção você escolheu e por quê, para que ele possa redirecionar cedo. Mantenha o destaque da direção, a menos que a marca tenha sua própria cor (o usuário nomeia uma, ou o produto já usa uma); palavras de humor como "aconchegante" ou "entardecer" não são uma cor de marca. Para uma cor de marca real, veja "Trocando o destaque" em directions/README.md.

2. Planeje a página como um ritmo, não uma lista

Páginas premium alternam densidade e tom. Um home SaaS típico que funciona:

1. Hero: badge de sobrancelha (uma pílula como "✦ Agência AI" ou um fato real como "v1.4 lançada"; um empilhamento de avatar + avaliação apenas quando o usuário forneceu uma avaliação real), título de 2 linhas com uma metade escurecida, 1–2 linhas de subcópia com opacidade 60%, CTA primário + secundário, então o produto em si (mockup emoldurado por navegador ou uma caixa de prompt interativa) sangrando na próxima seção via um gradiente desbotado.
2. Faixa de logos: logos em escala de cinza, marquee infinito, bordas mascaradas.
3. Grade de funcionalidades Bento: 5–7 células de tamanho desigual, cada uma com uma ilustração de mini UI construída em HTML/CSS (nós de fluxo de trabalho, bolhas de chat, alternadores, gráficos, chips de cor), não ícones de estoque.
4. Declaração de preenchimento por scroll: uma frase grande que preenche de 30% → 100% conforme você rola. O preenchimento ocorre estritamente linha por linha (uma timeline por bloco, linhas consecutivas), nunca várias linhas de uma vez. Veja shared/typography.md.
5. Números: 3–4 estatísticas com contadores rolantes; um número grande desbotado como decoração.
6. Como funciona / abas ou cartões empilhados.
7. Depoimentos: apenas citações fornecidas pelo usuário, avatar + nome + cargo, talvez um marquee vertical de cartões. Se não houver nenhum, deixe a seção de fora (ou troque por uma faixa de confiança/privacidade ou uma breve nota do criador). Avaliações, classificações e contagens de usuários inventadas são prova social falsa: elas enganam os compradores e o proprietário pode enviá-las por acidente.
8. Preços: 3 níveis, o do meio elevado com a borda/brilho de destaque, alternador mensal/anual.
9. FAQ accordion.
10. CTA final com o brilho mais forte da página, então um rodapé calmo com uma grande marca.

Alterne fundos de seção escuro/claro (ou bg-1/bg-2) para criar ritmo. O padding da seção é generoso: 120–176px vertical no desktop.

3. Construa com as receitas

As receitas são CSS/HTML/JS prontos para copiar. O style.md da sua direção já contém suas técnicas marcantes (ex.: borda arco-íris para Ember, botões táteis e cartões com brilho para Tactile). Para todo o resto, leia o arquivo compartilhado que corresponde ao que você está construindo:

Construindo…	Leia
Luz do hero, brilhos, fundos de pontos/grid/ruído, grade de fios de cabelo e guias de coluna	shared/light.md
Títulos (tracking apertado, metade escurecida, gradiente metálico), declaração de preenchimento por scroll (linha por linha com GSAP, ou palavra por palavra com palavras-chave coloridas)	shared/typography.md
Mockup do produto no hero (moldura de navegador ou dispositivo de desktop-app com cromo do SO), galeria de capturas de tela, grid bento com mini-UIs	shared/product-proof.md
Nav vidro, pill nav consciente da seção, badge de sobrancelha e empilhamento de avatar, anotações manuscritas, cartões brancos suaves, spot do cartão, marquees, preços (3 níveis, preço único com foto de fundo ou cartão simples de preço único), FAQ, marca do rodapé	shared/components.md
Qualquer marca nomeada com um ícone (integrações, faixa de logos, órbita, "funciona com")	shared/logos.md
Boilerplate GSAP + Lenis, tabela de temporização/easing, padrão de movimento reduzido gsap.matchMedia(), revelações, contadores, cartões empilhados, pilha de histórias com mudança de tom só CSS, parede de chip UI fixada, scroll fixado, hover, pegadinhas, movimento nativo impulsionado por scroll CSS	shared/motion.md
Fundo Shader/WebGL, campo de partículas, bloom (Three.js, com fallback CSS e porta móvel)	shared/webgl.md

Uma página de destino completa geralmente precisa de todos eles; uma única seção ou uma pequena edição precisa apenas de sua linha. Todos os plugins GSAP, incluindo SplitText, são gratuitos desde a versão 3.13, carregue-os do jsDelivr.

4. Padrões técnicos

• HTML de arquivo único com Tailwind CDN (ou a pilha existente do projeto — siga-a se houver uma). Coloque os tokens de design em propriedades personalizadas CSS em :root para que uma troca de paleta seja uma edição.
• Fontes do Google Fonts. Combinações comprovadas das referências: Sora + Inter Tight + IBM Plex Mono (Ember), Urbanist (Tactile), uma grotesk como "Inter Tight"/"Schibsted Grotesk"/"Familjen Grotesk" + DM Sans (Editorial), Figtree/"Outfit" (Noir).
• Ícones: SVG inline (estilo Lucide com traço de 1.5px). Nunca emoji como ícones.
• Imagens: se a geração de imagens estiver disponível, gere renders 3D / objetos abstratos alinhados à marca; caso contrário, construa visuais com CSS/SVG (brilhos, mini UIs, globos de pontos). Use fotos https://images.unsplash.com/... apenas para pessoas/retratos. Uma página sem âncora visual no hero parece inacabada.
• Logos reais de marca, nunca placeholders de letras. Sempre que a página nomear uma empresa, produto ou SaaS existente (chips de integração, arcos/faixas de logos, faixas "funciona com", depoimentos, tabelas de comparação) e você mostrar um ícone ao lado, use o logo real da marca. Um quadrado colorido com a inicial ("F" para Figma, "S" para Slack) parece um template barato e quebra a confiança. Detalhes e fontes em shared/logos.md. Se nenhum logo real puder ser obtido, mostre o nome como texto simples sem ícone algum; um ícone falso é pior do que nenhum.
• Mobile: tudo colapsa para uma coluna em <768px; o tipo de exibição escala com clamp(); os brilhos encolhem (grandes desfoques são caros em telefones); desative efeitos de cursor no toque.

5. Auto-revisão antes de entregar

Abra a página em um navegador e faça capturas de tela em 1440px e 390px, se possível. Verifique contra esta lista. Estas são as coisas que separam "gerado por IA" de "mais vendido":

• Apenas um matiz de destaque (mais neutros). Gradientes permanecem dentro dessa família de matiz, exceto uma borda arco-íris intencional.
• O título de exibição tem espaçamento entre letras negativo e uma metade escurecida ou gradiente.
• O texto do corpo/secundário usa etapas de opacidade de uma cor, e o contraste ainda passa (≥4.5:1 para corpo).
• O hero mostra o produto (mockup, caixa de prompt, UI), não apenas texto sobre um gradiente.
• Pelo menos uma fonte de luz esculpida por seção escura; nenhum retângulo plano de cor pura.
• Bordas são fios de cabelo (1px, 6–20% de alpha), raios são consistentes (escolha uma escala: 8/12/20/28/999).
• Botões têm estados de hover que mudam a luz (brilho aperta, brilho se desloca, seta se move 2–4px), não apenas a cor.
• Movimento: revelação de texto do hero, esmaecimentos acionados por scroll com escalonamento, pelo menos um efeito de arrasto, marquee. Todos desabilitados em prefers-reduced-motion (via gsap.matchMedia()), durações retiradas da tabela de temporização em shared/motion.md, nada anima width/height/top/left.
• Se WebGL for usado: brilho CSS por baixo como fallback, DPR limitado, renderiza apenas enquanto visível, pulado em dispositivos móveis/com poucos núcleos, texto permanece em HTML.
• Toda marca real nomeada na página tem seu logo real (ou nenhum ícone). Sem quadrados de letra inicial.
• Se Warm Playful: o dispositivo hero parece um SO real (barra de menu, dock, menu de aplicativo) construído em HTML, sangra em uma borda e tem no máximo duas notas Caveat; os cartões de história grudam com um degrau top de 16px e uma mudança de tom por cartão; as cores de palavras-chave aparecem apenas em palavras únicas e passam 4.5:1; o destaque ainda é o verde (a menos que o usuário tenha fornecido uma cor de marca) e o dourado aparece apenas no final do gradiente do CTA; o preço único é um único cartão branco (com foto de fundo se você tiver uma foto, simples caso contrário), com qualquer teste gratuito como uma linha dentro dele.
• Sem lorem ipsum. O texto é específico para o produto: números concretos, funcionalidades com som real.
• Nenhuma prova social inventada: nenhuma classificação, contagem de usuários, depoimentos ou logos de imprensa inventados. Os detalhes do produto que você teve que presumir estão listados para o usuário confirmar.
• Nada transborda horizontalmente em 390px.

O que evitar (os sinais de "template barato")

• Botões que se movem ao passar o mouse. Regra rígida, sem exceções. Sem botões magnéticos/que seguem o cursor, sem translate/scale/rotate em um botão ou seu rótulo/ícone no :hover, sem setas deslizando para fora, sem elevação no hover. O layout fica parado sob o cursor, para que o alvo do clique nunca se esquive. Mostre o hover apenas com alterações de cor, brilho, brilho, borda ou sombra. (Cartões podem ainda levantar; botões e links estilizados como botões não podem.)
• Gradiente roxo para azul em tudo; várias cores de destaque concorrentes.
• Sombras projetadas como 0 4px 6px rgba(0,0,0,.3) em fundos escuros (sombras não são lidas no escuro; use brilhos e bordas).
• Tudo centralizado com grades de cartão idênticas de 3 ícones + título + texto.
• Vidro sem nada atrás do vidro para desfocar.
• Ícones de marca falsos: um quadrado arredondado colorido com uma letra representando Figma, Slack, GitHub, etc.
• Easing elástico/com salto, fade-ins que demoram >1s, animações em todos os elementos ao mesmo tempo.
• Texto gradiente no corpo da cópia; mais de uma frase de texto gradiente por viewport.
• Imagens de "cérebro AI" de estoque. Mostre o produto ou um render abstrato.
• Texto do corpo com baixo contraste no escuro: mantenha a cópia do corpo pelo menos ~70% branca para que permaneça legível contra os brilhos.