RWB HTMLtoPPT

中文

RWB HTMLtoPPT 是一款功能强大的 VS Code 扩展，专为将 HTML/CSS 技术转化为精美演示文稿（PPT）而设计。

它不仅是一个项目脚手架，更是一个集成了 AI 全自动生成、可视化页面管理、智能代码辅助 以及 多格式导出 的完整生产力工具。生成的项目基于轻量级 Web 演示框架，支持酷炫的 CSS 动画、多种页面切换效果、主题系统、全屏演示和便携式部署。

插件预览图

如何获取？

直接在 VS Code 扩展中搜索 "RWB HTMLtoPPT"
在微软插件市场搜索：https://marketplace.visualstudio.com/
直接下载 release 然后到 VS Code 安装

第一部分：VS Code 插件功能指南

核心功能

1. 快速创建项目

通过侧边栏的 RWB Actions 面板，一键初始化标准的 HTML PPT 项目。

智能模板缓存：自动拉取最新 Git 模板并缓存到本地
环境自动配置：自动处理目录结构，开箱即用

RWB Actions 面板

2. AI 全自动生成 PPT

无需手动编写，让 AI 从零构建整套演示文稿！

大纲先行：输入主题，AI 先规划详细的大纲
批量并发生成：确认大纲后自动创建文件，并发生成每一页 HTML/CSS
可视化进度：实时显示每一页的构建状态
参考素材投喂：支持上传本地文件作为参考资料

AI 生成器

3. 可视化页面管理

像操作 PowerPoint 幻灯片缩略图一样管理 HTML 文件：

插入页面：支持在当前页之后插入新页，自动重命名后续文件
重置模板：一键将当前页重置为默认布局
排序与删除：支持上移、下移和删除，文件名索引自动维护

页面管理

4. 智能 AI 代码助手

针对单页内容的精细化修改，内置上下文感知 AI。

多模态支持：支持上传图片或文档
多任务处理：后台运行 + 任务列表
精准控制：支持随时"停止生成"

AI 助手

5. 双模式导出

A. 导出为 U 盘便携版 一键打包到 U 盘，生成无需安装环境的独立运行包。自动部署 Nginx，一键启动/关闭。

导出功能

B. 导出为 PPTX 文件 支持将 HTML 页面渲染并导出为标准 .pptx 文件。

导出PPT

扩展设置

设置项	类型	说明
`rwb.aiProviders`	Array	AI 服务商配置，支持多个，每项可指定 `format`（OpenAI / Claude / Gemini）
`rwb.language`	String	界面语言：`zh`（中文）或 `en`（English）
`rwb.pptBatchSize`	Number	批量生成并发数，默认 3
`rwb.AI-temperature`	Number	创造力 (0-2)
`rwb.AI-maxTokens`	Number	最大输出 Tokens
`rwb.enableAILog`	Boolean	是否记录 AI 对话日志
`rwb.enableAI`	Boolean	是否开启 AI 辅助功能

多模型配置

6. AI-core 集成与多 API 格式支持

本插件与 AI-core 插件深度集成，支持三种主流 API 格式：

OpenAI：兼容所有 OpenAI 格式 API（如 DeepSeek、通义千问等）
Claude：支持 Anthropic Claude API（/messages 端点）
Gemini：支持 Google Gemini API（/generateContent 端点）

在设置页面中，每个服务商可独立选择 API 格式。安装 AI-core 后，配置会自动双向同步。

7. 多语言支持

支持中文和 English 两种界面语言，在设置页面顶部切换。所有 UI 文本（侧边栏、AI 生成器、状态栏、提示消息）均会随语言切换即时更新。

8. 设置自动保存

设置页面的所有配置修改（服务商名称、URL、API Key、模型列表、API 格式）均在修改后 500ms 自动保存，无需手动点击保存按钮。

9. Claude Code 支持

项目模板内置 CLAUDE.md 文件，包含完整的项目上下文（结构说明、开发规范、动画系统、配置参考等）。Claude Code 等 AI 编程工具可直接读取该文件，开箱即用地理解和修改生成的 PPT 项目，无需额外配置。

快速开始

安装插件（需同时安装 AI-core 插件）
配置 AI 服务商（支持 OpenAI / Claude / Gemini 格式）
创建项目
生成内容（全自动 / 手动半自动）
预览与演示

第二部分：生成的 PPT 项目开发指南

项目目录结构

PPT/
├── index.html          # 入口核心控制文件
├── setting.json        # 全局配置
├── ppt_outline.json    # AI 大纲数据备份
├── PAGES/              # 每一页的 HTML 文件
├── CSS/                # 样式表
├── JavaScript/         # 脚本文件
└── https://github.com/23J1633/RWB-HTMLtoPPT/raw/main/static/             # 资源文件

