---

name: fund-slides description: Create animation-rich HTML presentations from any content. Provides intelligent content-to-visual mapping -- given information of any type, selects the optimal slide layout, chart, and animation. Zero-dependency single HTML files with Chinese font support and ECharts inline integration. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides.

Frontend Slides

将任意内容转化为零依赖、动画丰富的 HTML 演示文稿。

本技能不关心内容从哪来、用什么分析框架 -- 它只做一件事：给定一块信息，选择最佳的视觉呈现方式。

Core Principles

1. Content-Agnostic -- 技能不决定"展示什么"，只决定"怎么展示"。研究逻辑由用户或上游技能负责。
2. Zero Dependencies -- 单 HTML 文件，CSS/JS 全部内联。需要图表时，ECharts 库直接内嵌在 HTML 的 <script> 标签中（通过 WebFetch 下载 echarts.min.js 后内联），确保离线可用。
3. Show, Don't Tell -- 生成可视化预览让用户选择风格，而非要求用户用语言描述偏好。
4. Viewport Fitting (NON-NEGOTIABLE) -- 每张 slide 精确适配 100vh。禁止滚动。内容超限时拆分。
5. No Emoji -- 禁止任何 emoji。用 CSS 形状、SVG 图标或文字替代。
6. Chinese Font Required -- 每份演示文稿必须包含中文字体回退链。

Design Aesthetics

杜绝"AI 味"。每份演示文稿都应有定制感。

• 字体：选择有辨识度的字体，避免 Arial/Inter/Roboto。所有字号用 clamp()。
• 配色：主色 + 锐利强调色，避免均匀分布。CSS 变量保持一致。
• 动画：聚焦高影响力时刻 -- 入场交错显现优于零散微交互。
• 背景：渐变/图案/纹理营造层次，而非纯色。

Viewport Fitting Rules

适用于每张 slide 的不变量：

• .slide: height: 100vh; height: 100dvh; overflow: hidden;
• 所有字号: clamp(min, preferred, max) -- 禁止固定 px/rem
• 所有间距: clamp() 或视口单位
• 图片: max-height: min(50vh, 400px)
• 断点: 700px, 600px, 500px (height), 600px (width)
• prefers-reduced-motion 支持
• CSS 函数取反用 calc(-1 * clamp(...)) -- 禁止 -clamp()

---

Phase 0: Detect Mode

• Mode A: 新建 -- 用户提供内容（文本/数据/图片），从零创建。进入 Phase 1。
• Mode B: PPT 转换 -- 转换 .pptx 文件。进入 Phase 4。
• Mode C: 增强 -- 改进现有 HTML 演示文稿。遵循 Mode C 规则。

Mode C: 修改规则

1. 添加内容前统计现有元素，对照密度限制
2. 任何修改后验证: overflow: hidden、clamp() 字号、图片 max-height
3. 将要溢出时主动拆分并告知用户

---

Phase 1: Content Discovery

目标：理解用户有什么内容，而非告诉用户应该有什么内容。

通过一次 AskUserQuestion 收集信息：

问题 1 -- 内容来源 (header: "内容"): 你的内容是什么形式？选项：

• "内容已就绪" -- 有完整的文字/数据/图表素材
• "有粗略笔记" -- 有要点但未整理
• "仅有主题" -- 只有主题，需要协助组织结构

问题 2 -- 长度 (header: "长度"): 大约多少页？选项：简短 5-10 / 中等 10-20 / 较长 20+

问题 3 -- 图表需求 (header: "图表"): 是否需要数据图表？选项：

• "ECharts (推荐)" -- 折线/柱状/饼图/K线/瀑布图，内嵌到 HTML 中，离线可用
• "简单 SVG" -- 更轻量，适合简单图表
• "不需要"

问题 4 -- 在线编辑 (header: "编辑"): 是否需要浏览器内编辑文字？选项：是（推荐） / 否

然后请用户提供内容。

Step 1.2: Content Analysis

用户提供内容后，读取 content-mapping.md 进行内容分析：

1. 识别 -- 将用户内容拆解为独立信息块
2. 分类 -- 对每块内容标注信息类型（数值指标 / 时序趋势 / 结构构成 / 对比关系 / 叙事论点 / 时间序列 / 风险评估）
3. 映射 -- 为每块内容匹配最佳视觉形式（KPI卡片 / 图表 / 表格 / 分栏 / 列表 / 时间线 / 对比卡片）
4. 排序 -- 组织 slide 顺序（概览 -> 核心内容 -> 结论）
5. 呈现给用户确认 -- 展示映射结果表格

示例输出：

