autopresenter

Local-first · agent-native · spec-driven

Brief in. On-brand everything out. Slides are one projection of a SceneGraph; the same source also targets video, GIF, and a landing page.

Slides today: cloud, siloed, drift

~100% cloud SaaS — your deck lives on a vendor's servers
Brand is a per-tool kit, not a portable spec you own
The output is a frozen file; change the brand and you re-do everything
Even Slidev — local-first and spec-driven — is slides-only and brand-per-deck; nothing makes one design system span deck + demo + site

One brief → one design system → many artifacts

Brief — business context: product, audience, goals, constraints
DesignSystem — design-system.md: color, type, layout + taglines, messaging, voice
Artifacts — slides · macOS demo · GIF · landing page, all projecting the same brand
Change a token or a tagline → every artifact re-derives, consistently

How this slide was made

deck.md + design-system.md
   │  parse  (remark-style: frontmatter + ::: directives)
   ▼
SceneGraph        ← canonical, target-agnostic IR
   │  project: slides  (narration → notes, {.step} → fragments)
   ▼
index.html        ← self-contained: theme + runtime inlined, deep-linkable, Cmd-P → PDF

autopresenter render deck.md --target slides -o dist/

The composition format

Paragraph → narration → presenter notes
Heading / list / code → on-screen
::: show → shown, never spoken
::: say → spoken, never shown
{.step} → click-to-reveal fragments

::: scene { id=growth, layout=stat }
# 30s
Render a 60-second deck in under thirty seconds.

::: show {.step}
- One source
- Three targets
:::
:::

A catalog, not raw CSS

Layouts — title · split · stat · quote · code · grid · feature
Transitions — cut · fade · slide · wipe · zoom
Components — chart · callout · timeline · terminal
Escape hatch — ::: html for anything else

The theme is data

"color": {
  "brand":  "#7c6cff",
  "accent": "#3ee6c0",
  "bg":     "#080a14"
}

Tokens → CSS variables for slides
Same tokens → Tailwind config for the landing page
Same tokens → overlay + grade for the demo video

Why not Slidev?

One of many — the same source also renders the video, GIF, and landing page; Slidev is slides-only
One brand, not per-deck — the deck inherits the generated design system every artifact shares
Validatable surface — a closed catalog checked before render, not open Vue/UnoCSS
Zero-dependency output — vanilla JS, one file, no framework, no Chromium to export
Agent-native — CLI with MCP parity; an agent authors brief → deck headlessly

0 cloud calls

Generated fully offline. One HTML file, zero runtime dependencies, no server to present. The local store stays the source of truth; the cloud tier is opt-in.

Built for agents and CI

# author or patch the brief, generate the system, render the deck
autopresenter design-system generate brief.md      # → design-system.md
autopresenter render deck.md --target slides -o dist/

# render emits a JSON report for the agent to self-check
{ "target": "slides", "scenes": 12, "fragments": 18, "output": "dist/.../index.html" }

Brief in. On-brand everything out.

Reproduce this deck: node src/cli.ts render examples/autopresenter/deck.md --target slides Press S for speaker notes, O for the overview, P to export a PDF.

autopresenter