>_ DevTrendspt

Idioma

Início

Linguagens

Seções

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embarcados Segurança
HTML

Cortar e Editar — Como o slides-grab Simplifica o Layout de Apresentações com IA

Criar apresentações é uma dor de cabeça tradicional para a maioria dos engenheiros. Quando você precisa rapidamente montar um pitch, uma palestra para meetup ou um relatório trimestral, restam duas opções. A primeira é lidar com editores pesados como PowerPoint ou Figma. A segunda é pedir para um LLM gerar código HTML com slides.

O segundo caminho parece tentador, mas rapidamente encontra um beco sem saída com tarefas rotineiras. Se você precisa mudar a fonte em um título ou mover uma imagem alguns pixels para a esquerda, você tem que procurar manualmente o <div> correto, ou escrever outro prompt longo. Em resposta, a rede neural frequentemente reescreve o slide inteiro e quebra o layout em blocos adjacentes.

O projeto slides-grab oferece uma solução diferente. É uma ferramenta local que combina um editor visual no navegador, um validador de layout e um wrapper para conectar agentes de IA.

Sobre o que é o projeto

Os autores do slides-grab partiram de um fato simples: modelos de linguagem são excelentes em organizar HTML e CSS puro. O principal problema não é a geração de código, mas transmitir contexto. Como você explica para o modelo qual elemento no slide você não gosta?

A ferramenta resolve esse problema através da seleção de área. Você inicia um editor local, vê o slide diretamente no navegador e seleciona o bloco necessário com o mouse. O editor forma um contexto preciso para o agente de IA — por exemplo, para Claude Code ou OpenAI Codex. Você escreve: "deixe esse bloco mais escuro e adicione padding," e o agente altera apenas o snippet HTML correspondente.

slides-grab demo

Edições menores como erros de digitação ou tamanho de texto podem ser feitas diretamente no navegador manualmente. Você não precisará mover tags no IDE.

Como o trabalho com slides é organizado

Todos os slides são armazenados no diretório de trabalho como arquivos separados slide-01.html, slide-02.html, e assim por diante. Arquivos de mídia ficam próximos na pasta assets/. Você não fica preso a formatos de fornecedores ou serviços de nuvem fechados. Se a ferramenta deixar de ser mantida amanhã, você ainda terá código web comum.

Aqui está como funciona o fluxo de trabalho principal com o projeto:

  1. Geração de estrutura e estilo. O agente cria um plano de apresentação e aplica um dos temas prontos. A ferramenta vem com um catálogo de 95 sistemas de design. Você pode selecionar o adequado através do visualizador de galeria local slides-grab preview-styles.
  2. Editação visual. Você abre a interface via slides-grab edit, corrige erros de digitação manualmente ou pede ao agente para alterar um fragmento específico selecionado.
  3. Verificação de qualidade. O comando slides-grab validate inicia o Chromium via Playwright em segundo plano. O linter verifica caminhos de imagem quebrados, links externos ou propriedades CSS errôneas.
  4. Exportação. O resultado pode ser compilado para PDF, imagens ou uma apresentação PowerPoint.

Recursos locais e manipulação de mídia

Normalmente, criar apresentações atinge um gargalo na busca por ilustrações e diagramas adequados. No slides-grab, esses cenários são tratados diretamente do console.

Para geração de imagens, o utilitário usa o módulo codex-imagen por padrão. Ele utiliza autorização local do Codex CLI, então você nem precisa especificar uma chave de API OpenAI separada. Basta executar o comando no terminal:

slides-grab image --slides-dir decks/my-deck --prompt "Минималистичный векторный график роста метрик"

O arquivo gerado é salvo diretamente na pasta assets/, e o console retorna um caminho relativo que é fácil inserir no HTML. Se você precisar de provedores de terceiros, pode alternar para a API OpenAI padrão ou Google Gemini.

A situação com vídeos e diagramas é semelhante:

  • O comando slides-grab fetch-video baixa vídeos do YouTube usando yt-dlp e salva localmente.
  • O comando slides-grab tldraw converte diagramas do formato .tldr para uma imagem SVG limpa, ajustada ao tamanho do slide.

Por baixo dos panos e nuances da exportação

A ferramenta é escrita em JavaScript e roda no Node.js versão 20 ou superior. O lado do servidor inicia um servidor local para o editor e se comunica com o navegador via Playwright.

A importação de apresentações de outras pessoas é implementada de forma interessante. Se você tem um arquivo PPTX corporativo pronto ou diretrizes de marca, o comando slides-grab import-template divide em cores, fontes e grades, formando um config JSON. Depois disso, o agente de IA usa esses dados como referência para novos slides.

Quanto à exportação, a opção principal e mais confiável é PDF ou PNG. O comando slides-grab pdf rasteriza frames para 4K de alta resolução por padrão, preservando o layout original pixel a pixel. Para PDFs com texto pesquisável, existe a flag --mode print.

No entanto, você deve abordar as exportações para PPTX e Figma com cautela. Na documentação, os desenvolvedores marcam honestamente a conversão para PowerPoint como uma funcionalidade experimental. Ao selecionar o motor de texto (--engine text), a ferramenta tenta traduzir a árvore DOM em elementos nativos do PowerPoint, mas em grids CSS complexos, o layout pode quebrar.

Como experimentar

Para instalação, basta instalar o pacote via npm e adicionar o navegador Chromium para o Playwright:

npm install slides-grab
npx playwright install chromium
npx slides-grab install-skills --target all --scope user

O comando install-skills registra as habilidades do utilitário com seus agentes Claude Code ou Codex locais. Para desenvolver sua própria apresentação de slides, você não precisa clonar o repositório.

Quem achará este projeto útil

O slides-grab é ótimo para desenvolvedores, fundadores e líderes técnicos que estão cansados de passar horas alinhando blocos em editores gráficos.

As principais vantagens da ferramenta são a autonomia e o contexto preciso ao trabalhar com LLMs. Você mantém toda a apresentação no Git como HTML legível, não depende de plataformas SaaS de terceiros, e pode fazer edições facilmente por voz ou mouse.

As desvantagens são a exportação imperfeita para PPTX e a dependência da geração de imagens integrada em endpoints não públicos do Codex, que podem mudar com o tempo. No entanto, para montar slides elegantes com exportação subsequente para PDF, o projeto parece uma solução extremamente prática.

Projetos relacionados