OpenSlide: An Open-Source Framework That Lets AI Agents Write React Code to Create Presentations

The Dilemma of Traditional AI Slides

Using AI to make presentations — most people have a similar experience: type in a description, wait for the AI to spit out a bunch of bullet points with gradient backgrounds. It looks okay, but it's far from professional. The output of most AI slide tools on the market can be summed up in one word — "mediocre."

The root of the problem is that these tools try to make AI do design decisions within constrained template systems, when what AI is actually good at is writing code. Traditional AI slide tools (like Gamma, Beautiful.ai, Tome, etc.) typically work in a template-driven way: AI fills content into predefined layout templates, and design decisions are limited to a finite parameter space (font sizes, color schemes, layout grids). The fundamental issue with this approach is that template systems have limited expressive power — they're essentially a discrete choice space, not a continuous creative space. In contrast, code (especially React+CSS) provides virtually unlimited visual expressiveness, and modern large language models are far better at code generation than at making design decisions within constrained parameter spaces.

OpenSlide was born from this insight as an open-source project with a simple core idea: Instead of having AI generate PPT files or Markdown, let AI write React code directly.

OpenSlide's Core Design Philosophy

Slides as Code

OpenSlide's positioning is crystal clear — a slide framework built for Agents. It redefines slide creation as a programming task: each slide is a complete React component that can use any React ecosystem library like Tailwind CSS, Shadcn UI, Framer Motion, and more.

These technology choices aren't arbitrary. Tailwind CSS is a utility-first CSS framework that implements styling through predefined atomic class names, making it ideal for AI generation — because AI only needs to compose class names rather than write complex CSS rules. Shadcn UI is a high-quality component library based on Radix UI, providing ready-to-use UI components like buttons, cards, and charts. Framer Motion is the most popular animation library in the React ecosystem, supporting declarative animation definitions. The combination of these three means AI can generate slides with professional-grade typography, polished components, and smooth animations — things that typically require extensive manual tweaking in traditional PPT tools.

This isn't a constrained template system — it's a creative environment with full React capabilities. As AI gets better at programming, treating slides as a programming task actually produces more professional results than traditional tools.

The Smart Choice of a Fixed Canvas

From a technical perspective, OpenSlide uses a fixed 1920×1080 canvas — a very smart design choice. 1920×1080 is the standard Full HD resolution and the native aspect ratio (16:9) of the vast majority of projectors and displays. Choosing a fixed canvas over responsive design fundamentally reduces AI's decision complexity — responsive layouts require considering breakpoints, flexbox models, relative units, and numerous other variables, while a fixed canvas allows AI to use absolute positioning and fixed pixel values to precisely control every element's position.

Agents don't need to handle the complexity of responsive layouts and can focus on content and visual expression. The project includes a built-in technical specification called "Slide Offering" that defines a type scale system, color palette, and layout rules, providing clear constraints for AI to generate high-quality slides. This specification is similar to the Design Token concept in enterprise Design Systems — it pre-encodes design decisions like font sizes, colors, and spacing into rules, letting AI create within well-defined constraints and avoiding the "too much freedom leads to inconsistent quality" problem.

Key Features of OpenSlide

Agent-Native Creation

The project comes with 4 Claude Code-specific skills, the most important being "Create Slide" — you give a one-sentence description, and it generates an entire slide deck end-to-end. It's compatible with all major coding Agents, including Claude Code, Codex, Cursor, and more.

Claude Code is Anthropic's command-line AI programming tool that supports extending capabilities through Custom Commands. OpenSlide's 4 dedicated skills are essentially predefined prompt templates + toolchain configurations that tell Claude Code how to read the project structure, understand the Slide Offering specification, and generate React component code that meets the constraints. The "Create Slide" skill's end-to-end flow includes: parsing user intent → planning slide structure → generating React components page by page → registering to the routing system. This Agent-native design means AI wasn't bolted on after the fact — the entire system architecture was designed with AI as the primary user from day one.

In-Browser Inspector

