| name | loki-deck |
| description | 生成 Loki 个人风格的 HTML PPT 演示文稿（单 HTML 文件，1920×1080 固定舞台，键盘翻页）。提供 12 套配色主题 + 12 种版式 + IP 形象组件库。当用户需要制作演讲/分享/发布会 PPT，或提到"做个 PPT""做个 slides""做个演示文稿"时使用。 |
Loki Deck · 赛博小熊猫个人风格 PPT Skill
为 Loki 量身定制的 HTML PPT 生成系统。单文件输出，浏览器直接打开，键盘翻页，PDF 导出。
这个 Skill 做什么
生成一份单文件 HTML 的横向翻页 PPT，带有 Loki 个人品牌风格：
- 1920×1080 固定舞台 + scale 适配（不在任何屏幕上 reflow）
- 12 套配色主题（从正式到叙事到梦幻，覆盖全场景）
- 12 种版式（封面/章节/列表/图文/数据/金句/对比/步骤/网格/结尾/杂志导读/引用插入）
- IP 形象组件库（9 种状态的小熊猫形象，可在任何版式中插入）
- 噪点纹理 + 光晕效果（打破 AI 光滑感）
- 键盘翻页（← → / Space / ESC 索引）
- Noto Sans SC 900 标题 + Noto Serif SC 300 italic 副标 + Space Grotesk 数字 + JetBrains Mono 元信息
何时使用
合适：
- 线下分享 / 行业内部讲话 / 公开演讲
- AI 工具评测 / 知识分享 / 观点表达
- 个人品牌内容输出
- 需要"一次做完，不用翻页工具"的网页版 slides
不合适：
- 大段表格数据（用常规 PPT）
- 培训课件（信息密度不够）
- 需要多人协作编辑（这是静态 HTML）
工作流（严格按顺序，不能跳步）
Step 1 · 需求澄清 + 内容分析（动手前必做）
1.1 · 如果用户给了主题或文章
先分析内容，不要直接动手。 基于内容做以下判断：
| 判断维度 | 如何判断 | 影响 |
|---|
| 内容主题 | 科技/生活/文化/情感/教育？ | 决定配色推荐 |
| 内容类型 | 观点分享/工具评测/教程/叙事？ | 决定版式组合 |
| 信息密度 | 大量文字/精简要点？ | 决定版式选择（大文字量版式 vs 精简版式） |
| 分享场合 | 公开演讲/内部分享/娱乐性？ | 决定配色和IP形象状态 |
| 预计页数 | 15分钟≈8-10页 / 30分钟≈15-20页 | 决定版式数量 |
1.2 · 配色推荐逻辑
根据内容主题自动推荐配色（用户可改）：
| 内容主题 | 推荐配色 | 理由 |
|---|
| 科技/AI/工具评测 | 墨黑信号 / 电光蓝黄 / 灰蓝深度 | 科技感、冷调、专业 |
| 生活/心理/慢节奏 | 鼠尾草知识分子 / 摩卡慕斯 / 复古棕褐 | 温暖、人文、不刺眼 |
| 影评/文化/深度叙事 | 焦糖深蓝 / 酒红夜幕 / 黑色电影 | 深度、复古、情绪 |
| 演讲/正式/高端 | 午夜金色 / 墨黑信号 / 黑色电影 | 高级感、舞台感 |
| 创意/年轻/梦幻 | 梦幻紫调 / 摇滚墨水 / 墨黑信号 | 年轻、有冲击力 |
| 极简/知识/设计 | 摇滚墨水 / 鼠尾草知识分子 | 克制、高级 |
1.3 · IP 形象推荐逻辑
根据内容场合选择 IP 形象状态：
| 场合 | IP 形象 | 文件名 |
|---|
| 封面/开场 | 原始3D形象（自信站姿） | loki-original-3d.png |
| 分享/演示 | 展示姿势（指向右上方） | loki-presenting.png |
| 写作/创作 | 写作状态（专注写字） | loki-writing.png |
| 科技/代码 | 兴奋+笔记本电脑 | loki-excited-laptop.png |
| 深度思考 | 思考状态（手托下巴） | loki-thinking.png |
| 成就/庆祝 | 庆祝姿势（双手举起） | loki-celebrating.png |
| 日常/轻松 | 酷+手机 | loki-cool-phone.png |
| 疲惫/加班 | 困倦+咖啡 | loki-sleepy-coffee.png |
IP 形象文件位置：templates/ip-library/ 目录下，使用相对路径 ip-library/loki-original-3d.png 引用。
使用方式：在版式的图片预留位或装饰位插入 <img> 标签，用 object-fit: contain 适配。IP 形象适合放在封面右侧、结尾页中心、图文混排页的图片位。
Step 2 · 生成方案 + 预览（Show Don't Tell）
不要直接出最终版。 先给用户一个方案预览：
- 配色选择：基于内容推荐 1 套配色，说明为什么
- 版式规划：列出每页用什么版式，说明节奏安排
- IP 形象选择：说明在哪些页面放什么状态的 IP
- （可选）生成预览页缩略图：让用户一眼看到整体节奏和风格
预览页要求：
- 所有页面以 960×540（50%缩放）排列展示
- 每页标注版式名称和配色
- 让用户一眼看到整体节奏和风格
用户确认后才进入 Step 3。 如果用户不 OK：
- 调整配色 → 换一套主题
- 调整版式 → 换同类型的另一个版式
- 调整 IP 形象 → 换另一个状态
- 调整排版 → 修改具体版式的参数
Step 3 · 生成正式版
用户确认预览后，生成正式的单文件 HTML PPT：
- 拷贝模板：
cp <SKILL_ROOT>/templates/deck.html <项目目录>/index.html
- 选定配色：从
references/themes.md 找到对应主题的 :root 块，替换模板中的 CSS 变量
- 填充内容：从
references/layouts.md 找到对应版式的 HTML 代码块，粘贴并修改文案
- 插入 IP 形象：在需要的位置插入
<img src="...">
- 检查类名：确保所有 class 在模板的
<style> 里有定义
- 检查节奏：深浅交替，连续同色不超过 3 页
Step 4 · 自检
生成后必须检查：
Step 5 · 交付
- 单文件 HTML，浏览器直接打开
- 在回复中说明：用了哪套配色、哪些版式、IP 形象在哪些页面
- 提供文件路径
产物命名规范
- PPT 文件:
loki-deck-{主题名}-{日期}.html（如 loki-deck-amber-20260705.html）
- 截图文件:
loki-deck-{主题名}-{日期}.png
配色系统（12 套主题）
只允许从这 12 套预设里选，不接受用户自定义 hex 值。 颜色搭配是美学底线，保护比自由更重要。
| # | 主题 | 底色 | 主色 | 适合 |
|---|
| 01 | 墨黑信号 | #0A0A0A | #FF5E1A | 正式/科技/公开分享 |
| 02 | 午夜金色 | #121218 | #d4af37 | 高端/演讲/舞台 |
| 03 | 酒红夜幕 | #2a1818 | #c8646a | 复古/爵士/情感叙事 |
| 04 | 焦糖深蓝 | #1A1420 | #D4885A | 深度/影评/文化 |
| 05 | 灰蓝深度 | #0f1419 | #5fe3d0 | 科技/数据/冷静专业 |
| 06 | 黑色电影 | #0d0d0d | #c8a96e | Film Noir/摄影/冷调 |
| 07 | 摩卡慕斯 | #f5f1ed | #8b7355 | Pantone年度色/大地色 |
| 08 | 鼠尾草知识分子 | #f8f7f4 | #9caf88 | 生活/心理/慢节奏 |
| 09 | 复古棕褐 | #ede6dd | #9a7a54 | 旅行/怀旧/老胶片 |
| 10 | 摇滚墨水 | #fafafa | #111 | 极简/摇滚/黑白红 |
| 11 | 梦幻紫调 | #1a1525 | #5fe3d0 | 梦幻/创意/年轻 |
| 12 | 电光蓝黄 | #0A1A3A | #FFD60A | 科技/工具/干货 |
硬规则：
- 一份 deck 只用一套配色，不要中途换色
- 不要接受用户给的任意 hex 值——展示 12 套让选
- 完整色值见
references/themes.md
版式系统（12 种）
每种版式都是独立 HTML 代码块，可以直接从 references/layouts.md 粘贴组合。
| # | 版式 | 用途 | 适合承载 |
|---|
| 01 | 封面·居中大字 | 第 1 页 | 主题宣告 |
| 02 | 章节过渡·大序号 | 每幕开场 | 分段/节奏调节 |
| 03 | 要点列表·编号卡片 | 核心观点 | 3-5 个要点 |
| 04 | 图文混排·上图下文 | 产品展示 | 工具/产品演示 |
| 05 | 数据大字·满版数字 | 抛硬数据 | 统计/核心指标 |
| 06 | 金句·居中引用 | 情绪锚点 | 核心金句 |
| 07 | 对比·左右分栏 | A vs B | 优劣分析 |
| 08 | 步骤·竖向时间线 | 教程/工作流 | 操作步骤 |
| 09 | 网格选择·多卡片 | 推荐/合集 | 多选项展示 |
| 10 | 结尾·CTA引导 | 收尾 | 关注引导 |
| 11 | 杂志导读·双栏正文 | 深度内容 | 大量文字 |
| 12 | 引用插入·长文+Pull Quote | 叙事 | 长文+引用 |
版式选择逻辑：
- 不满意某个版式 → 换同类型的另一个（如不满意"要点列表"可换"杂志导读"或"网格选择"）
- 大文字量场景 → 优先用 11/12（杂志导读/引用插入）
- 精简演讲场景 → 优先用 03/05/06（要点列表/数据大字/金句）
IP 形象组件库（9 种状态）
| # | 状态 | 文件名 | 适合场合 |
|---|
| 01 | 原始3D形象 | loki-original-3d.png | 封面/品牌展示 |
| 02 | 演示姿势 | loki-presenting.png | 分享/教学 |
| 03 | 写作状态 | loki-writing.png | 创作/写作主题 |
| 04 | 兴奋+电脑 | loki-excited-laptop.png | 科技/代码 |
| 05 | 思考状态 | loki-thinking.png | 深度/分析 |
| 06 | 庆祝姿势 | loki-celebrating.png | 成就/里程碑 |
| 07 | 酷+手机 | loki-cool-phone.png | 日常/轻松 |
| 08 | 困倦+咖啡 | loki-sleepy-coffee.png | 加班/效率 |
| 09 | 英雄展示 | loki-hero-pose.png | 品牌/展示/封面 |
IP 形象目录：templates/ip-library/ 目录下，使用相对路径 ip-library/loki-original-3d.png 引用。
使用方式：
<img src="ip-library/loki-presenting.png"
alt="Loki"
style="position:absolute;right:40px;bottom:40px;width:200px;height:200px;object-fit:contain;z-index:3;">
IP 形象建议位置：
- 封面页右侧（原始3D或演示姿势）
- 结尾页中心（庆祝或酷+手机）
- 图文混排页的图片位（根据内容选状态）
- 章节过渡页的装饰位（思考或写作）
通用设计元素（10 种）
所有版式共用的设计元素：
| # | 元素 | 说明 |
|---|
| E01 | 品牌标识 | 赛博小熊猫 SVG + 文字，右下角固定 |
| E02 | 进度条 | 顶部 3px 色条，随页码递增 |
| E03 | 页码标识 | 左下角，JetBrains Mono 等宽 |
| E04 | 噪点纹理 | SVG fractalNoise 覆盖层，opacity 0.04-0.06 |
| E05 | 光晕效果 | radial-gradient 圆形光晕 |
| E06 | 色条标记 | border-left 3px 主色 |
| E07 | 标签角标 | 主色底+白字标签 |
| E08 | 霓虹点 | 8px 圆形+发光，#00D9FF |
| E09 | 引用线 | 30-40px 宽 2px 色条 |
| E10 | 关键词高亮 | 正文关键词主色+font-weight:700 |
字体方案（6 种）
全部开源可商用：
| # | 字体 | 字重 | 用途 |
|---|
| F01 | Noto Sans SC | 900 | 大标题/封面 |
| F02 | Noto Serif SC | 300 italic | 副标题/引用/解读 |
| F03 | Space Grotesk | 700 | 数字/英文标签/序号 |
| F04 | JetBrains Mono | 500 | 元信息/页码/eyebrow |
| F05 | Space Grotesk | 200 | 大数字（极细体） |
| F06 | 得意黑 Smiley Sans | 400 | 仅装饰性背景大字 |
字体方案：标题字体规范以 loki-design-system/references/brand-dna.md 为唯一真相源。本 Skill 的字体选择不与之冲突。
字体加载代码：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@200;300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@200;300;400;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>@import url("https://fontsapi.zeoseven.com/92/main/result.css");</style>
核心设计原则（10 条）
- 所有颜色用 CSS 变量：
var(--accent) 不是 #FF5E1A。直接写 hex = 违规
- 标题只用 Noto Sans SC 900：不用得意黑做主标题（笔画多时糊）
- 大数字用 Space Grotesk 200：极细字重是辨识度的来源
- 眉头标签全大写 + 0.2em 字间距：品牌识别点
- 噪点纹理必须覆盖深底：打破 AI 光滑感
- 深浅区块交替：连续 3 页同色 = 视觉疲劳
- 非对称布局优于对称：有大小对比，不是等宽格
- 字号要有极端反差：标题大的时候副标极细极小
- IP 形象不是装饰：放 IP 是为了品牌识别和情绪传达，不是空位填充
- 不用 emoji：任何输出不带 emoji
叙事弧模板（搭骨架用）
如果用户没有大纲，用这个模板搭：
钩子(Hook) → 1 页 : 封面，抛一个反差/问题/硬数据
定调(Context) → 1-2 页 : 章节过渡+背景说明
主体(Core) → 3-5 页 : 核心内容，用要点/图文/数据/步骤穿插
转折(Shift) → 1 页 : 金句/新观点
收束(Takeaway) → 1-2 页 : 结尾CTA
资源文件导览
loki-deck/
├── SKILL.md ← 你在读
├── templates/
│ ├── deck.html ← 完整 PPT 模板（含所有CSS/JS/翻页逻辑）
│ └── ip-library/ ← IP 形象组件库（9 种状态）
└── references/
├── themes.md ← 12 套配色完整色值
├── layouts.md ← 12 种版式完整 HTML 代码块
├── layout-fill-principles.md ← ★排版填充法则（三段式+装饰填空+Horror Vacui）
└── checklist.md ← 质量检查清单
IP 形象库在 templates/ip-library/ 目录下，使用相对路径 ip-library/loki-original-3d.png 引用。
已在模板中内置IP形象的版式：
- 封面（右侧，
ip-cover）→ 默认用 loki-original-3d.png
- 图文混排（图片位，
ip-imgtext）→ 默认用 loki-excited-laptop.png
- 结尾（左侧，
ip-end-left）→ 默认用 loki-celebrating.png
其他版式可选位置（手动添加）：
- 章节过渡右下角（
ip-chapter）→ 推荐 loki-presenting.png
- 数据页右下角（
ip-data）→ 推荐 loki-thinking.png
- 要点列表右下角（
ip-keylist）→ 推荐 loki-writing.png
加载顺序建议
- 读完
SKILL.md（这个文件）了解整体
- 分析用户内容 → 推荐配色 + 版式 + IP 形象
- 读
references/themes.md 获取完整色值
- 读
references/layouts.md 获取版式 HTML 代码块
- 生成预览 → 用户确认 → 生成正式版
- 读
references/checklist.md 自检
迭代与优化
用户会不断发送新的参考素材（PPT截图/GitHub开源地址/别人的Skill），根据这些素材持续优化：
- 新版式 → 添加到
references/layouts.md
- 新配色 → 添加到
references/themes.md
- 新 IP 状态 → 生成后添加到
ip-library/
- 新组件 → 添加到对应版式或通用元素
每次优化后更新 SKILL.md 的组件数量统计。
