Testada em uma tarefa realComunidade, verificadaDocumentos e Office

Frontend Slides

Um deck de slides animado com design sob medida num único arquivo HTML, num estilo que você escolhe entre três prévias reais.

Veja o que ela criou

Instale Frontend Slides grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Nossa nota: 7/10
Funciona em: Claude, ChatGPT+7 outras
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.
Precisa programar?: Não
Tempo até o resultado: 30 min
Criado por: Zara Zhang
Testada em: 19 de out. de 2026

Com a skill, slide 1 — Com a skill: um estilo personalizado com fundo salpicado, uma borda ondulada de esmalte Midnight, fotos em arco e um carimbo de logo, com o preço de $19 logo no primeiro slide.

Com a skill, slide 2 — Com a skill: um estilo personalizado com fundo salpicado, uma borda ondulada de esmalte Midnight, fotos em arco e um carimbo de logo, com o preço de $19 logo no primeiro slide.

A resposta curta

Frontend Slides é uma skill do Claude que monta apresentações como um único arquivo HTML que roda em qualquer navegador, ou converte um PowerPoint existente nesse formato. Em vez de pedir que você descreva um estilo, ela mostra três prévias reais do slide de título e monta o deck completo na que você escolher. Nosso veredito é 7/10: com o mesmo prompt de pitch, o Claude puro fez um deck limpo, mas genérico, enquanto a skill fez um com visual personalizado e uma história de venda mais afiada, embora tenha levado mais tempo e deixado algumas pequenas falhas.

Ideal para: Pitches, palestras e oficinas em que você quer um deck com cara de design sob medida, escolhido entre três prévias, sem abrir o PowerPoint.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Frontend Slides em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Quando vale a pena usar

Apresente um produto a empresas

No nosso teste, a dona de uma loja de cerâmica pediu um pitch de 8 slides para donos de cafés. Ela recebeu um deck com o estilo do próprio produto (argila salpicada, cores dos esmaltes, um carimbo de logo), com o preço, o pedido mínimo e o total do primeiro pedido logo de cara.

Transforme um PowerPoint num deck web

Você tem um arquivo .pptx antigo. Ela extrai os textos, imagens, a ordem dos slides e as notas do apresentador, mostra o que encontrou e reconstrói o deck num novo estilo que você escolhe.

Deck de leitura para clientes ou equipes

As pessoas vão lê-lo sozinhas em vez de ver você apresentar. Escolha a densidade voltada para leitura e os slides ficam autossuficientes, com tabelas, comparações e explicações curtas, divididos em mais slides em vez de amontoados.

Como ter um ótimo resultado

Peça um deck
Instale (passos abaixo) e peça um deck em palavras simples, ou aponte o Claude para um arquivo .pptx para converter. Passe seus fatos e fotos na mesma mensagem.
Responda quatro perguntas de uma vez
Ela pergunta o objetivo, o tamanho, se seu conteúdo está pronto e a densidade: guiado por quem apresenta, com poucas palavras por slide, ou voltado para leitura, com mais detalhes. Responda tudo numa única mensagem.
Escolha entre três prévias
O Claude faz três slides de título animados: um preset seguro, pelo menos um template ousado e um curinga que pode ser desenhado só para você. No nosso teste, o curinga personalizado venceu, porque foi construído a partir do próprio produto.
Confira cada slide antes de apresentar
O deck fica num palco fixo de 16:9 que se ajusta a qualquer tela. Clique em todos os slides: no nosso teste, dois contadores de página apareciam em cada slide e um cobria uma linha de texto, então peça ao Claude para corrigir qualquer coisa assim.
Edite e depois exporte ou compartilhe
Aperte E ou passe o mouse no canto superior esquerdo para editar o texto no navegador e depois Ctrl+S para salvar uma cópia. Peça um PDF (cada slide vira uma imagem) ou um link de compartilhamento, que exige uma conta grátis da Vercel.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos

