学生火车票订票系统：Spring Boot+MyBatis实战与并发防超卖
2026/9/25 6:43:39
- 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
HTML Anything 是一个"Agent 写 HTML、你来发布"的本地 AI 编辑器，其模板体系以"每技能一个文件夹"的方式组织（SKILL.md+ 可选example.md/example.html）。本文聚焦其中的deck-guizang-editorial（贵赞编辑墨水 Deck）技能，完整讲解其 frontmatter 元数据、5 套电子墨水调色板、10 个可复用版式、设计红线，并结合仓库源码说明该 SKILL.md 如何被加载、拼装进提示词、最终驱动本地 Agent 流式输出单文件 HTML。读完本文，你将能理解这套技能的完整规格，并掌握如何在 HTML Anything 中复用它来生成叙事型杂志风幻灯片。
技能定位：电子杂志 × 电子墨水，为叙事而生
deck-guizang-editorial位于 next/src/lib/templates/skills/deck-guizang-editorial/，其 SKILL.md 的 frontmatter 完整定义了这个技能的身份：
name: deck-guizang-editorial zh_name: "贵赞编辑墨水 Deck" en_name: "Guizang Editorial E-Ink Deck" emoji: "🖋️" description: "电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)" category: slides scenario: marketing aspect_hint: "16:9 横向翻页" featured: 49 recommended: 1 tags: ["editorial", "e-ink", "magazine", "narrative", "guizang"] example_id: sample-guizang-editorial example_name: "贵赞编辑墨水 · 章节封页" example_format: markdown example_tagline: "墨水经典调色板 + 衬线 display" example_desc: "L02 Act Divider 章节封页 + L03 Big Numbers Grid 数据格, 纸感印刷"这些字段不是死数据。查看 next/src/lib/templates/loader.ts 的parseFrontmatter可知，加载器会从---包裹的 YAML 块中逐行解析出上述键值：category、scenario决定技能在模板选择器中的分组，scenario: marketing对应 scenarios.ts 中的营销场景键；aspect_hint: "16:9 横向翻页"会被透传到/api/templates接口与转换流程，提示 Agent 输出 16:9 横向页面；featured: 49与recommended: 1则影响选择器里的排序——recommended数值越小排名越靠前，会进入"推荐 / Featured"分组（见 loader.ts 中对该字段的注释）。
该技能的意图被明确标注为：叙事、观点、分享、个人风格表达，视觉上追求"墨纸印刷感"，明确拒绝"科技感"。它受 op7418/guizang-ppt-skill 的 Style A 启发，属于slides类别下的叙事型 deck。
5 套调色板：选一不可混用
SKILL.md 给出 5 套精心设计的电子墨水色板，每套包含 4 个核心 token：ink（墨色文字/深底）、paper（纸色底）、paper-tint（纸色浅调）、ink-tint（墨色浅调）。规则是严禁改 hex、严禁混用：
| 调色板 | ink | paper | paper-tint | ink-tint | 适用场景 |
|---|---|---|---|---|---|
| 🖋 墨水经典 Monocle | #0a0a0b | #f1efea | #e8e5de | #18181a | 默认 / 通用商业 / 科技 |
| 🌊 靛蓝瓷 Indigo Porcelain | #0a1f3d | #f1f3f5 | #e4e8ec | #152a4a | 科技 / 研究 / 数据 |
| 🌿 森林墨 Forest Ink | #1a2e1f | #f5f1e8 | #ece7da | #253d2c | 自然 / 可持续 / 文化 |
| 🍂 牛皮纸 Kraft Paper | #2a1e13 | #eedfc7 | #e0d0b6 | #3a2a1d | 怀旧 / 人文 / 文学 |
| 🌙 沙丘 Dune | #1f1a14 | #f0e6d2 | #e3d7bf | #2d2620 | 艺术 / 设计 / 时尚 |
"墨水经典"是默认选择，示例页即使用该色板。从实现角度观察 example.html 可印证这套 token 的真实落法：.paper类为background:#f1efea; color:#0a0a0b（纸底墨字），.ink类为background:#0a0a0b; color:#f1efea（墨底纸字）——这正是"章节切换可反色"的样式基础。
10 个磁带式版式池
技能提供了 10 个可复用版式（SKILL.md 称其为"磁带式版式池"），数量规则非常关键：页数由用户内容决定，版式池只提供版式而非上限——同一版式可在不同章节重复使用。短内容 6-12 张起步，长内容应更多，且要求"完整覆盖每个要点"：
- L01 Hero Cover：居中大字 hero typography + kicker + subtitle + lead paragraph + 底部元数据 row。
- L02 Act Divider：kicker + 8.5-10vw 巨大 headline + 一句引言；章节切换可反色（ink ↔ paper）。
- L03 Big Numbers Grid：3×2 数据卡（label / 大数字 / 注释）。
- L04 Quote + Image：左 kicker + headline + body + callout；右 16:10 图（基线对齐 baseline，不是 top）。
- L05 Image Grid：3×2 或 3×1 等高图网格（26vh 或 22vh），严格统一高度。
- L06 Pipeline / Flow：横向编号步骤组，每步 №X + 标题 + 描述；支持键盘逐步推进。
- L07 Hero Question：7vw 全屏单一问句，按语义断行，周围极简。
- L08 Big Quote：5.8vw 巨大衬线引文 + 英文翻译 + 署名 + 日期。
- L09 Before / After：1:1 分栏；左列 opacity 0.55（旧/前），右列全亮度（新/后）。
- L10 Mixed Media：8:4 比例；左大段文字（kicker / headline / body / callout）+ 右 3:4 竖图作辅助。
这条规则在全局层面被进一步强化：查看 next/src/lib/templates/shared.ts 中SHARED_DESIGN_DIRECTIVES的内容可知，所有技能共享的提示词前缀明确写道"模板只定义可用版面/风格/配色/字体，不定义 slide 数量"，输出页数"完全由用户内容的实际长度和信息结构决定，不许总结、压缩、丢弃信息"，模板正文中的"6-12 张"一律视为短示例下的参考下限而非上限。因此deck-guizang-editorial的"10 个版式池"与共享指令完全一致：同一版式允许在不同内容上多次出现，推荐做法是先按语义切段、每段至少一个独立 slide，再从版式池挑选最合适的版面。
设计细节与红线
SKILL.md 用"设计细节"一节划定了严格的视觉边界：
- 严禁：渐变 / drop-shadow / 圆角 / 圆形装饰 / blur / SVG 图标库 / emoji 装饰。
- 字体：Display 用
Playfair Display（英）/Noto Serif SC（中）；Body 用Inter/Noto Sans SC；编号与数字偶尔可用 italic 衬线。 - 杂志感细节：kicker 用 11px uppercase、letterspacing 0.12em；folio 页码在右下角如
01 / 12；顶部细 hairline rule + 期刊 logo / topic。 - 不许：数据捏造、Lorem ipsum、占位图片 URL；所有图用纯 CSS / SVG 内联描绘（色块 + 简笔）。
- 交互：键盘 ← / → 切换；hash 同步；最终输出为单文件 HTML。
这些约束与共享指令中的硬性技术要求（CDN 引入 Tailwind v3 Play 与 Google Fonts、不引用外部图片 URL、输出纯 HTML 不加代码围栏）共同保证了产物可双击打开即用。示例 example.html 的<head>正是这样落地：通过 CDN 引入 Tailwind、加载 Playfair Display / Inter / Noto Serif SC / Noto Sans SC 四种字体，并用.kicker（11px、letter-spacing 0.12em、uppercase）、.hairline（1px 顶部细线、opacity 0.3）、.folio（tabular-nums 等宽数字）三个工具类精确实现了杂志排版细节。
从 SKILL.md 到生成 HTML 的完整调用链
理解这个技能的工程价值，需要看清它如何进入真正的生成流程。整条链路是：
- 加载：loader.ts 的
loadSkillFromDir读取SKILL.md，用parseFrontmatter拆出元数据与正文 body（示例文件example.md/example.html若存在则一并读取）。 - 对外暴露：
/api/templates路由（next/src/app/api/templates/route.ts）调用listSkills()返回全部技能元数据供模板选择器渲染；/api/templates/:id/example返回某技能的捆绑示例。 - 拼装提示词：转换路由 next/src/app/api/convert/route.ts 调用
assemblePrompt({ body, content, format })，其实现（shared.ts）将共享设计指令、本技能的 body 与用户内容按固定模板拼装为最终提示词。 - 流式生成：提示词交给 invokeAgent 驱动本地 Agent CLI，前端以 SSE（
text/event-stream）流式接收助手正文，由前端负责落盘——这正是"你的本地 AI agent 写 HTML"的架构。
该技能还支持增量编辑：若客户端同时提交editFromHtml与editFromContent，convert 路由 会改用buildEditPrompt生成"最小化差异编辑"提示，要求保留原有<head>、字体、配色、布局与组件结构，仅按新旧内容差异替换文字/数据节点，既省 token 又避免每次生成出现创作漂移。
示例拆解：example.md 与 example.html
技能文件夹同时携带example.md与example.html两个示例文件，为模板选择器提供内联预览。frontmatter 中的example_*字段描述了示例元信息（loader.ts 会将这些字段组装为SkillExampleMeta），其中example_format: markdown表示示例输入是 Markdown，example_tagline: "墨水经典调色板 + 衬线 display"与example_desc则直接点明示例覆盖了L02 Act Divider 章节封页 + L03 Big Numbers Grid 数据格。
example.md 是一份极简的 Markdown 输入：主题为"Claude Code 团队全面转向 HTML"，关键数据四条（75 个模板 / 17 个本地 Agent / 80s 平均生成耗时 / 0 个 API key），配合引言说明"墨水经典调色板，双页预览"。
example.html 则是这两页版式的完整实现，可直接对照学习：
- 第一页（L02 Act Divider · ink 反色）：
<section class="slide ink">墨色底，顶部三栏 kicker（期刊名OPEN DESIGN — Issue №26/Act II/ folio04 / 12），中部用clamp(64px,9vw,160px)的响应式巨大衬线标题打出"为什么写作者该写 HTML 而不是 Markdown。"，句中的"写作者"以.body-serif（italic 衬线）作强调，底部再放署名与一句英文副标。这正是"章节切换可反色"的示范。 - 第二页（L03 Big Numbers Grid · paper）：纸色底，标题"四个数字，一条线——HTML 已经赢了。"，下方 4 列数据卡，每卡 = kicker 标签 + 84px 大数字 + 13px 注释，例如"现有模板 75 / +16 in this release"、"本地 Agent 17 / all stdin"、"平均生成 80s / 31KB 自包含 HTML"、"API Keys 0 / 复用已登录的 CLI session"。底部页脚保留
Source: HTML-Anything internal · 2026-05与Set in Playfair & Inter.的杂志署名惯例。
注意示例中的数字（75、17、80s、0）是仓库项目自身的真实数据，恰好与文章主题"HTML 取代 Markdown"形成内容闭环，同时也示范了"不许捏造数据"这条规则的执行方式。
上手建议：如何复用它产出自己的叙事 Deck
结合上述规格，在 HTML Anything 中使用该技能的建议路径是：
- 在模板选择器中定位
deck-guizang-editorial（可通过其预览缩略图识别墨水经典配色的双页示例），选中后aspect_hint会提示按 16:9 横向翻页输出。 - 准备内容时先按语义切段：章节标题、论点、数据组、列表项、步骤各成一段，对应 L02 Act Divider、L03 Big Numbers、L08 Big Quote、L06 Pipeline 等版式；同一版式可跨章节复用，页数下限 6-12 张、长内容可远超。
- 选定 5 套调色板之一并全程不改 hex、不混用；写作类内容优先牛皮纸/沙丘，数据研究类优先靛蓝瓷，通用商业则保持墨水经典默认。
- 严守视觉红线：无渐变、无圆角、无阴影、无 emoji 装饰；图片一律用 CSS/SVG 内联绘制而非外链占位图。
- 生成完成后直接用键盘 ← / → 翻页（hash 同步），确认无误后即可通过编辑器的导出能力发布到目标渠道。
若想深入了解该技能的元数据解析与前端消费方式，可继续阅读 loader.ts、index.ts（useTemplates/fetchTemplateExample客户端钩子）与 shared.ts；该技能所属的slides类别下还有deck-swiss-international、deck-graphify-dark、deck-hermes-cyber等同目录技能，可横向对比不同 deck 的设计约束差异。
赞
- 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
相关推荐
HTML Anything「贵赞编辑墨水 Deck」模板深度解析：5 套调色板 × 10 个版式，用本地 AI Agent 生成杂志风 HTML PPT
HTML Anything「贵赞编辑墨水 Deck」模板深度解析：5 套调色板 × 10 个版式，用本地 AI Agent 生成杂志风 HTML PPT 本文基
AI 应用人工智能AI AgentAI 写作媒体生成html-anything 杂志风网页 PPT 技能（deck-magazine-web）实战指南：电子杂志 × 电子墨水的横向翻页 Deck 解析
html anything 杂志风网页 PPT 技能（deck magazine web）实战指南：电子杂志 × 电子墨水的横向翻页 Deck 解析 本指南围绕
AI 应用人工智能AI AgentAI 写作媒体生成html-anything 蓝图架构 Deck 模板解析：用 SKILL.md 驱动工程化幻灯片生成
html anything 蓝图架构 Deck 模板解析：用 SKILL.md 驱动工程化幻灯片生成 这篇指南以 html anything 内置 Skill
AI 应用人工智能AI AgentAI 写作媒体生成
上一篇：Quantum ESPRESSO实战手册：从入门到精通材料模拟
下一篇：NetBox Docker终极部署指南：构建企业级网络资源管理平台
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考