1实现原理 · 为什么它能做到
该 skill 是 html-anything 的「模板包」：frontmatter 供选择器取元数据，SKILL.md 正文（frontmatter 之后的 body）被 loader 原样读出后作为模型指令。
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
注：本模板正文 53 行 / 2930 字节（本批 9 个模板里最长）；frontmatter 走 parseFrontmatter 拆成 fm/body 两份，目录内没有任何脚本参与。
真正送进模型的 prompt = 共享设计指令 + 本模板正文 + 【输入格式】+【用户内容】；共享指令还带一条覆盖规则，声明模板里的页数/版面数字不是上限。
next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
注：同文件里紧随的覆盖规则逐字写着：模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
产出纪律由共享指令硬性约束：禁止 agent 使用任何文件系统工具，HTML 必须以 stdout 文本流式输出、由前端落盘。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何
注：本模板自身不声明落盘方式，完全依赖这条共享约束。
核心机制是「锁死画布 + 自由布局」：每页强制 1920×1080 并用 transform: scale 适配视窗，换取页内排布的完全自由。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
- 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `transform: scale(...)` 适配视窗 (默认 `scale(0.7)` 居中)。
注：与固定版式池型 deck 相反：这里只锁画布与调色，版式由内容性质自选（cover / question / quote / 三列 / 五列 / 数据卡…），并另有「绝对禁止 overflow」兜底。
用「单一视觉重心」把自由度收回来：不强制模板，但每页只允许 1 个视觉重心，禁止并列两段等权文字。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
- 但每页**必须遵守一条规则**: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要"什么都强调"。
注：这是对「自由组合」最常见失败模式（每页堆满、无主次）的显式反制，属于 prompt 层的验收条件。
调色与排版被锁成枚举：4 套调色板选 1 套全程不改，字号只用固定 10 级 type scale，边距只用 96/128/160 三档。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
【调色板 — 每个 deck 选 1 套, 全程不改】
注：同段还锁了字号 `2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220`。
页容器被规定为全仓 deck 约定 `<section class="slide" data-slide-id="N">`，应用侧 deck.ts 据此把整份 HTML 切成可逐页截图的独立文档。
next/src/lib/deck.ts
<section class="slide" data-slide-id="N">
注：注意：随附的 example.html 并未遵守这条约定（见 verification.second_pass 的 discrepancy 项）——约定本身是应用侧预览/导出链路的前提。
与真实上游同源：模板自述 Inspired by 1weiho/open-slide，frontmatter 带 example_source_url 出处置标，README 第三方来源表同步登记。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
example_source_url: "https://github.com/1weiho/open-slide"
注：属「可追溯的移植」而非无名改写；该 URL 只作来源展示，不产生请求。
2核心能力
01锁死 1920×1080 画布 + transform: scale(0.7) 居中适配，要求每页 no-scroll
024 套调色板（Ash & Lime / Sea Indigo / Mate Mocha / Pearl Rose）选 1 套、全程不改
0310 级 type scale + 3 档 padding（96/128/160）的排版约束
04内容性质驱动的自由版式池（cover / question / quote / image-text / 三列 / 五列 / 列表 / 数据卡 / 满版图）
05字体族限定：Inter Tight / Inter（或 Source Serif Pro），中文 Noto Sans SC / Noto Serif SC，数据用 JetBrains Mono，且不混 sans+serif
06键盘 ← / → 翻页 + hash 同步 + 固定角标（右下 №N/M、左下 deck title）
07反通用素材纪律：禁 emoji 装饰、禁多色彩虹、禁套用 lucide/feather 图标库（要求自写 inline SVG）
08单文件 HTML 产出 + 正文点名 Tailwind CDN + 禁外链图片
09站点侧排序靠前：featured 35 / recommended 9，CLI 路由占最泛化关键词（open slide / canvas / 画布 / 自由）
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | 宿主本机 agent CLI（Claude Code / Codex / Cursor / Gemini 等，由 html-anything 侧 spawn；非本 skill 指令） |
| network | Tailwind CDN（本 skill 正文点名的产出物交付方式；产物渲染时由浏览器拉取） |
| network | Google Fonts（产物示例引用，非 skill 正文要求） |
| network | 出处置标（frontmatter 元数据，非运行时调用） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 正文点名产出物必须走 Tailwind CDN — SKILL.md:53「单文件 HTML; Tailwind CDN」→ 产物渲染时会请求 https://cdn.tailwindcss.com；离线/内网预览时样式会退化。这是模板对产出物的要求，skill 执行期不外发，故仍为绿档。
- 样例产物与模板自身约定不一致（已核实） — SKILL.md 要求每页 <section class="slide" data-slide-id="N">，example.html 却是 <div class="slide-frame …">、零 <section>；应用侧 deck 解析（lib/deck.ts SLIDE_RE）因此不会命中该样例，逐页导出与备注面板会缺失。
- 预览 iframe 的 sandbox 组合偏宽（宿主侧） — template-picker.tsx:544 / preview-pane.tsx:297 均为 sandbox="allow-scripts allow-same-origin"；对同源文档，allow-scripts + allow-same-origin 的组合允许脚本移除 sandbox 属性。出现在产物预览环节，非 skill 代码。
- 用户内容逐字进 prompt（注入面） — assemblePrompt 把【用户内容】原样接在模板正文之后；本模板又要求「必须用用户的真实内容」，粘贴的第三方文本可能被当作指令。
- 自由度的质量下限依赖模型 — 「每页版式自选」交给模型判断，弱模型易退化为「每页都是大标题 + 三栏卡片」；模板只有文字级反制规则，无程序化校验。
风险提醒：绿色，放心使用。判级对象＝skill 目录（SKILL.md + example.md + example.html）：目录内零可执行脚本、零凭证读取、零写盘指令；SKILL.md 正文无 URL、无接口调用。需说明的唯一端点是第 53 行「单文件 HTML; Tailwind CDN; 不要外链图片。」——它点名的是**产出物**的 Tailwind 交付方式（端点 https://cdn.tailwindcss.com 逐字出现在同目录 example.html），属产物引用；目录内另一端点是 example.html 的 Google Fonts @import。二者都是浏览器渲染产物时才发生，skill 执行期不外发。本仓 html-anything 模板按批4口径统一 🟢 绿档：判级对象＝skill 自身目录；宿主壳（loader.ts/assemblePrompt/本地 agent CLI/预览 iframe）与 example.html 里的字体、CDN 引用属产物期行为（由浏览器拉取、skill 执行时不外发），只写进 reason/risks，不判档。
5第二遍独立确认
- [ok] 文件清单（3 个文件，无脚本） — SKILL.md(2930B) / example.md(192B) / example.html(2317B)；无 .sh/.py/.js/.mjs/.ts，目录内无可执行代码。
- [ok] 目录内端点与档位依据 — SKILL.md:53「单文件 HTML; Tailwind CDN; 不要外链图片。」= 正文唯一 CDN 字样（端点 URL 见 example.html）；example.html 另有 fonts.googleapis.com 字体 @import 与 frontmatter 的 github.com/1weiho/open-slide 出处置标——均属产物引用/元数据，不判级。
- [ok] 无凭证读取 — 目录内 key/secret/token/.env/keychain 全部零命中。
- [ok] 无写盘指令 — 目录内 write/save/append 零命中；共享指令反而明令禁止文件系统工具。
- [ok] 画布硬规格可复核 — SKILL.md 逐字含 1920px/1080px、transform: scale、默认 scale(0.7)、禁止 overflow 四条。
- [ok] 10 级字号表与 4 套调色板可复核 — 字号表 2xs:18 … 5xl:220 与 Ash & Lime / Sea Indigo / Mate Mocha / Pearl Rose 四套 hex 均在正文逐字存在。
- [ok] frontmatter 与 loader 读取面一致 — featured/recommended/example_* 等字段都在 loader.ts 白名单 case 内，可被 fmToMeta 读成选择器元数据。
- [ok] official_desc 逐字命中 — meta.official_desc 取自 SKILL.md 第 6 行 description 引号内原文，未改写。
6结论
适合：适合不想被固定版式池束缚的场合：个人作品集、艺术/设计课、观念型演讲、单页大字 hero（example.md 就是短内容 → 单页 question 的示范）。也适合想要「画布固定、排版自由」这一折中范式的 skill 作者照抄规格。
不适合：不适合要求严格企业模板一致性的场合（该用 deck-swiss-international 这类锁死版式池的模板）；不适合需要完全离线渲染的环境（正文点名 Tailwind CDN）；不适合内容极多的材料堆叠型汇报（每页强制单一视觉重心 + 禁止 overflow，长内容会被拆成大量页）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-open-slide-canvas.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent993c6c72c87e99e3…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（工作副本根目录 LICENSE 文件 = Apache License Version 2.0；GitHub API spdx_id=Apache-2.0。注意：skill 目录本身不含独立 LICENSE，许可来自仓库根；第三方来源模板在 README 另有署名说明）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。