html-anything 电子指南模板 digital-eguide 全解析：用双页跨页 HTML 生成创作者品牌的 Lead Magnet-平芜编程栈

AI 应用
人工智能
AI Agent
AI 写作
媒体生成

【免费下载链接】html-anything

✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.

项目地址：https://gitcode.com/gh_mirrors/ht/html-anything

点击查看免费下载

导读

digital-eguide是 html-anything 仓库中一个面向「创作者品牌 / creator brand」的模板技能（Skill），它让 AI Agent 把一段普通文本内容排版为「封面 + 内页」两页并排的电子指南（E-Guide / Lookbook / Lead Magnet）HTML。本文以 SKILL.md 为主干，结合同目录的 example.html 与仓库的技能注册、API、转换链路源码，完整讲解该模板的 frontmatter 规范、双页布局与设计细节、示例 HTML 的实现拆解，以及它在 html-anything 全流程（模板选择器 → 预览 → Agent 生成 → 最小化编辑）中的实际运作方式。读完你既能直接体验这个模板，也能照此模式理解或编写自己的 HTML Skill。

一、模板是什么：frontmatter 定义的技能元数据

digital-eguide是仓库「folder-per-skill」目录布局下的一个技能目录，核心定义文件是 SKILL.md。它的开头是一段 YAML 风格 frontmatter，被 loader.ts 中的轻量解析器读取，转换成模板选择器（Template Picker）可用的SkillMeta：

frontmatter 字段	值	含义 / 落点
`name`	`digital-eguide`	技能目录名，同时是 API 路径中的模板 id（需匹配`/^[a-z0-9][a-z0-9-]*$/i`）
`zh_name`	`电子指南`	中文显示名，picker 默认按 locale 展示`zhName`或`enName`
`en_name`	`Digital E-Guide`	英文显示名
`emoji`	`📚`	列表与按钮中的图标
`description`	`两页跨页电子指南, 封面 + 课程页 + pull-quote + 步骤列表`	一行式能力描述，picker 列表中两行截断展示
`category`	`article`	内容品类（此处为文章类）
`scenario`	`marketing`	场景分组键，映射到 scenarios.ts 中已翻译的营销场景
`aspect_hint`	`双页预览`	宽高比提示，展示在 picker 按钮与悬停预览角标中
`featured`	`6`	精选排序权重，数字越小在精选分组中越靠前（无该字段则排到 9999 之后）
`tags`	`["eguide", "lookbook", "lead magnet", "playbook"]`	搜索关键词，参与 picker 的关键词匹配

从 loader.ts 的fmToMeta可以看到这些字段如何被标准化：scenario缺省为marketing、emoji缺省为✨、aspectHint缺省为空串；tags仅支持单行数组字面量（如["a", "b"]）。featured: 6意味着在默认「全部」视图里，该模板会排在精选排序的第 6 位，早于featured: 7的 social-carousel 等模板（见 template-picker.tsx 的rankFeatured逻辑）。

二、SKILL.md 正文：模板的工作指令

frontmatter 之后，SKILL.md 的正文是真正会被注入 Agent 提示词的「模板指令体」，全文只有三条要点，但每一条都精确约束了生成结果的结构：

【模板: 电子指南双页预览】 【意图】creator brand 的 lead-magnet 风格, 一封面一内页跨页排列。 【布局】 - Page 1 封面: display title + 作者 + 'What's inside' 数据 + TOC teaser - Page 2 内页: lesson body + pull-quote + step list 【设计细节】 - lifestyle / creator brand 调子, 柔和米色 - 两页 side-by-side 横向, 像翻开的书

意图层：电子指南是「创作者品牌」获取潜在客户的经典 Lead Magnet（诱饵内容），它刻意强调「一封面一内页跨页排列」，与单页长文、卡片、幻灯片等模板形成区分。
布局层：明确给出两页各自的元素清单。封面必须包含 display title（展示型大字标题）、作者署名、What's inside数据区、TOC teaser（目录预告）；内页必须包含课程正文（lesson body）、pull-quote（拉引文）、step list（步骤列表）。
设计细节层：调性锁定为 lifestyle / creator brand 的柔和米色系，两页横向并排呈现「翻开的书」的视觉。

这条正文并不会被直接发送给 Agent，而是经过 shared.ts 的assemblePrompt组装：先拼上仓库级的SHARED_DESIGN_DIRECTIVES（内容驱动数量、禁写文件、CDN 引入、排版与无障碍准则等全局要求），再拼模板正文、输入格式与用户内容，形成最终提示词：

