wuchubuzai2018-expert-skills-hub-haizei-cyberpunk-terminal-ppt.ocm.json json {
"ocm" : "1" ,
"id" : "wuchubuzai2018-expert-skills-hub-haizei-cyberpunk-terminal-ppt" ,
"kind" : "skill" ,
"name" : "haizei-cyberpunk-terminal-ppt" ,
"description" : "生成赛博朋克终端控制台风格的网页 PPT（HTML 单文件）。设计语言是把 PPT 伪装成正在被解构/调试的开发者控制台。典型场景用户说做个赛博朋克风的网页 PPT、帮我做一份终端风格的演示稿、用 cyberpunk terminal 风格讲 xxx。" ,
"publisher" : "wuchubuzai2018" ,
"version" : "1.0.0" ,
"capabilities" : {
"domains" : [
"math"
],
"tags" : [
"skill-md" ,
"skills-sh"
],
"languages" : [
"en"
]
},
"quality_prior" : 0.6 ,
"examples" : [
"生成赛博朋克终端控制台风格的网页 PPT（HTML 单文件）。设计语言是把 PPT 伪装成正在被解构/调试的开发者控制台。典型场景用户说做个赛博朋克风的网页 PPT、帮我做一份终端风格的演示稿、用 cyberpunk terminal 风格讲 xxx。"
],
"primary" : false ,
"metadata" : {
"source" : {
"provider" : "skills.sh" ,
"repository" : "https://github.com/wuchubuzai2018/expert-skills-hub" ,
"path" : "skills/haizei-cyberpunk-terminal-ppt/SKILL.md" ,
"ref" : "HEAD" ,
"url" : "https://github.com/wuchubuzai2018/expert-skills-hub/blob/HEAD/skills/haizei-cyberpunk-terminal-ppt/SKILL.md" ,
"key" : "wuchubuzai2018/expert-skills-hub/skills/haizei-cyberpunk-terminal-ppt/SKILL.md"
}
},
"instructions" : "# Cyberpunk Terminal PPT · 完全自包含设计系统\n\n> 把 PPT 伪装成\"正在被解构/调试的开发者控制台\"。每一页都是一个 IDE / 终端 / 调试器的瞬间截图。\n\n## 何时使用\n\n- 用户想要\"**赛博朋克风**\"、\"**终端风**\"、\"**控制台风**\"的 PPT\n- 用户想要\"**开发者视角**\"、\"**给工程师看的演示**\"的产品介绍\n- 用户想要\"**可读性极高的代码风格**\" PPT，而不是营销风\n- 用户提供了具体内容（章节 / 卡片 / 数字 / 流程），需要视觉化排版\n\n## 何时**不要**使用\n\n- 营销风首页（用渐变 + 大图 + 圆角按钮）\n- 商务路演风（用粗宋体 + 大量金色装饰）\n- 给高管决策用（建议改用最小化的\"白底黑字 + 1-2 数字\"风）\n\n## 快速开始（AI 工作流）\n\n```\n1. 先读 references/00-design-system.md ← 设计令牌 + 基础 HTML 底座\n2. 按章节类型选 layout（共 19 种）：\n - 设计封面（boot log + 12-col + speaker box） → references/01-cover.md\n - 设计目录（12-col featured 卡 + 衬线章节名） → references/02-toc.md\n - 设计章节封面（中心 wrapper + accent 单词 + /* */ 描述） → references/03-part-cover.md\n - 设计正文（8 种 layout，含 thesisPanel+stepCard / frameworkCard） → references/04-content-pages.md\n - 设计组件（11 个原子组件） → references/05-components.md\n - 渲染 / 性能 / 调试 → references/06-rendering-tips.md\n - 设计高级页（19 种 layout，含 8 种高频） → references/07-advanced-layouts.md\n - 设计路线图瓦片（最复杂） → references/08-roadmap-tile.md\n3. 复制对应 md 里的「完整 HTML 模板」→ 替换占位符 [LIKE-THIS] → 写新 slide\n4. 浏览器打开 index.html，按 ← → 翻页浏览\n5. 用 Puppeteer 抓 PDF / 截图（可选）\n node ../.claude/skills/haizei-cyberpunk-terminal-ppt/scripts/render-ppt.mjs ./index.html --out ./slides\n```\n\n## 设计语言速览（30 秒版）\n\n| 维度 | 值 |\n|---|---|\n| 背景 | `#060a14`（深海军蓝，绝不纯黑）|\n| 网格 | 36px 浅蓝网格 + 双 radial gradient |\n| 主色 | `#00ff9c`（薄荷绿，41%）+ `#5ce1ff`（青蓝，26%）+ `#ffb020`（琥珀，19%）+ `#ff2e88`（品红，13%）|\n| 字体 | JetBrains Mono + Space Grotesk + Noto Sans SC + Noto Serif SC |\n| 字号 | 主体 9-17px（91%），靠留白 + 颜色 + 字距 |\n| 装饰 | 闪烁光标（70%）+ 3px 装饰条（90%）+ box-shadow 辉光（90%）|\n| 灵魂 | **window-chrome（IDE 标题栏）+ footer-chrome（命令行）+ slide-corner（`[N/M] LABEL`）三件套** |\n| 新增 | 进度条（顶部 2px）/ line-numbers（左侧 40px 01-30 列）/ 衬线（章节名 / 标题） |\n\n## 反模式（绝对不要做）\n\n- ❌ 纯白 / 纯黑背景 → 用 `#060a14`\n- ❌ emoji 作为视觉元素 → 用 `▸ ▍ ◆ ▌` 等 unicode 字符\n- ❌ 圆角 ≥ 8px → 保持 4px 硬核感\n- ❌ 32-48px 大段正文 → 主体不超过 17px\n- ❌ 在终端命令栏里写中文 → 保持英文命令\n- ❌ Material Design 风格的悬浮按钮\n- ❌ 用渐变背景填充 hero\n- ❌ **缺 window-chrome / corner / footer 三件套**（每页必备）\n- ❌ **用 emoji 或彩色圆点代替 `▌` 光标字符**（用 `<span class=\"blink\">▌</span>`）\n\n## references 速查（核心 9 + 进阶 6 + 收尾 5）\n\n### 主目录（核心 · 始终加载）\n\n| 文件 | 何时读 | 内容 |\n|---|---|---|\n| [00-design-system.md](references/00-design-system.md) | **第一份必读** | 设计令牌 + window-chrome + panel + corner + footer + line-numbers + 进度条 + 12-col grid |\n| [01-cover.md](references/01-cover.md) | 设计封面 | boot log + 12-col 完整版（speaker box + ASCII 框 + 3 色 legend）+ 5 个变体 |\n| [02-toc.md](references/02-toc.md) | 设计目录 | 12-col featured 全宽卡 + 6/6 / 4/8 错落 + 衬线章节名 + 3 个变体 |\n| [03-part-cover.md](references/03-part-cover.md) | 设计章节封面 | 中心 wrapper（96px 中文 + 68px 英文 subtitle）+ accent 单词 + `/* */` 描述 + 5 个变体 |\n| [04-content-pages.md](references/04-content-pages.md) | 设计正文 | **8 种基础 layout**：thesisPanel+stepCard（推荐） / 4-card / 3-card / 2-col / KPI / timeline / roadmap / frameworkCard |\n| [05-components.md](references/05-components.md) | 设计组件 | **11 个组件**：statCard / kpiCard / stepKpi / channelBar / priorityChip / hBar / kpiBar / spectrum / progressRing / accentBadge / noteCard |\n| [06-rendering-tips.md](references/06-rendering-tips.md) | 渲染/调试 | 字体加载 / grid 技巧 / 动画 / 性能 / 调试 |\n| [07-advanced-layouts.md](references/07-advanced-layouts.md) | 设计高级页（核心） | **8 种高频 layout 完整模板** + nav + Checklist + 失败模式（90K · 拆分后） |\n| [08-roadmap-tile.md](references/08-roadmap-tile.md) | 设计路线图 | roadmap-tile 完整模板（4 列 × N tile）|\n\n### advanced-layouts/ 子目录（进阶 · 按需加载）\n\n| 文件 | 何时读 | 内容 |\n|---|---|---|\n| [advanced-layouts/README.md](references/advanced-layouts/README.md) | 子目录导航 | 渐进式加载策略 + 完整 21 种 layout 目录 |\n| [advanced-layouts/01-basic-patterns.md](references/advanced-layouts/01-basic-patterns.md) | 基础但低频 layout | **9-19 基础模式**：arch-flow / intro-typ / layer-stack / loop-evo / repo-tree / yaml-code / spectrum-page / note-card-page / harness-table / quadrant / mode-stack（18K）|\n| [advanced-layouts/02-supplementary.md](references/advanced-layouts/02-supplementary.md) | 复杂中段内容页 | **A1-A13 补充模式**：part-cover-CN / layerFlowPanel / progressionStrip+denseSplit / transformSideBySide / timelineLadder+antiPattern / roleMatrix 6-grid / qaGrid 4-col / heroThesis+insightTable / stepTabPanel / principle+goldenRule / docCardGrid / qaDual 2x2 / kanbanBacklog+metric（124K）|\n\n### closing/ 子目录（收尾页 · 按需加载）\n\n| 文件 | 何时读 | 内容 |\n|---|---|---|\n| [closing/README.md](references/closing/README.md) | 收尾页导航 | 4 种收尾 layout 速查 + 何时用哪个 |\n| [closing/01-thanks-qa.md](references/closing/01-thanks-qa.md) | PPT 结束时 | **A14 thanksQandA**：致谢大字 + 3 列 Q&A 邀请 |\n| [closing/02-cta-contact.md](references/closing/02-cta-contact.md) | 留资环节 | **A15 ctaAndContact**：主 CTA + 二维码 + 联系方式 grid |\n| [closing/03-recap-summary.md](references/closing/03-recap-summary.md) | 培训场景 | **A16 recapSummary**：5 张 takeaway 卡片 + TL;DR |\n| [closing/04-references-credits.md](references/closing/04-references-credits.md) | 学术演讲 | **A17 referencesAndCredits**：参考资料 + 致谢 + 版权 |\n\n## 21 种 layout 全景速查\n\n### 8 种高频 layout（核心反复出现的模式 · 见 [07-advanced-layouts.md](references/07-advanced-layouts.md)）\n\n| Layout | 用途 | 对齐参考站 slide |\n|---|---|---|\n| **commandPanel + hubRing + laneStack** | AI 调度中枢 + 双泳道对比 | slide 5 |\n| **specCanvas + stepTrack + foundationBar** | 方法论主链（6 步 + 上下闸口）| slide 10 |\n| **layerCard 9-grid + intro + side thoughtPanel** | 9 层架构 + 侧栏思考 | slide 17 |\n| **carrierPanel + channelGrid (A/B/C)** | \"在哪里 + 怎么用\" 4 通道对比 | slide 12 |\n| **shotStage + filmstrip** | 截图演示 + 多缩略图切换 | slide 7 |\n| **stagePanel (split image) + toolCompareGrid** | 双图对比 + 4 工具对比 | slide 8 |\n| **docCard + bridge + matrixPanel** | 两栏对比 + 中间 ≠ + 4 行矩阵 | slide 30 |\n| **heroCard + discussCard + footer open floor** | 收尾页（Q&A / 开放讨论）| slide 37 |\n\n### 9 种基础模式（见 [advanced-layouts/01-basic-patterns.md](references/advanced-layouts/01-basic-patterns.md)）\n\n| # | Layout | 用途 | 对齐 slide |\n|---|---|---|---|\n| 9 | arch-flow | 架构图 / 数据流 | - |\n| 10 | intro-typ | 中文大字 hero 引言 | - |\n| 11 | layer-stack | N 层堆叠 | - |\n| 12 | loop-evo | 循环 / 演进 | - |\n| 13 | repo-tree | 仓库目录树 | - |\n| 14 | yaml-code | YAML / 配置代码块 | - |\n| 15 | spectrum-page | 全宽 spectrum 大图 | - |\n| 16 | note-card-page | 多并列 note-card | - |\n| 17 | harness-table | 表格 / Harness 配置 | - |\n| 18 | quadrant | 2×2 四象限 | - |\n| 19 | mode-stack | 模式对比 / 错位堆叠 | - |\n\n### 13 种补充模式（见 [advanced-layouts/02-supplementary.md](references/advanced-layouts/02-supplementary.md)）\n\n| # | Layout | 用途 | 对齐 slide |\n|---|---|---|---|\n| A1 | part-cover-CN | 中文封面 + 英文副标题大字 | 20 / 25 / 34 |\n| A2 | layerFlowPanel | 5 层架构 + 2x2 Loop + 4 要点 | 18 |\n| A3 | progressionStrip + denseSplit | 4 阶段条 + 6 primitive + 适合/不适合 + 叙事 | 19 |\n| A4 | transformSideBySide | AS-IS/TO-BE + TRANSFORM + Core Formula | 22 |\n| A5 | timelineLadder + antiPattern | T+0/+6M/+18M + KPI + 阶段警告 + 反模式 | 23 |\n| A6 | roleMatrix 6-grid | 2x3 角色卡 + KEEP/SHRINK/AI TAKES/NEW + 公理条 | 24 |\n| A7 | qaGrid 4-col | 4 列问答 + 编号答案 + 对答话术 | 26 |\n| A8 | heroThesis + insightTable | 顶部 hero + 左洞察 + 右表格 | 27 |\n| A9 | stepTabPanel | 落地三步法 tab + 三步深讲 | 28 |\n| A10 | principleCard + goldenRule | 4 哲学 + 9 黄金法则 + CORE INSIGHT | 29 |\n| A11 | docCardGrid | 文档卡（彩边 + 元数据 + tags + CTA） | 31 |\n| A12 | qaDual 2x2 | 2x2 + QUESTIONS/ANSWER 双栏 | 32 / 33 |\n| A13 | kanbanBacklog + metric | 4 列 backlog + 优先级 + 底部 KPI 条 | 35 / 36 |\n\n### 4 种收尾页 layout（见 [closing/](references/closing/)）\n\n| # | Layout | 用途 | 文件 |\n|---|---|---|---|\n| A14 | thanksQandA | 致谢大字 + 3 列 Q&A 邀请 | [closing/01-thanks-qa.md](references/closing/01-thanks-qa.md) |\n| A15 | ctaAndContact | 主 CTA + 二维码 + 联系方式 grid | [closing/02-cta-contact.md](references/closing/02-cta-contact.md) |\n| A16 | recapSummary | 5 张 takeaway 卡片 + TL;DR | [closing/03-recap-summary.md](references/closing/03-recap-summary.md) |\n| A17 | referencesAndCredits | 参考资料 + 致谢 + 版权说明 | [closing/04-references-credits.md](references/closing/04-references-credits.md) |\n\n## 自包含原则\n\n**这个 skill 不依赖任何外部文件**：\n- ❌ 不引用项目根目录 `archive/`、`tmp/`、`参考资料/`\n- ❌ 不引用具体 slide 路径\n- ❌ 不包含真实文案 / 真实 IP / 真实项目路径\n- ✅ 每个 references md 都给完整可运行的 HTML 模板（带 `[PLACEHOLDER]` 占位符）\n- ✅ 所有 CSS 都是通用的设计令牌 + layout 模式\n\n## scripts\n\n### scripts/render-ppt.mjs\n通用 PPT 渲染工具：用 Puppeteer 把\"按 ← → 翻页\"的 PPT 网页的所有 slide dump 为单文件 HTML。\n```bash\nnode scripts/render-ppt.mjs <url> --out ./rendered\n```\n\n## 输出验证清单\n\n完成一份 PPT 后，逐项检查：\n\n- [ ] **每页都有 window-chrome + footer-chrome + slide-corner 三件套**（必备）\n- [ ] **slide-corner 内容随页变化**：`[ 01 / 37 ] COVER` / `[ 02 / 37 ] INDEX` / `[ 03 / 37 ] PART 0`\n- [ ] **左侧 line-numbers 列可见**（40px 01-30）\n- [ ] **顶部 2px 进度条**反映当前翻页进度\n- [ ] **hash 深链可用**：URL `#5` 直接打开第 5 页\n- [ ] 至少 1 页有闪烁光标 `▌`（用 `<span class=\"blink\">▌</span>`）\n- [ ] 颜色不超过 4 种（green / cyan / amber / pink）\n- [ ] 字体四件套都已加载（JetBrains Mono + Space Grotesk + Noto Sans SC + Noto Serif SC）\n- [ ] 主体字号 9-17px（无 32-48px 大段正文）\n- [ ] 背景是 `#060a14`（绝不用纯黑）\n- [ ] 圆角 ≤ 4px（硬核感）\n- [ ] 键盘 ← → Space F 可用（额外支持 Home / End / PageUp / PageDown）\n- [ ] 桌面 1440×900 视口下不溢出\n- [ ] 至少 1 个 ASCII 框 / 命令行元素（保持终端感）\n- [ ] **boot log 必含 1 行 `[ WARN ]`**（即使在 cover 之外）" ,
"cost" : {
"context_tokens" : 2212
}
}
