Skills
skills/skills.netease.im/vibe-slide

vibe-slide

SKILL.md

[路径约定]

  • 模板目录：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 或 纯净模式 时除外

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

第二步：大纲生成与确认

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

  1. 生成大纲：直接在对话中展示完整的 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 在零宽/零高包围盒上无法计算渐变，会导致线条不渲染（典型故障：时间轴横线消失只剩箭头）。示例： 
    <!-- ✅ 正确：水平线渐变用 userSpaceOnUse + 绝对坐标 -->
<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)"/>

<!-- ❌ 错误：默认 objectBoundingBox，水平线包围盒高度为0，渐变失效 -->
<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{两位页码} | {布局类型} | {页面标题} 作为标题行，下方用无序列表罗列内容要点。
  • ## 布局规划 表格汇总所有页面的结构描述，确保同类型页面的内部结构有明显差异、图表类型不重复。
  1. 等待用户确认，不要自动进入渲染。大纲展示完毕后，以如下引导语结尾：

    "以上大纲共 X 页。你可以要求：调整页面顺序、增删页面、更换布局类型、修改内容要点。确认无误请回复「确认」，即开始渲染。"

  2. 支持以下微调，反复迭代直到用户说"确认"或"开始生成"：
    • 增删页面、调整顺序
    • 修改某页标题或内容要点
    • 更换布局类型（如将某页从 content 改为 grid-cards）
    • 调整总页数或章节结构
  3. 用户确认后，一次性完成：写入 ~/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 耗时很长，用户无法感知进度。分批生成让用户看到持续的进度输出，且每批完成后都可以在浏览器中预览已生成的页面。

准备工作：

  1. 读取 templates/<theme>/demo.html 作为骨架与配色参考——学习 HTML 骨架、CSS 类名、动效写法和配色模式
  2. 同时读取 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
  • 保留骨架中已有的 <!-- BATCH-INSERT-POINT --> 占位注释（位于最后一个 slide 之后、</div> 之前）

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

完成后向用户报告进度：

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

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

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

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

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

最后一批完成后：

  1. 使用 Edit 工具删除 <!-- BATCH-INSERT-POINT --> 占位注释（替换为空字符串）

  2. 告知用户全部完成：

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

  3. 询问用户是否需要打包为单文件（使用 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（背景图片）处理。参考示例： 
        <!-- ✅ 正确：尾页用 data-bg-css 渐变做全视口背景，内部只有内容 -->
<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>

<!-- ✅ 正确：封面用 data-bg 背景图做全视口背景，内部只有内容 -->
<div class="slide" data-bg="assets/深色封面背景.png">
  <div class="absolute inset-0 p-20 flex flex-col justify-center">
    <!-- 内容 -->
  </div>
</div>

<!-- ❌ 错误：内部加了 absolute inset-0 背景层，会被画布裁切产生边框 -->
<div class="slide" data-body-bg="#0B0C10" data-bg-css="#0B0C10">
  <div class="absolute inset-0 bg-[#0B0C10]"></div>  <!-- 这层只有1280x720！ -->
  <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。
Installs
11
Source
skills.netease.…781dc0e2
First Seen
Apr 2, 2026