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管控建议与判定依据

建议配套管控措施

面向 Agent

可自动加载

面向管理者

登记来源与版本

判定依据（文件路径与关键语句摘要）

SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响

审计说明： 。判级对象＝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结论

形态罕见且目标明确：两页 spread 直接对应「电子书翻开预览」，比通用 deck 更像可下载的 lead magnet。

印刷细节用纯 CSS 复刻（drop cap / 点线目录 / 纸张微旋 / 柔影），零素材零脚本。

三族字体分工（display/正文/等宽标签）让两页就有完整编辑质感。

窄屏有降级：92vw / max-width:540px 堆叠，移动端不会横向裁切。

适合： 适合把一篇短文/清单包装成可下载的「电子指南/风格手册」预览（lead magnet）；适合创作者 Newsletter 附赠物、课程大纲预览、品牌 lookbook 首页；也适合只需要两页高完成度版面的场景。

不适合： 不适合多章节长教程（页数硬约束两页）；不适合数据密集或需要图表的报告；不适合需要横向 PPT 播放的演示（画布是竖向书页）；不适合中英混排的长正文（衬线正文族以拉丁为主）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload digital-eguide.tar.gz

sha256: 810081d8875f1560…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.