运行注意事项

由于 CORS 限制，不能直接双击 index.html，必须使用 Live Server 或本地服务器。

Live Server

全局配置 (setting.json)

{
  "projectTitle": "演示文稿标题",
  "aspectRatio": "16:9",
  "clickToFlip": true,
  "transition": "fade",
  "theme": { "mode": "light", "primary": "#4CAF50" },
  "pages": ["page1.html", "page2.html"]
}

字段	说明
`projectTitle`	浏览器标签页标题
`aspectRatio`	PPT 比例，如 "16:9", "4:3"
`clickToFlip`	点击屏幕空白处翻页
`transition`	切换效果：`none` `fade` `slide-left` `slide-right` `zoom` `cover` `flip`
`theme.mode`	主题：`light` `dark` `high-contrast`
`theme.primary`	强调色（十六进制）
`pages`	页面播放顺序

页面切换效果

通过 setting.json 的 transition 字段选择切换效果：

效果值	视觉效果
`none`	无动画，直接切换
`fade`	淡入淡出（默认）
`slide-left`	新页面从右侧滑入
`slide-right`	新页面从左侧滑入
`zoom`	新页面从小变大展开
`cover`	新页面从底部覆盖上来
`flip`	3D 翻转效果

主题系统

通过 setting.json 的 theme 字段配置，或在演示时按快捷键切换：

主题模式	说明
`light`	浅色主题（默认）
`dark`	暗色主题，适合低光环境
`high-contrast`	高对比度主题，适合投影仪

theme.primary 可自定义强调色（如进度条、缩略图边框高亮颜色）
主题偏好自动保存到 localStorage

缩略图导航

按 T 键打开左侧缩略图导航面板：

毛玻璃效果：半透明背景 + 模糊滤镜，不遮挡当前页面
左侧滑入：面板从左侧滑出，不干扰演示内容
实时预览：每个缩略图渲染实际页面内容（默认 16:9 比例，需与 setting.json 中的 aspectRatio 保持一致）
当前页高亮：绿色边框标识当前所在页
点击跳转：点击任意缩略图直接跳转
媒体安全：自动移除视频/音频/iframe，防止嵌入媒体自动播放

比例同步：如修改了 setting.json 的 aspectRatio，需同步修改 main.js 中 openThumbnailPanel 的 THUMB_RATIO_W 和 THUMB_RATIO_H。

黑屏 / 白屏

按 B 键进入黑屏，W 键进入白屏：

屏幕中央显示 "Tea Time" 提示文字
底部显示 "按 Esc 返回" 提示
用于演示中途休息，避免用户误以为程序出错
按 Esc 或再次按 B / W 恢复

内置动画系统

动画类	效果
`anim-up`	从下方浮现
`anim-down`	从上方滑入
`anim-left`	从左侧滑入
`anim-right`	从右侧滑入
`anim-pop`	弹性缩放
`anim-blur`	模糊显现
`anim-float`	持续浮动
`anim-rotate`	旋转进入
`anim-bounce`	弹跳进入
`anim-stagger`	子元素逐个出现（添加到父容器）
`fade-in`	淡入

延时类：delay-1 ~ delay-5（0.2s ~ 1.4s）

自定义参数：通过 data-duration 和 data-delay 属性覆盖默认值：

<div class="anim-up" data-duration="0.6" data-delay="0.3">自定义</div>

交错动画（子元素逐个出现）：

<ul class="anim-stagger">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

性能优化

框架内置以下性能优化机制，无需额外配置：

页面缓存：已加载的页面 HTML 自动缓存到内存，回翻时直接读取
相邻页预加载：自动预加载当前页前后 2 页
图片懒加载：使用 data-src 属性的图片在进入视口时才加载

演示快捷键

按键	功能
→ / Space / Enter	下一页
←	上一页
Home / End	首页 / 末页
F	全屏
T	缩略图导航（左侧毛玻璃面板）
G	跳转到指定页
B	黑屏（Tea Time）
W	白屏（Tea Time）
?	快捷键帮助
Esc	关闭面板 / 退出黑屏白屏 / 退出全屏

常见问题

显示空白 → 必须用 Live Server
图片不显示 → 路径相对于根目录
修改配色 → setting.json 中的 theme 字段或 CSS/style.css 的 :root 变量

English

RWB HTMLtoPPT is a powerful VS Code extension designed to convert HTML/CSS into polished presentations (PPT).