Faça uma apresentação de 8 slides oferecendo as canecas de atacado da Clay & Co a donos de cafés locais, como um único arquivo HTML, out/deck.html, que eu possa apresentar no navegador com as setas do teclado.

Tudo o que ela criou

Cada peça abaixo é um resultado real do nosso teste, aberta do jeito que você abriria.

Sem a skill, slide 1 — Sem a skill: um deck limpo em creme e serifa com fotos de meia página e placeholders claros, competente, mas genérico, com um slide de avaliação quase vazio e uma barra de dica sobre o rodapé do primeiro slide.

Sem a skill, slide 2 — Sem a skill: um deck limpo em creme e serifa com fotos de meia página e placeholders claros, competente, mas genérico, com um slide de avaliação quase vazio e uma barra de dica sobre o rodapé do primeiro slide.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 30 minutos do primeiro prompt até o resultado final.

Você: Faça uma apresentação de 8 slides oferecendo as canecas de atacado da Clay & Co a donos de cafés locais, como um único arquivo HTML, out/deck.html, que eu possa apresentar no navegador com as setas do teclado. (Foram fornecidos dados da loja e 8 fotos de banco de imagens. Sem perguntas permitidas.)
AI: Eu normalmente faria quatro perguntas. Minhas escolhas: pitch deck, curto (8 slides), todo o conteúdo pronto, pouca densidade porque você vai apresentar ao vivo.
AI: Escolhi C, Speckled Clay. O fundo salpicado é a argila da caneca, o banho de esmalte Midnight e as provas de esmalte mostram a escolha de esmalte, e o carimbo redondo representa o carimbo de logo de +$2. É acolhedor e artesanal, mas ainda crível para uma conversa sobre preço.
AI: Seu deck está em out/deck.html, estilo Speckled Clay, 8 slides. Navegue com as setas, Espaço ou Page Down; Home e End pulam para o primeiro e o último slide; deslize em telas sensíveis ao toque. Aperte E para editar qualquer texto no navegador; Cmd ou Ctrl+S salva uma cópia editada. Só os seus fatos foram usados. $456 e $504 são 24 canecas a $19 e a $21 com o carimbo do logo. Fatos ausentes são placeholders tracejados: atacado...

O que funcionou e onde deixou a desejar

O que funcionou

Um design feito para este produto: o deck do Claude puro tinha um layout limpo, mas genérico, em creme e serifa, enquanto o estilo personalizado da skill transformou a argila salpicada, o banho de esmalte e o carimbo do logo no visual de cada slide.
Ele vende com mais força: o preço de $19, o mínimo de 24 canecas e a escolha de esmalte estão no slide de título, e o slide de preços põe $19 ao lado do preço de $34 da loja, com um total de $456 no primeiro pedido.
Três prévias reais do slide de título para escolher, em vez de descrever um estilo em palavras; as duas que não foram escolhidas ficam guardadas como arquivos.
Ela se ateve aos fatos, marcando os ausentes (condições de entrega, fotos de cada esmalte numa caneca) como placeholders, e você pode apertar E para editar qualquer texto no navegador.

Onde deixou a desejar

Todo slide mostra dois contadores de página ('3 / 8' embaixo e '03 / 08' à direita), e no slide 5 o contador fica em cima do texto de placeholder.
Levou cerca de 30 minutos contra 12 do Claude puro, principalmente em prévias e correções.
O slide 7 gasta espaço com as oficinas do ateliê, um assunto secundário num pitch de atacado, e o Claude puro apontou um fato que um café perguntaria (segurança em lava-louças e micro-ondas) e que o deck da skill pulou.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Frontend Slides em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Pitch de vendas para compradores empresariais

Faça uma apresentação de [8] slides oferecendo [meu produto] a [tipo de comprador, ex. donos de cafés locais], como um único arquivo HTML que eu possa apresentar no navegador com as setas do teclado. Fatos: [preços, mínimos, prazos, avaliações, contato]. Use só estes fatos e coloque um [placeholder] bem marcado onde precisar de mais.

