一键导入
loki-deck
生成 Loki 个人风格的 HTML PPT 演示文稿(单 HTML 文件,1920×1080 固定舞台,键盘翻页)。提供 12 套配色主题 + 12 种版式 + IP 形象组件库。当用户需要制作演讲/分享/发布会 PPT,或提到"做个 PPT""做个 slides""做个演示文稿"时使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
生成 Loki 个人风格的 HTML PPT 演示文稿(单 HTML 文件,1920×1080 固定舞台,键盘翻页)。提供 12 套配色主题 + 12 种版式 + IP 形象组件库。当用户需要制作演讲/分享/发布会 PPT,或提到"做个 PPT""做个 slides""做个演示文稿"时使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | loki-deck |
| description | 生成 Loki 个人风格的 HTML PPT 演示文稿(单 HTML 文件,1920×1080 固定舞台,键盘翻页)。提供 12 套配色主题 + 12 种版式 + IP 形象组件库。当用户需要制作演讲/分享/发布会 PPT,或提到"做个 PPT""做个 slides""做个演示文稿"时使用。 |
为 Loki 量身定制的 HTML PPT 生成系统。单文件输出,浏览器直接打开,键盘翻页,PDF 导出。
生成一份单文件 HTML 的横向翻页 PPT,带有 Loki 个人品牌风格:
合适:
不合适:
先分析内容,不要直接动手。 基于内容做以下判断:
| 判断维度 | 如何判断 | 影响 |
|---|---|---|
| 内容主题 | 科技/生活/文化/情感/教育? | 决定配色推荐 |
| 内容类型 | 观点分享/工具评测/教程/叙事? | 决定版式组合 |
| 信息密度 | 大量文字/精简要点? | 决定版式选择(大文字量版式 vs 精简版式) |
| 分享场合 | 公开演讲/内部分享/娱乐性? | 决定配色和IP形象状态 |
| 预计页数 | 15分钟≈8-10页 / 30分钟≈15-20页 | 决定版式数量 |
根据内容主题自动推荐配色(用户可改):
| 内容主题 | 推荐配色 | 理由 |
|---|---|---|
| 科技/AI/工具评测 | 墨黑信号 / 电光蓝黄 / 灰蓝深度 | 科技感、冷调、专业 |
| 生活/心理/慢节奏 | 鼠尾草知识分子 / 摩卡慕斯 / 复古棕褐 | 温暖、人文、不刺眼 |
| 影评/文化/深度叙事 | 焦糖深蓝 / 酒红夜幕 / 黑色电影 | 深度、复古、情绪 |
| 演讲/正式/高端 | 午夜金色 / 墨黑信号 / 黑色电影 | 高级感、舞台感 |
| 创意/年轻/梦幻 | 梦幻紫调 / 摇滚墨水 / 墨黑信号 | 年轻、有冲击力 |
| 极简/知识/设计 | 摇滚墨水 / 鼠尾草知识分子 | 克制、高级 |
根据内容场合选择 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 3。 如果用户不 OK:
用户确认预览后,生成正式的单文件 HTML PPT:
cp <SKILL_ROOT>/templates/deck.html <项目目录>/index.htmlreferences/themes.md 找到对应主题的 :root 块,替换模板中的 CSS 变量references/layouts.md 找到对应版式的 HTML 代码块,粘贴并修改文案<img src="..."><style> 里有定义生成后必须检查:
loki-deck-{主题名}-{日期}.html(如 loki-deck-amber-20260705.html)loki-deck-{主题名}-{日期}.png只允许从这 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 | 科技/工具/干货 |
硬规则:
references/themes.md每种版式都是独立 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 | 叙事 | 长文+引用 |
版式选择逻辑:
| # | 状态 | 文件名 | 适合场合 |
|---|---|---|---|
| 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 形象建议位置:
所有版式共用的设计元素:
| # | 元素 | 说明 |
|---|---|---|
| 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 |
全部开源可商用:
| # | 字体 | 字重 | 用途 |
|---|---|---|---|
| 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>
var(--accent) 不是 #FF5E1A。直接写 hex = 违规如果用户没有大纲,用这个模板搭:
钩子(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.pngip-imgtext)→ 默认用 loki-excited-laptop.pngip-end-left)→ 默认用 loki-celebrating.png其他版式可选位置(手动添加):
ip-chapter)→ 推荐 loki-presenting.pngip-data)→ 推荐 loki-thinking.pngip-keylist)→ 推荐 loki-writing.pngSKILL.md(这个文件)了解整体references/themes.md 获取完整色值references/layouts.md 获取版式 HTML 代码块references/checklist.md 自检用户会不断发送新的参考素材(PPT截图/GitHub开源地址/别人的Skill),根据这些素材持续优化:
references/layouts.mdreferences/themes.mdip-library/每次优化后更新 SKILL.md 的组件数量统计。
英语课件生成器:输入任意主题(IP主题如疯狂动物城/小猪佩奇,或原创主题如水果王国), 自动生成适合儿童/青少年的英语学习课件图。模块化题型组合,27种教学组件自由搭配, 覆盖词汇、对话、语法、练习、阅读、游戏、评估等场景。生成可直接喂给图像生成模型的 提示词,一步出图。Use when the user mentions 英语课件, English courseware, English worksheet, 儿童英语, 英语练习题, vocabulary cards, 课件生成, 或想用某个IP主题做英语教学内容。 Also triggers when the user wants to create English learning materials with a specific theme, generate educational worksheets, or build English practice exercises for kids.
增长情报 Skill。从数据到决策——分析公众号历史表现、追踪 AI 订阅投产比、 监测多平台增长、自动复盘内容效果,给出"下一步该做什么"的数据驱动建议。 当用户说"选题建议""数据复盘""投产比""哪篇火了""小红书数据""增长分析" "增长情报""growth intelligence""这周写什么"时使用。
公众号全链路工作台。从写作到发布一条龙:写作→封面→排版→编辑器→发布。 当用户说"写文章""写公众号""排版""公众号排版""做封面""标题方案""飞书转公众号" "公众号编辑器""可视化编辑""全流程"时使用。覆盖 Loki 公众号风格写作、 封面设计与标题方案、微信公众号排版、可视化块编辑器、飞书文档转公众号直发。
Loki 品牌设计系统 — 共享基础层。所有视觉 Skill(loki-deck/loki-social/loki-wechat-pipeline)的品牌规范单一来源(SSOT)。当用户明确要求查看品牌规范或做品牌审计时直接调用。
生成 Loki 个人风格的小红书/社交图文。支持4种模式:simple(快速模板)、brand(品牌风格+IP形象)、compress(公众号转小红书)、advanced(108组件高级定制)。当用户需要制作小红书图文、社交卡片、carousel时使用。
面向学生、应届生和普通求职者评估岗位或招聘 JD 在 AI 时代的任务暴露度,拆解日常职责, 按可替代性和人类必要性双维度评分,输出可投方向、作品集项目、简历改写、7 天行动计划、 招聘方视角、投递判断、高危区/混合区/安全区判断和 AI 新增机会。Use when 用户说 "帮我分析岗位""这个工作会被AI替代吗""看看我的岗安不安全""career analysis""AI暴露度" "岗位诊断""简历怎么改""找实习""校招""应届生""专业能干嘛""简历空白""作品集怎么做" "招聘方怎么看我的简历""找工作AI""就业分析""想转行""换个方向""没有相关经验能做什么", 或提出任何岗位生存力、JD 匹配度、学生求职行动、转行规划、简历证明力、AI 求职策略相关需求。