Como Transformar um Agente de IA em um Engenheiro de Layout de Slides com open-slide

Toda vez que preciso preparar uma apresentação para um meetup ou reunião interna, percebo que estou procrastinando. Mexer com fontes e alinhamento de blocos no PowerPoint e Google Slides é tedioso. Ferramentas Markdown como Marp ou Slidev facilitam o layout, mas se você quer animações não padronizadas, gráficos interativos ou uma caixa de destaque elegante, a marcação rapidamente se mostra insuficiente.

Parece que redes neurais agora escrevem código React perfeitamente. Mas se você pedir ao Claude Code ou Cursor para criar uma apresentação do zero, eles vão escrever uma dúzia de componentes desconectados, esquecer do dimensionamento de tela, se enrolar com roteamento e deixar você lidando com bugs de layout sozinho.

O projeto open-slide resolve exatamente esse problema. É um framework de apresentação projetado especificamente para trabalhar junto com agentes de IA.

A Ideia do Projeto

O criador do open-slide raciocinou de forma simples: slides são código visual, e agentes modernos escrevem código rapidamente sem reclamar. O único problema é o ambiente de execução.

Em vez de inventar sua própria linguagem de marcação limitada (DSL), o open-slide fornece ao agente React padrão e cuida de todo o trabalho rotineiro por conta própria. O framework trava o canvas em 1920 × 1080 pixels, garante dimensionamento adaptativo para qualquer monitor, configura troca de tela, hot reloading e modo de apresentador.

O agente só precisa gerar componentes seguindo regras claras de marcação, sem se distrair com a infraestrutura.

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

Após a inicialização, o projeto já contém scripts prontos para Claude Code e instruções de sistema que explicam a estrutura do canvas, tipografia e paleta para o modelo.

Ciclo de Edição Integrado via Inspector

Normalmente, trabalhar com IA em visuais se transforma em tentativas intermináveis de explicar verbalmente: "mova aquele botão cinza no terceiro slide um pouco para a esquerda do título". O modelo erra, edita o arquivo errado e o diálogo se arrasta.

O open-slide tem um inspector visual integrado diretamente no servidor de desenvolvimento:

1. Você abre os slides no navegador e clica em qualquer elemento.
2. No campo que aparece, você escreve um comentário: "torne o fundo mais escuro", "reduza o tamanho do título" ou "adicione padding inferior".
3. O framework salva essas anotações diretamente no código fonte como marcadores @slide-comment.
4. Você executa o comando /apply-comments no terminal com o agente.
5. O agente lê os marcadores, faz as edições no JSX, remove os comentários e recarrega a página.

Esse ciclo de edição economiza muitos nervos. Você assume o papel de um diretor de arte deixando notas adesivas no layout enquanto a rede neural corrige os componentes.

Busca de Logos e Trabalho com Assets

Se você está fazendo um pitch ou palestra técnica, metade do tempo é gasta procurando SVGs de logos de tecnologias. O open-slide tem um catálogo svgl integrado. Basta abrir o painel de assets, digitar o nome da biblioteca ou serviço, e inserir o ícone vetorial diretamente no código do slide.

O painel de assets também permite puxar centralizadamente fontes locais, imagens e vídeos para você não ter que organizá-los manualmente em pastas aleatórias do projeto.

Exportação e Apresentação

Para apresentações ao vivo, o projeto inclui um modo de apresentador completo. Uma tela separada mostra o slide atual, prévia do próximo passo, cronômetro da apresentação e notas do apresentador.

Quando a apresentação estiver pronta, você pode compilá-la em um bundle totalmente estático:

• Gere um arquivo HTML independente que abre sem servidor e pode ser implantado no Vercel, Netlify ou Cloudflare Pages.
• Exporte o deck para PDF para impressão ou envio aos organizadores de conferências.

Se você acumular muitas apresentações, o gerenciador de decks integrado organiza elas em pastas com emojis e suporta ordenação através de simples arrastar e soltar.

Estrutura do Repositório

Por baixo dos panos, o open-slide é um monorepo baseado em pnpm e Turborepo:

• O pacote @open-slide/core contém o runtime core, motor de dimensionamento de canvas, inspector de edição, plugin Vite e interface CLI.
• O pacote @open-slide/cli lida com a inicialização de novos projetos, escondendo configurações de build dentro do core para evitar poluir a árvore de arquivos de trabalho.
• Lá dentro há uma demo apps/demo onde o autor testa novos lançamentos.

A stack é inteiramente em TypeScript, com Biome rápido para linting e formatação, e o projeto usa a licença permissiva MIT.

Para Quem Este Projeto É Útil

Se você está acostumado a criar apresentações apenas com o mouse no Figma ou Keynote, mudar para prompts de texto pode parecer estranho. Mas para desenvolvedores que dão palestras regularmente e já usam Claude Code ou Cursor no trabalho diário, o open-slide pode ser uma alternativa sólida às ferramentas tradicionais de slides.

Você obtém acesso completo ao ecossistema React: embed uma cena Three.js interativa, um editor de código Monaco funcional ou um gráfico Recharts, enquanto deixa a rede neural cuidar do trabalho pesado de layout.