return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()} 【输入格式】: ${opts.format} 【用户内容】: ${opts.content} `;

也就是说，digital-eguide的指令在整套生成流程中的角色是「版式与风格约束层」，而具体产出多少页、多少条目，由共享指令要求「完全由用户内容的实际长度和信息结构决定」。

三、双页跨页布局与设计细节的实现拆解

同目录下的 example.html 是这份 SKILL.md 的「标准答案」——一段 200 余行的自包含单文件 HTML，演示了双页跨页的完整实现。它以「The Creator's Style & Format Guide」为示例内容，作者署名 AUNY，正好验证了 SKILL.md 中 lifestyle / creator brand 的设定。

3.1 色彩系统：柔和米色基调

设计细节里的「柔和米色」通过:rootCSS 变量落地为一套 8 色 token：

:root { --backdrop: #d8c8c0; --paper: #faf3ea; --paper-2: #f4ecdf; --ink: #1f1c14; --muted: #837964; --rule: #d3c9b3; --accent: #c44a47; --accent-2: #e07d52; }

其中--paper/--paper-2是两页纸面的基底色差（左页略亮、右页略暖），--accent（砖红）与--accent-2（杏橙）作为点缀色，--ink与--muted负责正文与弱化文字。页面背景用两层radial-gradient叠加暖色光晕，呼应「lifestyle」调性。字体方面通过 Google Fonts 引入三组字体：Cormorant Garamond（衬线 display）、DM Serif Text（衬线正文）、IBM Plex Mono（等宽眉题与页码）。

3.2 Page 1 封面：display title + 作者 + What's inside + TOC teaser

封面是一个<article class="page left cover">，宽度 540px、最小高度 740px，通过transform: rotate(-0.6deg)轻微左倾。元素顺序与 SKILL.md 的布局清单一一对应：

眉题条（eyebrow）：等宽字体 + 0.22em 字距的STYLE & FORMAT GUIDE FOR CREATORS，右侧是2026 EDITION，底部带 1px 规则线；
display title：h1.title用clamp(60px, 7.5vw, 92px)的流体字号 + 0.96 行高，内部通过.creator/.amp/.format/.guide四个 span 给不同词缀上强调色与斜体；
作者行：— BY AUNY · CREATOR EDUCATOR · 18 / 04 / 2026，等宽小字 + 0.18em 字距；
What's inside 数据区（stats）：三列网格（grid-template-columns: repeat(3, 1fr)），每列是衬线大数字 + 等宽小标签（如16 Principles of style/38 Do's & Don'ts/1 Block, zero templates），上下以规则线框起，正是 SKILL.md 中「'What's inside' 数据」的呈现方式；
TOC teaser：What's inside.斜体副标题下是两列目录网格，每个条目由斜体条目名 + 虚线 leader（border-bottom: 1px dotted）+ 等宽页码组成，共 6 条（Find your voice / Pick a format / Tone & tension / Visual rhythm / Headlines that hold / Editing the cut）；
贴纸与页脚：右上角 92px 圆形.sticker（旋转 8 度、内部虚线圆环）写着FOR THE FIRST DRAFT；.cover-footer固定在页底，展示FIND YOUR VOICE与01 / 64页码。

3.3 Page 2 内页：lesson body + pull-quote + step list

右页<article class="page right spread">以rotate(0.6deg)反向微倾、背景用较暖的--paper-2，与左页形成「翻开的书」的中缝对称。其结构同样严格对应布局清单：

章节眉题：CHAPTER 02 · TONE+ 右侧3 — RULES, 1 — EXERCISE；
课程标题与导语：h2.head用 44px 斜体衬线呈现Write like you talk — only sharper.（强调词only sharper.加.accent色），下方.deck是一段 muted 色斜体导语；
lesson body（双栏正文）：.columns用两列网格承载一段正文 + 步骤列表。正文首段通过p:first-letter实现衬线大写下沉首字母（drop cap，38px、浮左、accent 色），是「编辑级排版」的典型细节；
step list：.steps内是 4 行编号步骤（01 Pick the rule./02 Drop the filler./03 End with a verb./04 Read aloud once.），每行由等宽编号 + 正文（加粗斜体关键词）构成，行间用虚线分隔；
pull-quote（拉引文）：.pullquote绝对定位在右页右上、向右溢出 16px，白色纸面 + 1px 边框 + 2.4 度旋转，开头是 56px 的引号，正文为Specificity is the unlock — write what only you saw.，署名行— AUNY · CHAPTER 02；
练习框（exercise）：accent 色描边的浅色底框，左侧EXERCISE等宽标签、右侧练习说明文字，让内页有「可行动」的收尾；
页脚：TONE & TENSION+18 / 64。

值得注意的是示例 HTML 中出现了data-od-id属性（cover/toc/pullquote/exercise），从仓库的 DOM 锚点命名习惯看，这类标记用于前端对页面内元素做定位与结构识别，进一步印证了「模板 HTML 会被编辑器/预览器当作结构化文档来读取」的定位。

3.4 响应式处理

在@media (max-width: 1180px)断点下，拉引文收回页面内侧（right: 16px），页面宽度改为92vw（上限 540px），保证双页预览在小屏上仍可阅读——这与 SKILL.md 的aspect_hint: 双页预览相互呼应：它天然是为「并排双页」这一横构图设计的。

四、模板在仓库中的完整运作链路

digital-eguide不只是「一个 HTML」，它参与 html-anything 一整套「模板注册 → 展示 → 生成 → 编辑」的管道：

4.1 注册与列表：磁盘即注册表

loader.ts 的listSkills()在开发环境（NODE_ENV !== "production"）直接扫描src/lib/templates/skills目录，每个子目录只要含SKILL.md就是一个技能；生产环境使用内存缓存，安装/卸载后通过invalidateSkillsCache()失效。市场（marketplace）安装的技能存放在用户目录下，以pkg-<owner>__<repo>--<originalId>的命名空间 id 合并进同一注册表。也就是说，新增一个模板 = 新增一个目录，无需改动任何 TS 代码。

对应的 HTTP 接口是 templates/route.ts：GET /api/templates返回全部SkillMeta（Cache-Control: public, max-age=5，既去重频繁刷新又允许新技能快速可见），客户端则通过 templates/index.ts 的useTemplates()获取并在模块级缓存去重。

4.2 预览：example.html 的两种消费方式

digital-eguide目录下的 example.html 被两个 API 分别消费：

GET /api/templates/:id/example：返回 JSON 包（content+html），模板选择器的「预览」按钮点击后直接把它loadSample进编辑器，一次请求拿到全部数据；
GET /api/templates/:id/preview：返回原始text/html，用于iframe src加载，让浏览器自行缓存（max-age=300），避免在画廊渲染几十个缩略图时全部走srcDoc阻塞主线程。

选择器内部（template-picker.tsx）还有「悬停预加载」：鼠标悬停超过 260ms 才懒加载 example.html，并将结果缓存在previewCache的Map中，缩略图以transform: scale(0.4375)的 1280×960 iframe 呈现。

4.3 生成：convert API 如何消费 SKILL.md

convert/route.ts 接收{ agent, templateId, content, format, ... }，用loadSkill(templateId)取到技能后，将skill.body（即 SKILL.md 正文）连同全局设计指令与用户内容一起组装成提示词，交给 agents/invoke.ts 去调用本地 Agent CLI（Claude Code / Cursor / Codex 等）。因此，你写进 SKILL.md 的「意图 / 布局 / 设计细节」会原样成为 Agent 的版式约束。

4.4 二次编辑：最小化差异编辑

当任务已有历史 HTML、用户再次提交新内容时，convert API 走buildEditPrompt分支（convert/route.ts），要求 Agent「只按新旧内容差异改文字/数据节点，保留 head、字体、配色、布局、栅格与动画」。注意该提示词第一行就用上了skill.zhName与skill.aspectHint——digital-eguide的「电子指南 / 双页预览」信息在此被复用为编辑约束，防止 Agent 在二次生成时把双页跨页结构改坏。

五、如何体验 digital-eguide

在仓库根目录安装依赖并启动 Next 应用后即可体验：

pnpm install pnpm --filter @html-anything/next dev

打开应用，在顶部工具栏点击模板按钮（显示 📚 电子指南 / Digital E-Guide 与「双页预览」角标）；
在下拉列表的 marketing 场景分组中找到「电子指南」，鼠标悬停 260ms 即可看到 example.html 的双页缩略图，或直接点击「预览」把示例载入编辑器；
输入你自己的课程/指南内容（支持纯文本与结构化文本），选择 Agent 后触发转换，Agent 会按 SKILL.md 的双页跨页结构输出自包含 HTML；
后续修改内容再次生成时，走最小化差异编辑路径，封面 + 内页的版式与配色保持不变。

也可以在编辑器地址栏直接请求 API 查看元数据与示例数据：

# 全部技能元数据（含 digital-eguide） curl http://localhost:3000/api/templates # 该技能的示例 JSON（content + html） curl http://localhost:3000/api/templates/digital-eguide/example # 纯 HTML 预览 curl http://localhost:3000/api/templates/digital-eguide/preview

六、小结：从 SKILL.md 到可运行的电子指南

digital-eguide是 html-anything「文件即模板」理念的一个典型样本：短短一份 SKILL.md（frontmatter + 三行版式指令）定义了完整的模板心智——封面 + 内页的双页跨页、柔和米色、lifestyle / creator brand 调性；同目录的 example.html 用 8 色 token、540px 纸面、微倾旋转与 pull-quote 等细节给出可直接复用的参考实现；而 loader.ts、shared.ts 与三个 API 路由则把它无缝接入「选择 → 预览 → 生成 → 最小化编辑」的完整链路。如果你要为品牌创作者做一本双页电子指南（Lookbook / Playbook / Lead Magnet），这个模板即是开箱即用的起点；如果你想在仓库中新增同类模板，照digital-eguide的目录结构（SKILL.md + example.html）新增一个文件夹即可，无需改动任何代码。