It is more than a project scaffold — it's a complete productivity tool integrating AI-powered generation, visual page management, smart code assistance, and multi-format export. The generated project is based on a lightweight web presentation framework with CSS animations, multiple transition effects, theme system, fullscreen presentation, and portable deployment.

Preview

How to Get It?

Search "RWB HTMLtoPPT" in the VS Code Extensions marketplace
Search on the VS Marketplace: https://marketplace.visualstudio.com/
Download the release and install manually in VS Code

Part 1: VS Code Extension Guide

Core Features

1. Quick Project Initialization

One-click initialization via the RWB Actions sidebar panel.

Smart Template Caching: Automatically fetches and caches the latest Git template
Auto Environment Setup: Directory structure configured out of the box

RWB Actions Panel

2. AI Full Auto PPT Generation

Let AI build the entire presentation from scratch!

Outline First: Enter a topic, and AI plans a detailed outline
Batch Concurrent Generation: Auto-creates files and generates each page's HTML/CSS concurrently
Visual Progress: Real-time build status for each page
Reference Material: Upload local files as reference for AI generation

AI Generator

3. Visual Page Management

Manage HTML files like PowerPoint slide thumbnails:

Insert Pages: Insert after current page, auto-renames subsequent files
Reset Template: One-click reset to default layout
Sort & Delete: Move up/down and delete with auto index maintenance

Page Management

4. Smart AI Code Assistant

Context-aware AI for fine-tuning individual pages.

Multimodal: Upload images or documents
Multi-task: Background execution + task list
Precision Control: Stop generation at any time

AI Assistant

5. Dual Export Modes

A. Portable Web Export Package to USB drive as a standalone runnable bundle. Auto-deploys Nginx, one-click start/stop.

Export

B. Export to PPTX Render and export HTML pages as standard .pptx files.

Export PPT

Extension Settings

Setting	Type	Description
`rwb.aiProviders`	Array	AI provider config, supports multiple; each entry can specify `format` (OpenAI / Claude / Gemini)
`rwb.language`	String	UI language: `zh` (Chinese) or `en` (English)
`rwb.pptBatchSize`	Number	Batch generation concurrency, default 3
`rwb.AI-temperature`	Number	Creativity (0-2)
`rwb.AI-maxTokens`	Number	Max output tokens
`rwb.enableAILog`	Boolean	Enable AI conversation logging
`rwb.enableAI`	Boolean	Enable AI features

Multi-model Config

6. AI-core Integration & Multi-API Format Support

This extension integrates deeply with the AI-core plugin, supporting three major API formats:

OpenAI: Compatible with all OpenAI-format APIs (DeepSeek, Qwen, etc.)
Claude: Supports Anthropic Claude API (/messages endpoint)
Gemini: Supports Google Gemini API (/generateContent endpoint)

Each provider in the settings page can independently select its API format. When AI-core is installed, configurations are automatically synced bidirectionally.

7. Multi-language Support

Supports Chinese and English UI languages, switchable from the top of the settings page. All UI text (sidebar, AI generator, status bar, messages) updates instantly on language change.

8. Auto-save Settings

All configuration changes in the settings page (provider name, URL, API Key, model list, API format) are automatically saved 500ms after modification — no manual save button needed.

9. Claude Code Support

The project template includes a built-in CLAUDE.md file with full project context (structure, conventions, animation system, config references). Claude Code and other AI coding tools can read this file directly to understand and modify the generated PPT project out of the box — no extra setup needed.

Quick Start

Install the extension (AI-core plugin is required)
Configure AI providers (supports OpenAI / Claude / Gemini formats)
Create project
Generate content (fully automatic / semi-manual)
Preview and present

Part 2: Generated PPT Project Development Guide

Project Structure

PPT/
├── index.html          # Entry point, core control file
├── setting.json        # Global configuration
├── ppt_outline.json    # AI outline data backup
├── PAGES/              # HTML files for each slide
├── CSS/                # Stylesheets
├── JavaScript/         # Scripts
└── https://github.com/23J1633/RWB-HTMLtoPPT/raw/main/static/             # Static assets

Important Notes

Due to CORS restrictions, you cannot open index.html directly. Use Live Server or a local server.

Live Server

Global Configuration (setting.json)

{
  "projectTitle": "Presentation Title",
  "aspectRatio": "16:9",
  "clickToFlip": true,
  "transition": "fade",
  "theme": { "mode": "light", "primary": "#4CAF50" },
  "pages": ["page1.html", "page2.html"]
}

