Suíte de Design de UI Premium e Estética
Um framework de design dedicado a criar interfaces web personalizadas, distintas e acessíveis, eliminando clichês genéricos gerados por IA.
Ao estilizar, projetar ou auditar componentes de UI, localize o tópico correspondente em referências/<categoria>/<tópico>/SKILL.md.
Catálogo e Navegação Rápida
1. Anti-AI Slop e Artesanato Visual (referências/anti-slop-and-craft/)
| Tópico | Subcaminho | Descrição |
|---|
| no-ai-design-slop | anti-slop-and-craft/no-ai-design-slop | Porta de qualidade passiva que impede padrões genéricos de IA: gradientes roxos, cartões flutuantes centralizados e layouts padronizados. |
| audit-ai-design-slop | anti-slop-and-craft/audit-ai-design-slop | Auditoria diagnóstica que identifica defeitos visuais de IA, elementos inconsistentes e planos de limpeza baseados em remoção. |
| build-awwwards-quality-sites | anti-slop-and-craft/build-awwwards-quality-sites | Artesanato de nível Awwwards: direção de arte forte, tipografia editorial, animações GSAP e imagens autênticas. |
| ui-ux-pro-max | anti-slop-and-craft/ui-ux-pro-max | Manual de design frontend profissional: escala tipográfica, espaçamento intencional e microinterações. |
| design-first-ui-prompting | anti-slop-and-craft/design-first-ui-prompting | Criação de prompts de design estético e interação baseados em especificações antes de escrever código frontend. |
2. Estilização, Tokens e Marcas (referências/styling-and-tokens/)
| Tópico | Subcaminho | Descrição |
|---|
| brand-guidelines | styling-and-tokens/brand-guidelines | Aplicação de regras tipográficas, voz e tom, uso de logotipo, conformidade de cores e padrões de espaçamento. |
| theme-factory | styling-and-tokens/theme-factory | Gerador de temas visuais curados, tokens de design, combinações de fontes e variáveis CSS. |
| tailwindcss | styling-and-tokens/tailwindcss | Receitas de componentes Tailwind CSS, grades de layout, utilitários tipográficos e padrões responsivos. |
| unsplash-asset-images | styling-and-tokens/unsplash-asset-images | Obtenção de imagens fotográficas autênticas de alta qualidade, retratos e planos de fundo. |
3. Superfícies e Arquétipos de Página (referências/surfaces-and-pages/)
| Tópico | Subcaminho | Descrição |
|---|
| glass-dark-ui | surfaces-and-pages/glass-dark-ui | Painéis de vidro fosco em modo escuro, bordas com gradiente pseudo-elemento e contraste legível. |
| skeuomorphic-ui | surfaces-and-pages/skeuomorphic-ui | Estilo físico tátil: gradientes em camadas, sombras internas/externas empilhadas e detalhes em relevo. |
| framed-grid-layout | surfaces-and-pages/framed-grid-layout | Limites de grade de precisão com linhas finas, suportes de canto em L e seções editoriais estruturadas. |
| landing-page | surfaces-and-pages/landing-page | Estrutura de landing page SaaS de alta conversão com oferta única, arco narrativo e copywriting. |
| pricing-page | surfaces-and-pages/pricing-page | Tabelas de preços de alta conversão, matrizes de comparação de planos, listas de verificação de recursos e perguntas frequentes. |