83.3K+Scarica
Vai alla guida all’uso
frontend-slidesdi Zara Zhang

Frontend Slides Skill.

Una skill per Claude Code e Codex per PPT e slide deck: presentazioni HTML ricche di animazioni da zero o convertite da file PowerPoint.

  • Presentations
  • Slide HTML
Scarica OpenDesignGuida all'uso
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 28.057 caratteri in tutto

01 Cosa fa

Cosa fa la skill frontend-slides in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Frontend Slides crea presentazioni HTML ricche di animazioni e senza dipendenze, che funzionano interamente nel browser, create da zero oppure convertite da un file .pptx. È pensata per chi non è designer e scopre la propria estetica guardando, non scegliendo tra descrizioni astratte: genera tre anteprime di stile a slide singola (un preset sicuro, almeno un template audace e una scelta a sorpresa) e lascia che l'utente reagisca visivamente.

Quanto testo contiene un deck è determinato da una scelta di densità tra low-density, guidato dal relatore, e high-density, orientato alla lettura. Ogni deck viene creato all'interno di un palcoscenico fisso 1920x1080 scalato uniformemente al viewport, e la consegna può concludersi con un URL live su Vercel o un'esportazione PDF.

Che cosa produce

  • Una presentazione HTML autonoma con tutto lo stile e lo scripting inline.
  • Tre file temporanei di anteprima stile (style-a.html, style-b.html, style-c.html) che vengono eliminati al momento della consegna.
  • Opzionalmente un URL live su Vercel per condividere il deck via SMS, Slack o email, visualizzabile su qualsiasi dispositivo.
  • Opzionalmente un PDF per email, Slack o stampa, prodotto catturando uno screenshot di ogni slide e combinandoli.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Rilevare la Modalità

    La skill decide prima se il lavoro è un nuovo deck creato da zero, una conversione .pptx o un miglioramento di una presentazione HTML esistente, e applica il percorso di fase corrispondente.

  2. 02
    Porre le Domande di Discovery in Un Unico Passaggio

    Scopo, lunghezza, prontezza dei contenuti e densità vengono richiesti insieme, utilizzando un'interfaccia nativa per domande strutturate quando l'ambiente ne dispone, così l'utente compila tutto in una volta.

  3. 03
    Generare Tre Anteprime di Stile

    Invece di chiedere all'utente di indicare uno stile, la skill genera tre anteprime di titolo a slide singola, le apre automaticamente e chiede quale preferisca (o se vuole mescolare elementi).

  4. 04
    Generare il Deck a File Singolo

    La presentazione completa viene scritta come un unico file HTML che integra inline l'intero viewport-base.css obbligatorio più commenti sezione per sezione, utilizzando la scelta di densità e la ricetta di stile selezionata.

  5. 05
    Convertire un File PowerPoint

    Per una fonte .pptx lo script Python incluso estrae il contenuto, l'utente confermata titoli, riepiloghi e conteggio delle immagini, e solo dopo avvengono la ricerca dello stile e la generazione dell'HTML.

  6. 06
    Consegnare, Poi Offrire la Condivisione

    I file di anteprima vengono eliminati, il deck viene aperto nel browser e all'utente vengono spiegate la navigazione, le variabili CSS, i font, la classe .reveal e la modifica inline, prima di offrire il deployment o l'esportazione in PDF.

02 Trova la tua applicazione

Quando Usare la Skill frontend-slides

Usa la skill frontend-slides in Claude Code o Codex quando il lavoro riguarda presentazioni PPT e slide decks di questo tipo. Idoneità e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

  • Chiunque desideri slide realizzate per un talk o un pitch, oppure un PPT/PPTX esistente trasformato in slide web.
  • Persone non designer che non sanno indicare una preferenza visiva ma sanno reagire a due o tre opzioni renderizzate.
  • Chi parte da un file PowerPoint che necessita di un nuovo stile piuttosto che di una nuova stesura.
  • Il miglioramento di un deck HTML già esistente, dove aggiungere contenuti rischia di rompere l'adattamento a stage fisso.
  • Deck che verranno visualizzati su telefoni, dove uno stage 16:9 con letterbox è accettabile ma non si desidera un layout specifico per telefono.

Conosci i limiti

  • Deck il cui layout deve adattarsi al dispositivo di visualizzazione; il contenuto delle slide non viene mai riorganizzato per adattarsi a uno schermo.
  • Aspettarsi che un'esportazione in PDF mantenga movimento o interattività; si tratta di uno snapshot statico.
  • Esportare HTML creato esternamente le cui slide usano un nome di classe diverso da .slide, il che fa sì che lo script di esportazione non trovi nulla.

Cosa fornire

  • ScopoL'occasione guida la corrispondenza dei preset e il design wildcard; le opzioni offerte sono un pitch deck, un tutorial didattico, un talk per conferenza o una presentazione interna.
  • LunghezzaIl numero approssimativo di slide, suddiviso in breve, medio o lungo, stabilisce quante slide di sezione e di contenuto può avere il deck.
  • Contenuto esistenteL'utente indica se tutto il contenuto è pronto, se ci sono solo note approssimative o solo un argomento, e condivide il materiale affinché il deck venga costruito a partire da esso.
  • Modalità di densitàUn'unica scelta iniziale tra bassa densità orientata al relatore e alta densità orientata alla lettura, memorizzata e applicata al numero di slide, alla scala tipografica e al layout in tutto il deck.
  • Cartella immagini (opzionale)Le immagini vengono valutate una per una per usabilità e colori dominanti, e la scaletta viene co-progettata attorno a esse piuttosto che pianificata prima.