Field	Description
`projectTitle`	Browser tab title
`aspectRatio`	Aspect ratio, e.g. "16:9", "4:3"
`clickToFlip`	Click blank area to flip page
`transition`	Transition: `none` `fade` `slide-left` `slide-right` `zoom` `cover` `flip`
`theme.mode`	Theme: `light` `dark` `high-contrast`
`theme.primary`	Accent color (hex)
`pages`	Page play order

Transition Effects

Select via the transition field in setting.json:

Value	Visual Effect
`none`	No animation, instant switch
`fade`	Cross-fade (default)
`slide-left`	New page slides in from right
`slide-right`	New page slides in from left
`zoom`	New page zooms in from small
`cover`	New page covers from bottom
`flip`	3D flip effect

Theme System

Configure via theme in setting.json:

Mode	Description
`light`	Light theme (default)
`dark`	Dark theme for low-light environments
`high-contrast`	High contrast, ideal for projectors

theme.primary customizes the accent color (progress bar, thumbnail borders)
Theme preference is auto-saved to localStorage

Press T to open the left-side thumbnail panel:

Glass effect: Semi-transparent background with blur filter
Left slide-in: Panel slides out from the left
Live preview: Each thumbnail renders actual page content (default 16:9 ratio, keep in sync with aspectRatio in setting.json)
Current highlight: Green border marks the current page
Click to jump: Click any thumbnail to navigate directly
Media safe: Automatically removes video/audio/iframe elements to prevent auto-play

Ratio sync: If you change aspectRatio in setting.json, also update THUMB_RATIO_W and THUMB_RATIO_H in openThumbnailPanel in main.js.

Black / White Screen

Press B for black screen, W for white screen:

"Tea Time" message displayed in the center
Shows "Press Esc to return" hint at the bottom
Used for mid-presentation breaks
Press Esc or B / W again to resume

Built-in Animation System

Class	Effect
`anim-up`	Rise from bottom
`anim-down`	Slide from top
`anim-left`	Slide from left
`anim-right`	Slide from right
`anim-pop`	Elastic scale in
`anim-blur`	Blur reveal
`anim-float`	Continuous floating
`anim-rotate`	Rotate in
`anim-bounce`	Bounce in
`anim-stagger`	Children appear sequentially (add to parent)
`fade-in`	Fade in

Delays: delay-1 ~ delay-5 (0.2s ~ 1.4s)

Custom params: Override defaults with data-duration and data-delay:

<div class="anim-up" data-duration="0.6" data-delay="0.3">Custom</div>

Stagger animation (children appear one by one):

<ul class="anim-stagger">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Performance Optimization

Built-in performance optimizations, no configuration needed:

Page cache: Loaded page HTML is cached in memory
Adjacent preloading: Automatically preloads 2 pages ahead and behind
Lazy loading: Images with data-src load only when visible

Presentation Shortcuts

Key	Action
→ / Space / Enter	Next page
←	Previous page
Home / End	First / Last page
F	Fullscreen
T	Thumbnail navigation (left glass panel)
G	Go to page
B	Black screen (Tea Time)
W	White screen (Tea Time)
?	Shortcuts help
Esc	Close panel / Exit screen mode / Exit fullscreen

FAQ

Blank page → Must use Live Server
Images not showing → Paths relative to project root
Change colors → theme in setting.json or :root variables in CSS/style.css

RWB HTMLtoPPT

23J1633

RWB HTMLtoPPT

中文

如何获取？

第一部分：VS Code 插件功能指南

核心功能

1. 快速创建项目

2. AI 全自动生成 PPT

3. 可视化页面管理

4. 智能 AI 代码助手

5. 双模式导出

扩展设置

6. AI-core 集成与多 API 格式支持

7. 多语言支持

8. 设置自动保存

9. Claude Code 支持

快速开始

第二部分：生成的 PPT 项目开发指南

项目目录结构

运行注意事项

全局配置 (setting.json)

页面切换效果

主题系统

缩略图导航

黑屏 / 白屏

内置动画系统

性能优化

演示快捷键

常见问题

English

How to Get It?

Part 1: VS Code Extension Guide

Core Features

1. Quick Project Initialization

2. AI Full Auto PPT Generation

3. Visual Page Management

4. Smart AI Code Assistant

5. Dual Export Modes

Extension Settings

6. AI-core Integration & Multi-API Format Support

7. Multi-language Support

8. Auto-save Settings

9. Claude Code Support

Quick Start

Part 2: Generated PPT Project Development Guide

Project Structure

Important Notes

Global Configuration (setting.json)

Transition Effects

Theme System

Thumbnail Navigation

Black / White Screen

Built-in Animation System

Performance Optimization

Presentation Shortcuts

FAQ