OpenSlide：让AI Agent写React代码做PPT的开源框架

传统AI幻灯片的困境

用AI做PPT，大多数人的体验大同小异：输入一段描述，等AI吐出一堆要点列表配上渐变色背景，看起来还行，但离专业水准差得远。市面上大部分AI幻灯片工具的产出，可以用两个字概括——"凑合"。

问题的根源在于，这些工具试图让AI在受限的模板系统里做设计决策，而AI真正擅长的其实是写代码。传统AI幻灯片工具（如Gamma、Beautiful.ai、Tome等）通常采用模板驱动的方式工作：AI在预定义的布局模板中填充内容，设计决策被限制在有限的参数空间内（如字体大小、颜色方案、布局网格）。这种方式的根本问题在于，模板系统的表达能力是有限的——它本质上是一个离散的选择空间，而非连续的创作空间。相比之下，代码（尤其是React+CSS）提供了几乎无限的视觉表达能力，而现代大语言模型在代码生成方面的能力已经远超在受限参数空间中做设计决策的能力。

OpenSlide正是基于这个洞察诞生的开源项目，它的核心思路很简单：与其让AI生成PPT文件或Markdown，不如让AI直接写React代码。

OpenSlide的核心设计理念

幻灯片即代码

OpenSlide的定位非常明确——为Agent而生的幻灯片框架。它把幻灯片创作重新定义为一个编程任务：每一页幻灯片就是一个完整的React组件，可以使用Tailwind CSS、Shadcn UI、Framer Motion等任何React生态库。

这些技术栈的选择并非随意。Tailwind CSS是一个实用优先的CSS框架，通过预定义的原子类名实现样式编写，非常适合AI生成——因为AI只需组合类名而非编写复杂的CSS规则。Shadcn UI是一套基于Radix UI的高质量组件库，提供了按钮、卡片、图表等开箱即用的UI组件。Framer Motion则是React生态中最流行的动画库，支持声明式动画定义。这三者的组合意味着AI可以生成带有专业级排版、精美组件和流畅动画的幻灯片，而这些在传统PPT工具中往往需要大量手动调整。

这不是一个受限的模板系统，而是拥有完整React能力的创作环境。当AI越来越擅长编程时，把幻灯片当作编程任务来处理，反而能产出比传统工具更专业的结果。

固定画布的聪明选择

从技术角度看，OpenSlide采用固定1920×1080画布，这个设计选择非常聪明。1920×1080是标准的Full HD分辨率，也是绝大多数投影仪和显示器的原生比例（16:9）。选择固定画布而非响应式设计，本质上是在降低AI的决策复杂度——响应式布局需要考虑断点、弹性盒模型、相对单位等大量变量，而固定画布下AI可以使用绝对定位和固定像素值精确控制每个元素的位置。

Agent不需要处理响应式布局的复杂性，可以专注在内容和视觉表达上。项目内置一份叫"Slide Offering"的技术规范，定义了字号体系、调色板和布局规则，为AI生成高质量幻灯片提供了明确的约束条件。这份规范类似于企业设计系统（Design System）中的Design Token概念，它将字号、颜色、间距等设计决策预先编码为规则，让AI在明确的约束空间内创作，避免了"自由度过高导致质量不稳定"的问题。

OpenSlide关键功能解析

Agent原生创作

项目自带4个Claude Code专用技能，最核心的是"Create Slide"——你给一句话描述，它就端到端生成整套幻灯片。兼容所有主流编程Agent，包括Claude Code、Codex、Cursor等。

Claude Code是Anthropic推出的命令行AI编程工具，支持通过自定义命令（Custom Commands）扩展能力。OpenSlide的4个专用技能本质上是预定义的提示词模板+工具链配置，告诉Claude Code如何读取项目结构、理解Slide Offering规范、生成符合约束的React组件代码。"Create Slide"技能的端到端流程包括：解析用户意图→规划幻灯片结构→逐页生成React组件→注册到路由系统。这种Agent原生设计意味着AI不是事后被接入的，而是从第一天就作为主要用户来设计整个系统架构。

浏览器内审查器

