mav-slidecraft-skill

零依赖、动画丰富的 HTML 演示文稿生成器 Zero-dependency, animation-rich HTML presentation generator

中文 | English

---

致谢 / Credits

本项目的设计系统基于 Zara Zhang 的 frontend-slides 进行了大量改进和扩展。

The design system of this project is derived from Zara Zhang's frontend-slides, with significant enhancements including:

• 11 种精心设计的风格组合 — 采用 A+B+C 组合公式（主风格 + 维度增强 + 质感滤镜）
• 40 种微交互机制（Delight Library） — 每种风格 3–5 个专属机制
• 真实扫描纹理系统 — 内联 PNG data-uri，替代 SVG 噪点
• 完善的 6 阶段工作流程 — 内容发现 → 风格选择 → 预览确认 → 生成 → 交付 → 分享
• 内容自适应系统 — fitSlideContent() 防止内容溢出
• 中文支持 — 完整的中文界面和文档

---

中文文档

这是什么？

mav-slidecraft-skill 是一个 Claude Code skill，帮助你创建零依赖、动画丰富的 HTML 演示文稿。你不需要懂 CSS 或 JavaScript，只需要告诉 Claude 你想要什么内容，它会帮你生成精美的网页演示。

核心特色

特性	说明
零依赖	单个 HTML 文件，所有 CSS/JS 内联，无需 npm、构建工具、框架
视觉探索	不需要用语言描述设计偏好，直接从视觉预览中选择
PPT 转换	将现有 PowerPoint 转换为网页，保留所有图片和内容
反 AI 同质化	精选的独特风格，避免通用 AI 美学（告别紫色渐变）
微交互系统	40 种精心设计的微交互机制，让演示"活起来"
生产级质量	可访问、响应式、代码注释完善，可自由定制

11 种风格组合

序号	风格组合	核心气质	适用场景
1	🧱 数字粗野建筑 Neo-Brutalism + 3D	粗犷几何+立体深度+混凝土纹理	创意机构、Web3、科技初创
2	🚀 80年代未来 Retro-Futurism	霓虹渐变+复古科技感+CRT 点阵	科技发布会、游戏、音乐娱乐
3	🎭 极繁实验 Maximalism + Typography	大胆混搭+编辑网格+拼贴纹理	创意机构、音乐艺术、时尚品牌
4	🖍️ 天真实验 Naive + Typography	手绘质感+Rough 风边框+贴纸拼贴	教育、儿童产品、手工品牌
5	💎 高端SaaS Bento + 3D + Liquid Glass	卡片布局+磨砂亚克力+三套行业色板	SaaS产品、数据仪表板、产品展示
6	☁️ 新极简温暖 Neo-Minimalism	克制留白+真实颗粒+陶土粉点缀	高端品牌、奢侈品、科技公司
7	🎉 孟菲斯派对 Memphis	真实孟菲斯色板+几何图案+层压板纹理	创业公司、潮流品牌、教育产品
8	📐 蓝图设计 Blueprint	工程图纸+标注系统+等轴测投影	建筑/工程、技术分享、产品设计
9	📰 编辑杂志 Editorial Magazine	大号衬线+强留白+出血大图+专栏网格	品牌故事、品牌发布会、设计作品集
10	📚 深色学院 Dark Academia	深棕皮革+羊皮纸文字+烫金点缀	知识型演讲、历史文化、深度研究
11	🍃 侘寂科技 Wabi-Sabi Tech	大量留白+和纸纹理+竖排装饰	人文关怀科技、可持续设计、东方美学

风格组合公式: A类(主风格) + B类(维度增强) + C类(质感滤镜) — 每个组合包包含完整的设计系统、配色方案、字体搭配、动画预设和真实扫描纹理。

微交互系统（Delight Library）

每种风格组合配备 5 个专属微交互机制，生成演示时随机选择 3 个加入：

风格组合	示例微交互
新极简温暖	章节犹豫、留白凝视、字重欺骗、光标雕塑、错误对称
孟菲斯派对	弹跳字符、几何追随、撞色闪烁、波浪字行、图案脉冲
蓝图设计	线条绘制、测量延伸、发光脉冲、网格追踪、标注揭示
数字粗野建筑	硬边弹跳、3D翻转、阴影位移、堆叠揭示、透视倾斜
80年代未来	霓虹脉动、打字机、网格波动、颗粒漂移、色分离
极繁实验	渐变流动、重叠字影、字符爆炸、描边填充、旋转标签
天真实验	手绘入场、抖动悬停、贴纸弹跳、涂鸦光标、排版反抗
高端SaaS	模块抬升、玻璃光泽、网格重排、深度层叠、数据脉动
编辑杂志	衬线揭示、留白呼吸、图片淡入、 hairline 延展、页码滚动
深色学院	首字下沉、烫金闪烁、皮革颗粒、书页翻卷、墨迹晕染
侘寂科技	竖排滑入、和纸纤维、陶土微动、墨渍扩散、间之呼吸

使用方法

创建新演示

/mav-slidecraft-skill

> "我想为我的 AI 创业公司做一个 Pitch Deck"

Skill 会：

1. 询问内容（幻灯片数量、核心信息、图片）
2. 展示 11 种风格组合供选择
3. 生成 ASCII 预览确认内容
4. 创建完整的演示文稿
5. 在浏览器中打开

转换 PowerPoint

/mav-slidecraft-skill

> "把我的 presentation.pptx 转换成网页"

Skill 会：

1. 提取 PPT 中的所有文本、图片和备注
2. 展示提取的内容供确认
3. 让你选择视觉风格
4. 生成包含所有原始素材的 HTML 演示

分享演示

部署到 URL

bash scripts/deploy.sh ./my-deck/

使用 Vercel（免费）部署到永久可分享的 URL。

导出为 PDF

bash scripts/export-pdf.sh ./presentation.html ./output.pdf

使用 Playwright 截图并合成 PDF（动画不会被保留）。

架构

采用渐进式披露设计 — 主 SKILL.md 是简洁的地图（~250 行），支持文件按需加载：