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，外链仅字体与个别模板显式要求的图表库。
模板把「杂志长文」拆成逐条版式清单（hero → 单栏正文 → serif 小标题 → 引用/代码块 → 居中 ornament → 文末卡片），agent 按清单填内容即可，不必自己发明版式。
next/src/lib/templates/skills/article-magazine/SKILL.md
- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
注：这里在做什么：把「高级感」这种模糊诉求转译成可执行条目——标题字号用 Tailwind class 明确，元数据固定三项、副标题标注可选；模板由此获得稳定的输出面。
可读性被量化：正文限 700px 单栏居中，并以 serif 标题与 sans 正文形成对比。
next/src/lib/templates/skills/article-magazine/SKILL.md
- 正文: 单栏, 最大宽度约 700px, 居中。
注：同段还给了具体 Tailwind 类名与明暗两套正文色（text-lg leading-relaxed text-neutral-700 dark:text-neutral-300）；字数/行距/最大宽度三个变量被写死，避免长文排成通栏。
正文之外的杂志味由三个专用零件承担：左侧 accent 边线的斜体引用块、中央居中的 ornament 分隔符、文末行动卡片。
next/src/lib/templates/skills/article-magazine/SKILL.md
- 引用块使用左侧粗 accent 色边线 + 斜体。
注：这三件是结构要求而非装饰清单：example.html 中分别以 blockquote 样式、ornament 小节、尾部卡片落地，可逐条验收。
示例产物是 1:1 实现参照：单文件 HTML、内联样式表、Tailwind CDN + Google Fonts，正文 hero/blockquote/ornament 与 SKILL.md 条目对应。
next/src/lib/templates/skills/article-magazine/example.html
<div class="ornament"><span class="serif italic">· · ·</span></div>
注：这里在做什么：把「章节之间用 <hr> 分隔但做成居中小 ornament」这条指令可视化；agent 可直接复用该 DOM 结构。（引用的 Tailwind/字体属产物期取用，见 security.reason）
模板与示例输入（Markdown）配对发布：frontmatter 用 example_format: markdown 声明输入形态，示例正文即一篇现成长文并附原推出处。
next/src/lib/templates/skills/article-magazine/example.md
# 我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML
注：这里在做什么：选择器按 example_format 提示用户「贴 Markdown 即可」；example_source_url 指 x.com 原推，给站点提供可回链的来源标注。
2核心能力
01杂志长文单页版式（hero + 作者元数据 + 单栏 700px 正文）
02serif 标题 / sans 正文的字族分工
03引用块：左侧粗 accent 色边线 + 斜体（示例为衬线斜体 + 中性色）
04代码块杂志化样式（圆角、深底浅字、语言标签）
05章节分隔做成居中 ornament（而非朴素 hr）
06文末行动卡片（示例以实现为「题图致敬 + 原推链接」卡）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 示例文案与指令不完全一致（文末卡片） — SKILL.md 的「欢迎转发」行动卡片在示例里被换成原推致敬卡；若详情页把示例当模板固定结构，会与 SKILL.md 指令冲突。
- 用户内容逐字进 prompt 的注入面 — 宿主装配层把【用户内容】直接插值进 prompt（无围栏/转义）；粘贴文本中的指令性内容可改变生成结果。产物为本地 HTML，危害限于输出内容/版式。
- 产物在预览面板以同源 iframe 执行（宿主行为） — preview-pane.tsx:297 与 template-picker.tsx:544 使用 sandbox="allow-scripts allow-same-origin"；本模板产物静态无自定义脚本，风险面低于含图表脚本的模板。
- 产物期外链依赖网络可达 — 产物头部引用 cdn.tailwindcss.com 与 Google Fonts（浏览器端取用，非 skill 执行期）；离线打开会退化为无 Tailwind 样式（页内已内联自定义 CSS，主要版式仍可用）。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（仅 SKILL.md + example.html + example.md 三个文件，无 scripts/、无自带 CLI、无凭证读取、无写盘）：无脚本入口、无自带 CLI、无凭证读取、无写盘指令；SKILL.md 正文未要求运行时引入任何外部端点（只写字号、字宽、字族与 Tailwind class 名）。执行期不发生任何外发。目录内实际出现的端点仅存在于 example.html:7-10 的 cdn.tailwindcss.com、fonts.googleapis.com、fonts.gstatic.com，以及 frontmatter 与正文里的 x.com 出处链接，按批4 终版口径属**产物期引用**（生成的 HTML 由浏览器打开时拉取 CDN/字体，skill 执行时不抓取、不上报、不传素材），故不判级，仅在此列出端点；宿主壳（loader→assemblePrompt→本地 agent CLI spawn、预览 iframe sandbox）同属宿主行为，记入 verdict.risks。
5第二遍独立确认
- [ok] 「执行期是否有外发」判定 — SKILL.md 正文 URL 计数为 0；唯一 http(s) 出现在 frontmatter 的 example_source_url（示例出处标注）与 example.html 的 CDN/字体链接，属产物期引用（浏览器端拉取），按批4 终版口径不判级。
- [discrepancy] 文末行动卡片 — SKILL.md 要求文末加一个简单的「如果觉得有用，欢迎转发」行动卡片；example.html 结尾实现为「题图致敬: 推文中那个 "everything is HTML" 的瞬间。」+ 原推链接卡。属示例自由发挥（同类结构、不同文案），不影响模板可用性，但详情页不应把该示例卡当作模板固定文案。
- [ok] featured 推荐位 — frontmatter featured: 11，选择器会将其纳入 Featured/推荐分组；example_* 六个字段齐全，loader 会生成 example 元数据对象。
- [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结论
适合：适合公众号/博客/Substack 类长文的一次排版交付：作者给 Markdown 长文，几秒内得到可直接发布或截图的高级感 HTML 单页；也适合作为长文模板基线（hero + 单栏 + 引用/代码块组合最稳）。
不适合：不适合需要多页/多栏杂志版式的场景（单栏 700px 是硬约束）；不适合需要交互组件或图表的内容（模板不引入脚本）；不适合只要短卡片/海报的输入（应选 card-* 或 poster 类模板）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 article-magazine.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent115f78654ca46dcd…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 为实时上游，内容可能已更新。