1实现原理 · 为什么它能做到
这个 skill 不是可执行程序，而是「一个目录 = 一个模板」：SKILL.md 的 frontmatter 供选择器展示，正文（body）就是发给模型的提示词；加模板＝加目录，不需要改 TypeScript。
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
注：同一文件头注释写明目录约定：SKILL.md（frontmatter + prompt body）/ example.md（可选输入样例）/ example.html（可选预览）。本 skill 目录内正是这一结构。
实际下发提示词 = 平台共享设计指令（SHARED_DESIGN_DIRECTIVES）+ 本 skill 的 SKILL.md 正文 + 用户内容，由 assemblePrompt 拼成一条 prompt。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：所以本 skill 的正文只负责「版式/风格/组件库」这一段；输出纪律（单文件 HTML、必须用用户真实数据、内容驱动数量）来自共享指令，模板作者不必重复声明。
成稿不走文件系统：共享指令明令禁止 Write/Edit/Bash 等文件工具，要求模型把整份 HTML 直接作为回复正文流式输出（stdout 由前端捕获落盘）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：这是「skill 自身零写盘」的机制来源：写文件的是宿主前端，不是 skill；本目录内也无任何脚本。
交付物不是网页而是「翻开的一本书」：两页 side-by-side 横向排布，左页封面、右页内页，靠外观定位（lead magnet 风格）。
next/src/lib/templates/skills/digital-eguide/SKILL.md
- 两页 side-by-side 横向, 像翻开的书
注：同样由【布局】条目钉死：Page 1 封面（display title + 作者 + 'What's inside' 数据 + TOC teaser）、Page 2 内页（lesson body + pull-quote + step list）。这两页就是全部交付面，不随内容增长页数。
翻书感由两条 CSS 造出来：容器 flex 横排 + 36px 间隙，两页各 540px 宽、最小 740px 高，并各带 ±0.6deg 反向微旋转。
next/src/lib/templates/skills/digital-eguide/example.html
.page.left { transform: rotate(-0.6deg); }
注：同文件 .page.right 用 rotate(0.6deg) 且换成 --paper-2 底色，两页一浅一深形成纸张层次；.page 另有 0 30px 60px 柔影，是「平摊在桌面上」的观感来源。
页面在样例里被标成语义锚点：左页 article.page.left.cover（data-od-id="cover"）、右页 article.page.right.spread（data-od-id="spread"），便于后续按块定位。
next/src/lib/templates/skills/digital-eguide/example.html
<article class="page right spread" data-od-id="spread">
注：data-od-id 是这批评分模板里的一种「块命名」约定（od = open design），全套模板 81 个目录中仅部分样例使用；repo 代码层没有任何消费它的逻辑（grep 无命中），属成稿可读性标记。
内页排印走「首字下沉 + 编号步骤 + 引号开场的大引言」三件套：.columns p:first-letter 做 drop cap，.steps .row 用 28px 编号列 + 虚线分隔。
next/src/lib/templates/skills/digital-eguide/example.html
.steps .row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
注：对应 SKILL.md 的「lesson body + pull-quote + step list」；引言块单独 data-od-id="pullquote"，用 56px 的引号字形（.pullquote .open）开场。
封面用数据行 + TOC teaser 制造「教程产品感」：3 个统计数（16 / 38 / 1）+ 6 行目录条目（名称 + 点线 + 页码）。
next/src/lib/templates/skills/digital-eguide/example.html
<h2 class="inside">What's <em>inside.</em></h2>
注：统计数用 .stat .num 的 36px 衬线数字，目录条目用 .toc .item 的 leader 点线——两者都是纯 CSS，无图片、无脚本。
服务端 /api/convert 只做三件事：按 templateId 从磁盘读 skill、拼 prompt、spawn 本地 agent CLI 并 SSE 流转发输出。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：同文件先 `const skill = loadSkill(templateId);`（无此模板即 400），再交给 invokeAgent；skill 目录本身不产生进程、不联网。
2核心能力
01两页跨页电子指南：左封面（标题/作者/数据/目录）+ 右内页（正文/引言/步骤）
02翻书观感：横排两页 + 反向微旋转 + 纸面色差 + 柔影
03编辑级内页排印：drop cap 开篇、编号步骤行、虚线分隔
04大引言块（pull-quote）承载金句与署名
05带点线 leader 的目录条目（名称 + 页码）
06柔和米色纸面调（--paper: #faf3ea / --paper-2: #f4ecdf + 砖红 accent）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 页数固定＝容纳量有限 — 只有封面 + 一页内页，内容超过约一页字量时只能压缩或加长单页（会破坏「翻开的书」比例），不适合长教程。
- 衬线小字可读性 — DM Serif Text 用于正文且字号 14px/1.55，中文缺字时会回落系统衬线，长段落读感下降；中文内容建议换 --serif-body。
- 微旋转在截图/打印时可能被裁 — ±0.6deg 旋转让四角超出包围盒，导出 PNG/PDF 时若按元素边界裁切会切掉纸角。
- 字体外链 — Google Fonts 不可达时字体族回落，视觉会与原样例有差（不影响结构）。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（SKILL.md + example.html/example.md，本目录零脚本、零凭证读取、零写盘指令、无网络调用代码）。按批4 终版口径，html-anything 模板一律 green：SKILL.md 全文未点名任何运行时服务后端/API，也不把用户素材送外部生成后端（无 orange 要件）；无逆向/冒充/绕过后端（无 red 要件）。目录内实际出现的端点仅有产物示例外链（example.html 的 Google Fonts preconnect + stylesheet 链接（fonts.googleapis.com / fonts.gstatic.com）），属「產物示例」，按口径不判级，仅在此自证列出。宿主侧另需知悉：预览 iframe 用 sandbox="allow-scripts allow-same-origin"、本地 agent CLI 被 spawn（next/src/lib/agents/invoke.ts）、共享指令要求成稿引 CDN——这些是平台行为，只作说明。
5第二遍独立确认
- [ok] 「两页跨页」且不随内容扩页 — 样例恰 2 个 article.page；SKILL.md【意图】明写「一封面一内页跨页排列」。
- [ok] 「像翻开的书」的视觉手法 — flex 横排 + .page.left/.page.right 反向 0.6deg 旋转 + 两页纸面色差 + 30px/60px 柔影。
- [ok] 「pull-quote + 步骤列表」 — .pullquote（含 56px 引号字形与署名行）与 .steps .row（4 条编号步骤）均在样例内。
- [ok] 字体依赖 Google Fonts — 样例 <link> 引入 Cormorant Garamond / DM Serif Text / IBM Plex Mono 三族；离线打开时回落到 Iowan Old Style/Georgia，布局不崩。
- [ok] data-od-id 的作用 — 样例有 5 处 data-od-id（cover/toc/spread/pullquote…），但 repo 内 TS/JS 对 data-od-id 零引用（grep 无命中）→ 仅成稿语义标记，不是运行时钩子。
- [ok] 无外部图片 — 全文无 <img> 与外链图；封面的几何点/线均为 CSS 绘制。
6结论
适合：适合把一篇短文/清单包装成可下载的「电子指南/风格手册」预览（lead magnet）；适合创作者 Newsletter 附赠物、课程大纲预览、品牌 lookbook 首页；也适合只需要两页高完成度版面的场景。
不适合：不适合多章节长教程（页数硬约束两页）；不适合数据密集或需要图表的报告；不适合需要横向 PPT 播放的演示（画布是竖向书页）；不适合中英混排的长正文（衬线正文族以拉丁为主）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 digital-eguide.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent810081d8875f1560…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 2.0；GitHub API license.spdx_id = Apache-2.0；next/package.json 亦声明 Apache-2.0）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。