Hoe je een AI-agent omtovert tot een slide-layout engineer met open-slide

Elke keer dat ik een presentatie moet samenstellen voor een meetup of interne vergadering, betrap ik mezelf erop dat ik uitstel. Met lettertypen en blokuitlijning in PowerPoint en Google Slides rommelen is vervelend. Markdown-tools zoals Marp of Slidev maken lay-out eenvoudiger, maar wanneer je niet-standaard animaties, interactieve grafieken of een nette callout box wilt, schiet de opmaak snel tekort.

Het lijkt erop dat neurale netwerken nu uitstekend React-code schrijven. Maar als je aan Claude Code of Cursor vraagt om een presentatie vanaf nul te bouwen, schrijven ze een dozijn niet-verbonden componenten, vergeten ze schermschaling, raken ze in de war met routing, en laat het je achter met layout-bugs.

Het open-slide project lost dit specifieke probleem op. Het is een presentatieframework dat specifiek is ontworpen om samen te werken met AI-agents.

Het projectidee

De maker van open-slide redeneerde eenvoudig: slides zijn visuele code, en moderne agents schrijven snel code zonder te klagen. Het enige probleem is de uitvoeringsomgeving.

In plaats van zijn eigen beperkte opmaaktaal (DSL) te bedenken, geeft open-slide de agent standaard React en handelt alle routinematige werk zelf af. Het framework vergrendelt het canvas op 1920 × 1080 pixels, zorgt voor adaptieve schaling voor elke monitor, configureert schakelen tussen schermen, hot reloading en sprekermodus.

De agent hoeft alleen componenten te genereren volgens duidelijke opmaakregels, zonder afgeleid te raken door infrastructuur.

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

Na initialisatie bevat het project al kant-en-klare scripts voor Claude Code en systeeminstructies die de canvas-structuur, typografie en kleurenpalet aan het model uitleggen.

Ingebouwde bewerkingscyclus via Inspector

Meestal verandert werken met AI op visuele elementen in eindeloze pogingen om mondeling uit te leggen: "verschuif die grijze knop op de derde slide iets naar links van de kop". Het model maakt fouten, bewerkt het verkeerde bestand, en de dialoog sleept zich voort.

open-slide heeft een ingebouwde visuele inspector right in de dev server:

1. Je opent de slides in de browser en klikt op een willekeurig element.
2. In het veld dat verschijnt, schrijf je een opmerking: "maak de achtergrond donkerder", "verklein de kop", of "voeg onderpadding toe".
3. Het framework slaat deze notities direct op in de broncode als markers @slide-comment.
4. Je voert de /apply-comments opdracht uit in de terminal met de agent.
5. De agent leest de markers, brengt bewerkingen aan in JSX, verwijdert de opmerkingen, en laadt de pagina opnieuw.

Deze bewerkingscyclus bespaart veel zenuwen. Je speelt de rol van een art director die plaknotities achterlaat op de lay-out terwijl het neurale netwerk de componenten repareert.

Logo-zoekfunctie en assetbeheer

Als je een pitch of technische presentatie doet, gaat de helft van de tijd op aan het zoeken naar SVG-logo's van technologieën. open-slide heeft een ingebouwde svgl catalogus. Open gewoon het assets-paneel, typ de naam van de bibliotheek of service, en voeg het vectorpictogram direct in de slide-code in.

Het assets-paneel biedt ook de mogelijkheid om lokale lettertypen, afbeeldingen en video's centraal te beheren, zodat je ze niet handmatig hoeft te organiseren in willekeurige projectmappen.

Export en presentatie

Voor live presentaties bevat het project een volledige sprekermodus. Een apart scherm toont de huidige slide, een voorbeeld van de volgende stap, een presentatietimer en sprekersnotities.

Zodra de presentatie klaar is, kun je deze bouwen naar een volledig statische bundle:

• Genereer een standalone HTML-bestand dat zonder server opent en kan worden gedeployed naar Vercel, Netlify of Cloudflare Pages.
• Exporteer de deck naar PDF voor afdrukken of versturen naar conferentieorganisatoren.

Als je veel presentaties verzamelt, organiseert de ingebouwde deck-manager ze in mappen met emoji's en ondersteunt sortering via eenvoudig drag-and-drop.

Repository-structuur

Onder de motorkap is open-slide een monorepo gebaseerd op pnpm en Turborepo:

• Het @open-slide/core package bevat de core runtime, canvas-schaling engine, bewerkingsinspector, Vite plugin en CLI-interface.
• Het @open-slide/cli package regelt het initialiseren van nieuwe projecten, waarbij build-configs in de core worden verborgen om de werkende bestandsstructuur niet te rommelig te maken.
• Er is ook een demo apps/demo waar de auteur nieuwe releases test.

De stack is volledig TypeScript, met de snelle Biome voor linting en formatting, en het project gebruikt de permissieve MIT-licentie.

Voor wie is dit nuttig

Als je gewend bent om presentaties alleen met de muis te bouwen in Figma of Keynote, kan overschakelen naar tekstprompts onwennig aanvoelen. Maar voor ontwikkelaars die regelmatig talks geven en al dagelijks Claude Code of Cursor gebruiken, kan open-slide een solide alternatief zijn voor traditionele slide-tools.

Je krijgt volledige toegang tot het React-ecosysteem: embed een interactieve Three.js-scène, een functionele Monaco code-editor of een Recharts-grafiek, terwijl je het neurale netwerk het grove lay-outwerk laat doen.