✦ AI Skill · HTML PPT · v2.0.0 · 2026-05-09
web-presentation
把任何内容变成网页演示稿
0 种风格 (15+26)
0 个 HTML 文件
- 个外部依赖
键盘翻页 · 触控滑动 · 移动端适配 · 双击即演示
核心能力
四种使用模式

从零新建

给主题、草稿或关键词,一键生成完整演示稿。自动分页、选风格、注入动效。

PPT 转网页

上传 .pptx 文件,提取内容后选择网页风格,完整保留图片、顺序和讲者备注。

改造迭代

已有演示稿想换风格、加内容?描述变化,在现有文件基础上精准修改。

风格学习

给 URL、HTML 或截图,提取色彩字体布局,沉淀私有风格库,好风格可合并为系统预设。

工作流程
五步完成演示稿
00

识别模式

新建 / 转换 / 迭代 / 风格学习

01

需求采集

用途、页数、素材

02

风格选择

15 预设 + 26 拓展模板 + 触发词

03

生成演示稿

单 HTML 注入动效

04

交付 & 验证

移动端检查 + 说明

💡 说出关键词可直接跳到对应风格 — 例如"帮我做个路演 pitch" → 自动推荐 Bold Signal 风格
风格预设系统
41种
风格 + 模板
15 系统预设(深色 6 / 浅色 4 / 专题 5)+ 26 拓展模板(A 主舞台 · B 投资人 · C 编辑 · D Lifestyle · E 个性)
深色系6种
浅色系4种
专题风格5种
拓展模板26种
41
深色系 · 风格 01–03
高压冲击感
01
强信号

Bold Signal

融资路演pitch产品发布
02
电感演播室

Electric Studio

企业方案B2B商业提案
03
创意电压

Creative Voltage

创意提案品牌升级agency
深色系 · 风格 04–06
精致感与数据感
04
暗夜植物园

Dark Botanical

品牌故事luxury高级感
05
深海决策舱

Executive Deep Data

高管汇报季度复盘board
06
线性控制台 · 自动触发

Console UI ⚡

dashboard数据看板控制台
⚡ 自动触发:关键词命中时跳过预览,直接执行生成
浅色系 · 风格 07–09
轻快感与叙事感
07
笔记页签

Notebook Tabs

培训课件知识分享workshop
08
柔彩几何

Pastel Geometry

onboarding用户教育柔和
09
撞色拼接

Split Pastel

活动策划撞色活泼
专题风格 · 风格 10–12
叙事感与极客感
10
复古编排

Vintage Editorial

观点演讲TED风格行业洞察
11
霓虹赛博

Neon Cyber

赛博朋克AIGC游戏
12
终端绿

Terminal Green

技术分享极客程序员
专题风格 · 风格 13–15
极简美学与经典品牌
13
瑞士现代

Swiss Modern

极简论文答辩留白
14
纸与墨

Paper & Ink

文学叙事文化沙龙
15
苹果发布范

Apple Keynote ★

苹果风产品发布极简精致
★ 你正在看的这份演示稿就是风格 15 · Apple Keynote
拓展模板库 · A · 主舞台开场
主舞台开场 · 4 模板
16
海报开场

Bold Poster

发布开场品牌宣言路演
17
策展海报

Biennale Yellow

展览文化机构品牌
18
双语头条

Broadside

EN/CNmanifesto设计演讲
19
时尚杂志

Editorial Tri-Tone

杂志时尚文化
拓展模板库 · B · 投资人 / 董事会
投资人 / 董事会 · 5 模板
20
投资人深蓝

Signal

投资人董事会咨询
21
学者蓝皮

Vellum

白皮书学术顾问
22
极简白皮书

Monochrome

政策简报白皮书研究
23
B2B 钴蓝

Blue Professional

客户提案B2B商业方案
24
设计年报

Cobalt Grid

设计研究年报学术
拓展模板库 · C · 编辑 / 复盘
编辑 / 复盘 · 4 模板
25
创意年度

Neo-Grid Bold

编辑设计创意新锐
26
数据复盘

