Skill de Página Glassmorphism
Produza uma página de destino em arquivo único no estilo glassmorphism, construída com classes utilitárias do Tailwind. A aparência inteira se baseia em uma regra: o desfoque só é visível quando algo colorido está atrás dele — portanto, todo painel de vidro flutua sobre um campo gradiente, nunca sobre fundo branco.
A receita do vidro
Uma receita de painel compartilhada, aplicada a cada superfície:
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
Regras de sobreposição:
- O fundo da página é um gradiente vívido (dois ou três tons). Os painéis são a única camada translúcida sobre ele.
- Um tom de destaque guia os gradientes e as ações primárias; mantenha o restante neutro.
- O texto sobre o vidro é branco com opacidade de 90-100% para títulos e 60-70% para corpo; nunca coloque cinza de baixo contraste sobre um painel de vidro brilhante.
- Adicione uma borda de 1px
border-white/20a cada painel — é isso que faz o vidro parecer uma folha física em vez de um retângulo borrado. - Arredonde cantos generosamente (
rounded-2xl/rounded-3xl); o vidro parece suave, não agressivo.
Variações de cor
Entregue as quatro variações abaixo como um conjunto selecionável; o exemplo as expõe como uma fileira de chips de tema que trocam o campo gradiente e o destaque ao vivo.
| Variação | Campo gradiente | Destaque |
|---|---|---|
| aurora | violeta → rosa → âmbar | #7C3AED |
| ocean | céu → ciano → índigo | #0EA5E9 |
| ember | rosa → laranja → amarelo | #F43F5E |
| forest | esmeralda → verde-azulado → lima | #10B981 |
Fluxo de trabalho
- Leia o DESIGN.md ativo (injetado acima). Onde ele define cor e tipo, use esses tokens para texto e ação primária; a receita do vidro e o gradiente são contribuições próprias deste estilo.
- Nomeie o produto e a promessa a partir do briefing. Apenas texto real.
- Estruture: navegação fixa em vidro, hero com um H1 + um parágrafo + CTA sobre o gradiente, uma fileira de variações de tema, uma grade 3-colunas de cards de funcionalidades em vidro, um painel de depoimento em vidro e um CTA de encerramento.
- Mantenha o nível de qualidade: um H1; CTA principal usa o destaque; texto sobre vidro mantém contraste >= 4,5:1; anéis de foco visíveis em superfície translúcida; o layout colapsa para uma coluna abaixo de 768px.
- Produza um
index.htmlautocontido. O Tailwind é carregado via Play CDN para prototipação; a saída de produção deve compilar o Tailwind.
Antipadrões
- Painéis de vidro sobre um fundo plano, quase branco (o desfoque desaparece).
- Mais de dois tons de destaque na tela ao mesmo tempo.
- Desfocar texto, ou empilhar vidro sobre vidro sobre vidro até o contraste morrer.
- Painéis foscos com cantos vivos e quadrados.