1实现原理 · 为什么它能做到
模板本体没有可执行代码：loader 从 src/lib/templates/skills/<id>/SKILL.md 读入 frontmatter 与正文，正文（body）与 example 内容一起作为 LoadedSkill 返回。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：这里在做什么：SKILL.md 是唯一行为来源——frontmatter 供选择器渲染（zh_name/emoji/aspect_hint/tags/example_* 等），正文整段即提示词；loader 不做语义校验，模板写什么就下发什么。
下发前宿主固定拼装 prompt：模板正文夹在共享设计指令 SHARED_DESIGN_DIRECTIVES 与【输入格式】/【用户内容】之间。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：这里在做什么：模板只定义「这一个交付物长什么样」（版式/节奏/组件），共享指令承担跨模板硬约束——单文件 HTML、禁止用文件工具、Tailwind 与 Google Fonts 走 CDN、内容真实性、中文盘古之白。
共享指令把硬约束写成对 agent 的显式禁令，并强制内容驱动数量（模板里的数字只作参考下限）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
注：同文件下文还有一条：输出的 slide / frame / card / section 数量完全由【用户内容】的实际长度和信息结构决定——这解释了为什么本类模板不因内容变长而失效：每段内容至少一张卡/一节，模板只提供版面池。
真正执行的是用户本机已安装并登录的编码 agent CLI：宿主 spawn 子进程，把 prompt 交给它，HTML 从 stdout 流式捕获。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：这里在做什么：模板 skill 只提供提示词，能力（含写代码、跑工具）来自宿主 CLI 的既有权限；skill 目录自身没有任何脚本入口，因此判级只看目录内资产（宿主行为不计档）。
/api/convert 是模板的执行路径：它把 skill.body 与用户内容组装成 prompt 后交给 invokeAgent。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：编辑模式另走 buildEditPrompt（最小化差异编辑，禁用文件工具、要求直接流式输出完整 HTML），因此本类模板的产物形态稳定：单文件 HTML、内联 CSS/SVG，外链仅字体与个别模板显式要求的图表库。
实现原理是「叙事弧线 + 版面模具」双锁：六条公理约束内容（真问题在前、必须有失败、顿悟在前命名在后…），六个 layout class 约束版式节奏，任一不过即重做。
next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md
【六条公理 — 任一不过, 重做】
注：这里在做什么：把「把一个概念讲成专题」拆成可判定的约束，避免模型写成线性科普；公理可证（标题不得出现概念名、必须有失败站、不得元自指），因此能用自检清单验收。
节奏由模具序列锁死：.feature → .note → .archive → .cross → .hero → .closing，开阔与紧凑交替、转折处放大、结尾回到中心对称。
next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md
**节奏铁律**: 开阔（feature）→ 紧（note 错位）→ 紧（archive 横长）→ 爆（cross 200px）→ 开阔（hero）→ 静（closing 中心对称）。
注：每个模具都给了具体视觉特征（cross 的 Serif 200px 爆点、note 的便签微旋 0.5deg + 虚线穿孔 + 红笔删除线），因此节奏不靠模型即兴，而是按表实现。
「必须四种字族同时使用」把排版从单一字族拉出层次：Serif 标题/引文、Sans 正文、Mono 编号/脚注、Hand 手写批注各司其职。
next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md
【字族对比 — 必须四种同时使用】
注：SKILL.md 逐字族点名字体（Noto Serif SC / Noto Sans SC / JetBrains Mono 或 SF Mono / Caveat 或楷体）；这四族是「灵魂」而非可选，缺席即判定重做。
颜色系统写成 CSS 变量并限色 ≤4 主色，且明文禁止纯黑 #000。
next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md
**禁止 `#000` 纯黑**
注：同段给出完整变量表（--bg #FAF7EF / --paper / --ink-strong #0F0F0F / --ink / --ink-light / --red #B23A2C / --blue-deep #3D5A80 / --amber / --amber-soft），是把设计系统直接写进 prompt 的做法。
交付契约是单文件 HTML + 内联 CSS + Google Fonts CDN、不写 JS、静态长图、容器 1080px 自适应高度；该 CDN 属产物期引用（浏览器打开 HTML 时拉字体），skill 执行期不外发。
next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md
输出**单文件 HTML**, inline CSS + Google Fonts CDN（Noto Serif SC / Noto Sans SC / Caveat / JetBrains Mono）。不写 JS, 静态长图。容器宽 1080px, 高度自适应。
注：这里在做什么：与上游 ljg-card（输出 PNG，靠 playwright 截图）不同，本版直接产出 HTML；代价是产物需从 Google Fonts 取字体（fonts.googleapis.com / fonts.gstatic.com，example.html:7-9），按批4 终版口径属产物期引用，故不判级，仅记入 reason 与 risks。
skill 末尾明示改编来源与版本，站点可标注衍生关系。
next/src/lib/templates/skills/article-sketchnote-editorial/SKILL.md
本 skill 改编自 [lijigang/ljg-skills · ljg-card -v sketchnote](https://github.com/lijigang/ljg-skills/tree/master/skills/ljg-card)（v2.3.0）。
注：同段说明原版输出 PNG（playwright 截图）、html-anything 版直接输出单文件 HTML，6 公理 + 6 layout + 4 字族 + 节奏与原版一致，让能力边界（无截图、无 JS）可追溯。
2核心能力
01六条叙事公理 + 6 项自检清单（问题站/失败站/顿悟前命名后/文字克制/中文母语/节奏不均匀）
02六个 layout 模具及其视觉特征表（feature/note/archive/cross/hero/closing）
03四字族排版分工（Serif/Sans/Mono/Hand）
04颜色系统（≤4 主色 + CSS 变量表 + 禁用纯黑）
05装饰结构件库（kicker/drop-cap/byline/stamp/pull-quote/scribble/mega/epilogue 等，含字号与旋转角）
06可直接复用的 HTML 骨架（magazine-head + 六个 section/aside 模具）
07节奏 padding 对照表（各 section 的 padding / margin-top 留白尺度）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 字体走 Google Fonts（产物期引用） — 产物引 fonts.googleapis.com / fonts.gstatic.com（SKILL.md:198 要求，example.html:7-9 实引）；离线或网络受限环境下浏览器取不到字体，四字族的「灵魂」对比会退化为后备字族。skill 执行期不发请求。
- 内容侧约束重，输入要求高 — 六公理要求有真问题、必须有失败、顿悟先于命名、不点题；若用户素材是教科书定义式，模板会要求重构叙事，可能产出与预期不符的专题叙事。
- 用户内容逐字进 prompt 的注入面 — 宿主装配层直接插值用户内容；粘贴文本中的指令性内容可改变生成结果。产物为本地 HTML，危害限于内容与外观。
- 产物在预览面板同源执行（宿主行为） — 宿主预览用 sandbox="allow-scripts allow-same-origin"；本模板产物静态无脚本，实际攻击面小。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录：article-sketchnote-editorial/ 仅 SKILL.md + example.html + example.md，无脚本入口、无自带 CLI、无凭证读取、无写盘；执行期零外发（example.html 连一个 <script> 都没有，插画全部内联 SVG）。SKILL.md:198【输出契约】点名 Google Fonts CDN（Noto Serif SC / Noto Sans SC / Caveat / JetBrains Mono），端点 fonts.googleapis.com 与 fonts.gstatic.com（example.html:7-9 实引）——按批4 终版口径属**产物期引用**：生成的 HTML 由浏览器打开时拉字体，skill 执行期不抓取、不上报、不传素材、无凭证，故不判级，仅在此列出端点。字体加载失败仅退化为后备字族（模板已给 PingFang SC / Songti SC / Kaiti SC 等本地回退）。宿主壳（loader→assemblePrompt→本地 agent CLI spawn、预览 iframe sandbox）同属宿主行为，不计档，记入 verdict.risks。
5第二遍独立确认
- [ok] 六模具与示例的一致性 — example.html 中 <section class="feature">、<aside class="note">、<section class="archive">、<section class="cross">、<section class="hero">、<section class="closing"> 依次出现，节奏铁律（爆点在 cross、收尾 closing 中心对称）可对照验证。
- [ok] 「不写 JS」的声明 vs 实际 — example.html 全文无 <script> 标签、无 on* 事件属性；所有图形为内联 SVG（viewBox 0 0 280 220 等），与【输出契约】不写 JS、静态长图一致。
- [ok] 端点性质（产物期 vs 执行期） — SKILL.md:198 逐字命中「inline CSS + Google Fonts CDN（Noto Serif SC / Noto Sans SC / Caveat / JetBrains Mono）」；example.html:7-9 有 preconnect 与 css2 链接。字体由浏览器加载产物时取用，属产物期引用（批4 终版口径不判级），故维持 green；端点已列入 security.reason 与 verdict.risks。
- [ok] 示例文本与公理的相符性 — 示例标题「涌现的命名 · 复杂系统 1972」不在标题中直接揭示概念定义，closing 才给中文概念名与 byline（人名·年份·文献），符合「顿悟在前、命名在后」公理。
- [ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
- [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。
6结论
适合：适合把一个概念/一段学科史讲成有张力的视觉长图：科普、教育、课程讲义、公众号专题；特别适合「概念从失败中诞生」这类天然带叙事的素材（示例即「涌现」的命名史）。
不适合：不适合纯版式/营销类短内容（模板要求叙事弧线，短内容撑不起 6 站）；不适合需要交互或数据图表的报告（不写 JS、无图表库）；不适合要求逐字保留原文的合规文本（模板会为节奏重写文案）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 article-sketchnote-editorial.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentfa995708ae5df142…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, January 2004；GitHub API spdx_id=Apache-2.0）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。