neon-slides - SKILL.md Agent Skill

name: neon-slides description: 生成深色科技感(neon dark)风格的 HTML 幻灯片/演示页面,橙蓝对比配色,适合技术文章解读、架构讲解、产品介绍、课程大纲、直播课件等技术类内容。中文触发:「做一份深色科技风幻灯片」「把这篇文章做成 slides」「生成一个技术课件」「做个直播 deck」「把大纲变成演示页面」「dark tech 风格的幻灯片」。English triggers: "make a dark tech slide deck", "turn this outline into neon slides", "generate an HTML presentation for my tech talk", "create a landing-style slide deck". 只生成单文件 HTML(非 .pptx),支持键盘翻页、跳转、投屏直播。不要用于短图文封面、小红书配图、需要 PowerPoint 格式交付的场景。

Neon Slides

⚠️ 硬性规则 — 所有模型必须遵守(MUST READ FIRST)

这一节的规则优先级最高,如果与后文任何说明冲突,以本节为准。违反任何一条都会导致风格崩坏。

规则 1:必须基于 template.html 而不是重写

正确流程: 打开 template.html → 复制完整文件 → 只修改 <body> 里 <div class="deck"> 内部的 <section class="slide"> 块 → 保存为新文件。

禁止:

❌ 禁止重写、精简、"优化"、替换 <style> 块里的 CSS。一行都不要改。
❌ 禁止重写 <script> 块里的导航 JS(键盘翻页、跳转面板、圆点点击逻辑)。
❌ 禁止修改 :root 里的 CSS 变量。颜色就是 --orange:#F97316 和 --blue:#3B82F6,不要调。
❌ 禁止删除 <link> 字体引用。字体就是 Noto Sans SC + Space Grotesk,不要换。

唯一允许的修改范围:

<title> 标签内的文字
<div class="deck"> 里的所有 <section class="slide"> 内容
如果真的需要一个模板里没有的组件样式,在 <style> 块末尾追加新类(不要改已有的类)

规则 2:只用已定义的类名,禁止发明

下列类名是 skill 的公共词汇,已在 template.html 和 components.md 里定义好了。生成内容时只从这个清单里选:

屏壳: .slide .slide.active .inner .deck
封面: .cover .center .bg .divider .meta
过渡屏: .hero .numeral .chapter-meta .part-label .long-divider .content
标题高亮: .accent-o(橙色渐变文字) .accent-b(蓝色渐变文字)
小标签: .tag(只有一种,永远是橙色,不要造 .tag.blue .tag.green)
流程: .steps .step.o .step.b .arrow.o .arrow.b
对比: .compare .cmp.old .cmp.new
架构卡: .layers .layer.o .layer.b .icon .thumb .foot
清单: .list-grid .item .num .txt
图文: .split .split.reverse .text .media .media.o .media.b .caption
代码: .code .code .k .code .s .code .c

禁止:

❌ 禁止发明新类名(如 .citem .lgi .myitem 等)。
❌ 禁止改缩写(.compare 就是 .compare,不要缩成 .cmp-grid)。
❌ 如果一个元素在这个清单里找不到合适的类,说明它不该存在——用 components.md 里已有的组件组合来表达同一个意思。

规则 3:禁止 inline style 覆盖已有类

禁止这样写:

<!-- ❌ 错误:用 inline style 改已有类的颜色 -->
<span style="color:var(--orange)">关键词</span>
<div class="tag" style="display:none">...</div>
<h1 style="background:linear-gradient(...)">...</h1>

正确写法:

<!-- ✅ 正确:用已定义的类 -->
<span class="accent-o">关键词</span>
<!-- 不想要 tag?直接删掉 HTML,不要 display:none -->
<!-- 标题渐变已经在 .accent-o 里了,不需要自己写 -->

style="..." 属性只有三种场景可以用: (a) 图片 URL 等动态值;(b) 唯一性的微调(如 margin-top:40px);(c) data-num 等数据属性。颜色、字体、渐变、背景、display 值一律禁止 inline。

规则 4:组件有明确使用边界,不能乱用

第 1 屏必须是 .cover —— 绝对不要用 .hero 做首页。.hero 只能用于章节过渡(PART 切换),一份 deck 里最多出现 1-2 次。
封面必须有 .tag —— 不要用 display:none 隐藏它,也不要"为了居中而重造一个"。tag 本身就支持居中,放在 .cover .center 里会自动居中。
每屏只用一个 .accent-o/.accent-b —— 标题里只高亮一个关键词,不要整句染色。
.code 连续使用不超过 2 屏 —— 代码屏太多观众会累。

规则 5:自检清单(生成完后自己过一遍)

在输出 HTML 之前,自问:

我的 <style> 块跟 template.html 的 <style> 块一字不差吗? → 如果改了,回滚。
我有没有用 .citem .lgi .myitem 这种自己造的类名? → 如果有,全部换回规则 2 的清单。
我的 HTML 里有几个 style="..."? → 如果超过 5 个,或者里面有 color/background/gradient/display,全部清理。
第 1 屏的 <section> 有没有 .cover 类? → 如果没有,改。
我的 <script> 块是不是保留了 openJumper closeJumper manyMode 这些函数名? → 如果没有,说明 JS 被我重写了,回滚到 template.html 的原版 script。

概述

何时用

触发场景:

