AVW-7：程序化生成三剑客——视频、PPT 幻灯片、Web 网站的代码驱动方案全收录

2026年6月7日 01:00 CST 程序化生成视频生成PPT生成SlidevMarpreveal.js网站生成低代码StreamlitGradio

AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | 交互叙事 | AI 生成 UI | 视频与动效 | AVW-7 程序化三剑客 ← 本文 | 中国生态 | 视觉指南

# 程序化生成三剑客 ## 视频生成 - Remotion / Motion Canvas - Revideo / Editly - FFmpeg + Puppeteer ## PPT / 幻灯片 - Slidev / Marp - reveal.js / impress.js - Spectacle / MDX Deck - PptxGenJS / nodeppt ## 网站生成 - GrapesJS / Puck / Plasmic - Appsmith / ToolJet / Budibase - AMIS / LowCode Engine - Streamlit / Gradio / Reflex

第一剑：程序化 PPT/幻灯片生成

把 Markdown/代码/JSX 变成演示文稿。

Slidev — 开发者的幻灯片工具

官网: sli.dev
GitHub: slidevjs/slidev · 34k+ stars
许可: MIT
技术: Vite + Vue + Markdown
特色: 代码高亮、实时预览、导出 PDF/PNG/SPA、内置演讲录制

---
theme: seriph
---

# AI 动态视觉 Web
程序化生成的三剑客

---

## 第一剑：视频生成
- Remotion：React 写视频
- Motion Canvas：数学动画

Slidev vs PowerPoint: Slidev 是 Markdown 驱动 → 版本控制友好，LLM 可直接生成。内置的代码高亮和实时执行让技术分享远优于 PPT。

Marp — Markdown 演示文稿生态

官网: marp.app
GitHub: marp-team/marp
核心差异化: 能导出为真正的 .pptx 文件！

marp slides.md -o output.pptx  # 导出 PowerPoint

Marp vs Slidev: Slidev 偏"现场演示"，Marp 偏"文档导出"。Marp 作为 VS Code 插件生态的一部分，使用门槛极低。

reveal.js — HTML 演示框架的鼻祖

官网: revealjs.com
GitHub: hakimel/reveal.js · 68k+ stars
许可: MIT
特色: 3D 过渡（cube、page、concave）、演讲者笔记、插件生态（MathJax、highlight.js）

Spectacle — React 演示库

官网: formidable.com/open-source/spectacle
GitHub: FormidableLabs/spectacle · 9.5k+ stars
特色: JSX 写幻灯片，能 live demo React 组件

PptxGenJS — 纯 JavaScript 生成 PPTX

GitHub: gitbrent/PptxGenJS · 3k+ stars
核心场景: LLM 输出 PptxGenJS 代码 → 自动生成 .pptx 文件

const pptx = new PptxGenJS()
const slide = pptx.addSlide()
slide.addText('AI 生成的 PPT', { x: 1, y: 0.5, fontSize: 24 })
pptx.writeFile({ fileName: 'output.pptx' })

其他幻灯片工具

工具	链接	特色
impress.js	impress.js.org · 37k★	Prezi 风格 3D 飞行
MDX Deck	github.com/jxnblk/mdx-deck · 11k★	React + MDX
nodeppt	github.com/ksky521/nodeppt	国内生态，中文友好

第二剑：程序化网站生成

可视化编辑器

工具	官网	GitHub	Stars	一句话
GrapesJS	grapesjs.com	GrapesJS/grapesjs	23k+	开源 Web Builder 框架
Puck	puckeditor.com	measuredco/puck	6k+	React 可视化编辑器
Plasmic	plasmic.app	plasmicapp/plasmic	5k+	React 可视化构建器
Webstudio	webstudio.is	webstudio-is/webstudio	5k+	开源 Webflow 替代

低代码平台

工具	官网	GitHub	Stars	一句话
Appsmith	appsmith.com	appsmithorg/appsmith	35k+	低代码后台管理面板
ToolJet	tooljet.com	ToolJet/ToolJet	34k+	AI 驱动的企业应用生成
Budibase	budibase.com	Budibase/budibase	23k+	AI agents + 自动化 + 应用
ILLA Builder	illacloud.com	illacloud/illa-builder	12k+	开源 Retool 替代
AMIS	aisuda.bce.baidu.com/amis	baidu/amis	17k+	百度，JSON 配置生成页面
LowCode Engine	lowcode-engine.cn	alibaba/lowcode-engine	15k+	阿里，可扩展低代码引擎
Lowdefy	lowdefy.com	lowdefy/lowdefy	2k+	YAML 配置驱动
SQLPage	sql-page.com	sqlpage/SQLPage	2k+	纯 SQL 构建数据应用

Python 系 Web UI（数据科学家友好）

工具	官网	GitHub	Stars	一句话
Streamlit	streamlit.io	streamlit/streamlit	37k+	最快的 Python 数据应用构建
Gradio	gradio.app	gradio-app/gradio	36k+	ML 模型 Web 界面
Reflex	reflex.dev	reflex-dev/reflex	21k+	纯 Python Web 应用框架
NiceGUI	nicegui.io	zauberzeug/nicegui	11k+	最简单的 Python Web UI
Mesop	google.github.io/mesop	mesop-dev/mesop	5k+	Google 出品，AI 应用框架

第三剑：程序化视频生成的底层组合

当 Remotion/Motion Canvas 的抽象层限制你的特殊需求时：

FFmpeg + Puppeteer 组合:

// Puppeteer 渲染 HTML/CSS/Canvas 到每一帧
for (let frame = 0; frame < totalFrames; frame++) {
  await page.screenshot({ path: `frame_${frame}.png` })
}
// FFmpeg 合成帧序列为视频
execSync(`ffmpeg -framerate 30 -i frame_%d.png output.mp4`)

三大领域决策总表

程序化 PPT：选什么

你的需求	首选
开发者技术分享	Slidev
导出 PPTX 给客户	PptxGenJS / Marp
AI 生成 PPT	PptxGenJS (LLM→代码) / Slidev (LLM→Markdown)
3D 炫酷演示	impress.js
React 技术栈	Spectacle

程序化网站：选什么

你的需求	首选
可视化拖拽建站	GrapesJS / Webstudio
React 项目加编辑器	Puck
内部工具/仪表盘	Appsmith
JSON 配置生成页面	AMIS
Python 数据应用	Streamlit
Python ML Demo	Gradio
Python 全栈应用	Reflex

下一篇：AVW-8 中国可视化与 UI 生态——ECharts、AntV、Ant Design 及 20+ 项目