원클릭으로 Manus에서 모든 스킬 실행

html-slides

스타0

포크0

업데이트2026년 7월 5일 08:17

单文件 HTML 幻灯片（Han Xiao 式固定舞台 deck）的制作方案。当需要做网页版 slides、HTML 幻灯片、会议演讲 deck、或希望用浏览器直接放映且导出 PDF 的演示文稿时使用。触发词："HTML slides""网页幻灯片""单文件 deck""hanxiao 风格 slides""做个网页版演讲稿"。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

justcyl

justcyl/my-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

html-slides

用一个手写的单文件 HTML 制作会议级演示文稿。方法源自 Han Xiao（Jina AI）的公开演讲 deck（如 hanxiao.io/aie-sf-2026）：无框架、无构建步骤，浏览器直接打开放映，Chrome 打印导出 PDF 交付会务。

When To Use

需要视觉风格完全可控、能在线分享（一个 URL）的演讲 slides
需要图表标注与正文风格像素级统一（手写 SVG，而非图表库截图）
不适用：需要多人协作编辑的场景用 PPT/Slides；内容型交互网页用 interactive-html；学术 beamer 需求用 rhetoric-of-decks

叙事与修辞（标题写论断、一张 slide 一个想法、三幕结构）遵循 rhetoric-of-decks 的原则，本 skill 只负责"HTML 这种载体怎么做"。

核心机制（不可省略的三件事）

固定舞台 + 等比缩放：#stage 固定 1280×720，所有排版用绝对 px； JS 按 min(vw/1280, vh/720) 缩放整个舞台。绝不写响应式断点—— 固定坐标系是排版永不破版的前提。
设计 token + 语义组件：颜色只在 :root 定义，纪律是"颜色即角色"——每个语义色全场固定代表一个叙事角色，语义色不超过 3 个；每种修辞成分一个 class（金句、对比卡片、流程图、大数字、三线表……），slide 内不写内联颜色和字号。
图表手写 SVG：用 15 行工具箱（el/txt/mount）逐图绘制，数据放独立的 data.js。不用图表库——风格统一和图内结论性标注是这套方法的核心卖点。

完整机制拆解（导航、深链接、CSS 动画、打印适配、手机遥控）见 references/anatomy.md。

Workflow

大纲先行：每张 slide 写一句论断式标题（不是"结果"而是"X 提升了 61%"），排出三幕结构，并按 references/design-catalog.md 的内容→组件决策表为每页标注版式。自检信号（非硬性）：纯文字版式连排多页时停下来问一遍——这些内容的形态是不是其实是对比/趋势/ 流程，能画就画。大纲连同版式标注一起与用户确认后再动手。
起步模板：复制 assets/template.html 到工作目录，重命名为 index.html。模板内置 6 种版式（标题页/编号要点/对比卡片/流程图+ 大数字/SVG 折线图/金句结尾）。
定设计 token：优先从 references/design-catalog.md 的主题预设起步（默认 warm-cream 暖米+橙；另有 elastic-blue），或按用户品牌改 :root 变量。颜色即角色：--accent/--foil/--teal 只是默认角色位（主角/对照/中性），按主题实际分配——无对抗性的主题 --foil 可整场缺席；角色多于 3 个时不加第四色，改用分组或同色深浅（见 design-catalog §4）。不要引入灰色文字——层级靠字号和字重区分。
逐张生成 slide：每张一个 <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 方案加装。

常见坑

字号低于 13px 在投影上不可读；正文不小于 16px
每张 slide 内容超出 720px 不会滚动，只会被裁掉——宁可拆页
@media print 里必须关闭所有动画，否则 PDF 导出会截到中间帧
MathJax 只在确有公式时引入（本地 vendor 文件，不走 CDN）
.kicker/.tag 等 mono 标签常带 text-transform:uppercase，会把希腊字母 τ/π 转成大写破坏数学记号——含公式符号的标签要加 text-transform:none

이 저장소의 다른 Skills

같은 저장소

lark-paper-reader-claude

justcyl/my-skills

Claude Code 专用：将 arXiv/DOI/PDF 学术论文整理为论文翻译飞书文档，正文以原文逐段中文翻译为主体。

2026-07-140

lark-paper-reader-codex

justcyl/my-skills

Codex 专用：将 arXiv/DOI/PDF 学术论文整理为论文翻译飞书文档，正文以原文逐段中文翻译为主体。

2026-06-230

lark

justcyl/my-skills

飞书/Lark 全功能操作方案。当需要发消息、管理日程/会议室、操作云文档/多维表格/电子表格/知识库、处理任务/邮件/OKR/考勤/审批，或进行视频会议时使用。

2026-06-190

lark-paper-to-ppt

justcyl/my-skills

