Ritaglia e modifica — Come slides-grab semplifica il layout delle presentazioni con l'AI

Creare presentazioni è tradizionalmente un mal di testa per la maggior parte degli ingegneri. Quando hai bisogno di assemblare rapidamente un pitch, un talk per un meetup o un report trimestrale, ti trovi davanti a due opzioni. La prima è combattere con editor pesanti come PowerPoint o Figma. La seconda è chiedere a un LLM di generare codice HTML con le slide.

La seconda strada sembra allettante, ma si scontra rapidamente con un vicolo cieco quando si tratta di attività di routine. Se devi cambiare il font in un titolo o spostare un'immagine di qualche pixel verso sinistra, devi cercare manualmente il tag giusto <div>, oppure scrivere un altro lungo prompt. In risposta, la rete neurale spesso riscrive l'intera slide e rompe il layout nei blocchi adiacenti.

Il progetto slides-grab offre una soluzione diversa. È uno strumento locale che combina un editor visivo nel browser, un validatore di layout e un wrapper per connettere agenti AI.

Di cosa tratta il progetto

Gli autori di slides-grab sono partiti da un fatto semplice: i modelli linguistici sono eccellenti nel creare layout con HTML e CSS puro. Il problema principale non è la generazione del codice, ma la trasmissione del contesto. Come spieghi al modello quale elemento sulla slide non ti piace?

Lo strumento risolve questo problema attraverso la selezione dell'area. Avvii un editor locale, vedi la slide direttamente nel browser e selezioni il blocco desiderato con il mouse. L'editor forma un contesto preciso per l'agente AI — ad esempio, per Claude Code o OpenAI Codex. Scrivi: "rendi questo blocco più scuro e aggiungi padding," e l'agente modifica solo lo snippet HTML corrispondente.

Modifiche minori come errori di battitura o dimensioni del testo possono essere fatte direttamente nel browser manualmente. Non dovrai spostare tag nell'IDE.

Come è organizzato il lavoro con le slide

Tutte le slide vengono salvate nella directory di lavoro come file separati slide-01.html, slide-02.html e così via. I file multimediali si trovano nella cartella assets/. Non sei legato a formati proprietari o servizi cloud chiusi. Se domani lo strumento smettesse di essere mantenuto, avrai comunque del normale codice web.

Ecco come appare il flusso di lavoro principale con il progetto:

1. Generazione della struttura e dello stile. L'agente crea un piano per la presentazione e applica uno dei temi pronti. Lo strumento include un catalogo di 95 sistemi di design. Puoi selezionare quello giusto attraverso il visualizzatore galleria locale slides-grab preview-styles.
2. Editing visivo. Apri l'interfaccia tramite slides-grab edit, correggi gli errori manualmente o chiedi all'agente di modificare un frammento specifico selezionato.
3. Controllo qualità. Il comando slides-grab validate avvia Chromium tramite Playwright in background. Il linter verifica la presenza di percorsi di immagini interrotti, link esterni o proprietà CSS errate.
4. Esportazione. Il risultato può essere compilato in PDF, immagini o una presentazione PowerPoint.

Risorse locali e gestione dei media

Di solito, la creazione di presentazioni incontra un collo di bottiglia quando si cercano illustrazioni e diagrammi adatti. In slides-grab, questi scenari vengono gestiti direttamente dalla console.

Per la generazione di immagini, l'utilità utilizza il modulo codex-imagen per impostazione predefinita. Sfrutta l'autorizzazione locale da Codex CLI, quindi non devi nemmeno specificare una chiave API OpenAI separata. Basta eseguire il comando nel terminale:

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

Il file generato viene salvato direttamente nella cartella assets/ e la console restituisce un percorso relativo che è facile inserire nell'HTML. Se hai bisogno di provider di terze parti, puoi passare all'API OpenAI standard o a Google Gemini.

La situazione con video e diagrammi è simile:

• Il comando slides-grab fetch-video scarica video da YouTube usando yt-dlp e lo salva localmente.
• Il comando slides-grab tldraw converte diagrammi dal formato .tldr in un'immagine SVG pulita, adattata alle dimensioni della slide.

Sotto il cofano e sfumature dell'esportazione

Lo strumento è scritto in JavaScript e funziona su Node.js versione 20 e successive. Il lato server avvia un server locale per l'editor e comunica con il browser tramite Playwright.

L'importazione di presentazioni di altre persone è implementata in modo interessante. Se hai un file PPTX aziendale pronto o linee guida del brand, il comando slides-grab import-template lo scompone in colori, font e griglie, formando una configurazione JSON. Dopodiché, l'agente AI usa questi dati come riferimento per le nuove slide.

Per quanto riguarda l'esportazione, l'opzione principale e più affidabile è PDF o PNG. Il comando slides-grab pdf rasterizza i frame in 4K ad alta risoluzione per impostazione predefinita, preservando il layout originale pixel per pixel. Per PDF con testo ricercabile, c'è il flag --mode print.

Tuttavia, dovresti affrontare le esportazioni in PPTX e Figma con cautela. Nella documentazione, gli sviluppatori etichettano onestamente la conversione PowerPoint come una funzionalità sperimentale. Quando selezioni il motore di testo (--engine text), lo strumento tenta di tradurre l'albero DOM in elementi nativi di PowerPoint, ma su griglie CSS complesse, il layout potrebbe rompersi.

Come provarlo

Per l'installazione, basta installare il pacchetto tramite npm e aggiungere il browser Chromium per Playwright:

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

Il comando install-skills registra le capacità dell'utilità con i tuoi agenti Claude Code o Codex locali. Per sviluppare la tua presentazione, non hai bisogno di clonare il repository.

A chi sarà utile questo progetto

slides-grab è ottimo per sviluppatori, fondatori e technical lead che sono stanchi di passare ore ad allineare blocchi negli editor grafici.

I principali vantaggi dello strumento sono l'autonomia e il contesto preciso quando si lavora con gli LLM. Mantieni l'intera presentazione in Git come HTML leggibile, non dipendi da piattaforme SaaS di terze parti e puoi apportare modifiche facilmente con la voce o il mouse.

Gli svantaggi sono l'esportazione PPTX imperfetta e la dipendenza della generazione di immagini integrata dagli endpoint Codex non pubblici, che potrebbero cambiare nel tempo. Tuttavia, per assemblare slide pulite con successiva esportazione in PDF, il progetto sembra una soluzione estremamente pratica.