直播课件、课程/训练页、产品介绍页
技术架构解读(AI agent、自动化工作流、基础设施、后端架构等)
产品/功能拆解(多栏卡片 + 对比)
观点型长图文的 web 版

不要用:

真需要 .pptx 文件(丢给同事编辑、传统会议场景)→ 用 pptx skill
小红书单图、公众号封面 → 用 shouhui-infographic 或 canvas-design
纯文本文章 → 用 linyuebanzi-writer

视觉规范(不要改)

配色 CSS 变量:

--bg:#0A0A0A;      /* 底色,不用纯黑 */
--fg:#EDEDED;      /* 正文 */
--muted:#8A8A8A;   /* 副文案 */
--orange:#F97316;  /* 主强调色 */
--blue:#3B82F6;    /* 次强调色 */
--card:#161616;    /* 卡片背景 */

字体: Noto Sans SC(中文 400/700/900) + Space Grotesk(英文标签 500/700)。绝不用 Inter、Roboto、Arial、系统字体。

标题处理: 标题里的关键词用 <span class="accent-o"> 或 <span class="accent-b"> 包一下,做橙/蓝线性渐变文字。每屏只高亮一个词,不要整句染色。

氛围: body 背景左上角橙 radial glow + 右下角蓝 radial glow,极淡(透明度 .06-.08),不要调亮。

组件库

基础组件(在 template.html 里都有现成的类):

.cover — 首页封面专用,居中构图,大号标题 + 橙色分隔线 + 副标题 + 底部 meta 信息。模糊大图作背景(透明度 35%)+ 中心径向暗化渐变,保证标题视觉居中且不被背景抢戏。首页必须用这个,绝对不要用 .hero 做首页。
.tag — 左上角小标签,如 CORE CONCEPT、ARCHITECTURE、SECURITY。英文大写,带橙色发光圆点。每屏一个。
.steps + .step.o / .step.b — STEP 流程卡,橙蓝交替,中间 → 箭头。3-5 步最佳。
.compare — 左右两栏对比卡(旧 vs 新 / 传统 vs 我们)。左灰右橙。
.layers — 三栏卡片网格,每张卡顶部 icon box + 标题 + 正文 + 底部虚线 footer 金句。2-4 栏都行。
.list-grid — 用于清单/checklist 类内容,如「7 个常见漏洞」。
.split — 半屏图文(左文右图或 .split.reverse 左图右文),讲功能配截图最常用。
.hero — 章节过渡屏专用,左侧超大描边编号 01/02/03 + 右侧 PART 标签 + 章节标题 + 橙色长分隔线 + 副文案。只能用作章节切换(如 10 屏 deck 的第 5 屏从原理篇切到实战篇),绝对不要用作首页。10 屏 deck 最多放 1-2 个 .hero。
.layer .thumb — Layer 卡内缩略图,替代 icon box,用于产品/工具对比。

屏位规则(重要)

首页(Slide 0)必须用 .cover — 居中大标题是门面,放左下角会被背景图压住、观众抓不住重点
章节过渡屏才用 .hero — 比如 10 屏的 deck,第 1 屏是 .cover 封面,第 5 屏如果要从"概念篇"切到"实战篇",这时候用 .hero 配一张震撼图做过渡
.cover 和 .hero 视觉上很像但角色完全不同 — cover 是"主角登场",hero 是"场景切换",别搞混

图片来源:网图贴 URL,或在 HTML 旁建 images/ 目录用相对路径。不确定时用 https://placehold.co/800x500/0D0D0D/F97316?text=XXX 先占位。详细用法见 components.md 第 8 节。

内容套路(neon dark 风格)

每屏一个主题 — 不要塞。一屏讲一件事。
副标题放金句 — 不是功能描述,是观点。例如不要写「介绍某个架构」,写「XX 不像功能堆砌的 Agent,而像一个真正的生产力栈」。
底部 footer 金句 — 每张卡片底部虚线框里放那句能单独发朋友圈的话(如「Agent 不再只是临时聪明,而是能积累认知」)。
节奏交替 — 概念屏 → 架构屏 → 对比屏 → 代码/案例屏 → 总结屏。不要连续两屏都是三栏卡。

使用步骤

先看 template.html 拿基础骨架和已有的两屏范例(CORE CONCEPT + ARCHITECTURE)
根据用户大纲规划屏数和每屏组件类型
一屏一个 <section class="slide">,第一屏加 active 类
用户给的纯内容 → 按 neon dark 内容套路改写(加金句、加对比、加 footer)
输出单个 HTML 文件,放到 /mnt/user-data/outputs/
用 present_files 展示

针对直播场景的额外提示

屏数控制在 8-15 屏,多了现场讲不完
代码展示用 <pre> 块,底色 #0D0D0D,橙色左边框
投屏 1920×1080 最佳,.inner 的 max-width:1200px 保证两边不顶满
键盘 ← → 翻页,空格也是下一页,直播时不用碰鼠标

导航交互(已内置,不用改)

模板自带完整导航系统,屏数自适应:

15 页以内 — 底部圆点可点击跳转
15 页以上 — 自动切换为细进度条(可点击任意位置跳转)
键盘快捷键(任意页数):
- ← / → / Space — 上下翻页
- Home / End — 跳首页/末页
- G — 呼出跳转面板,输入页码回车直达,或点击缩略格子
- Esc — 关闭跳转面板

直播中观众问"第 8 页那个配置",按 G 输入 8 回车就跳过去,零停顿。