308 lines
13 KiB
Markdown
308 lines
13 KiB
Markdown
|
---
|
|||
|
|
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](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`，格式如下：
|
|||
|
|
|
|||
|
|
```markdown
|
|||
|
|
# 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](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](references/safe-base-template.html) 作为起点** -- 此模板已内置 viewport-base.css、中文字体、A 股配色、formatCN、SlidePresentation 控制器。在此基础上添加内容，**不要删除模板中的任何 CSS 变量或 JS 函数**。
|
|||
|
|
|
|||
|
|
### Step 3.1: 按需读取参考文件
|
|||
|
|
|
|||
|
|
根据 `.slide-plan.md` 中列出的 references 读取：
|
|||
|
|
|
|||
|
|
1. **[STYLE_PRESETS.md](STYLE_PRESETS.md)** -- 获取所选风格的配色、字体、签名元素，覆盖模板中的 SLOT: THEME 变量
|
|||
|
|
2. **(按需)** [references/charts-base.md](references/charts-base.md) + 对应的 charts-trend/composition/matrix/flow -- 按 `.slide-plan.md` 列出的图表类型读取
|
|||
|
|
3. **(按需)** [references/financial-layouts.md](references/financial-layouts.md) -- 如有 KPI/表格/时间线/对比等布局
|
|||
|
|
4. **(按需)** [references/animation-patterns.md](references/animation-patterns.md) -- 高级动画效果
|
|||
|
|
5. **(按需)** [references/html-template.md](references/html-template.md) -- 编辑功能等 JS 参考
|
|||
|
|
|
|||
|
|
### Step 3.1.5: ECharts 内联（如需图表）
|
|||
|
|
|
|||
|
|
如果 `.slide-plan.md` 中图表方案为 ECharts，**必须**将 ECharts 库内嵌到 HTML 中：
|
|||
|
|
|
|||
|
|
1. 读取本地文件 [references/echarts.min.js](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 工具：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
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 参考 |
|