Rogner et modifier — Comment slides-grab simplifie la mise en page de présentations avec l'IA

Créer des présentations est un casse-tête traditionnel pour la plupart des ingénieurs. Quand vous devez assembler rapidement un pitch, une présentation pour un meetup ou un rapport trimestriel, vous avez deux options. La première est de se battre avec des éditeurs lourds comme PowerPoint ou Figma. La seconde est de demander à un LLM de générer du code HTML avec des diapositives.

La seconde option semble attractive, mais elle atteint rapidement une impasse pour les tâches courantes. Si vous devez modifier la police d'un titre ou décaler une image de quelques pixels vers la gauche, vous devez soit chercher manuellement le bon élément <div>, soit rédiger une autre longue instruction. En réponse, le réseau neuronal réécrit souvent toute la diapositive et perturbe la mise en page des blocs adjacents.

Le projet slides-grab propose une approche différente. C'est un outil local qui intègre un éditeur visuel dans le navigateur, un validateur de mise en page et un wrapper pour connecter des agents IA.

En quoi consiste le projet

Les auteurs de slides-grab partent d'un constat simple : les modèles de langage excellent dans la mise en page de HTML et CSS pur. Le problème principal n'est pas la génération de code, mais la transmission du contexte. Comment expliquer au modèle quel élément sur la diapositive vous souhaitez modifier ?

L'outil résout ce problème grâce à la sélection de zones. Vous lancez un éditeur local, visualisez la diapositive directement dans le navigateur, et sélectionnez le bloc souhaité avec votre souris. L'éditeur construit un contexte précis pour l'agent IA — par exemple, pour Claude Code ou OpenAI Codex. Vous écrivez : « assombrit ce bloc et ajoute du padding », et l'agent modifie uniquement le fragment HTML correspondant.

Les petites modifications comme les fautes de frappe ou la taille du texte peuvent être effectuées directement dans le navigateur. Vous n'avez pas besoin de déplacer des balises dans l'IDE.

Comment le travail avec les diapositives est organisé

Toutes les diapositives sont stockées dans le répertoire de travail sous forme de fichiers séparés slide-01.html, slide-02.html, etc. Les fichiers médias se trouvent à proximité dans le dossier assets/. Vous n'êtes pas lié à des formats propriétaires ni à des services cloud fermés. Si l'outil cesse d'être maintenu demain, vous conserverez du code web classique.

Voici à quoi ressemble le flux de travail principal avec le projet :

1. Génération de la structure et du style. L'agent crée un plan de présentation et applique l'un des thèmes prêts à l'emploi. L'outil est livré avec un catalogue de 95 systèmes de conception. Vous pouvez sélectionner le bon via la visionneuse de galerie locale slides-grab preview-styles.
2. Édition visuelle. Vous ouvrez l'interface via slides-grab edit, corrigez les fautes manuellement, ou demandez à l'agent de modifier un fragment sélectionné spécifique.
3. Contrôle qualité. La commande slides-grab validate lance Chromium via Playwright en arrière-plan. Le linter vérifie les chemins d'images cassés, les liens externes ou les propriétés CSS erronées.
4. Export. Le résultat peut être compilé en PDF, images ou présentation PowerPoint.

Ressources locales et gestion des médias

Généralement, la création de présentations bute sur un goulot d'étranglement lors de la recherche d'illustrations et de diagrammes adaptés. Dans slides-grab, ces scénarios sont gérés directement depuis la console.

Pour la génération d'images, l'utilitaire utilise par défaut le module codex-imagen. Il exploite l'autorisation locale de Codex CLI, vous n'avez donc même pas besoin de spécifier une clé API OpenAI séparée. Exécutez simplement la commande dans le terminal :

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

Le fichier généré est enregistré directement dans le dossier assets/, et la console renvoie un chemin relatif facile à insérer dans le HTML. Si vous avez besoin de fournisseurs tiers, vous pouvez basculer vers l'API OpenAI standard ou Google Gemini.

La situation avec les vidéos et les diagrammes est similaire :

• La commande slides-grab fetch-video télécharge la vidéo de YouTube via yt-dlp et l'enregistre localement.
• La commande slides-grab tldraw convertit les diagrammes du format .tldr en image SVG propre, ajustée à la taille de la diapositive.

Sous le capot et nuances de l'export

L'outil est écrit en JavaScript et fonctionne sur Node.js version 20 et supérieure. Le côté serveur démarre un serveur local pour l'éditeur et communique avec le navigateur via Playwright.

L'importation de présentations d'autres personnes est implémentée de manière intéressante. Si vous avez un fichier PPTX d'entreprise prêt ou des directives de marque, la commande slides-grab import-template le décompose en couleurs, polices et grilles, formant une configuration JSON. Ensuite, l'agent IA utilise ces données comme référence pour les nouvelles diapositives.

Quant à l'export, l'option principale et la plus fiable est le PDF ou PNG. La commande slides-grab pdf rastérise les images en haute résolution 4K par défaut, préservant la mise en page d'origine au pixel près. Pour les PDF avec texte consultable, il y a le flag --mode print.

Cependant, vous devez aborder les exports vers PPTX et Figma avec prudence. Dans la documentation, les développeurs indiquent honnêtement que la conversion PowerPoint est une fonctionnalité expérimentale. Lors de la sélection du moteur de texte (--engine text), l'outil tente de traduire l'arbre DOM en éléments PowerPoint natifs, mais sur des grilles CSS complexes, la mise en page peut se casser.

Comment l'essayer

Pour l'installation, installez simplement le package via npm et ajoutez le navigateur Chromium pour Playwright :

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

La commande install-skills enregistre les capacités de l'utilitaire auprès de vos agents Claude Code ou Codex locaux. Pour développer votre propre présentation, vous n'avez pas besoin de cloner le dépôt.

À qui ce projet sera utile

slides-grab est idéal pour les développeurs, fondateurs et responsables techniques qui en ont marre de passer des heures à aligner des blocs dans des éditeurs graphiques.

Les principaux avantages de l'outil sont l'autonomie et le contexte précis lors du travail avec les LLM. Vous conservez l'ensemble de la présentation dans Git sous forme de HTML lisible, ne dépendez pas de plateformes SaaS tierces, et pouvez facilement effectuer des modifications à la voix ou à la souris.

Les inconvénients sont un export PPTX imparfait et la dépendance de la génération d'images intégrée aux endpoints Codex non publics, susceptibles de changer avec le temps. Néanmoins, pour assembler des diapositives soignées avec export ultérieur vers PDF, le projet ressemble à une solution extrêmement pratique.