菜单
单文件 HTML 幻灯片（Han Xiao 式固定舞台 deck）的制作方案。当需要做网页版 slides、HTML 幻灯片、会议演讲 deck、或希望用浏览器直接放映且导出 PDF 的演示文稿时使用。触发词："HTML slides""网页幻灯片""单文件 deck""hanxiao 风格 slides""做个网页版演讲稿"。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/justcyl/my-skills --skill html-slides命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
使用 Kapibala 的 OpenAI 兼容图片接口生成/编辑位图图片，默认模型 gpt-image-2。当需要生成图片、编辑已有图片、或批量生成候选图供挑选时触发。触发词："生成图片""画一张""image generation""edit this image""gpt-image-2""批量出图"。
Add, collect, design, audit, and integrate SVG elements into editable diagrams.net/draw.io scientific figures. Use when the user asks to supplement a draw.io diagram with SVG icons, mechanisms, biological objects, model components, pathway symbols, instruments, graphical abstract elements, or publication-style vector assets. Every execution must first ask the user to choose the SVG source mode: network search or self-designed SVG. For network mode, search for multiple relevant SVG candidates for later user selection, record sources and license notes, and fall back to self-designed SVG for concepts with no suitable result. For self-design mode, create restrained, editable, Nature-style SVGs from simple vector primitives. Use with .drawio, SVG, diagrams.net, 科研流程图, 论文示意图, SVG补图, 图标补充, and draw.io配图.
Two-stage workflow for publication-style scientific schematics: generate or use a raster reference with imagegen/PNG/JPG/WebP, then trace it into an editable diagrams.net/draw.io file using research-drawio-skill. Use for Nature-style scientific illustrations, graphical abstracts, model or mechanism schematics, biomedical workflows, AI architecture figures, and paper-style visual drafts that should become editable .drawio source. For complex recognizable elements, author or select dedicated SVG glyphs and compare rendered SVGs against reference crops before inserting them, instead of assembling those elements from draw.io primitives. Enforces a minimum three-round strict pixel-level export/compare/fix loop for close raster-to-draw.io tracing tasks. Use with imagegen, draw.io, diagrams.net, scientific illustration, graphical abstract, paper schematic, figure tracing, SVG glyph tracing, and drawio redraw requests.
基于 SOC 职业分类
正在显示 SKILL.md
| name | html-slides |
| description | 单文件 HTML 幻灯片（Han Xiao 式固定舞台 deck）的制作方案。当需要做网页版 slides、HTML 幻灯片、会议演讲 deck、或希望用浏览器直接放映且导出 PDF 的演示文稿时使用。触发词："HTML slides""网页幻灯片""单文件 deck""hanxiao 风格 slides""做个网页版演讲稿"。 |
用一个手写的单文件 HTML 制作会议级演示文稿。方法源自 Han Xiao（Jina AI）的 公开演讲 deck（如 hanxiao.io/aie-sf-2026）：无框架、无构建步骤，浏览器直接 打开放映，Chrome 打印导出 PDF 交付会务。
interactive-html；学术 beamer 需求用 rhetoric-of-decks叙事与修辞（标题写论断、一张 slide 一个想法、三幕结构）遵循
rhetoric-of-decks 的原则，本 skill 只负责"HTML 这种载体怎么做"。
#stage 固定 1280×720，所有排版用绝对 px；
JS 按 min(vw/1280, vh/720) 缩放整个舞台。绝不写响应式断点——
固定坐标系是排版永不破版的前提。:root 定义，纪律是"颜色即
角色"——每个语义色全场固定代表一个叙事角色，语义色不超过 3 个；
每种修辞成分一个 class（金句、对比卡片、流程图、大数字、
三线表……），slide 内不写内联颜色和字号。el/txt/mount）逐图绘制，
数据放独立的 data.js。不用图表库——风格统一和图内结论性标注是
这套方法的核心卖点。完整机制拆解（导航、深链接、CSS 动画、打印适配、手机遥控）见
references/anatomy.md。
references/design-catalog.md 的
内容→组件决策表为每页标注版式。自检信号（非硬性）：纯文字版式
连排多页时停下来问一遍——这些内容的形态是不是其实是对比/趋势/
流程，能画就画。大纲连同版式标注一起与用户确认后再动手。assets/template.html 到工作目录，重命名为
index.html。模板内置 6 种版式（标题页/编号要点/对比卡片/流程图+
大数字/SVG 折线图/金句结尾）。references/design-catalog.md 的主题预设
起步（默认 warm-cream 暖米+橙；另有 elastic-blue），或按用户品牌改
:root 变量。颜色即角色：--accent/--foil/--teal 只是默认
角色位（主角/对照/中性），按主题实际分配——无对抗性的主题
--foil 可整场缺席；角色多于 3 个时不加第四色，改用分组或同色
深浅（见 design-catalog §4）。不要引入灰色文字——层级靠字号和
字重区分。<section class="slide">，只用语义组件
拼装。缺组件时先看 references/anatomy.md 的组件清单；确实没有就
按 references/design-catalog.md §4 的生成语法造新组件——符合语法
的新组件天然和全场和谐（样式进 <style> 统一管理，不写内联）。references/design-catalog.md 的配方库里选图型
（折线/分组柱状/堆叠条/坡度图/热力图/散点/时间轴/盒线图）。数据写进
data.js（const DATA = {...}），每图一个 drawXxx() 函数挂到对应
容器 id。坐标轴刻度、单位、图内 legend、结论性标注（直接写在数据点旁）
都要有；legend 放数据空白区，截图确认不与数据重叠。scripts/screenshot.sh <file> <页码...> 无头截图逐张检查
溢出与对齐（内容超出 720px 高度是最常见问题）。有 figure-checker
可用时交给它做视觉 QA。f 全屏、
点击左 1/3 后退右 2/3 前进、#N 跳页）；需要 PDF 时 Chrome 打印、
纸张自定义 1280×720px、无边距。需要手机遥控翻页时按
references/anatomy.md 的 sync 方案加装。@media print 里必须关闭所有动画，否则 PDF 导出会截到中间帧.kicker/.tag 等 mono 标签常带 text-transform:uppercase，会把
希腊字母 τ/π 转成大写破坏数学记号——含公式符号的标签要加
text-transform:none