fund-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 参考 |