03 Dentro la skill

Regole che la Skill frontend-slides Fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Zero Dipendenze, Un Solo File

    I deck sono singoli file HTML con CSS e JS inline, quindi la skill non deve ricorrere a npm, a un bundler o a strumenti di build.

  2. Non Riorganizzare Mai in Base al Dispositivo

    Lo stage 1920x1080 si scala nel suo insieme e può avere letterbox sui telefoni; i breakpoint responsive non devono essere usati per riorganizzare il contenuto delle slide.

  3. Cambiare Slide con Visibility, Non Display

    Il passaggio tra slide usa .active / .visible con visibility, opacity e pointer-events; display: none e display: block sono vietati perché classi di layout successive possono sovrascriverli e mostrare tutte le slide contemporaneamente.

  4. Negare le Funzioni CSS con Calc

    La negazione diretta di clamp(), min() o max() viene ignorata silenziosamente, quindi la skill deve racchiuderla come calc(-1 * clamp(...)).

  5. Font da Fontshare o Google Fonts

    I font di sistema non vengono mai utilizzati, e la sezione dedicata all'estetica indica Inter, Roboto e Arial come famiglie abusate da evitare.

  6. Nessun Nome di Template nella Slide

    I nomi di template e slug vivono solo nel messaggio all'utente, senza mai essere renderizzati nella preview o nella slide stessa, insieme ad altro testo interno di workflow.

  7. Dividere Invece di Ridurre

    Scorrimento, overflow, pannelli sovrapposti e testo sotto una dimensione di lettura confortevole sono violazioni di base; il contenuto che supera il limite di densità diventa più slide.

  8. Leggere preview.md Prima di design.md

    I template bold vengono selezionati dall'indice di selezione e letti a livello di preview.md; il design.md completo di un template viene caricato solo nella Fase 3 dopo che l'utente lo sceglie.

04 Mettila al lavoro

Installa frontend-slides in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi frontend-slides a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Forma generica della CLI skills per SKILL.md; il repository può documentare un proprio percorso.

Assegna allo skill un primo compito PPT e presentazioni

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Dopo qualsiasi modifica, verificare che lo stage sia ancora in 16:9 senza testo che fuoriesca dalla propria card, nessun pannello sovrapposto, e screenshot che risultino corretti a 1280x720 più un viewport telefono.
  • Valutare overflow e sovrapposizioni dagli screenshot del browser renderizzati piuttosto che dal codice, perché i pannelli griglia possono coprirsi visivamente a vicenda.
  • Leggere il testo visibile di ogni preview prima di apriria, e correggere se qualche metadato interno è finito sulla slide.
  • Dopo la pubblicazione, aprire l'URL live e verificare che ogni immagine referenziata si carichi effettivamente.

In OpenDesign frontend-slides è integrata: Plugins → Skills, selezionarla nella barra in alto.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Branch main
File della skill
SKILL.md Checksum del contenuto registrato alla verifica; commit 9906a34
License
MIT Da LICENSE.
Stelle del repository
29.255 Snapshot GitHub preso il 2026-09-14 per l'intero repository zarazhangrui/frontend-slides. Non è una valutazione o un conteggio di utilizzo per frontend-slides.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Principi FondamentaliZero dipendenze, preview show-don't-tell, design distintivo, divulgazione progressiva e lo stage fisso 16:9 non negoziabile.
  2. Estetica del DesignIndicazioni su tipografia, colore, movimento e sfondo mirate a evitare tipografie e palette generiche da AI slop.
  3. Regole dello Stage FissoInvarianti CSS: canvas 1920x1080, switching .active/.visible, clamp solo fuori dallo stage, supporto reduced-motion.
  4. Fase 0: Rilevamento ModalitàClassifica la richiesta come nuovo deck, conversione PPT o miglioramento, con regole di modifica per i file esistenti.
  5. Fase 1: Scoperta del Contenuto (Nuove Presentazioni)Chiede insieme scopo, lunghezza, prontezza del contenuto e densità, poi valuta qualsiasi cartella di immagini fornita.
  6. Fase 2: Scoperta dello StileGenera tre preview da preset sicuro, template bold e wildcard secondo regole rigorose di autenticità della preview.
  7. Fase 3: Generazione della PresentazioneApplica la scelta di densità e la ricetta di stile selezionata, legge i file di supporto, produce un file HTML a stage fisso.
  8. Fase 4: Conversione PPTEstrae il contenuto .pptx con uno script Python, lo conferma con l'utente, poi lo convertei nello stile scelto.
  9. Fase 5: ConsegnaElimina le preview, apre il deck, e riassume dettagli del file, navigazione, punti di personalizzazione e modifica inline.
  10. Fase 6: Condivisione ed Esportazione (Opzione
Descrizione della skill
"Crea presentazioni HTML straordinarie e ricche di animazioni da zero o convertendo file PowerPoint. Da usare quando l'utente vuole costruire una presentazione, convertire un PPT/PPTX in web o creare slide per un intervento o una presentazione. Aiuta chi non è designer a scoprire la propria estetica attraverso l'esplorazione visiva piuttosto che scelte astratte."

Descrizione front-matter da SKILL.md. Il file completo contiene circa 28.057 caratteri. Leggi il file completo su GitHub.

Frontend Slides

Esegui frontend-slides su un PPT Reale e un Compito di Slide Deck.

Lo skill frontend-slides è incluso in OpenDesign. Scarica l'app, seleziona lo skill in Plugins → Skills, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides