技能概述
html-ppt-graphify-dark-graph 係一個專注嘅 16:9 HTML 簡報模板，視覺識別基於 graphify-dark-graph 全頁模板。
核心視覺：深夜漸變背景（#06060c → #0e1020）+ 漂浮 blur orbs + 封面 SVG 力導向圖譜 + 彩虹漸變標題 + JetBrains Mono 命令行高亮 + glass-morphism 卡片。整體調子「AI-native + 科幻 + 暖色」。
適合 dev-tool 發布會、CLI 工具介紹、知識圖譜展示、數據可視化發布會等工程場景。
觸發關鍵字
- 知識圖譜、graph deck、dark graph
- dev tool launch、cli launch、data viz launch
- 暗色圖譜簡報、力導向圖譜
視覺特徵
| 特徵 | 說明 |
|---|---|
| 背景 | 深夜漸變 #06060c → #0e1020 |
| 裝飾 | 漂浮 blur orbs |
| 封面 | SVG 力導向知識圖譜 |
| 標題 | 彩虹漸變（多色漸變文字） |
| 代碼 | JetBrains Mono 命令行高亮 |
| 卡片 | glass-morphism 毛玻璃效果 |
| 調子 | AI-native + 科幻 + 暖色 |
使用方法
自然語言觸發
用 graphify-dark-graph 模板做一份 dev-tool 發布會 PPT
暗底知識圖譜簡報，深夜漸變 + 力導向圖譜封面 + 彩虹標題 + JetBrains Mono 命令行
dark graph deck for CLI tool launch
預先確認
Agent 會先同你確認以下資訊：
- 工具名稱
- 核心能力
- Demo 步驟
- 需唔需要現場敲 CLI
工作流程
- 先讀主技能：所有作者規則在
html-ppt/SKILL.md - 從模板文件夾開始：複製
graphify-dark-graph/中嘅index.html和style.css，保留.tpl-graphify-dark-graphbody class - 處理共享 runtime：模板中嘅
../../../assets/...路徑只在上游目錄中有效，需要複製到項目本地assets/文件夾或內聯 - 替換 demo 內容，不要修改結構 class
- 演講者備註放進
<aside class="notes">或<div class="notes">
共享 Runtime 處理（二選一）
- 方案 A — 複製 + 改寫（推薦）：複製
fonts.css、base.css、animations.css、runtime.js到項目本地assets/，改寫<link>/<script>路徑 - 方案 B — 內聯：將四個文件內容直接嵌入
<style>/<script>標籤，生成單一自包含index.html
功能支持
- 演講者備註（
<aside class="notes">） - 鍵盤導航 runtime
- 36 個主題可切換（按
T鍵） - 動畫支持