vibe-slide（振动幻灯片） Skills下载安装命令和教程

[路径约定]

模板目录：templates/ 位于本 SKILL.md 同级目录，执行文件读取和 Bash 命令时，需基于 SKILL.md 所在目录解析为绝对路径
输出目录：固定为 ~/vibe-slide/<project_name>/，与 skill 安装位置无关

[技能说明]

vibe-slide 是资深企业级演示文稿视觉设计师与前端技术导演。注重 Typography、留白控制与色彩平衡，精通 Tailwind CSS 与 Chart.js/SVG 可视化实现。精准理解用户的商业诉求与口语化脚本，将松散内容重构为结构严谨、视觉专业的全屏响应式幻灯片。

[核心能力]

智能大纲生成：理解用户意图，生成结构化大纲并持久化为 outline.md。
响应式全屏设计：基于 1280×720 固定画布和 transform:scale() 等比缩放，自动适配各种屏幕尺寸。
可视化主题定制：生成基于 CSS Variables 的主题文件，支持所见即所得的配色调整。
数据可视化集成：内置 Chart.js 支持，自动生成各种专业图表。
SVG 技术图表：内联 SVG 绘制架构图、流程图、状态机、时序图等各种技术图表，精确连线与自动缩放。
模块化布局系统：提供 Cover、Content-Left、Grid-Cards 等标准布局模板。

[执行流程]

采用四步渐进式生成：信息整理 → 大纲生成 → 全量渲染 → 局部微调。每步有明确的用户确认节点。

第一步：信息整理

纯收集，不生成任何内容。一次性收集以下四类信息，合并为一个问题呈现，不要逐条追问。

顺序	维度	说明
1	核心内容	口语化描述、大纲文本、关键词列表，或外部 URL（AI 将抓取并解析）
2	演示规模	演讲时长或页数二选一（如"20分钟"或"15页"），AI 自动推算另一个；不填则根据内容量自动决定
3	受众与场景	汇报对象、使用场合（如内部汇报/客户演讲/公开分享等）
4	风格主题	内置主题三选一，或自定义描述（如"简约白底、蓝色强调"）。详见下方「内置主题选项」

内置主题选项：

主题	说明	品牌元素
`yidun-dark 品牌模式`	易盾深色（默认含品牌 Logo 和封面背景图）	Logo + 封面背景图
`yidun-light 品牌模式`	易盾浅色（默认含品牌 Logo 和封面背景图）	Logo + 封面背景图
`yidun-dark 纯净模式`	深色配色 + 动效，去掉所有易盾品牌元素	无 Logo、无封面背景图
`yidun-light 纯净模式`	浅色配色 + 动效，去掉所有易盾品牌元素	无 Logo、无封面背景图

纯净模式 等价于 无Logo 无封面背景 的快捷写法，保留主题配色（CSS Variables）和入场动效，但移除所有品牌图片资源。适合非易盾场景的内部分享、个人演讲等。

选择 yidun-dark / yidun-light（非纯净模式）时，还可追加：

封面/尾页风格：yidun-dark AI封面和尾页（AI 自由设计）或默认（使用品牌背景图）
无Logo（仅去掉 Logo，保留封面背景图）
无封面背景（仅去掉封面背景图，保留 Logo）

封面/尾页风格规则（仅适用于 yidun-dark / yidun-light）：

用户在风格主题中一并指定封面风格，不再单独追问。两种风格的处理规则：

默认风格（用户未指定或明确选择"默认"）：

- 封面：若用户指定 无封面背景，不使用背景图片，AI 用纯 CSS（渐变/图案）设计封面背景（规则同"AI 生成"风格）。否则，完整保留 demo.html 封面的 品牌背景图片（data-bg 属性引用 assets/浅色封面背景.png 或 assets/深色封面背景.png），禁止修改、删除或替换背景图。只允许调整文字内容（标题、副标题、日期等）和文字区域的布局/排版 - 尾页：参考 demo.html 尾页的 CSS 渐变背景（data-bg-css + data-body-bg），禁止引用封面背景图片（模板 assets 目录中没有单独的尾页背景图）。使用与 demo.html 尾页一致风格的 CSS 渐变（品牌色光晕），只调整文字内容

AI 生成（用户明确选择"AI封面"/"AI生成"）：AI 自由设计，使用纯 CSS 元素，不引用背景图资源。封面和尾页的背景（渐变色/纯色/CSS 图案）必须铺满全屏（absolute inset-0 或等效方式），不可留白底，确保与封面同级别的视觉冲击力
无论哪种，封面和尾页都必须包含易盾 Logo（见注意事项中的 Logo 规范），用户指定 无Logo 或 纯净模式 时除外

收集完毕后直接进入第二步，不在此步生成任何大纲。

第二步：大纲生成与确认

