SuperDesign

• Você precisa de um agente de IA para gerar código de UI (HTML/CSS/Tailwind) com aparência sofisticada e moderna, sem parecer um template.
• Você está construindo landing pages, dashboards ou interfaces ricas em componentes e quer um processo de design estruturado seguido automaticamente.
• Você quer temas consistentes entre os modos claro/escuro com técnicas modernas de cores como oklch().
• Você precisa de layouts acessíveis, responsivos e com abordagem mobile-first, com HTML semântico adequado já incluído.

• Você está trabalhando em um ambiente mobile nativo (iOS/Android) — estas diretrizes são focadas em web.
• Seu projeto usa um sistema de design rígido (por exemplo, adesão estrita ao Material Design) que conflita com os padrões de tema opinados fornecidos aqui.

Toda interface é abordada por meio de Design de Layout, Design de Tema, Design de Animação e Implementação — nessa ordem. Isso evita pular diretamente para o código antes que a estrutura e a estética sejam consideradas, resultando em saídas mais coerentes.

A skill evita explicitamente paletas genéricas desatualizadas (como o azul do Bootstrap) e promove o uso de oklch() para definições de cores modernas e perceptualmente uniformes. Padrões de temas pré-construídos para Modo Escuro (estilo Vercel/Linear), Neo-Brutalismo e Glassmorfismo estão incluídos com variáveis CSS prontas para uso.

Uma lista cuidadosamente selecionada de Google Fonts nas categorias sans-serif, monoespaçada, serifada e display é fornecida, juntamente com integração via CDN para ícones Lucide e componentes Flowbite — eliminando as dúvidas nas escolhas de tipografia.

Um sistema de notação conciso para planejar micro-interações (ex.: button: 150ms [S1→0.95→1] press) mantém as animações intencionais. Intervalos de temporização recomendados para animações de entrada, estados de hover, pressão de botão e transições de página são definidos.

As diretrizes aplicam HTML semântico, hierarquia adequada de títulos, labels ARIA, uma proporção mínima de contraste de cores de 4,5:1 e suporte à navegação por teclado — garantindo que os resultados atendam aos padrões básicos de acessibilidade sem necessidade de instruções adicionais.

Melhores práticas opinativas para Cards, Botões, Formulários e Navegação já estão incorporadas — abrangendo profundidade de sombra, dimensionamento de áreas de toque, estados de foco, estados de carregamento/desabilitado e comportamento de cabeçalho fixo.

Peça ao seu agente para criar uma landing page de SaaS e o SuperDesign garante que ela siga um layout estruturado (cabeçalho → hero → funcionalidades → rodapé), escolha uma combinação de fontes modernas, aplique um tema de cores coerente e gere CSS responsivo com abordagem mobile-first — tudo sem precisar de direcionamento manual de design.

Ao prototipar um painel de análises ou administrativo, a skill orienta o agente a criar primeiro o wireframe do layout, aplicar espaçamento consistente e sombras suaves nos cards, e incluir estados de hover/animação — produzindo um protótipo com aparência de produção.

Use esta skill para gerar um conjunto coeso de botões, campos de formulário e componentes de navegação que compartilham os mesmos design tokens (variáveis CSS para cor, raio e sombra) e passam nas verificações de acessibilidade.

Ao construir uma interface que deve suportar os modos claro e escuro, a abordagem de variáveis CSS do SuperDesign e as diretrizes de cores oklch() ajudam o agente a produzir um sistema com suporte a temas desde o início, em vez de adaptar o modo escuro posteriormente.