deck-kit · Feature tour

Live slides agents can edit

This deck explains the kit it is built with. The app on screen is Pronto, a made-up food-delivery app.

deck-kit · example deck
Agenda

How it works

  1. Write
    • Edit deck.md
    • The watcher re-renders on save
  2. Review
    • "Updated" badges
    • Comments with C
  3. Illustrate
    • Mockups from a text spec
    • Numbered annotations
deck-kit · example deck
Mockups

Screens are text files, not screenshots

mockups/specs/home.md → mockups/render.sh → this PNG, frames and labels included.

deck-kit · example deck
Mockups

Zoom into the detail

deck-kit · example deck
On top of Marp

What the kit adds

  • Live preview On save The watcher re-renders the deck; changed slides get an "Updated" badge.
  • Mockups From a spec A few lines of text become a screenshot of a web app or a terminal.
  • Comments Press C Click any element; the note lands in comments.md.
deck-kit · example deck
Layouts

Every layout is one class

Class Use it for Written as
lead hero Title slide Title, subtitle, mockup image
agenda Sections Numbered list with sub-bullets
cards Features, themes One list item per card
backup-table Comparisons A plain Markdown table
mockup Product screens One image on a gradient panel

Set it per slide: <!-- _class: cards cols-3 --> above the slide content.

deck-kit · example deck
Mockups

Terminal screens too, same format

mockups/specs/review.md, without kind: web → a coding agent in the Pronto repo, same annotations.

deck-kit · example deck

Try it

Edit deck.md, save, reload. Press P for presenter view, ? for all shortcuts.

deck-kit · example deck

Speaker notes: This is how I build product decks with an agent: plain text in, reviewed slides out. - Everything here was written by an agent from short prompts. - The app on screen is made up: Pronto, a food-delivery app.

Speaker notes: Three steps, and I stay in control of each one. - I write or prompt, the agent drafts. - I review by pointing at the slide. - The agent draws the product screens too.

Speaker notes: The product screens are text files, not screenshots. - I describe the screen in a few lines; the image comes out with numbered callouts. - When the story changes, I change a line, not a Figma file.

Speaker notes: Zooming in keeps the audience oriented. - Same screen, closer: they see exactly where the detail lives.

Speaker notes: What the kit adds on top of plain Markdown slides. - Live preview: every save shows up, changed slides are flagged. - Mockups from a spec. - Comments: I click and type; the agent applies them.

Speaker notes: Every layout is one line in the file, so the agent can restyle a slide without touching the content.

Speaker notes: Same idea for terminal screens. - Useful when the product is a CLI or an agent.

Speaker notes: Try it: edit the file, save, and the deck updates. - P opens this presenter view, with these notes and a timer.