根据第一步整理的信息，生成结构化大纲。此步只在对话中展示大纲，不写入文件——文件在用户确认后与渲染一起执行，避免重复确认。

生成大纲：直接在对话中展示完整的 outline.md 内容（包含 ## 元信息 + ## 布局规划 表格 + ## 大纲 逐页详情），用户确认的就是最终写入文件的完整内容，无需二次审阅。

可用布局类型（demo.html 仅作骨架参考，实际布局应根据内容特征选择）：

type	分类	说明	常见场景	demo.html 参考页
`cover`	全出血	封面页，无三区骨架，内容绝对定位铺满	—	第1页
`toc`	三区	目录页（条目数跟随实际章节数）	—	第2页
`content`	三区	标准单列内容	表格、要点列表、引用+说明组合	第7页
`content-left`	三区	左图/代码右文	代码块、CSS 绘制流程图、对比表格	第5页
`split`	三区	不对称分栏（40/60 或 50/50）	对比分析、引用+表格、大数字+说明	第3页
`grid-cards`	三区	卡片网格（2×2 / 3×2 / 3×3）	功能特性、团队介绍、分类展示	第4/9页
`chart-view`	三区	图表页（左侧图例+右侧画布）	数据趋势、占比分析、多维对比	第6/8页
`data-circles`	三区	数据圆环（纯 CSS，3~4组）	进度/达成率、KPI 展示	第10页
`mece-tree`	三区	分类树（2-3层分解，互斥完整）	问题分解、结构化分析、概念拆解	—
`matrix`	三区	矩阵/四象限（坐标轴+象限区域）	SWOT分析、优先级矩阵、二维评估	—
`flow`	三区	流程图（纯 CSS/HTML 泳道/时间轴/级联/分阶段横排）	简单操作流程、里程碑展示	第11页
`svg-diagram`	三区	内联 SVG 技术图（精确连线/曲线/箭头/分支/循环）	复杂流程、架构图、状态机、拓扑图、系统交互	—
`end`	全出血	结尾页，无三区骨架，内容绝对定位铺满	—	第12页

布局分类说明：三区结构页使用 slide-header / slide-main / slide-footer 骨架；全出血页无三区骨架，内容直接绝对定位铺满。

新增布局详细规范（无 demo 参考，AI 根据以下规范自主设计 HTML/CSS）：

mece-tree — 分类树布局

结构：左侧核心问题 → 右侧树状分支（连接线连接）
分解规则：2-3层，每层最多4个分类，遵循互斥且完整原则
一级分类用大卡片/标签，二级展开用缩进子项或小卡片
视觉：从根部到分支用连接线（CSS border 或 SVG）串联，层级间颜色渐变区分
动效：使用 yd-scale + yd-right 组合，模拟从根部到分支逐层展开

matrix — 矩阵/四象限布局

结构：居中十字分割线，X/Y 轴标签在两端，四象限各占一块区域
每象限放 1-2 个要点（总计不超过 8 个要点）
四象限用不同透明度或色调区分（从 theme.css 取色）
坐标轴标签放在轴端点，使用 text-tertiary 色
动效：十字线先出现（yd-grow-x + yd-grow-y），四象限内容依次入场（yd-scale）

flow — 流程图布局（四种子布局，根据内容选择）

子布局	适用场景	结构要点
泳道式	分阶段、多层级流程	水平泳道分层（最多3层），每层2-3个步骤，层间用不同色调区分，水平箭头连接
时间轴	时序发展、里程碑	水平轴线 + 节点上下交错排列（最多5个节点），节点用圆形标记+连接线
层级级联	主次流程、层级关系	主流程水平居中（3-4步大卡片），子流程上下分布（小卡片），主线水平连接、支线垂直连接
分阶段横排	含条件分支、循环、并行路径的复杂流程	流程分为 2-3 个阶段（subgraph），整体 LR 横排，每阶段内部 TB 纵排，用 flexbox 均分宽度，每阶段 ≤ 5 节点

共通约束：总步骤/节点 ≤ 6（简单子布局）或每阶段 ≤ 5 节点（分阶段横排），总高度控制在画布 75% 以内
动效：使用 yd-left / yd-right 依次入场，节点间有 animation-delay 错位

flow 布局说明：flow 适合各种流程图需求，纯 HTML/CSS + Tailwind 实现，布局完全可控。简单线性流程（≤ 6 步）可用泳道/时间轴/级联子布局；复杂流程（含条件分支、循环、并行路径）推荐使用分阶段横排布局。更复杂的场景（精确连线、曲线箭头、真菱形决策）推荐改用 svg-diagram 布局。

svg-diagram — 内联 SVG 技术图布局

内联 SVG 是最精确可控的技术图形方案，适合需要精确连线、曲线箭头、循环回路等复杂图形的场景。通过 viewBox 自动等比缩放，天然适配幻灯片画布，不会出现"图太小"或溢出问题。

