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点击查看免费下载导读deck-xhs-white白底杂志风 Deck是 html-anything 技能模板库中的一个幻灯片类模板它以纯白画布 顶部 10 色彩虹 bar 紫蓝绿橙粉渐变文字 马卡龙软卡片 黑底白字 pill 的组合实现一份内容同时兼容小红书 3:4 竖版图文与横版 16:9 PPT的双用杂志风。本文以 SKILL.md 为骨架逐字段解析其 frontmatter 元数据与布局规格并对照 example.html 给出实现级的设计 token 与 8 页版面结构最后沿源码链路loader 注册 → API 路由 → prompt 组装 → Agent 流式生成说明这套模板在 html-anything 中从磁盘文件到成品 HTML 的完整运转方式。读完你将掌握如何读懂一个 SKILL 模板的规格、如何为这类模板贡献新技能文件夹、以及模板元数据如何影响挑选器排序与生成行为。一、SKILL.md 是什么一个模板文件夹的灵魂文件在 html-anything 中一个模板 一个文件夹。以deck-xhs-white为例其目录结构为next/src/lib/templates/skills/deck-xhs-white/ ├── SKILL.md ← frontmatter 元数据 面向 Agent 的提示正文 └── example.html ← 预渲染示例供挑选器内嵌预览与一键装载示例目录内的SKILL.md由两段组成YAML frontmatter被---包裹的元数据块和正文组装进最终 prompt 的模板指令。文件加载器 loader.ts 用一段零依赖的解析器将其拆开parseFrontmatter逐行匹配key: value支持带引号或不带引号的字符串、整数和单行数组字面量loader.ts。这意味着新增一个模板只需新增文件夹无需改动任何 TS 代码——API 路由会重新扫描磁盘客户端重新拉取/api/templates即可loader.ts。二、frontmatter 逐字段解析deck-xhs-white 的元数据含义deck-xhs-white的 frontmatter 完整内容如下--- name: deck-xhs-white zh_name: 白底杂志风 Deck en_name: White Editorial Deck emoji: description: 纯白 顶部彩虹 bar 渐变文字 马卡龙软卡片 黑底 pill category: slides scenario: marketing aspect_hint: 16:9 / 3:4 featured: 27 tags: [editorial, rainbow, macaron] ---各字段的语义与系统消费方式如下表字段值系统消费方式依据 loader.tsnamedeck-xhs-white技能 id目录名必须与之对应的 kebab-case 形式也是enName的兜底来源zh_name白底杂志风 Deck映射为SkillMeta.zhName是挑选器中显示的中文名loader.tsen_nameWhite Editorial Deck映射为SkillMeta.enName英文名emoji挑选器缩略图上的图标缺省时兜底为✨description纯白 顶部彩虹 bar 渐变文字 马卡龙软卡片 黑底 pill展示在挑选器卡片上的单行摘要也是 Agent 理解模板风格的第一印象categoryslides模板类别本例为幻灯片类scenariomarketing业务场景必须是 scenarios.ts 中 12 个已知场景键之一marketing / engineering / operations / product / design / finance / sales / hr / personal / education / creator / video未知场景键也能加载只是会落入other兜底分组并按原始 id 渲染标签aspect_hint16:9 / 3:4宽高比提示既指导 Agent 排版也会在 diff-edit 模式下随模板名一起注入编辑 prompt见 convert 路由featured27数字型排序权重。parseFrontmatter会用Number()校验后写入SkillMeta.featuredloader.ts由前端挑选器消费同族字段recommended在源码注释中明确为推荐/Featured 分组数值小者排前loader.tstags[editorial, rainbow, macaron]单行数组解析时逐个去引号、去空白loader.ts用于搜索与分类筛选从这套机制可以推断deck-xhs-white定位于营销场景marketing下的幻灯片类别slidesaspect_hint: 16:9 / 3:4直接对应 SKILL.md 正文可同时发小红书图文与横版 PPT 双用的意图——横版留给 PPT/投影竖版比例留给小红书图文。三、布局规格SKILL.md 正文的四要素SKILL.md 的正文部分frontmatter 之后、被加载器作为body提取的段落只有四行却精炼地定义了整套视觉系统的骨架【模板: 白底杂志风 Deck】 【意图】可同时发小红书图文与横版 PPT 双用的白底杂志风。 【布局】 - 纯白背景 顶部 10 色彩虹 bar - 80-110px display 标题 紫→蓝→绿→橙→粉渐变文字 - 马卡龙软卡片组 (粉 / 紫 / 蓝 / 绿 / 橙) - 黑底白字 .focus pill 引用大块这段正文会在运行时与全局设计指令、用户内容拼装成最终 prompt。拼装器位于 shared.ts 的assemblePrompt它把SHARED_DESIGN_DIRECTIVES全局设计准则、模板body、【输入格式】、【用户内容】四段拼接形成一份自包含单文件 HTML 的生成指令。因此 SKILL.md 正文是风格约束层模板只声明可用版面 / 风格 / 配色 / 字体 / 组件库不声明 slide 数量——数量由用户内容长度决定shared.ts。这也解释了为什么 example.html 有 8 页而同一模板换成长文输入时会被 Agent 扩展成更多页。四、example.html布局规格的像素级落地deck-xhs-white附带的 example.html 是规格的完整实现样本以tpl-xhs-white-editorial为命名空间可被挑选器通过iframe src/api/templates/deck-xhs-white/preview内嵌预览preview 路由也能被/api/templates/:id/example以 JSON 形式整体下发给客户端一键装载example 路由。4.1 设计 token五主色 五软色 黑白灰轴模板主题块style内.tpl-xhs-white-editorial定义了完整的设计变量example.html类型变量色值画布--xw-bg#ffffff纯白墨色--xw-ink/--xw-ink2/--xw-muted#111318/#475467/#98a2b3分隔线--xw-line#eaecf3极浅灰主色五--xw-purple/--xw-pink/--xw-blue/--xw-green/--xw-orange#7b61ff/#ff5fa2/#4e8cff/#17b26a/#ff9d42软色五--xw-soft-purple/--xw-soft-pink/--xw-soft-blue/--xw-soft-green/--xw-soft-orange#f4efff/#fff0f6/#eef4ff/#edfdf3/#fff5ea这套 token 直接实现了 SKILL.md 的马卡龙软卡片组粉 / 紫 / 蓝 / 绿 / 橙——每张软卡片就是--xw-soft-*底色 1px--xw-line边框 24px 圆角 柔和投影的组合.xw-card及其soft-*修饰类example.html。4.2 顶部 10 色彩虹 barSKILL.md 说顶部 10 色彩虹 bar实现为.xw-topline绝对定位于页面顶部的 5px 高渐变条色标依次为#6366f1 → #8b5cf6 → #a855f7 → #ec4899 → #f43f5e → #f97316 → #eab308 → #22c55e → #06b6d4 → #6366f1首尾同色形成回环example.html。它与每页顶部栏.xw-topbar含左侧彩虹圆点 tag 与右侧页码组合成统一的页面 chrome。4.3 渐变文字紫→蓝→绿→橙→粉SKILL.md 的渐变文字在实现中是.xw-gradbackground: linear-gradient(90deg,#7b61ff 0%,#4e8cff 25%,#17b26a 48%,#ff9d42 72%,#ff5fa2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;五个色标依次为紫→蓝→绿→橙→粉与 SKILL.md 描述的渐变顺序完全一致example.html。标题字号方面SKILL.md 的80-110px display 标题在实现中分布在两个层级常规封面标题.xw-title为 84px、次级标题.xw-title-md为 60px、章节分割页的内联放大标题达到 110pxexample.html覆盖了规格给出的字号区间。4.4 黑底白字 .focus pill 与引用大块SKILL.md 的黑底白字 .focus pill对应.xw-focusbackground:#111318; color:#fff; border-radius:14px的高亮胶囊用于在段落中圈出关键词如封面副标题里的做对 / 没风险 / 不会出事。配套的还有同族变体.xw-focus-blue / -pink / -orange / -green——软色底 深色字的 pill用于在不同语境下强调example.html。引用大块则是.xw-hero1px 边框、28px 圆角、#fff → #fcfcff竖向渐变底、大号投影的引用容器内部放.xw-quote38px / 800 字重的引文是全套版面里最具杂志感的组件example.html。4.5 8 页版面一个双用 deck的标准示范example.html 演示了 8 页完整叙事覆盖了模板的主要版式池页版式关键组件01 Cover封面彩虹 topbar、84px 渐变大标题、黑底 focus pill 副标题、hero 引用块02 Section Divider章节分割110px 大标题 kicker03 Content Grid 2x22×2 卡片组粉/蓝/绿/橙四张soft-*马卡龙卡xw-grid-204 Steps编号步骤黑底圆形数字.xw-num 加粗文本 hero 引用05 Code Block代码展示深色.xw-codebox#0f1117 底、语法高亮 span06 Chart数据可视化内联 SVG 横向条形图五组岗位价值对比07 CTA行动号召3 张软卡xw-grid-3 hero 引用收束08 Thanks结尾96px 渐变大数字.xw-big-stat 白底 pill 群值得注意的是第 06 页的图表完全用内联 SVG 绘制而非外链图片第 05 页的代码块为纯 CSS 实现——这与全局设计指令不要引用任何外部图片 URL优先使用 CSS / SVG 内联绘制保持单文件可双击打开即用的要求一致shared.ts。五、模板在系统中的生命周期从磁盘到挑选器再到 Agent5.1 注册与列表listSkills()与/api/templatesdeck-xhs-white与其他技能一样由 loader.ts 的listSkills()扫描src/lib/templates/skills/目录收集每个合法 kebab-case 目录名对应一条SkillMeta含example.html是否存在、example.md是否存在两个布尔位。生产环境结果被缓存开发环境每次直读磁盘以便新技能免重启生效invalidateSkillsCache()可在安装/卸载后手动失效缓存。元数据经 templates 路由 以GET /api/templates暴露响应头带Cache-Control: public, max-age5前端 useTemplates() 以模块级缓存 单飞请求in-flight dedupe generation 令牌防竞态的方式消费——即后续安装新技能后调用refreshTemplates()可以热更新挑选器列表而不刷新页面。5.2 生成链路/api/convert的模板加载与 prompt 组装当用户选定deck-xhs-white并提交内容时前端 useConvert.run 将templateId连同用户内容 POST 到/api/convert。服务端处理convert 路由loadSkill(templateId)从磁盘读回完整技能含正文 body 与示例首次生成走assemblePrompt({ body, content, format })把全局设计指令 模板正文 用户内容拼成完整 prompt若存在上一版 HTMLdiff-edit 模式改用buildEditPrompt——保留head、字体、配色、布局、栅格、组件结构只按新旧内容差异替换文字/数据节点convert 路由既防创作漂移又省 token通过invokeAgent唤起本机 Agent CLI并以 SSE 流event: delta / html / meta / done …把 HTML 流式回传convert 路由前端逐块追加到编辑器预览。由此可见deck-xhs-white的 SKILL.md 正文并非仅供人阅读的说明而是被逐字拼进 prompt 的风格约束example.html 则同时承担挑选器预览示例装载与diff-edit 基准三种角色example 路由。六、如何把 deck-xhs-white 用到自己的内容上对最终用户而言使用该模板无需写代码在 html-anything 界面打开模板挑选器在 slides 类别 / marketing 场景下找到白底杂志风 Deck可按editorial、rainbow、macaron标签检索点击装载示例可通过/api/templates/deck-xhs-white/example立即获得 example.md 内容与 example.html 的对照也可直接粘贴自己的文章/数据选择本机已接入的 AgentClaude Code / Cursor / Codex 等发起转换得到单文件自包含 HTML由于模板声明了aspect_hint: 16:9 / 3:4同一份输出既可作为 16:9 幻灯片放映也适配 3:4 的小红书图文裁剪成品可继续走导出流程HTML / PNG / 小红书 / 微信等也可再次编辑触发 diff-edit 增量修改。对想贡献新模板的开发者只需在 skills 目录 下新增一个 kebab-case 文件夹写好SKILL.mdfrontmatter 正文可选附带example.md与example.html无需改动任何 TS 代码——这与 loader 注释中Adding a template adding a folder的设计一致loader.ts。小结deck-xhs-white是 html-anything一个技能 一个文件夹体系的典型样本SKILL.md 用极简的 frontmatter 四行布局规格锁定了视觉系统example.html 用可量化的 token、渐变与组件把规格落到像素级而 loader / API / prompt 组装 / diff-edit 这条链路则让模板说明与生成行为严格一一对应。理解这一份模板就等于理解了 html-anything 全部 70 技能模板的通用运转模式元数据决定它在挑选器里的样子正文决定 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 投资人 Pitch Deck Skill 全解析从 SKILL.md 到 10 页融资 Deck 的生成链路html anything 投资人 Pitch Deck Skill 全解析从 SKILL.md 到 10 页融资 Deck 的生成链路 html anythAI 应用人工智能AI AgentAI 写作媒体生成html-anything 模板深度解析deck-open-slide-canvas 的 1920 自由画布规格、调色板与 Agent 生成机制html anything 模板深度解析deck open slide canvas 的 1920 自由画布规格、调色板与 Agent 生成机制 本文以 neAI 应用人工智能AI AgentAI 写作媒体生成html-ppt 之 xhs-white-editorial用纯 CSS 组件实现小红书白底杂志风 HTML 演示模板html ppt 之 xhs white editorial用纯 CSS 组件实现小红书白底杂志风 HTML 演示模板 xhs white editorialAI 技能/插件前端上一篇从零开始的自然魔法之旅Botania全功能使用教程下一篇OpenVR-InputEmulator运动补偿指南解决6自由度运动平台问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考