loki-deck

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. 配色选择：基于内容推荐 1 套配色，说明为什么
2. 版式规划：列出每页用什么版式，说明节奏安排
3. IP 形象选择：说明在哪些页面放什么状态的 IP
4. （可选）生成预览页缩略图：让用户一眼看到整体节奏和风格

预览页要求：

• 所有页面以 960×540（50%缩放）排列展示
• 每页标注版式名称和配色
• 让用户一眼看到整体节奏和风格

用户确认后才进入 Step 3。 如果用户不 OK：

• 调整配色 → 换一套主题
• 调整版式 → 换同类型的另一个版式
• 调整 IP 形象 → 换另一个状态
• 调整排版 → 修改具体版式的参数

Step 3 · 生成正式版

用户确认预览后，生成正式的单文件 HTML PPT：

1. 拷贝模板：cp <SKILL_ROOT>/templates/deck.html <项目目录>/index.html
2. 选定配色：从 references/themes.md 找到对应主题的 :root 块，替换模板中的 CSS 变量
3. 填充内容：从 references/layouts.md 找到对应版式的 HTML 代码块，粘贴并修改文案
4. 插入 IP 形象：在需要的位置插入 <img src="...">
5. 检查类名：确保所有 class 在模板的 <style> 里有定义
6. 检查节奏：深浅交替，连续同色不超过 3 页

Step 4 · 自检

生成后必须检查：

• 浏览器 Tab 标题不是占位符
• 字体全部加载（Noto Sans SC / Noto Serif SC / Space Grotesk / JetBrains Mono）
• 噪点纹理覆盖所有深底页面
• 页码标识正确（01/10, 02/10...）
• 品牌标识（赛博小熊猫 SVG）在每页右下角
• 进度条在顶部正确递增
• 键盘翻页正常工作（← → / Space / ESC）
• IP 形象正确显示（如果使用了）
• 没有文字溢出或重叠
• 深浅页面交替，没有连续 3 页同色

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 条）

1. 所有颜色用 CSS 变量：var(--accent) 不是 #FF5E1A。直接写 hex = 违规
2. 标题只用 Noto Sans SC 900：不用得意黑做主标题（笔画多时糊）
3. 大数字用 Space Grotesk 200：极细字重是辨识度的来源
4. 眉头标签全大写 + 0.2em 字间距：品牌识别点
5. 噪点纹理必须覆盖深底：打破 AI 光滑感
6. 深浅区块交替：连续 3 页同色 = 视觉疲劳
7. 非对称布局优于对称：有大小对比，不是等宽格
8. 字号要有极端反差：标题大的时候副标极细极小
9. IP 形象不是装饰：放 IP 是为了品牌识别和情绪传达，不是空位填充
10. 不用 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

---

加载顺序建议

1. 读完 SKILL.md（这个文件）了解整体
2. 分析用户内容 → 推荐配色 + 版式 + IP 形象
3. 读 references/themes.md 获取完整色值
4. 读 references/layouts.md 获取版式 HTML 代码块
5. 生成预览 → 用户确认 → 生成正式版
6. 读 references/checklist.md 自检

---

迭代与优化

用户会不断发送新的参考素材（PPT截图/GitHub开源地址/别人的Skill），根据这些素材持续优化：

• 新版式 → 添加到 references/layouts.md
• 新配色 → 添加到 references/themes.md
• 新 IP 状态 → 生成后添加到 ip-library/
• 新组件 → 添加到对应版式或通用元素

每次优化后更新 SKILL.md 的组件数量统计。