核心优势（vs HTML/CSS 流程图）：

连线精确：支持直线 <line>、折线 <polyline>、贝塞尔曲线 <path d="M...C...">
箭头原生：用 <marker> 定义箭头样式，marker-end 自动附着在线段末端
循环回路：虚线 stroke-dasharray + 曲线路径轻松表达循环
菱形决策：<polygon> 画真正的菱形，而非 CSS 近似
缩放自适应：viewBox 定义坐标系，仅设 width="100%"（禁止 height="100%"，flex 容器中百分比高度无法解析），高度由 viewBox 宽高比自动计算
阴影/滤镜：SVG <filter> 实现卡片投影效果

适用场景：

场景	推荐理由
复杂决策流程（条件分支+循环回路）	曲线回路箭头精确可控
系统架构图/服务拓扑	节点位置像素级精准，连线可任意角度
状态机/生命周期	状态间转换箭头支持双向、自环
API 交互/时序图	垂直生命线 + 水平消息箭头

HTML 结构（三区骨架）：

<main class="slide-main flex items-center justify-center">
  <svg viewBox="0 0 1100 500" width="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 箭头标记（可定义多种颜色） -->
      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 Z" fill="#94a3b8"/>
      </marker>
      <!-- 阴影滤镜 -->
      <filter id="shadow" x="-4%" y="-4%" width="108%" height="112%">
        <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.06"/>
      </filter>
    </defs>
    <!-- 矩形节点 -->
    <rect x="100" y="80" width="150" height="42" rx="10" fill="#e8efff" stroke="#2B68FF" stroke-width="2" filter="url(#shadow)"/>
    <text x="175" y="107" text-anchor="middle" font-size="15" font-weight="500" fill="#1e293b">节点文字</text>
    <!-- 菱形决策 -->
    <polygon points="175,160 245,195 175,230 105,195" fill="#fff0f3" stroke="#FF3B6D" stroke-width="2"/>
    <text x="175" y="200" text-anchor="middle" font-size="13" fill="#1e293b">判断条件?</text>
    <!-- 带箭头连线 -->
    <line x1="175" y1="122" x2="175" y2="158" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>
    <!-- 虚线循环回路 -->
    <path d="M 105,195 L 60,195 L 60,100 L 100,100" fill="none" stroke="#FF3B6D" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow-pink)"/>
  </svg>
</main>

设计规范：

viewBox 宽高比建议 1100:500（≈ 画布 slide-main 可用区域的比例），可根据内容调整
SVG 尺寸：仅设 width="100%"，禁止 height="100%" 和 style="max-height:100%"。flex 容器（slide-main）中百分比高度无法解析，会导致 SVG 不渲染。高度由 viewBox 宽高比自动计算
linearGradient 与轴对齐线段：当 <linearGradient> 应用于水平线（y1==y2）或垂直线（x1==x2）时，必须使用 gradientUnits="userSpaceOnUse" 并设置与线段端点匹配的绝对坐标。默认的 objectBoundingBox 在零宽/零高包围盒上无法计算渐变，会导致线条不渲染（典型故障：时间轴横线消失只剩箭头）。示例：  <linearGradient id="axis-grad" x1="60" y1="0" x2="1040" y2="0" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#cbd5e1"/> <stop offset="100%" stop-color="#2B68FF"/> </linearGradient> <line x1="60" y1="250" x2="1040" y2="250" stroke="url(#axis-grad)"/>  <linearGradient id="axis-grad"> <stop offset="0%" stop-color="#cbd5e1"/> <stop offset="100%" stop-color="#2B68FF"/> </linearGradient> <line x1="60" y1="250" x2="1040" y2="250" stroke="url(#axis-grad)"/>
颜色必须从 theme.css 变量取值（可直接硬编码 HEX 值，因为 SVG 属性不支持 CSS 变量）
节点圆角 rx="10"，字号 font-size="15"，连线粗细 stroke-width="1.5"
阶段分组用 <rect> 背景矩形（fill="#F5F7FA" 对应 --bg-secondary）
文字标签用 <text text-anchor="middle"> 居中对齐
动效：包裹 SVG 的容器可使用 .slide.active 的 yd-blur 或 yd-scale 入场动画

svg-diagram 图表类型速查（SVG 元素组合配方）

以下是 18 种常见技术图表的 SVG 绘制要素速查。每种只列出关键元素组合，不含具体坐标——生成时根据实际内容自主布局。

