Slides de Frontend

Crie apresentações HTML ricas em animações e sem dependências, que rodam inteiramente no navegador.

Quando Usar Esta Habilidade

• Use quando o usuário pedir para criar uma apresentação, um conjunto de slides ou um pitch do zero.
• Use quando o usuário quiser converter um arquivo PPT ou PPTX existente em uma apresentação baseada na web.
• Use ao projetar conteúdo HTML animado e visualmente rico que precise caber exatamente na viewport.

Princípios Fundamentais

1. Zero Dependências — Arquivos HTML únicos com CSS/JS inline. Sem npm, sem ferramentas de build.
2. Mostre, Não Conte — Gere prévias visuais, não escolhas abstratas. As pessoas descobrem o que querem ao ver.
3. Design Distinto — Sem "lixo de IA" genérico. Cada apresentação deve parecer feita sob medida.
4. Ajuste à Viewport (NÃO NEGOCIÁVEL) — Cada slide DEVE caber exatamente em 100vh. Nunca rolagem dentro dos slides. Conteúdo transborda? Divida em vários slides.

Estética do Design

Você tende a convergir para resultados genéricos, "na distribuição". No design de frontend, isso cria o que os usuários chamam de estética de "lixo de IA". Evite isso: crie frontends criativos e distintos que surpreendam e encantem.

Foque em:

• Tipografia: Escolha fontes que sejam bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte por escolhas distintas que elevem a estética do frontend.
• Cor e Tema: Comprometa-se com uma estética coesa. Use variáveis CSS para consistência. Cores dominantes com acentos nítidos superam paletas tímidas e distribuídas uniformemente. Inspire-se em temas de IDEs e estéticas culturais.
• Movimento: Use animações para efeitos e microinterações. Priorize soluções apenas com CSS para HTML. Use a biblioteca Motion para React quando disponível. Foque em momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas (animation-delay) cria mais encanto do que microinterações dispersas.
• Fundos: Crie atmosfera e profundidade em vez de usar cores sólidas por padrão. Camadas de gradientes CSS, use padrões geométricos ou adicione efeitos contextuais que combinem com a estética geral.

Evite estéticas genéricas geradas por IA:

• Famílias de fontes superutilizadas (Inter, Roboto, Arial, fontes do sistema)
• Esquemas de cores clichês (particularmente gradientes roxos em fundos brancos)
• Layouts e padrões de componentes previsíveis
• Design "cookie-cutter" que carece de caráter específico do contexto.

Interprete criativamente e faça escolhas inesperadas que pareçam genuinamente projetadas para o contexto. Varie entre temas claros e escuros, fontes diferentes, estéticas diferentes. Você ainda tende a convergir para escolhas comuns (Space Grotesk, por exemplo) entre gerações. Evite isso: é crucial que você pense fora da caixa!

Regras de Ajuste à Viewport

Essas invariantes se aplicam a CADA slide em CADA apresentação:

• Cada .slide deve ter height: 100vh; height: 100dvh; overflow: hidden;
• TODOS os tamanhos de fonte e espaçamentos devem usar clamp(min, preferred, max) — nunca px/rem fixos
• Contêineres de conteúdo precisam de restrições max-height
• Imagens: max-height: min(50vh, 400px)
• Breakpoints necessários para alturas: 700px, 600px, 500px
• Inclua suporte prefers-reduced-motion
• Nunca negue funções CSS diretamente (-clamp(), -min(), -max() são ignorados silenciosamente) — use calc(-1 * clamp(...)) em vez disso

Ao gerar, leia viewport-base.css e inclua seu conteúdo completo em cada apresentação.

Limites de Densidade de Conteúdo por Slide

Conteúdo excede os limites? Divida em vários slides. Nunca aperte, nunca role.

Fase 0: Detectar Modo

Determine o que o usuário quer:

• Modo A: Nova Apresentação — Criar do zero. Vá para a Fase 1.
• Modo B: Conversão de PPT — Converter um arquivo .pptx. Vá para a Fase 4.
• Modo C: Aprimoramento — Melhorar uma apresentação HTML existente. Leia, entenda, aprimore. Siga as regras de modificação do Modo C abaixo.

Modo C: Regras de Modificação

…