Raw Grid

数据榜单复盘新锐
27
工作室年报

Creative Mode

创意年度工作室品牌
28
品牌史

Stencil & Tablet

品牌历史传承文化
拓展模板库 · D · Lifestyle / 待客
Lifestyle / 待客 · 4 模板
29
奢华待客

Grove

待客奢华lifestyle
30
中世纪家居

Mat

家居工业设计
31
餐饮 lifestyle

Coral

生活方式餐饮创意
32
私厨晚宴

Long Table

餐饮聚会小批量
拓展模板库 · E · 个性补充
个性补充 · 9 模板
33
DTC 桃色

Playful

独立 launchDTC社群
34
riso 小志

Retro Zine

riso小志文化
35
头脑风暴

Scatterbrain

brainstorm团队创意
36
校园便条

Pin & Paper

内部沟通校园活动
37
日式昭和

Sakura Chroma

音乐文创JIS
38
儿童品牌

BlockFrame

新粗野品牌儿童
39
社区行动

People's Platform (Block & Bold)

活动家海报社区
40
Y2K 怀旧

Retro Windows

怀旧Y2K技术博客
41
春日校园

Daisy Days

教育活动儿童
智能触发
说出关键词
风格自动匹配
帮我做一个融资路演 pitch deck
路演 · pitch
→ 推荐 Bold Signal(强信号,风格 01)
做个 AI 控制台 dashboard,要 Linear 那种感觉
控制台 · dashboard ⚡ 自动触发
→ 直接进入 Console UI(线性控制台,风格 06)
给高管做 Q2 季度 OKR 复盘演示,要有数据感
高管汇报 · OKR复盘
→ 推荐 Executive Deep Data(深海决策舱,风格 05)
苹果发布会那种极简风格,做个新产品介绍
苹果风 · 产品发布
→ 推荐 Apple Keynote(苹果发布范,风格 15)
最新特性
移动端 + Console UI
📱

移动端强制适配

  • 768px / 480px 宽度断点
  • 44px 最小触控目标
  • 触控滑动翻页
  • 480px 以下强制单列
  • 标题 ≥ 24px,正文 ≥ 14px
  • 交付前必须通过移动端检查

Console UI 深度集成

  • 30+ 数据密集型组件直接复用
  • Linear / Vercel 产品级设计感
  • 深色 / 浅色双主题切换
  • 关键词命中自动进入执行流程
  • 保留 web-presentation 翻页结构
  • Topbar、Kanban、Agent-row 等组件
风格学习系统
学习任意风格 · 沉淀私有库
🌐
网页 URL
粘贴任意网址
自动抓取并提取 CSS 特征
📄
本地 HTML
上传 HTML 文件
脚本直接解析风格变量
NEW
🖼️
页面截图
上传 1-N 张截图
AI 视觉直接识别分析
提取:颜色 · 字体 · 布局结构 · 情绪标签
📚
私有风格库 style-library.json 跨会话持久化 · 生成演示稿时自动优先调用 · 可随时追加新来源
学习完成后自动评估独特性:若风格明显新颖,主动建议命名并合并为系统预设——让私有积累成为团队共享资产
获取 web-presentation
两步即可开始
1
下载 web-presentation Skill
解压后放入 AI 工具的 skills 目录,在支持 skill 的 AI 产品中即可使用
下载 Skill v2.0.0(394KB · 含 26 拓展模板)
解压放入:<AI工具>/skills/web-presentation/
2
说出你的需求,立即生成
在支持 skill 的 AI 对话中输入关键词,skill 自动识别并开始制作
安装后直接说出需求 · skill 自动识别场景 · 无需任何配置
VERSION
v2.0.0
2026-05-09 发布
本次更新
+ 26 拓展 HTML 模板(zarazhangrui/beautiful-html-templates)
+ CHANGELOG.md 迭代记录
历史版本
v1.5.0 · Apple Keynote / Console UI
v1.0.0 · 12 风格预设(初版)
完整迭代记录见 skill 包内 CHANGELOG.md