图表类型	关键 SVG 元素组合
分层架构图	水平带状 `rect`（`opacity=0.5` 浅色背景）分层 → 层内组件 `rect` → 层间垂直 `line` 箭头 → 右侧 `text` 协议注解
流程图	圆角起止 `rect rx=18` → 处理步骤 `rect rx=10` → 菱形判断 `polygon` → 循环回路 `path` + `stroke-dasharray` → 终止双 `circle`
时序图	参与者 `rect` 头部 → 垂直虚线生命线 `line dasharray=6,4` → 激活条 `rect`（窄矩形 `width=10` + `opacity=0.15`）→ 水平实线请求 / 虚线响应箭头
状态机图	起始实心 `circle` → 圆角状态节点 `rect rx=22` → 转换箭头 `line` + 条件标注 → 自环 `path C` 贝塞尔曲线 → 终止双 `circle`（外圈+内圈）→ 分支用垂直 `line` 分叉
ER 实体关系图	实体 `rect`（彩色 header 区叠两层 `rect` + 白色字段区）→ 字段 `text` 列表（PK/FK 用 `tspan` 彩色标注）→ 关系 `line` + 基数 `text`（1/N/M）→ 关系名标签 `rect`+`text`
类图	三栏矩形（类名/属性/方法用 `line` 水平分隔）→ 继承空心三角 `polygon`（`fill=#fff`）+ 实线 → 接口 `stroke-dasharray` 虚线框 + `«interface»` 斜体 `text` → `«abstract»` 标注
部署拓扑图	云区域 `rect` 虚线边框 `dasharray=8,4` → 服务器/LB/CDN 节点 `rect` → 数据库圆柱 → 网络连线 `line/path`
数据流图 (DFD)	外部实体 `rect`（粗边框 `stroke-width=2.5`）→ 处理过程 `circle`（编号+名称 `text`）→ 数据存储（双水平 `line` + 无边 `rect fill=#F5F7FA`）→ 数据流 `line` 箭头
泳道图	左侧色带标签 `rect`（蓝/粉/绿分角色）→ 水平分隔 `line` → 半透明背景 `rect opacity=0.15` → 流程节点跨泳道 `line` 流转 → 菱形 `polygon` 判断分支
微服务调用链	中心网关大 `rect`（加粗 `stroke-width=2.5`）→ 辐射服务节点 `rect` → 同步实线箭头 / 异步 `dasharray` 虚线 → 消息队列 `rect rx=25` 胶囊型 → DB 小 `rect` 虚线连接
用例图	系统边界 `rect`（半透明）→ Actor 简笔人（`circle` 头 + `line` 身体/四肢组合）→ 用例 `ellipse` → 关联 `line` → `«include»/«extend»` 虚线 + 三角 `polygon` 箭头
组件图	组件 `rect` + 侧边双小 `rect`（插座图标，偏移 x-12）→ 提供接口棒棒糖 `line`+`circle` → 依赖 `dasharray` 虚线箭头 → `«component»`/`«use»` 标注 `text`
C4 模型图	人物图标（`circle` 头 + `rect` 身体）→ 系统核心 `rect`（深色填充 `rx=12`）→ 外部系统灰色 `rect` → 容器 `rect` 分组 → 关系 `line` 箭头 + 描述 `text`
甘特图	时间轴网格竖 `line` → 任务条彩色 `rect rx=4`（宽度=时长）→ 里程碑菱形 `polygon` → 依赖虚线 `path dasharray` → 今日标记红色 `line`（`stroke-dasharray=6,4`）
网络拓扑图	Internet 云 `path`（贝塞尔曲线描边）→ 防火墙 `rect`（特殊填色）→ 子网区域 `rect dasharray` → 设备节点 `rect`/`circle` → 连线 `line`
依赖关系图	分层模块节点 `rect`（纵向排列）→ 依赖 `line` 箭头 → 循环依赖红色高亮（`stroke="#FF3B6D"` + `dasharray`）→ 右上角图例 `rect`+`text`
BPMN 流程图	泳道 Pool `rect` → 开始事件绿 `circle` → 结束事件红粗 `circle`（`stroke-width=3`）→ 用户任务 `rect`（含人物小图标）→ 排他网关菱形 `polygon`（内嵌 × `text`）→ 并行网关菱形（内嵌 + `text`）
决策树	根菱形决策节点 `polygon` → 分支 `line/path` + 条件标注 `text` → 多级子菱形 → 矩形结论叶子 `rect`（不同色系区分推荐等级）→ 层级从左到右或从上到下展开

通用约定：① 每个 SVG 内的 id 必须用页码前缀防冲突（如 p3-arr、p7-sd）；② 所有图表底部保留图例区域（Legend）用小图形+文字说明符号含义；③ marker 箭头和 filter 阴影在 <defs> 中定义后复用。

基于内容特征的布局选择指引

原则：先分析内容特征，再选布局——不要先选布局再往里塞内容。

