frontend-slides: crie slides web com um agente de código
O frontend-slides é o skill de PPT de código aberto com mais estrelas para agentes de código: ele monta apresentações como páginas web limpas e modernas que você apresenta direto no navegador. Este guia mostra o que é, como instalar e usar, no que ele realmente é bom (e seus limites), como se compara aos outros skills de PPT do Claude e onde um Agent-Native Design Workspace assume quando um único skill chega ao fim da linha.
Se você quer uma apresentação e já vive num terminal, o frontend-slides é uma das formas mais limpas de conseguir uma. É um skill para agentes de código: em vez de abrir um aplicativo de apresentações, você descreve os slides para o agente que já usa, e o frontend-slides transforma sua ideia em slides construídos como páginas web — HTML e CSS de verdade que você apresenta direto do navegador.
É também a opção mais popular do gênero. Com 25k estrelas no GitHub e uma licença MIT, o frontend-slides fica no topo da prateleira crescente de Claude PPT skills. Este guia cobre o que ele é, como instalar e instruir, no que ele é bom e onde ele para, como se compara aos outros skills desse espaço e onde um espaço de trabalho completo entra quando uma apresentação vira um trabalho contínuo.
O que é o frontend-slides
O frontend-slides é um skill: um conjunto empacotado de instruções que seu agente de código (Claude Code, Codex, Cursor e outros) carrega no meio de uma tarefa para fazer uma coisa bem. Neste caso, essa coisa é criar uma apresentação. Ele se apoia nas habilidades de frontend que seu agente já tem e as direciona aos slides: você descreve a apresentação em linguagem simples e o agente escreve páginas web limpas e modernas, uma por slide, que você folheia no navegador.
A saída é web-nativa por concepção. Como cada slide é HTML e CSS, você tem controle total — layouts sob medida, tipografia de verdade, gradientes, transições, gráficos incorporados, qualquer coisa que o navegador consiga renderizar. É desenvolvido e mantido por Zara Zhang, é de código aberto sob MIT e, como o restante desses skills, funciona no modelo traga-sua-própria-chave: você fornece a chave de API, o skill fornece o ofício.
Como funciona
O ciclo é curto e, em boa parte, conversacional:
- Instale o skill — clone ou adicione o frontend-slides ao diretório de skills do seu agente de código (o repositório tem os passos de configuração). Traga sua própria chave de modelo.
- Descreva a apresentação — dê ao agente o tema, o público, o tom e um número aproximado de slides. Quanto mais específico o briefing, melhor a estrutura que ele constrói.
- Deixe-o construir — o agente gera os slides como páginas web e os abre no navegador para apresentar.
- Itere — peça mudanças em linguagem simples ("aperte a abertura", "transforme o slide 3 numa comparação em duas colunas", "paleta mais quente") e renderize de novo. Como é só CSS, você também pode editar qualquer coisa à mão diretamente.
- Apresente ou exporte — apresente pelo navegador ou exporte para PDF para compartilhar.
No que ele é bom (e seus limites honestos)
O frontend-slides brilha mais quando você quer slides web-nativos e controle total sobre a aparência deles. Se você está à vontade com HTML e CSS, nada fica entre você e o design — dá para abrir qualquer slide e mudá-lo à mão, versionar a apresentação inteira no git e reutilizar componentes entre apresentações. Para os desenvolvedores, é aí que está todo o apelo: slides que se comportam como uma base de código em vez de um arquivo proprietário.
Os limites honestos são o outro lado dessa força. A saída é uma página web, não um .pptx — então, se a sua organização precisa de um PowerPoint editável com formas nativas, esta não é a ferramenta (veja o quadro comparativo abaixo para os skills voltados a isso). Há também um piso de conforto: quanto mais você se afasta de HTML e CSS, menos o "controle total" se vende sozinho. E, como qualquer skill isolado, o frontend-slides faz uma apresentação — ele não carrega sua marca entre projetos nem mantém um design system em sincronia. É uma ferramenta afiada de propósito único, e ele é honesto quanto a isso.
frontend-slides contra outros Claude PPT skills
O frontend-slides não é o único skill dessa categoria, e a escolha certa depende da saída de que você precisa e da licença com a qual você consegue conviver.
| Ferramenta | Saída | Licença | Ideal para |
|---|---|---|---|
| frontend-slides | Slides web HTML | MIT | Apresentações web-nativas, controle total do CSS |
| guizang-ppt-skill | HTML (editorial) | AGPL-3.0 | Apresentações bem-feitas, com cara de projetadas |
| dashiAI | Apresentação editável | AGPL-3.0 | Saída que um não desenvolvedor pode editar |
| Open Design | Apresentações editáveis fiéis à marca + modelos | Apache-2.0 | Apresentações ligadas a um design system, num espaço de trabalho |
Se você quer o visual editorial caprichado, o guizang-ppt-skill é o irmão para comparar; se o seu entregável precisa continuar editável por um não desenvolvedor, o dashiAI foi feito para isso. O frontend-slides vence quando você quer que a apresentação seja páginas web que você possui por inteiro.
Onde o Open Design se encaixa
O frontend-slides é um ótimo skill de propósito único para uma apresentação no seu terminal. Mas um skill é um script — ele não carrega sua marca entre projetos, não mantém a saída editável num espaço de trabalho de verdade nem coordena uma apresentação com o restante do seu trabalho de design.
O Open Design é a camada acima do skill: um Agent-Native Design Workspace de código aberto (Apache-2.0), local-first e com sua própria chave, que fica fora do agente de código que você já usa. Você descreve uma apresentação; o agente gera uma versão editável contra um design system, então ela permanece fiel à marca em vez de partir de uma página em branco toda vez — e o Open Design traz seus próprios modelos de apresentação em HTML na sua biblioteca de plugins. É a mesma ideia do frontend-slides, com um lar: seus arquivos, sua marca, editáveis e seus para sempre. Se você monta slides com um agente de código hoje, veja como o Open Design funciona com o Claude Code.
Use o frontend-slides quando quiser uma apresentação web-nativa rápida pela linha de comando. Recorra a um espaço de trabalho quando a apresentação precisar ser fiel à marca, editável e parte de um corpo maior de trabalho de design.
Perguntas frequentes
O frontend-slides é gratuito? Sim. É de código aberto sob a licença MIT e de uso gratuito — você fornece sua própria chave de API do modelo. A MIT é permissiva, então também é amigável ao uso comercial.
Como uso o frontend-slides? Instale o skill no diretório de skills do seu agente de código e depois descreva a apresentação (tema, público, extensão). O agente monta os slides como páginas web; itere em linguagem simples e apresente pelo navegador.
O frontend-slides exporta para PowerPoint? Não — ele produz slides web (HTML/CSS) que você apresenta no navegador, e você pode exportar para PDF para compartilhar. Se você precisa de um .pptx editável com formas nativas, procure um skill feito para essa saída em vez do frontend-slides.
Para quem o frontend-slides é melhor? Para desenvolvedores que querem slides web-nativos e controle total do CSS — pessoas à vontade vivendo na plataforma web que preferem versionar uma apresentação no git a abrir um aplicativo de apresentações.
Skill ou espaço de trabalho de design — qual devo usar? Um skill como o frontend-slides é ideal para uma apresentação rápida e pontual. Um Agent-Native Design Workspace como o Open Design se encaixa melhor quando você precisa de apresentações editáveis e fiéis à marca que convivem com o restante do seu trabalho de design.
Resumo
O frontend-slides é a forma com mais estrelas de criar slides com um agente de código, e ele merece: apresentações web-nativas, controle total do CSS, licença MIT, tudo movido pelo terminal em que você já trabalha. Se você quer uma apresentação rápida, pensada para o navegador, e está à vontade com HTML e CSS, instale-o e mande ver nas instruções. Quando uma apresentação vira um trabalho contínuo e fiel à marca que precisa continuar editável e ligado a um design system, é aí que um Agent-Native Design Workspace assume.