This is a brilliantly designed interaction pattern. You can add comments directly to elements in the browser preview, such as "make this title smaller and change it to red." Comments are saved to the source code, and when you run the Apply Comments command, the Agent applies all changes at once. This creates an extremely smooth workflow loop: preview → comment → modify → preview again.

This feature draws inspiration from annotation features in design tools (like Figma's Comments), but the implementation is completely different. Comments are saved as special annotations or metadata in the source code, meaning they're version-control friendly — every modification request can be tracked through Git. When the Apply Comments command is triggered, the Agent reads all unprocessed comments, understands the context (which element, what modification), and batch-modifies the corresponding React code. This "comment-driven development" pattern directly converts design feedback into code modification instructions, eliminating the communication overhead in traditional designer → developer workflows.

Asset Management & Presentation Mode

• Asset Manager: Integrates the SVGL brand logo directory — search for brand icons and drag them right in
• Professional Presentation Mode: Supports speaker view and timer, truly designed for on-stage presentations
• Export: One command to export as a static HTML site or PDF — sharing requires no server at all

OpenSlide Complete Workflow

The entire creation process has four steps:

1. Describe your needs in natural language: For example, "Create a technical talk about machine learning" — the Agent first reads the Slide Offering technical specification
2. Agent generates React components: Writes React code for each slide page according to the specification
3. Vite hot-reload for real-time preview: If something doesn't look right, click on the element and write a comment
4. Agent batch-applies modifications: Iterate until you're satisfied

The entire process requires no design software. For developers who regularly use AI coding tools, this workflow feels completely natural.

Technical Architecture & Deployment

The project uses a PNPM + TurboRepo MonoRepo structure with a great developer experience. PNPM is an efficient Node.js package manager that significantly reduces disk usage and installation time through hard links and content-addressable storage. TurboRepo is a high-performance build system developed by Vercel, designed specifically for MonoRepos (managing multiple packages/applications in a single code repository), supporting incremental builds, remote caching, and parallel task execution. OpenSlide's adoption of this architecture means the CLI tool, core framework, UI component library, and more can be developed collaboratively in the same repository while maintaining clear package boundaries.

Installation requires just one command:

npx @openslide/cli init my-slide

After entering the project directory, run pnpm dev to start the development server. Vite serves as the underlying build tool providing millisecond-level Hot Module Replacement (HMR), ensuring every code change is instantly reflected in the preview — this is crucial for the AI iterative slide generation workflow. Then simply tell the AI Agent what slides you want to create.

The build output is pure static files that can be deployed with one click to Vercel, Cloudflare Pages, or any static hosting service — zero server cost. The project uses the MIT open-source license and is completely free.

Community Response & Future Prospects

The creator is Yi-Wei He, a full-stack developer from Taiwan who is also a Raycast Ambassador. The project gained over 2,800 GitHub Stars within two weeks of launch, indicating strong community validation of the "Agent-native slides" direction.

OpenSlide's emergence reflects a larger industry trend: tool design is shifting from "human-first" to "Agent-first." Traditional software UI/UX is designed for human visual perception and manual operation, while Agent-native tools treat APIs, code interfaces, and structured specifications as first-class citizens. Similar trends are appearing in other domains: Devin (AI software engineer), Browser Use (AI browser operation), MCP protocol (Model Context Protocol — a standard protocol for AI Agents to call external tools), and more. This foreshadows a future where a large number of toolchains designed specifically for AI Agents may emerge, with the human role shifting from "operator" to "reviewer" and "decision-maker."

OpenSlide represents a new paradigm: slides aren't for people who can write Markdown — they're for AI Agents that can write code. For developers who frequently give technical talks and regularly use AI coding tools, this project is worth trying.

Key Takeaways

• OpenSlide lets AI Agents write React code directly to generate slides, rather than being constrained by template systems
• Uses a fixed 1920×1080 canvas and technical specification constraints, letting AI focus on content rather than responsive layouts
• In-browser inspector enables a smooth preview → comment → modify iterative workflow
• Compatible with mainstream AI coding tools including Claude Code, Codex, and Cursor
• Gained 2,800+ GitHub Stars within two weeks of launch, completely free under MIT license