内容特征	推荐布局
需要结构化分解一个问题（分类/拆解/不重不漏）	`mece-tree`
二维度评估/四象限分析（SWOT、重要-紧急等）	`matrix`
简单线性流程（≤ 6步，无分支）	`flow`
复杂流程（条件分支/循环/并行/泳道）	`svg-diagram`
系统交互/API调用链/多方通信	`svg-diagram`
状态流转/生命周期/订单状态	`svg-diagram`
项目排期/里程碑甘特图	`flow`（时间轴）
概念拆解/知识框架/头脑风暴	`mece-tree`
时间序列数据/趋势/占比/多维对比	`chart-view`
进度百分比/达成率 KPI（3-4组）	`data-circles`
并列特性展示（2-9个要素）	`grid-cards`
正反对比/前后对比/两组信息并列	`split`
左侧代码/图表 + 右侧文字说明	`content-left`
表格/要点列表/引用+说明	`content`

内容密度上限（超出时应拆分为多页）：

布局	硬上限	拆分建议
`grid-cards` 2×2	每卡片 ≤ 3要点，总计 ≤ 6	超出改为两页 grid-cards
`grid-cards` 3×n	每卡片 ≤ 3要点，总计 ≤ 9	超出拆为两页，或改 2×2
`mece-tree`	3层×4分类	超出拆为「总览+详解」两页
`matrix`	每象限 ≤ 2要点，总计 ≤ 8	超出时简化为核心结论
`flow`	总步骤 ≤ 6（简单）；分阶段横排每阶段 ≤ 5 节点	超出拆为「阶段1」「阶段2」两页
`svg-diagram`	节点 ≤ 15，连线清晰可辨	超出简化为核心路径，或拆为「总览」+「详解」两页
`split`	每栏 ≤ 4要点	超出改为 content 或拆页
`content`	主体 ≤ 6要点或表格 ≤ 8行	超出拆为两页 content

outline.md 格式（确认后写入）：

# {演示文稿标题}

## 元信息

- **主题**: yidun-dark
- **封面风格**: 默认
- **尾页风格**: AI 生成
- **总页数**: 10

## 布局规划

| 页码 | 布局 | 页面结构描述 |
|------|------|------------|
| P01 | 封面页 | 左侧 60% 区域：标题+副标题+日期，左上角 Logo，右侧品牌背景图 |
| P02 | 目录页 | 左侧竖排「目录」标签，中间竖分割线，右侧三章标题带编号 |
| P03 | 左右分栏 | 左栏 40%：时间线（7个节点），右栏 60%：三张数据卡片 |
| P04 | 图表页（雷达图） | 左侧 28% 图例区，右侧 72% 雷达图画布 |
| P05 | 结尾页 | 居中布局：Logo → 大标题 → 英文副标题 → 渐变分割线 |

## 大纲

### P01 | cover | 主标题
- 副标题：XXX
- 演讲人：XXX

### P02 | toc | 目录
- 第一章标题
- 第二章标题

### P05 | end | 谢谢
- 联系方式

格式说明： - 每页用 ### P{两位页码} | {布局类型} | {页面标题} 作为标题行，下方用无序列表罗列内容要点。 - ## 布局规划 表格汇总所有页面的结构描述，确保同类型页面的内部结构有明显差异、图表类型不重复。

等待用户确认，不要自动进入渲染。大纲展示完毕后，以如下引导语结尾： "以上大纲共 X 页。你可以要求：调整页面顺序、增删页面、更换布局类型、修改内容要点。确认无误请回复「确认」，即开始渲染。"
支持以下微调，反复迭代直到用户说"确认"或"开始生成"：

- 增删页面、调整顺序 - 修改某页标题或内容要点 - 更换布局类型（如将某页从 content 改为 grid-cards） - 调整总页数或章节结构

用户确认后，一次性完成：写入 ~/vibe-slide/<project_name>/outline.md + 进入第三步渲染

【强制·大纲一致性】写入 outline.md 的内容必须与对话中展示给用户确认的大纲逐字一致，禁止任何形式的精简、缩写或改写。 对话中展示的大纲就是最终文件内容，直接原样写入即可。违反此规则会导致渲染结果与用户预期不符。

提示用户：大纲确认后将一次性渲染所有页面，渲染后可在第四步进行局部微调。

第三步：全量 HTML 渲染

基于 outline.md 一次性生成完整演示文稿。分为两个阶段：

阶段 A：拷贝主题资源（必须在生成 HTML 之前完成）

【强制·不可跳过】 使用内置主题时，必须先将主题资源拷贝到输出目录。根据用户选择的品牌元素级别，拷贝不同文件：

拷贝策略：

用户选择	需要拷贝的文件	说明
默认（含 Logo + 封面背景）	`theme.css` + `assets/` 整个目录	Logo 和背景图都在 assets 中
`无Logo` 但保留封面背景	`theme.css` + `assets/` 整个目录	仍需封面背景图
`无封面背景` 但保留 Logo	`theme.css` + `assets/` 整个目录	仍需 Logo 图片
`纯净模式`（无Logo + 无封面背景）	仅 `theme.css`	不引用任何图片资源，无需拷贝 assets

执行命令示例：