Deck de palestra a partir de anotações soltas

Faça um deck de slides para uma palestra de [10 minutos] no [evento] sobre [tema]. Minhas anotações soltas: [cole as anotações]. Pouca densidade, eu vou falar.

Converta um PowerPoint

Converta [pitch.pptx] numa apresentação web animada. Mantenha todos os textos, imagens, a ordem dos slides e as notas do apresentador.

Deck de leitura para um cliente

Faça um deck voltado para leitura que [meu cliente / minha equipe] consiga ler sem eu apresentar: [tema, ex. nossa proposta de projeto]. Inclua [uma tabela comparativa / uma linha do tempo / preços]. Este é o conteúdo: [cole].

Dicas do nosso teste

Envie suas fotos junto com o pedido. No nosso teste, ela olhou as 8, usou as 5 que combinavam com um pitch de canecas, nunca repetiu nenhuma e planejou os slides em torno delas.
Descreva o visual do seu produto em uma ou duas linhas (cores, materiais, texturas). A opção de prévia personalizada pode transformar esses detalhes no estilo do deck inteiro, e foi isso que fez nosso deck de teste se destacar.
Diga 'use só estes fatos e marque o que faltar como [placeholder]'. No nosso teste, isso manteve cada número real e sinalizou as condições de entrega como ausentes.
Peça para remover os números de página duplicados e conferir a borda de baixo de cada slide. Essas foram as únicas falhas visíveis no nosso deck de teste.
Corrija o texto você mesmo em vez de pedir de novo: aperte E no navegador, clique em qualquer texto, edite e salve com Ctrl+S.
As fontes carregam do Google Fonts, então apresente com conexão à internet, ou o deck cai para fontes de reserva mais simples.

O que você precisa: Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior., Um navegador moderno para apresentar; internet para as fontes do Google, Opcional: para exportar em PDF, Node e Playwright (ele baixa um navegador); para um link de compartilhamento, uma conta grátis da Vercel.

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA

Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/zarazhangrui/frontend-slides -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

$npx skills add https://github.com/zarazhangrui/frontend-slides -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: O resultado é HTML puro, então as apresentações abrem em qualquer navegador e podem ser exportadas para PDF.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença (MIT) permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

Preciso programar para usar o Frontend Slides?

Não. Você responde a algumas perguntas, escolhe um estilo entre as prévias e edita o texto direto no navegador. O deck é um único arquivo HTML; para mudar cores ou fontes depois, é só pedir ao Claude.

De qual plano e ferramentas o Frontend Slides precisa?

Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior. Você apresenta em qualquer navegador moderno. A exportação para PDF usa Node e Playwright, e um link de compartilhamento exige uma conta grátis da Vercel.

O Frontend Slides funciona no Claude.ai?

Sim. Você pode enviá-lo ao Claude.ai como skill em Customize > Skills, ou usá-lo no Claude Code; os passos de instalação estão abaixo. A exportação para PDF e o compartilhamento por link rodam scripts que baixam um navegador ou entram na Vercel, então combinam com o Claude Code no seu próprio computador.

É melhor do que simplesmente pedir ao Claude?

No nosso teste, sim no design, não na velocidade. O Claude puro fez um deck limpo e genérico em creme e serifa em cerca de 12 minutos; com a skill, o Claude mostrou três prévias de estilo e construiu um visual personalizado a partir do próprio produto (argila salpicada, cores dos esmaltes, um carimbo de logo), com o preço no primeiro slide, em cerca de 30 minutos. Os dois se ativeram aos fatos; o deck da skill tinha contadores de página duplicados para limpar.

O Frontend Slides exporta para PDF ou PowerPoint?

PDF, sim: um script tira uma captura de cada slide em 1920 por 1080 e as junta, então as animações viram imagens estáticas. Exportar para PowerPoint não faz parte da skill; ela converte de .pptx para HTML, não o contrário.