Testing Open‑Slide: A React‑Based PPT Framework Built for AI Agents

Introduction

Open‑slide (github.com/1weiho/open-slide) is a slide framework built specifically for AI programming agents like Claude Code, Codex, and Cursor. Instead of a traditional markdown‑based tool, each slide is a 1920×1080 React component, giving agents full freedom to layout content using any React library.

Core Feature Breakdown

Agent‑native authoring : Four built‑in Claude Code skills – /create-slide (end‑to‑end deck generation), /slide-authoring (canvas, typography, palette specifications), /apply-comments (apply comment‑driven edits), and /create-theme (custom themes).

Browser inspector : In the dev server, clicking any element adds a comment (e.g., "make this red" or "shrink the headline") that is saved as @slide-comment. Running /apply-comments applies all comments in one pass.

Assets manager + svgl logo search : Each deck has an independent resource panel for images, videos, and fonts; brand logos can be searched via the integrated svgl service.

Professional presentation mode : Full‑screen playback with keyboard navigation, presenter mode showing current/next slide preview, speaker notes, and timer.

Export HTML & PDF : A single command exports a static site or print‑ready PDF without server dependencies.

Static deployment : The build output is pure static files that can be hosted on Vercel, Cloudflare Pages, Netlify, Zeabur, etc., requiring zero operations.

Installation

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

Usage Workflow

Step 1 – Let the agent design the slides : Feed the original markdown to Claude Code with the /slide-authoring skill. The agent writes ten 1920×1080 React components saved under slides/harness-2026/index.tsx. Each page is a React function exported as an array, rendered in order by the framework.

Step 2 – Build and preview :

pnpm build
pnpm preview

The preview runs on port 4173; opening /s/harness-2026 displays the generated deck.

Step 3 – Capture screenshots for the article : Since open‑slide does not provide batch PNG export, a custom Playwright script was written to enter presenter mode (press f) and capture each slide as a 3840×2160 PNG.

const { chromium } = require('playwright');
const browser = await chromium.launch();
const ctx = await browser.newContext({
  viewport: { width: 1920, height: 1080 },
  deviceScaleFactor: 2,
});
const page = await ctx.newPage();
await page.goto('http://localhost:4173/s/harness-2026');
await page.click('body');
await page.keyboard.press('f'); // enter present mode
for (let i = 1; i <= 10; i++) {
  if (i > 1) await page.keyboard.press('ArrowRight');
  await page.waitForTimeout(500);
  const handle = await page.$('div[style*="1920px"][style*="1080px"]');
  await handle.screenshot({ path: `png/page-${i}.png` });
}

A crucial tip is to press f to enter present mode; otherwise, keyboard events are intercepted by thumbnail components, causing repeated screenshots of the same slide.

Evaluation

Pros :

React + Tailwind provides far greater layout freedom than reveal.js or slidev.

The fixed 1920×1080 canvas eliminates responsive design concerns for agents.

The /slide-authoring skill defines typography, spacing, and margins, ensuring visual consistency.

Presenter and present modes are genuinely stage‑ready.

Static deployment to services like Cloudflare Pages is a one‑click operation.

Cons / Limitations :

Chinese font support requires manual asset addition and React imports.

No built‑in batch PNG export; users must script their own solution.

Requires basic React knowledge; non‑developers may find post‑generation tweaks confusing.

The ecosystem is still small; themes and templates are scarce.

Target Audience

Technical content creators, evangelists, and engineers who need to turn technical material into slides quickly.

Heavy users of Claude Code, Codex, or Cursor who want agents to produce decks directly.

Fans of the React ecosystem who wish to leverage Tailwind, shadcn, or framer‑motion for slide animations.

Not Suitable For

People who rely solely on GUI‑based PPT tools like Keynote.

Simple markdown‑only slide decks where slidev suffices.

Collaborative editing scenarios, as open‑slide is currently a local‑only tool.

One More Thing

The most striking insight is that a slide deck is essentially visual code, and agents excel at writing code. Generating slides via code is therefore far more reliable than asking an agent to produce a PPTX file.

This paradigm can extend to other visual artifacts: resumes as React code, posters as SVG/Canvas, and data visualizations as D3 or Vega specifications. Future content‑creation tools may follow the "natural language → agent → code → visual output" workflow, and open‑slide serves as an early, accurate exemplar.