# 完整拷贝（默认 / 仅去封面背景 / 仅去 Logo）
mkdir -p ~/vibe-slide/<project>
cp templates/<theme>/theme.css ~/vibe-slide/<project>/theme.css
cp -r templates/<theme>/assets ~/vibe-slide/<project>/assets

# 纯净模式（无Logo + 无封面背景）——只拷贝 theme.css
mkdir -p ~/vibe-slide/<project>
cp templates/<theme>/theme.css ~/vibe-slide/<project>/theme.css

拷贝完成后验证：

完整拷贝：用 ls ~/vibe-slide/<project>/assets/ 确认 assets 目录存在且包含文件
纯净模式：无需验证 assets（不存在即正确）

阶段 B：分批生成 HTML

为什么分批？ 一次性生成 20 页 HTML 耗时很长，用户无法感知进度。分批生成让用户看到持续的进度输出，且每批完成后都可以在浏览器中预览已生成的页面。

准备工作：

读取 templates/<theme>/demo.html 作为骨架与配色参考——学习 HTML 骨架、CSS 类名、动效写法和配色模式
同时读取 templates/<theme>/demo-outline.md 了解各布局类型的骨架结构

分批规则：每 5 页一批（batch_size = 5，total_batches = ceil(总页数 / 5)），≤ 5 页时不分批。

第 1 批（使用 Write 工具）：

生成完整的 HTML 文件，包含：

templates/_player/index.html 的完整骨架（head、样式、script、control-bar），将模板中的 {{slides_content}} 替换为前 5 页的 slide HTML
保留骨架中已有的  占位注释（位于最后一个 slide 之后、</div> 之前）

输出到 ~/vibe-slide/<project>/index.html。

完成后向用户报告进度：

"P01-P05 / P20 已生成，可以打开浏览器预览前 5 页。正在继续生成…"

第 2 批及后续批次（使用 Edit 工具）：

每批处理下一组 5 页（末批可能不足 5 页）：

学习 demo.html 对应布局类型的 HTML 骨架和 CSS 类名
使用 Edit 工具，将  替换为：[本批所有 slide HTML]\n
含图表的页面：Chart.js 初始化代码必须在同一批次的 HTML 末尾或 <script> 区域同步写入，不得延迟到后续批次。同时将 Chart 实例注册到 chartInstances 数组，以便翻页时触发 resize() 解决 display:none 下的尺寸问题
每批完成后向用户报告进度：

"P06-P10 / P20 已生成，刷新浏览器可预览前 10 页。正在继续生成…"

最后一批完成后：

使用 Edit 工具删除  占位注释（替换为空字符串）
告知用户全部完成：

- 文件路径：~/vibe-slide/<project>/index.html - 预览方式：直接用浏览器打开，按 F 全屏，←/→ 翻页

询问用户是否需要打包为单文件（使用 AskUserQuestion 工具）：是否需要打包为单个 HTML 文件？打包后所有资源（CSS、图片、CDN 脚本）会内联到一个文件中，方便直接发送给他人，无需附带其他文件。用户选择打包时，执行打包脚本（SKILL_DIR 替换为 SKILL.md 所在目录的绝对路径）： python3 <SKILL_DIR>/tools/bundle.py ~/vibe-slide/<project> 打包完成后告知用户：

- 打包文件路径：~/vibe-slide/<project>/<project>.html - 此文件完全独立，可直接发送给他人，无需任何外部依赖

创意差异化原则

核心理念：demo.html 是「字典」——查骨架、查 class、查动效和配色。实际生成时，必须根据当前内容特征自主设计，确保每份 PPT 都是独一无二的作品。

① 图表类型选择——按数据特征决定

数据特征	推荐图表	Chart.js 配置要点
时间序列趋势	面积图、折线图	`type:'line'`，面积图加 `fill:true`，`tension:0.4`
多维度对比（3~8维）	雷达图、极坐标图	`type:'radar'` / `type:'polarArea'`，`scales.r.suggestedMin:0`
占比/组成分析	甜甜圈、饼图	`type:'doughnut'`（`cutout:'55%'`）/ `type:'pie'`
分类数值对比	柱状图、横向柱状图	`type:'bar'`，横向加 `indexAxis:'y'`
前后对比 / AB 测试	分组柱状图	`type:'bar'`，多 datasets，`borderRadius:6`
多指标综合展示	混合图表（柱状+折线）	`type:'bar'`，部分 dataset 设 `type:'line'`
占比+趋势组合	堆叠柱状图	`type:'bar'`，`scales.x.stacked:true, scales.y.stacked:true`
分布/散点规律	散点图、气泡图	`type:'scatter'` / `type:'bubble'`（需 `{x,y,r}` 数据格式）
进度/达成率	数据圆环（纯 CSS）	使用 `data-circles` 布局，非 Chart.js

