Crop and Edit — Hoe slides-grab het maken van presentaties vereenvoudigt met AI

Het maken van presentaties is een traditionele hoofdpijn voor de meeste engineers. Wanneer je snel een pitch, een meetup-talk of een kwartaalrapport in elkaar moet zetten, heb je twee opties. De eerste is om te vechten met zware editors zoals PowerPoint of Figma. De tweede is om een LLM te vragen om HTML-code met dia's te genereren.

De tweede weg lijkt aantrekkelijk, maar raakt snel in een impasse bij routinematige taken. Als je het lettertype in een kop wilt wijzigen of een afbeelding een paar pixels naar links wilt verschuiven, moet je ofwel de juiste <div> handmatig opzoeken, ofwel een andere lange prompt schrijven. Als reactie herschrijft het neurale netwerk vaak de hele dia en breekt de lay-out in aangrenzende blokken.

Het slides-grab project biedt een andere oplossing. Het is een lokaal hulpmiddel dat een visuele editor in de browser, een lay-outvalidator en een wrapper voor het verbinden van AI-agents combineert.

Waar gaat het project over

De auteurs van slides-grab begonnen met een eenvoudig feit: taalmodellen zijn uitstekend in het opmaken van pure HTML en CSS. Het hoofdprobleem is niet codegeneratie, maar het overbrengen van context. Hoe leg je aan het model uit welk element op de dia je niet leuk vindt?

Het hulpmiddel lost dit probleem op door gebiedsselectie. Je start een lokale editor, ziet de dia direct in de browser en selecteert het benodigde blok met je muis. De editor vormt nauwkeurige context voor de AI-agent — bijvoorbeeld voor Claude Code of OpenAI Codex. Je schrijft: "maak dit blok donkerder en voeg padding toe," en de agent wijzigt alleen het bijbehorende HTML-fragment.

Kleine bewerkingen zoals typfouten of tekstgrootte kunnen rechtstreeks in de browser handmatig worden gemaakt. Je hoeft geen tags in de IDE te verplaatsen.

Hoe het werken met dia's is georganiseerd

Alle dia's worden in de werkdirectory opgeslagen als aparte bestanden slide-01.html, slide-02.html, enzovoort. Mediabestanden staan nearby in de assets/ map. Je bent niet gebonden aan vendor-formaten of gesloten clouddiensten. Als het hulpmiddel morgen niet meer wordt onderhouden, heb je nog steeds gewone webcode.

Zo ziet de belangrijkste workflow met het project eruit:

1. Structuur- en stijlgeneratie. De agent maakt een presentatieplan en past een van de kant-en-klare thema's toe. Het hulpmiddel wordt geleverd met een catalogus van 95 designsystemen. Je kunt de juiste selecteren via de lokale galerijviewer slides-grab preview-styles.
2. Visuele bewerking. Je opent de interface via slides-grab edit, corrigeert typfouten handmatig, of vraagt de agent om een specifiek geselecteerd fragment te wijzigen.
3. Kwaliteitscontrole. Het slides-grab validate commando start Chromium via Playwright op de achtergrond. De linter controleert op gebroken afbeeldingspaden, externe links of foutieve CSS-eigenschappen.
4. Export. Het resultaat kan worden gecompileerd naar PDF, afbeeldingen of een PowerPoint-presentatie.

Lokale bronnen en mediabehandeling

Gewoonlijk raakt het maken van presentaties een bottleneck bij het zoeken naar geschikte illustraties en diagrammen. In slides-grab worden deze scenario's direct vanuit de console afgehandeld.

Voor beeldgeneratie gebruikt het hulpmiddel standaard de codex-imagen module. Het maakt gebruik van lokale autorisatie van Codex CLI, dus je hoeft zelfs geen apart OpenAI API-sleutel op te geven. Voer gewoon het commando uit in de terminal:

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

Het gegenereerde bestand wordt direct opgeslagen in de assets/ map, en de console retourneert een relatief pad dat gemakkelijk in HTML kan worden ingevoegd. Als je externe providers nodig hebt, kun je overschakelen naar de standaard OpenAI API of Google Gemini.

De situatie met video en diagrammen is vergelijkbaar:

• Het slides-grab fetch-video commando downloadt video van YouTube met yt-dlp en slaat het lokaal op.
• Het slides-grab tldraw commando converteert diagrammen van .tldr formaat naar een schone SVG-afbeelding, aangepast aan de dia-grootte.

Onder de motorkap en export-nuances

Het hulpmiddel is geschreven in JavaScript en draait op Node.js versie 20 en hoger. De serverkant draait een lokale server voor de editor en communiceert met de browser via Playwright.

Het importeren van presentaties van anderen is interessant geïmplementeerd. Als je een kant-en-klare bedrijfs-PPTX-bestand of merkrichtlijnen hebt, breekt het slides-grab import-template commando het op in kleuren, lettertypen en rasters, en vormt het een JSON-configuratie. Daarna gebruikt de AI-agent deze gegevens als referentie voor nieuwe dia's.

Voor export is de belangrijkste en meest betrouwbare optie PDF of PNG. Het slides-grab pdf commando rasteriseert frames standaard naar high-resolution 4K, waarbij de originele lay-out tot op de pixel wordt behouden. Voor doorzoekbare tekst-PDF's is er de --mode print vlag.

Je moet echter voorzichtig zijn met exports naar PPTX en Figma. In de documentatie markeren de ontwikkelaars de PowerPoint-conversie eerlijk als een experimentele functie. Bij het selecteren van de tekstengine (--engine text) probeert het hulpmiddel de DOM-boom te vertalen naar native PowerPoint-elementen, maar bij complexe CSS-grids kan de lay-out breken.

Hoe het uit te proberen

Voor installatie installeer je gewoon het pakket via npm en voeg je de Chromium-browser voor Playwright toe:

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

Het install-skills commando registreert de vaardigheden van het hulpmiddel bij je lokale Claude Code of Codex-agents. Om je eigen dia-dek te ontwikkelen, hoef je de repository niet te klonen.

Voor wie is dit project nuttig

slides-grab is geweldig voor ontwikkelaars, oprichters en technische leiders die genoeg hebben van urenlang uitlijnen van blokken in grafische editors.

De belangrijkste voordelen van het hulpmiddel zijn autonomie en pinpoint context bij het werken met LLM's. Je houdt de hele presentatie in Git als leesbare HTML, je bent niet afhankelijk van externe SaaS-platforms, en je kunt eenvoudig bewerkingen maken via spraak of muis.

De nadelen zijn de imperfecte PPTX-export en de afhankelijkheid van de ingebouwde beeldgeneratie van niet-publieke Codex-eindpunten, die in de loop van de tijd kunnen veranderen. Desondanks ziet het project er voor het samenstellen van nette dia's met volgende export naar PDF uit als een uiterst praktische oplossing.