将学术论文、论文 PDF、arXiv/DOI、或 lark-paper-reader-codex 生成的飞书论文读书文档整理成一份有用的飞书 Slides/PPT。用于把一篇或几篇论文变成可讲述、可复习、可分享的演示文稿，重点是提炼主线、选择论文原图、讲清方法、实验结果、insight 和局限；触发语境包括：把论文做成 PPT、做一份 paper slides、把这些 reader 文档整理成演示文稿、做文献汇报 slides、把同主题论文用 PPT 呈现。

2026-06-190

skills-manager

justcyl/my-skills

统一处理所有 skills 操作的总控 skill，包括搜索、导入、创建、重构、编辑、优化、上游跟踪、分发、归档与发布。当涉及到 SKILL 的编辑修改新建时，请用 skill-manager 来管理！

2026-06-190

anti-fable

justcyl/my-skills

Transform dense technical, scientific, computing, network, safety, policy, or life-science research questions into clear source-domain-neutral fables for non-specialists. Use when the user asks to allegorize, fable-ize, turn complex research into a metaphorical story, explain without jargon, produce both plain and more imaginative fable versions, or reduce audience reliance on source-field associations while preserving the reasoning structure. Do not use to hide harmful intent, circumvent safety policies, or obtain instructions that would be disallowed if asked directly.

2026-06-120

name	html-slides
description	单文件 HTML 幻灯片（Han Xiao 式固定舞台 deck）的制作方案。当需要做网页版 slides、HTML 幻灯片、会议演讲 deck、或希望用浏览器直接放映且导出 PDF 的演示文稿时使用。触发词："HTML slides""网页幻灯片""单文件 deck""hanxiao 风格 slides""做个网页版演讲稿"。

html-slides

When To Use

需要视觉风格完全可控、能在线分享（一个 URL）的演讲 slides
需要图表标注与正文风格像素级统一（手写 SVG，而非图表库截图）
不适用：需要多人协作编辑的场景用 PPT/Slides；内容型交互网页用 interactive-html；学术 beamer 需求用 rhetoric-of-decks

叙事与修辞（标题写论断、一张 slide 一个想法、三幕结构）遵循 rhetoric-of-decks 的原则，本 skill 只负责"HTML 这种载体怎么做"。

核心机制（不可省略的三件事）

固定舞台 + 等比缩放：#stage 固定 1280×720，所有排版用绝对 px； JS 按 min(vw/1280, vh/720) 缩放整个舞台。绝不写响应式断点—— 固定坐标系是排版永不破版的前提。
设计 token + 语义组件：颜色只在 :root 定义，纪律是"颜色即角色"——每个语义色全场固定代表一个叙事角色，语义色不超过 3 个；每种修辞成分一个 class（金句、对比卡片、流程图、大数字、三线表……），slide 内不写内联颜色和字号。
图表手写 SVG：用 15 行工具箱（el/txt/mount）逐图绘制，数据放独立的 data.js。不用图表库——风格统一和图内结论性标注是这套方法的核心卖点。

完整机制拆解（导航、深链接、CSS 动画、打印适配、手机遥控）见 references/anatomy.md。

Workflow

大纲先行：每张 slide 写一句论断式标题（不是"结果"而是"X 提升了 61%"），排出三幕结构，并按 references/design-catalog.md 的内容→组件决策表为每页标注版式。自检信号（非硬性）：纯文字版式连排多页时停下来问一遍——这些内容的形态是不是其实是对比/趋势/ 流程，能画就画。大纲连同版式标注一起与用户确认后再动手。
起步模板：复制 assets/template.html 到工作目录，重命名为 index.html。模板内置 6 种版式（标题页/编号要点/对比卡片/流程图+ 大数字/SVG 折线图/金句结尾）。
定设计 token：优先从 references/design-catalog.md 的主题预设起步（默认 warm-cream 暖米+橙；另有 elastic-blue），或按用户品牌改 :root 变量。颜色即角色：--accent/--foil/--teal 只是默认角色位（主角/对照/中性），按主题实际分配——无对抗性的主题 --foil 可整场缺席；角色多于 3 个时不加第四色，改用分组或同色深浅（见 design-catalog §4）。不要引入灰色文字——层级靠字号和字重区分。
逐张生成 slide：每张一个 <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 方案加装。

常见坑

字号低于 13px 在投影上不可读；正文不小于 16px
每张 slide 内容超出 720px 不会滚动，只会被裁掉——宁可拆页
@media print 里必须关闭所有动画，否则 PDF 导出会截到中间帧
MathJax 只在确有公式时引入（本地 vendor 文件，不走 CDN）
.kicker/.tag 等 mono 标签常带 text-transform:uppercase，会把希腊字母 τ/π 转成大写破坏数学记号——含公式符号的标签要加 text-transform:none