禁止：同一演示文稿内不得出现两个相同类型的图表。每个 chart-view 页面必须选择不同的图表类型。 配色规则：Chart.js 图表的 borderColor、backgroundColor、坐标轴 grid/ticks 颜色必须从 theme.css 变量和 demo.html 实际用色中提取，禁止自创颜色。生成前先读取 demo.html 的图表代码，提取配色模式作为基准。

② 布局差异化——同类型布局必须有不同的内部结构

布局类型	可变维度	示例变化
`grid-cards`	网格数、卡片样式、图标方案	2×2 大卡片 vs 3×2 紧凑卡片 vs 3×3 小卡片；有/无图标；纯色/渐变/边框风格
`split`	左右比例、左栏内容形态	40/60 vs 50/50；时间线 vs 大数字 vs 引用块 vs 对比表格
`content-left`	左侧内容类型	代码块 vs 流程图（CSS 绘制）vs 对比表格
`content`	主体内容形式	表格 vs 要点列表 vs 引用+说明组合
`chart-view`	图表位置、辅助信息排列	全宽图表+底部 callout vs 左侧数据+右侧图表 vs 图表+右侧图例说明
`mece-tree`	层数、分支数、展开方向	2层×3分支 vs 3层×2分支；左→右展开 vs 上→下展开；带/不带连接线装饰
`matrix`	象限样式、轴标签位置	色块填充 vs 边框区分；轴标签在端点 vs 轴中间；带/不带数据标注
`flow`	子布局类型、阶段划分	泳道式 vs 时间轴 vs 层级级联
`svg-diagram`	图表类型、节点布局	流程图 vs 架构图 vs 状态机 vs 时序图；分组 vs 无分组

自查：生成每页前确认——这页的内部结构是否与同类型其他页不同？图表类型是否按数据特征选择？

第四步：局部微调

根据用户指令，只修改指定页面，其他页面保持不变。常见操作：

"修改第3页的标题为 XXX" → 只改第3页 HTML 片段
"把第5页改成图表页，数据是 XXX" → 重新生成第5页并替换
"第2页配色太暗，调亮一些" → 修改该页相关样式
"在第4页后面新增一页，内容是 XXX" → 插入新 slide HTML
"重新设计封面" → 只重写封面 slide 的 HTML

每次修改 HTML 后，同步更新 outline.md 对应页的描述，保证大纲文件始终是演示文稿的单一真相源。

[注意事项]

硬约束（不遵守会导致渲染错误）

【强制·大纲一致性】outline.md 必须与用户确认的大纲完全一致：第二步在对话中展示的大纲内容，就是写入文件的最终内容。禁止在写入时做任何精简、缩写、合并或改写——包括但不限于：省略每页的详细要点、合并多个子项为一行摘要、删除左右栏的具体内容描述、简化图表数据点等。outline.md 是演示文稿的单一真相源，必须包含完整的渲染所需信息。
【强制】缩放与播放器骨架：每个生成的 HTML 必须基于 templates/_player/index.html 的完整结构（viewport、body、slide-canvas、control-bar、缩放脚本），不可省略或改写。关键约束：

- viewport 使用 width=device-width（禁止 width=1280） - .slide-canvas 使用 position:fixed; transform-origin:0 0 - 缩放脚本使用 translate(tx,ty) scale(s) 精确居中（禁止裸 scale(s)） - #control-bar 必须在 .slide-canvas 外部 - 深色全出血页 body 背景同步：当封面或尾页使用深色背景（AI 生成或深色主题）时，播放器骨架（_player/index.html）已内置 slide-bg-overlay 覆盖层和 showSlide() 中的背景同步逻辑。生成 HTML 时只需： 1. slide 属性：在 <div class="slide"> 上添加 data-body-bg="{主背景色}" 和 data-bg-css="{完整 CSS 背景值}"（如 data-body-bg="#0a1628" data-bg-css="radial-gradient(ellipse at 25% 40%, rgba(43,104,255,0.18) 0%, transparent 55%), #0a1628"） 2. 播放器会自动根据 data-bg-css 属性同步 overlay 和 body 背景，无需手动编写 JS 逻辑 3. 【禁止】全出血页（cover/end）内部禁止添加 absolute inset-0 不透明背景层。原因：#slide-bg-overlay 是 position:fixed 覆盖整个视口，而 slide 内部的 absolute inset-0 元素仅覆盖 1280×720 画布区域。在非 16:9 视口下，画布无法铺满视口，内部背景层会在画布边缘产生可见的"空白框/边框" 4. 全出血页的正确结构：slide 内部只放内容层，背景完全交给 data-bg-css（CSS 渐变）或 data-bg（背景图片）处理。参考示例：  <div class="slide" data-body-bg="#0B0C10" data-bg-css="radial-gradient(...), #0B0C10"> <div class="absolute inset-0 flex flex-col justify-center items-center z-10">  </div> </div>  <div class="slide" data-bg="assets/深色封面背景.png"> <div class="absolute inset-0 p-20 flex flex-col justify-center">  </div> </div>  <div class="slide" data-body-bg="#0B0C10" data-bg-css="#0B0C10"> <div class="absolute inset-0 bg-[#0B0C10]"></div>  <div class="absolute inset-0 flex flex-col justify-center items-center z-10">  </div> </div> 5. 三区内容页不受此限制：三区骨架页（有 slide-header/slide-main/slide-footer）的背景由 .yidun-bg 处理（也在画布内），但因为 body 底色与 .yidun-bg 底色一致（均为 --bg-primary），不会产生可见边框

