HTML Anything 贵赞编辑墨水 Deck 技能解析：用 5 套调色板与 10 个版式池驱动 Agent 生成杂志风电子墨水幻灯片

AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】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 个核心 tokenink墨色文字/深底、paper纸色底、paper-tint纸色浅调、ink-tint墨色浅调。规则是严禁改 hex、严禁混用调色板inkpaperpaper-tintink-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 Dividerkicker 8.5-10vw 巨大 headline 一句引言章节切换可反色ink ↔ paper。L03 Big Numbers Grid3×2 数据卡label / 大数字 / 注释。L04 Quote Image左 kicker headline body callout右 16:10 图基线对齐 baseline不是 top。L05 Image Grid3×2 或 3×1 等高图网格26vh 或 22vh严格统一高度。L06 Pipeline / Flow横向编号步骤组每步 №X 标题 描述支持键盘逐步推进。L07 Hero Question7vw 全屏单一问句按语义断行周围极简。L08 Big Quote5.8vw 巨大衬线引文 英文翻译 署名 日期。L09 Before / After1:1 分栏左列 opacity 0.55旧/前右列全亮度新/后。L10 Mixed Media8: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.12emfolio 页码在右下角如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 四种字体并用.kicker11px、letter-spacing 0.12em、uppercase、.hairline1px 顶部细线、opacity 0.3、.foliotabular-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前端以 SSEtext/event-stream流式接收助手正文由前端负责落盘——这正是你的本地 AI agent 写 HTML的架构。该技能还支持增量编辑若客户端同时提交editFromHtml与editFromContentconvert 路由 会改用buildEditPrompt生成最小化差异编辑提示要求保留原有head、字体、配色、布局与组件结构仅按新旧内容差异替换文字/数据节点既省 token 又避免每次生成出现创作漂移。示例拆解example.md 与 example.html技能文件夹同时携带example.md与example.html两个示例文件为模板选择器提供内联预览。frontmatter 中的example_*字段描述了示例元信息loader.ts 会将这些字段组装为SkillExampleMeta其中example_format: markdown表示示例输入是 Markdownexample_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 classslide ink墨色底顶部三栏 kicker期刊名OPEN DESIGN — Issue №26/Act II/ folio04 / 12中部用clamp(64px,9vw,160px)的响应式巨大衬线标题打出为什么写作者该写 HTML 而不是 Markdown。句中的写作者以.body-serifitalic 衬线作强调底部再放署名与一句英文副标。这正是章节切换可反色的示范。第二页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.tsuseTemplates/fetchTemplateExample客户端钩子与 shared.ts该技能所属的slides类别下还有deck-swiss-international、deck-graphify-dark、deck-hermes-cyber等同目录技能可横向对比不同 deck 的设计约束差异。赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】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 PPTHTML 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 内置 SkillAI 应用人工智能AI AgentAI 写作媒体生成上一篇Quantum ESPRESSO实战手册从入门到精通材料模拟下一篇NetBox Docker终极部署指南构建企业级网络资源管理平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考