Cobo HTML Skill — Development skill for Claude Code

cobo HTML skill

Cobo 品牌 HTML 演示技能，适用于 Claude Code。 一行命令安装，输入主题，Claude 自动生成符合 Cobo 官网配色的产品演示幻灯片。

📖 [点这里看使用指南 →](https://beyalee.github.io/cobo-ppt-html-skill/guide.html)

不用 clone，点开就能看。里面有一份**可以直接翻页的示例 deck**，以及安装、用法、交付方式的完整说明。

---

安装

git clone https://github.com/beyalee/cobo-ppt-html-skill ~/.claude/skills/cobo-slides

安装后 Claude Code 会自动识别，无需重启。

仓库原名 `cobo-slides`，现已更名为 `cobo-ppt-html-skill`。旧地址靠 GitHub 重定向仍可 clone，建议直接用新地址。 **本地目录名仍用 `cobo-slides`** —— 技能名由目录名决定。

更新

**这个 skill 不会自动更新。** 它是 clone 到本地的个人 skill，不 pull 就会一直停在你安装那天的版本。

git -C ~/.claude/skills/cobo-slides pull

pull 完**不用重启** Claude Code，当前会话就生效。

从 `2026.09.17` 版起，Claude 每次被调用会自动比对本地与远端版本，有新版会提醒你 —— 但**不会替你更新**，要不要 pull 由你决定。想手动查：

bash ~/.claude/skills/cobo-slides/scripts/check-update.sh

---

使用方式

**1. 直接描述主题**，Claude 自动生成：

帮我做一个 Cobo MPC 钱包的客户演示

**2. 给大纲或全文，只要排版：**

按这个大纲做一份 deck，面向合规团队：
1. 监管背景  2. 规则要求  3. 操作流程  4. 合规联动

**3. 上传 PDF / PPT，转换为 HTML：**

把这份 PPT 转成 HTML @产品介绍.pdf

Claude 会：

1. 询问演示主题、受众、章节结构
2. 给出大纲让你确认 —— 这一步值得认真看，大纲的顶层章节会原样变成导航条的 Tab
3. 生成完整 Cobo 品牌风格的单文件 HTML
4. 在浏览器中打开预览

---

生成效果

• 黑色背景 — #0d0d0d，与 cobo.com 官网一致
• 紫色高亮 — #7C7FE8，与官网 "trusted" 强调色相同
• Plus Jakarta Sans — 简洁现代的正文字体
• 章节式顶部导航 — Logo + 4–6 个章节 Tab + 页码，随滚动高亮当前章节
• 入场动画 — 每页内容依次淡入，章节切换流畅
• 响应式 — 桌面 / 平板 / 手机均可演示
• 零依赖 — 单个 .html 文件，离线可用

导航条给的是结构，不是页码索引

导航条**永远只有 4–6 个章节 Tab（硬上限 7 个）**，哪怕 deck 有 23 页 —— 每页一个 Tab 那不是导航，是页码列表。

·  封面      data-start="0"  data-end="0"
01 市场背景   data-start="1"  data-end="4"
02 产品能力   data-start="5"  data-end="11"
03 集成方案   data-start="12" data-end="17"
04 商务与支持 data-start="18" data-end="21"
·  结语      data-start="22" data-end="22"

每个 Tab 用 `data-start` / `data-end` 覆盖一段页码区间，区间须无缝隙、无重叠地铺满所有页。精确页码在右上角计数器与进度条里。

Tab 名字必须概括该章内容 —— `监管背景` `规则要求` 可以，`第一部分` `01` 不行。**名字是内容，编号只负责排序**：窄屏空间不够时藏编号，永远不藏名字。

---

放映操作

| 操作 | 作用 | |