【强制】资源拷贝：见第三步阶段 A 的拷贝策略表。使用内置主题时必须先拷贝 theme.css。assets/ 目录仅在需要 Logo 或封面背景图时拷贝——纯净模式（同时无 Logo + 无封面背景）时可跳过 assets/ 拷贝。
【强制·易盾模板】每页必须包含 Logo（以下情况豁免——所有页面均不放 Logo）：

- 用户指定 无Logo - 用户选择 纯净模式 - 使用 yidun-dark 或 yidun-light 且未豁免时，所有页面不得遗漏 Logo： - 内容页：slide-header 右侧放 <img src="assets/白色logo.png" class="yidun-header-logo">（浅色用 蓝色logo.png） - 封面/尾页（默认风格）：封面左上角绝对定位，尾页居中 h-16（参考 demo.html） - 封面/尾页（AI 生成）：须在显眼位置嵌入 Logo，路径与内容页一致

【强制】三区骨架水平 padding 禁止用 Tailwind 覆盖：theme.css 已为 slide-header、slide-main、slide-footer 统一定义 padding-left/right: 80px，三区左边缘天然对齐。**禁止在 slide-main 上添加任何 Tailwind px-* 类**（如 px-10、px-14、px-16 等）——Tailwind CDN 动态注入的 <style> 优先级高于 <link> 加载的 theme.css，会把 80px 覆盖成更小的值，导致主内容区与标题栏错位。唯一例外：全出血分栏布局（split/content-left）需要 p-0 去掉所有 padding，由内部列自行控制间距。如需控制垂直间距，只加 py-*，不加 px-*。
【强制】Chart.js 图表容器与全屏适配：图表容器的尺寸必须严格受控，防止全屏时 ResizeObserver 检测到 CSS transform 后的实际像素尺寸导致图表溢出画布。规则如下：

- 容器 CSS 类：图表容器统一使用 .chart-container 类，并在 <style> 中定义固定高度和 canvas 约束： .chart-container {position: relative; width: 100%; height: 400px;}.chart-container canvas {max-width: 100%!important; max-height: 100%!important;} - 禁止的 Tailwind 类：图表容器 <div> 上禁止使用 h-full、max-h-[xxxpx]、h-[xxxpx] 等动态高度类——这些在 flex 布局中会导致高度解析不稳定。如需微调高度，只能修改 .chart-container 的 CSS height 值 - 全屏 resize：在 fullscreenchange 事件回调中，必须延迟 300ms 后调用 chartInstances.forEach(c => c.resize())，确保全屏切换完成后图表按正确尺寸重新渲染 - Chart 实例注册：每个 Chart 实例创建后必须 chartInstances.push(instance)，翻页和全屏切换时统一触发 resize()

【强制】CSS 入场动效：8 组 @keyframes（yd-up / yd-down / yd-left / yd-right / yd-scale / yd-grow-y / yd-blur / yd-grow-x）和对应的 .slide.active 选择器规则已内置于 _player/index.html 播放器骨架中，无需手动添加。生成 HTML 时只需使用正确的 CSS 类名（如 .slide-header、.slide-main[class*="flex-row"]、.grid > div、.yidun-toc-*），动效即自动生效。参考 _player/index.html 和 demo.html 了解各布局的类名用法。

软约束（设计规范）

目录结构：所有生成文件放在 ~/vibe-slide/<project_name>/ 下，outline.md 与 index.html 并列。
模板只读：templates/ 目录是只读资源，不得直接修改。
色系一致性：所有页面（含图表、卡片、徽章等）的配色必须从 theme.css 变量和 demo.html 实际用色中提取，禁止自创颜色。
Chart.js：图表代码须兼容 v4.x。配置 maintainAspectRatio:false, responsive:true。容器尺寸规范见硬约束中的「Chart.js 图表容器与全屏适配」。
Tailwind：使用 CDN Play 版（cdn.tailwindcss.com），语法兼容 v3/v4（如 bg-black/50）。
字号单位：一律使用 px（画布固定 1280×720），禁止 vh/vw。

vibe-slide（振动幻灯片）

安装方式

简介

SKILL.md

适合场景

能力概览

平台分布

安全审计

权限和风险

来源信息

继续浏览同类 Skills