这是一个非常巧妙的交互设计。你可以在浏览器预览中直接对元素添加评论，比如"把这个标题变小，换成红色"。评论会保存到源码里，运行Apply Comments命令后，Agent一次性帮你改完。这形成了一个极其顺畅的工作循环：预览→评论→修改→再预览。

这个功能的灵感来自设计工具中的批注功能（如Figma的Comment），但实现方式完全不同。评论被保存为源码中的特殊注释或元数据，这意味着它们是版本控制友好的——可以通过Git追踪每次修改请求。Apply Comments命令触发时，Agent会读取所有未处理的评论，理解上下文（哪个元素、什么修改），然后批量修改对应的React代码。这种"评论驱动开发"模式将设计反馈直接转化为代码修改指令，消除了传统工作流中设计师→开发者的沟通损耗。

素材管理与演示模式

• 素材管理器：集成了SVGL品牌Logo目录，搜索品牌图标直接拖进来用
• 专业演示模式：支持演讲者视图、计时器，真正为上台演讲设计
• 导出功能：一条命令导出为静态HTML站点或PDF，分享完全不需要服务器

OpenSlide完整工作流

整个创作流程分为四步：

1. 自然语言描述需求：比如"帮我做一份关于机器学习的技术分享"，Agent会先读取Slide Offering技术规范
2. Agent生成React组件：根据规范编写每一页幻灯片的React代码
3. Vite热更新实时预览：看到效果不满意，直接点元素写评论
4. Agent批量应用修改：循环迭代直到满意

整个过程不需要打开任何设计软件，对于日常使用AI编程工具的开发者来说，这个工作流非常自然。

技术架构与部署方式

项目采用PNPM + TurboRepo的MonoRepo结构，开发体验良好。PNPM是一个高效的Node.js包管理器，通过硬链接和内容寻址存储大幅减少磁盘占用和安装时间。TurboRepo是Vercel开发的高性能构建系统，专为MonoRepo（单一代码仓库管理多个包/应用）设计，支持增量构建、远程缓存和并行任务执行。OpenSlide采用这种架构意味着CLI工具、核心框架、UI组件库等可以在同一仓库中协同开发，同时保持清晰的包边界。

安装只需一行命令：

npx @openslide/cli init my-slide

进入项目目录后运行pnpm dev启动开发服务器，Vite作为底层构建工具提供毫秒级的热模块替换（HMR），让每次代码修改都能即时反映在预览中，这对于AI迭代生成幻灯片的工作流至关重要。然后告诉AI Agent想做什么幻灯片即可。

构建产物是纯静态文件，可以一键部署到Vercel、Cloudflare Pages等任何静态托管服务，零服务器成本。项目采用MIT开源协议，完全免费。

社区反响与发展前景

作者是来自台湾的全栈开发者何一伟，同时也是Raycast大使。项目上线不到两周就获得了2800多个GitHub Stars，说明社区对"Agent原生幻灯片"这个方向非常认可。

OpenSlide的出现反映了一个更大的行业趋势：工具设计正在从"人类优先"转向"Agent优先"。传统软件的UI/UX是为人类的视觉感知和手动操作设计的，而Agent原生工具则将API、代码接口和结构化规范作为第一公民。类似的趋势也出现在其他领域：Devin（AI软件工程师）、Browser Use（AI浏览器操作）、MCP协议（Model Context Protocol，让AI Agent调用外部工具的标准协议）等。这预示着未来可能出现大量专门为AI Agent设计的工具链，人类的角色从"操作者"转变为"审阅者"和"决策者"。

OpenSlide代表了一种新的思路：幻灯片不是给会写Markdown的人用的，而是给会写代码的AI Agent用的。对于经常需要做技术分享、且日常使用AI编程工具的开发者来说，这个项目值得一试。

核心要点

• OpenSlide让AI Agent直接写React代码生成幻灯片，而非受限于模板系统
• 采用固定1920×1080画布和技术规范约束，让AI专注内容而非响应式布局
• 浏览器内审查器实现预览→评论→修改的顺畅迭代工作流
• 兼容Claude Code、Codex、Cursor等主流AI编程工具
• 项目上线不到两周获2800+ GitHub Stars，MIT协议完全免费