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点击查看免费下载导读digital-eguide是 html-anything 仓库中一个面向「创作者品牌 / creator brand」的模板技能Skill它让 AI Agent 把一段普通文本内容排版为「封面 内页」两页并排的电子指南E-Guide / Lookbook / Lead MagnetHTML。本文以 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可用的SkillMetafrontmatter 字段值含义 / 落点namedigital-eguide技能目录名同时是 API 路径中的模板 id需匹配/^[a-z0-9][a-z0-9-]*$/izh_name电子指南中文显示名picker 默认按 locale 展示zhName或enNameen_nameDigital E-Guide英文显示名emoji列表与按钮中的图标description两页跨页电子指南, 封面 课程页 pull-quote 步骤列表一行式能力描述picker 列表中两行截断展示categoryarticle内容品类此处为文章类scenariomarketing场景分组键映射到 scenarios.ts 中已翻译的营销场景aspect_hint双页预览宽高比提示展示在 picker 按钮与悬停预览角标中featured6精选排序权重数字越小在精选分组中越靠前无该字段则排到 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 作者 Whats inside 数据 TOC teaser - Page 2 内页: lesson body pull-quote step list 【设计细节】 - lifestyle / creator brand 调子, 柔和米色 - 两页 side-by-side 横向, 像翻开的书意图层电子指南是「创作者品牌」获取潜在客户的经典 Lead Magnet诱饵内容它刻意强调「一封面一内页跨页排列」与单页长文、卡片、幻灯片等模板形成区分。布局层明确给出两页各自的元素清单。封面必须包含 display title展示型大字标题、作者署名、Whats 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 Creators 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 作者 Whats inside TOC teaser封面是一个article classpage left cover宽度 540px、最小高度 740px通过transform: rotate(-0.6deg)轻微左倾。元素顺序与 SKILL.md 的布局清单一一对应眉题条eyebrow等宽字体 0.22em 字距的STYLE FORMAT GUIDE FOR CREATORS右侧是2026 EDITION底部带 1px 规则线display titleh1.title用clamp(60px, 7.5vw, 92px)的流体字号 0.96 行高内部通过.creator/.amp/.format/.guide四个 span 给不同词缀上强调色与斜体作者行— BY AUNY · CREATOR EDUCATOR · 18 / 04 / 2026等宽小字 0.18em 字距Whats inside 数据区stats三列网格grid-template-columns: repeat(3, 1fr)每列是衬线大数字 等宽小标签如16 Principles of style/38 Dos Donts/1 Block, zero templates上下以规则线框起正是 SKILL.md 中「Whats inside 数据」的呈现方式TOC teaserWhats inside.斜体副标题下是两列目录网格每个条目由斜体条目名 虚线 leaderborder-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 classpage 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 cap38px、浮左、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练习框exerciseaccent 色描边的浅色底框左侧EXERCISE等宽标签、右侧练习说明文字让内页有「可行动」的收尾页脚TONE TENSION18 / 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.tsGET /api/templates返回全部SkillMetaCache-Control: public, max-age5既去重频繁刷新又允许新技能快速可见客户端则通过 templates/index.ts 的useTemplates()获取并在模块级缓存去重。4.2 预览example.html 的两种消费方式digital-eguide目录下的 example.html 被两个 API 分别消费GET /api/templates/:id/example返回 JSON 包contenthtml模板选择器的「预览」按钮点击后直接把它loadSample进编辑器一次请求拿到全部数据GET /api/templates/:id/preview返回原始text/html用于iframe src加载让浏览器自行缓存max-age300避免在画廊渲染几十个缩略图时全部走srcDoc阻塞主线程。选择器内部template-picker.tsx还有「悬停预加载」鼠标悬停超过 260ms 才懒加载 example.html并将结果缓存在previewCache的Map中缩略图以transform: scale(0.4375)的 1280×960 iframe 呈现。4.3 生成convert API 如何消费 SKILL.mdconvert/route.ts 接收{ agent, templateId, content, format, ... }用loadSkill(templateId)取到技能后将skill.body即 SKILL.md 正文连同全局设计指令与用户内容一起组装成提示词交给 agents/invoke.ts 去调用本地 Agent CLIClaude 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 # 该技能的示例 JSONcontent 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.mdfrontmatter 三行版式指令定义了完整的模板心智——封面 内页的双页跨页、柔和米色、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新增一个文件夹即可无需改动任何代码。赞分享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 的 pm-spec Skill用一句意图生成一页式 PRD / Product Spec 单页 HTMLhtml anything 的 pm spec Skill用一句意图生成一页式 PRD / Product Spec 单页 HTML 导读 本文以 htmlAI 应用人工智能AI AgentAI 写作媒体生成html-anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路html anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路 本文聚焦 html anything 开源仓AI 应用人工智能AI AgentAI 写作媒体生成colour-schemes的Template类HTML预览页生成模板引擎解析colour schemes的Template类HTML预览页生成模板引擎解析 Template类是colour schemes项目中负责HTML预览页生成的开发工具上一篇ONVIF-Java终极指南10分钟构建智能安防监控系统下一篇解锁正方教务系统自动化3个实用技巧提升学习效率创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