Slide 大纲:
| # | 内容 | 信息类型 | 视觉形式 |
|---|------|---------|---------|
| 1 | 标题与主题 | -- | 标题页 |
| 2 | 6 个核心财务指标 | 少量关键指标 | KPI 卡片网格 |
| 3 | 2019-2024 营收趋势 | 时间序列 | 柱线混合图 |
| 4 | 收入构成 + 解读 | 构成 + 论点 | 图文分栏 (饼图+要点) |
| 5 | 三条核心优势 | 论点+支撑 | 标题+要点列表 |
| ... | ... | ... | ... |

通过 AskUserQuestion 确认 (header: "大纲"): "这个 slide 大纲是否合适？" 选项：合适 / 调整

Step 1.4: 状态暂存（防止跨 Phase 遗忘）

确认大纲后，必须将分析结果写入 .slide-plan.md，格式如下：

# Slide Plan
- 预设: [所选预设名称]
- 图表方案: [ECharts / SVG / 无]
- 编辑模式: [是 / 否]
- 需读取的 references: [列出 Phase 3 需要的文件]

| # | 内容摘要 | 类型 | 视觉形式 | 需要的 CSS class |
|---|---------|------|---------|----------------|
| 1 | ... | ... | ... | ... |

Phase 3 生成前必须先读取此文件，确保不会遗忘 Phase 1 的分析结果。

Step 1.3: Image Evaluation (如有)

如果用户提供了图片：扫描 -> 查看 -> 评估可用性 -> 融入大纲。

---

Phase 2: Style Discovery

"看效果选风格"环节。

Step 2.0: 风格路径

询问 (header: "风格"):

• "给我看几个选项"（推荐）-- 基于感受生成 3 个预览
• "我知道我想要什么" -- 直接从预设列表选择

Step 2.1: 感受选择

询问 (header: "感受", multiSelect: true, max 2):

• 专业/可信 -- 机构感、值得信赖
• 自信/有力 -- 创新、大胆
• 沉稳/专注 -- 清晰、深思熟虑
• 高端/精致 -- 优雅、令人难忘

Step 2.2: 生成 3 个风格预览

读取 STYLE_PRESETS.md 获取 15 个可用预设。根据感受从中选择 3 个差异化预设生成单页预览。

感受	建议预设（按适配度排序）
专业/可信	Research Formal, Swiss Modern, Notebook Tabs, Data Dashboard
自信/有力	Roadshow Elegance, Bold Signal, Electric Studio
沉稳/专注	Paper & Ink, Data Dashboard, Swiss Modern
高端/精致	Roadshow Elegance, Dark Botanical, Vintage Editorial

保存预览到 .claude-design/slide-previews/，自动打开。

Step 2.3: 用户选择

询问 (header: "风格选择"): 哪个风格？选项：A / B / C / 混合

---

Phase 3: Generate Presentation

Step 3.0: 读取状态 + 防护模板

1. 读取 .slide-plan.md -- 恢复 Phase 1 的分析结果（类型、视觉形式、需要的文件）
2. 复制 references/safe-base-template.html 作为起点 -- 此模板已内置 viewport-base.css、中文字体、A 股配色、formatCN、SlidePresentation 控制器。在此基础上添加内容，不要删除模板中的任何 CSS 变量或 JS 函数。

Step 3.1: 按需读取参考文件

根据 .slide-plan.md 中列出的 references 读取：

1. STYLE_PRESETS.md -- 获取所选风格的配色、字体、签名元素，覆盖模板中的 SLOT: THEME 变量
2. (按需) references/charts-base.md + 对应的 charts-trend/composition/matrix/flow -- 按 .slide-plan.md 列出的图表类型读取
3. (按需) references/financial-layouts.md -- 如有 KPI/表格/时间线/对比等布局
4. (按需) references/animation-patterns.md -- 高级动画效果
5. (按需) references/html-template.md -- 编辑功能等 JS 参考

Step 3.1.5: ECharts 内联（如需图表）

如果 .slide-plan.md 中图表方案为 ECharts，必须将 ECharts 库内嵌到 HTML 中：

1. 读取本地文件 references/echarts.min.js（~1MB，已预存在 skill 目录中）
2. 将完整内容包裹在 <script>/* ECharts v5 */...内容...</script> 中
3. 放入模板的 <!-- SLOT: ECHARTS INLINE --> 位置
4. 禁止使用 <script src="..."> 外部引用 -- 最终 HTML 必须离线可用

Step 3.2: 生成 slide 内容

在 safe-base-template.html 的 <!-- SLOT: SLIDES --> 位置添加 slide。每张 slide 的视觉形式严格按 .slide-plan.md 执行。

slide 结构由 Phase 1 的 content-mapping 结果驱动，而非固定模板。每份演示文稿的页面组合都应该不同。

