Frontend Slides

🎭 零依赖HTML演示,美学自动发现

将PPT或大纲转化为零依赖的浏览器原生HTML演示文稿,内置12种专业设计预设与2026前沿视觉趋势,支持键盘/触屏导航与实时编辑。

收藏
10.7k
安装
3.7k
版本
2.0.2
CLS 安全性认证2026-07-11
点击查看完整报告 >

使用说明

核心定位

Frontend Slides 是一款面向销售、售前及非设计专业人士的演示文稿生成技能。它将传统PPT制作转化为基于浏览器的零依赖HTML解决方案,用户无需设计背景即可产出具有专业美学品质的动画演示。

核心用法

技能采用五阶段工作流:模式检测(新建/转换/增强)→ 内容发现(采集目的、篇幅、素材与编辑需求)→ 风格发现(通过情绪标签匹配12种预设风格或生成预览对比)→ 内容生成(执行图像处理、HTML架构搭建与动画实现)→ 交付部署。支持从PPTX文件提取内容并重新样式化,也支持在浏览器内直接编辑文本。

显著优点

1. 设计民主化:内置"视觉探索"机制,通过"展示而非询问"帮助非设计师发现审美偏好,将抽象的设计决策转化为可感知的风格预览。
2. 零依赖部署:输出为单HTML文件或文件组,无需服务器、无运行时依赖,直接浏览器打开即可演示。

3. 系统化美学框架:将设计决策映射到有限变量集(8pt网格、限定色彩关系、规范圆角层级),确保视觉一致性;集成2026四大设计趋势(Ghostly Agency、Grain of Truth、Liminal Multimodality、Emotional Sovereignty)。

4. 严格的视口适配:强制每幻灯片100vh无滚动,通过内容密度上限与响应式断点保障跨设备可读性。

5. 完整的交互闭环:内置键盘/触屏/滚轮导航、进度指示、Intersection Observer触发动画,可选配悬停编辑功能。

潜在局限

  • 静态输出本质:虽模拟多种交互状态,但最终产物为静态HTML,复杂动态数据需额外开发。
  • PPT转换保真度:依赖python-pptx提取文本与图片,复杂版式(SmartArt、自定义路径动画)可能丢失,需人工复核重构。
  • 图像处理依赖:自动裁剪、圆角、填充等操作需本地Pillow环境,无Python环境时流程中断。
  • 字体加载风险:依赖Fontshare/Google Fonts外部URL,离线环境或网络受限时需自行嵌入字体文件。
  • 内容密度强制约束:对习惯传统PPT"多文字堆叠"的用户,需适应"一屏一核心信息"的分页逻辑。

适合人群

  • 销售/售前团队:快速产出符合品牌调性的解决方案演示,支持客户现场即兴调整。
  • 产品经理/创业者:制作投资人 pitch deck,利用风格预设快速建立专业信任感。
  • 教育工作者/培训师:创建教学教程,利用Reveal动画与键盘导航增强课堂互动。
  • 无专职设计的中小企业:替代传统PPT外包,自主完成从内容到视觉的全流程。

常规风险

  • 浏览器兼容性:CSS backdrop-filterclamp()、滚动吸附等现代特性在旧版浏览器(IE11、旧版Safari)可能降级。
  • 动画性能:粒子效果、视差滚动在低配设备或移动端可能导致掉帧,技能内置prefers-reduced-motion检测但需用户主动开启系统设置。
  • 文件体积:高分辨率图片经Base64嵌入或Pillow处理后,单HTML文件可能达数MB,影响首次加载。
  • 版权合规:Fontshare开源字体可商用,但用户上传的PPT内嵌字体、图片版权需自行确保。

安全解读

核心用法

Frontend Slides Skill 是一套完整的演示文稿生成工作流,专为非设计背景的用户打造。核心流程分为四个阶段:内容发现(收集用途、长度、素材等信息)、风格探索(通过情绪问卷生成3套视觉预览,采用"展示而非描述"的理念帮助用户发现偏好)、内容生成(基于选定风格生成单文件零依赖HTML)以及PPT转换(支持从现有PPTX提取内容并重新风格化)。

技术架构上,输出为纯前端HTML/CSS/JS,无需构建工具或服务器,可直接浏览器打开。内置完整的键盘/触摸/滚轮导航、Intersection Observer触发动画、响应式断点及prefers-reduced-motion无障碍支持。

显著优点

1. 零依赖部署:单HTML文件+资源文件夹即可运行,无Node.js、无构建步骤,适合客户现场离线演示
2. 视觉探索机制:通过3套风格预览帮助"不懂设计"的用户具象化选择,打破"抽象选择困境"

3. 专业设计系统内置:集成5种核心视觉定位(Future&Depth、Efficiency&Speed等)、2026年四大设计趋势(Ghostly Agency、Grain of Truth等)、8pt网格系统、强制视口适配约束,确保输出质量

4. PPT转换能力:可提取现有PPTX的文本、图片、备注,重新注入高级CSS动画和响应式布局

5. 交互状态显性化:静态HTML中通过硬编码不同class展示组件全生命周期(hover/active/selected),弥补无动态DOM的局限

潜在局限

  • 功能边界限定:纯静态HTML,无后端持久化(编辑功能依赖localStorage或手动导出)
  • 依赖手动安装:图像处理(Pillow)和PPT提取(python-pptx)需用户自行pip安装
  • 内容密度硬约束:每页强制单屏可见(100vh),大内容量必须拆页,不适合传统"长页滚动"习惯
  • 浏览器兼容性:部分高级CSS特性(backdrop-filter、scroll-snap)在旧版浏览器需降级
  • T3来源可信度:个人开发者维护,相比企业级工具需用户自行承担审查责任

适合人群

| 场景 | 典型用户 |
|------|---------|
| 解决方案汇报 | SaaS售前、解决方案架构师 |
| 销售提案 | B2B销售、客户成功 |
| 内部汇报 | 产品经理、项目经理 |
| 教学教程 | 培训师、教育者 |
| 会议演讲 | 技术布道者、创业者 |

特别适合没有专职设计师支持、需要快速产出高完成度视觉的团队。

常规风险

  • 供应链风险:Python依赖需从官方PyPI安装,避免非可信源
  • 文件操作风险:会读取用户图片/PPT并写入output目录,敏感文件建议先备份
  • PPT宏安全:转换功能不执行PPT内嵌宏,但建议先用杀毒软件扫描来源不明文件
  • 编辑状态丢失:浏览器内编辑未自动持久化到文件系统,需手动Ctrl+S保存

Frontend Slides 内容

.clawhub文件夹
reference文件夹
手动下载zip · 30.7 kB
origin.jsonapplication/json
请选择文件