---

Phase 3.5: 代码完整性自检（生成后必须执行）

输出最终 HTML 前，逐项检查以下清单。任何一项失败，修复后再继续。

• <html lang="zh-CN"> 已设置
• safe-base-template 的核心 CSS 完整保留（搜索 scroll-snap-type 确认存在）
• 所有 font-size: 使用 clamp()（搜索 font-size:，确认无固定 px/rem 值）
• formatCN 函数已内嵌（如有数字数据）
• 无 emoji 字符（涨跌用 .trend-up / .trend-down CSS 类）
• 每个 .slide 继承了 overflow: hidden（来自 safe-base-template）
• 中文字体已加载（Google Fonts link 包含 Noto+Sans+SC 或 Noto+Serif+SC）
• --color-positive: #dc2626 和 --color-negative: #16a34a 存在（A 股默认）
• 零外部依赖：无 <script src="..."> 外部引用（如有 ECharts，确认是内联 <script> 而非 CDN）

如有任何项失败，修复后再继续。不要跳过自检。

---

Phase 4: PPT Conversion

1. 运行 python scripts/extract-pptx.py <input.pptx> <output_dir>
2. 展示提取结果，与用户确认
3. 进入 Phase 2 选择风格
4. 生成 HTML，保留原始内容和图片

---

Phase 5: Delivery

1. 删除 .claude-design/slide-previews/
2. open [filename].html
3. 告知：文件位置、风格、页数、导航方式、自定义方法
4. 如需通过飞书发送给用户，使用 message 工具：

message({
  action: "send",
  channel: "feishu",
  path: "/home/core/.openclaw/workspace/output/presentation.html",
  filename: "presentation.html",
  caption: "基金分析演示文稿"
})

---

Fallback: 降级模式

当内容超过 15 页、或包含 3 种以上图表类型、或模型多次生成失败时，切换到简化路径：

布局限制为 3 种：

• KPI 卡片网格（指标页）
• 图文分栏（解读页）
• 标题 + 要点列表（论述页）

风格固定为 Data Dashboard： 最简洁的预设，最低出错概率。

功能限制：

• 不使用 inline editing
• 动画只用 fade-in（.reveal 类）
• 图表只用柱状图和折线图（不用旭日图/桑基图等复杂类型）
• 不使用自定义导航（sidebar/nav-dots）

分步生成： 先生成前 3 页预览，确认正确后再生成剩余页面。避免一次生成全部后发现基础层有错。

---

File Map

fund-slides/
  SKILL.md                         ← 入口（始终加载）
  content-mapping.md               ← 信息类型→视觉形式映射 + 强制检查清单
  STYLE_PRESETS.md                  ← 15 个视觉预设
  references/
    safe-base-template.html         ← 防护性基础模板（Phase 3 起点，内置全部安全层）
    echarts.min.js                  ← ECharts v5 库（~1MB，生成时内联到 HTML）
    viewport-base.css               ← 响应式 CSS + CJK + 全局 A 股配色 + 趋势箭头
    animation-patterns.md           ← 动画模式
    charts-base.md                  ← ECharts 基础设施 + 速查表 + SVG
    charts-trend.md                 ← 折线/面积/柱状图
    charts-composition.md           ← 饼图/玫瑰/Treemap/旭日图
    charts-matrix.md                ← 热力图/雷达/散点图
    charts-flow.md                  ← 瀑布/K线/漏斗/桑基图
    financial-layouts.md            ← KPI/表格/时间线/对比布局
    html-template.md                ← HTML 结构 + JS 功能
  scripts/
    extract-pptx.py                 ← PPT 内容提取（Phase 4）

File	When to Read
content-mapping.md	MANDATORY Phase 1.2（强制检查清单）
STYLE_PRESETS.md	MANDATORY Phase 2 + Phase 3.1
references/safe-base-template.html	MANDATORY Phase 3.0（复制为起点）
references/charts-base.md	Phase 3.1 -- 含图表时（基础设施 + 速查表）
references/charts-trend.md	Phase 3.1 -- 含折线/面积/柱状图时
references/charts-composition.md	Phase 3.1 -- 含饼图/玫瑰/Treemap/旭日图时
references/charts-matrix.md	Phase 3.1 -- 含热力图/雷达/散点图时
references/charts-flow.md	Phase 3.1 -- 含瀑布/K线/漏斗/桑基图时
references/financial-layouts.md	Phase 3.1 -- 含 KPI/表格/时间线/对比时
references/animation-patterns.md	Phase 3.1 -- 高级动画时
references/html-template.md	Phase 3.1 -- 编辑功能等 JS 参考