ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

HTML Anything email-marketing 技能实战:Agent 生成 600px 邮件兼容 HTML 的模板规范与转换链路解析

HTML Anything email-marketing 技能实战:Agent 生成 600px 邮件兼容 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 仓库内置的email-marketing技能Skill为切入完整解读该技能在 SKILL.md 中定义的品牌产品发布邮件模板规范——600px 单栏布局、六个区块骨架、table rolepresentation布局兜底与 inline style 两条邮件兼容铁律随后深入仓库源码剖析技能注册表、Prompt 组装、Agent 调用与流式输出这条完整转换链路并逐段拆解随包附带的 example.html 预渲染示例。读完你将掌握如何读懂一个 Skill 的 frontmatter 与正文约束、模板与示例的关系、以及如何把任意 Markdown 内容交给本地 Code Agent 一键产出可投递的邮件风格 HTML。一、Skill 是什么一个文件夹即模板的提示词包在 HTML Anything 中Skill也叫模板 / Template是一个文件夹即模板的声明式单元。每个技能占据 next/src/lib/templates/skills/ 下的一个目录目录内至少包含一份SKILL.md可选附带example.md示例输入与example.html预渲染预览。loader.ts 的注释明确了这一约定src/lib/templates/skills/id/ SKILL.md — frontmatter (id, scenario, tags, …) prompt body example.md — (optional) sample input content example.html — (optional) pre-rendered preview, shown inline in the pickeremail-marketing正是这套机制下的一个实例目录为 next/src/lib/templates/skills/email-marketing/内含SKILL.md与example.html。新增一个模板 新建一个文件夹无需改动任何 TypeScript 代码——API 路由会重新扫描磁盘客户端重新拉取/api/templates即可见 loader.ts 与 index.ts。1.1 frontmatter 全字段解读SKILL.md以 YAML frontmatter 开头由 loader.ts 中一个零依赖、无yaml包的迷你解析器读取支持字符串、整数与单行数组字面量。email-marketing的字段如下字段本技能取值作用与解析说明nameemail-marketing技能 ID / 目录名。必须匹配/^[a-z0-9][a-z0-9-]*$/kebab-case见 loader.tszh_name营销邮件选择器中显示的中文名映射为zhNameen_nameMarketing Email英文名映射为enNameemoji选择器卡片图标description产品发布邮件, 含 masthead、hero、CTA、规格表, table-fallback选择器展示的简介。注意它只进 UI 不进 Prompt——loader.ts 特意把 body 排除在/api/templates响应之外避免把提示词全文发给浏览器categoryemail分类键用于选择器筛选scenariomarketing场景键对应 scenarios.ts 中的SCENARIO_KEYS选择器按 Marketing / Content 分组展示aspect_hint600 邮件宽画布 / 编辑比例提示。它还会作为模板风格上下文传入最小化差异编辑的 Prompt见 convert route 中的templateAspectfeatured7精选排序权重。数值越小排名越靠前loader.ts 将其解析为数字picker 顶部有 ★ Featured 分组tags[email, newsletter, mjml]搜索标签由解析器对单行数组字面量做拆分loader.ts。mjml表明该模板定位在邮件 HTML 生态二、模板意图与布局骨架一份可交付的产品发布邮件SKILL.md的正文部分frontmatter 之后是发给 Agent 的模板规范指令原文如下【模板: 品牌产品发布邮件】 【意图】纯 HTML 邮件, 600px 单栏, 兼容邮件客户端。 【布局】 - Masthead (wordmark 居中) - Hero 图块 (SVG 占位) - Headline lockup (含 skewed-italic accent) - Body copy primary CTA 按钮 - Specifications grid (3 列) - Footer (社交 退订) 【设计细节】 - 使用 table rolepresentation 做布局兜底 - 颜色用 inline style (不要依赖 class)这份指令包含两层信息意图层明确输出是纯 HTML 邮件、600px 单栏、兼容邮件客户端。600px 是主流邮件客户端Gmail、Outlook、Apple Mail可安全承载的正文宽度单栏则保证在窄屏与阅读器内不破版。结构层自上而下六个区块——Masthead品牌字标区→ Hero视觉主图→ 标题与正文含 skewed-italic 强调→ CTA 按钮 → 规格表 → 页脚社交链接 退订入口。这是典型的发布 / 上新类邮件叙事先亮品牌再抛视觉钩子接着给卖点与行动按钮最后用规格表建立信任页脚收尾。2.1 邮件兼容的两条硬性规则【设计细节】的两条要求是整个模板的灵魂也是它与普通营销网页模板最本质的差别table rolepresentation布局兜底大多数邮件客户端尤其 Outlook对 CSSflex/grid/float支持残缺表格布局是唯一被广泛稳定支持的手段。rolepresentation是为了让屏幕阅读器跳过为排版而存在的表格兼顾无障碍。颜色用 inline style不要依赖 classGmail 等客户端会剥离style块或阻止外部样式表只有style...内联属性最可靠。从全局指令看HTML Anything 的 SHARED_DESIGN_DIRECTIVES 默认要求在head中通过 CDN 引入 Tailwind v3 Play 与 Google Fonts这显然无法被真实邮件客户端接收。可以推断email-marketing的正文正是对全局指令的针对性修正——它在全局基线之上叠加表格布局 内联样式的邮件专用约束最终 Prompt 是二者拼接的结果详见第四节。三、示例解剖example.html里的一封完整发布邮件技能包附带 example.html预渲染了一封名为 SPORT TEST — Meet the Axis Pro 的球鞋新品发布邮件。这份示例承担两个角色作为选择器内联缩略图与沙箱预览loader.ts以及作为 Agent 的参考成品模板选择器支持预览并载入编辑器随后编辑内容即可走最小化差异编辑见第七节。示例与 SKILL 正文并不矛盾全局设计指令明确模板只定义可用版面 / 风格 / 配色 / 字体 / 组件库不定义数量shared.ts因此示例中规格表用 2 列栅格呈现 4 项指标、masthead 采用左右分布而非居中都是同一套版式池下的合理实例化。逐段来看3.1 色彩系统CSS 变量 复古运动刊气质示例以:root定义 5 个色彩令牌example.html米灰页面底色--page、纸感正文底色--paper、墨色--ink、弱化灰--muted、以及作为强调色的暖橙红--accent: #d8482b。这与全局指令1 个主色 2 个中性色 至多 1 个强调色、不使用纯黑纯白完全吻合。字体选用 Anton / Bebas Neue 等压缩标题字体搭配 Inter 正文配合大号数字规格表营造复古运动刊物的质感。3.2 Masthead字标 EST 徽章 导航header classmasthead>.hero { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(circle at 30% 20%, #ffd6b8 0%, transparent 55%), radial-gradient(circle at 75% 70%, #f59a6c 0%, transparent 60%), linear-gradient(135deg, #c9c4b8 0%, #aaa39a 100%); overflow: hidden; }背景由两层径向渐变叠一层线性渐变构成火焰夕阳氛围主体则是一支约 60 行的内联 SVG 运动鞋viewBox0 0 600 280包含线性渐变上色、鞋底/鞋帮路径、缝线装饰与鞋舌高光example.html。这正是全局指令不要引用任何外部图片 URL优先使用 CSS / SVG 内联绘制的落地Hero 图块既承担视觉钩子又保持单文件自包含。角落的三枚等宽字体stamp— SPORT TEST、— EMBER FLARE、DROP 04 · 04—2026补充了系列名与发售日期信息。3.4 Headline lockupskewed-italic accent 的标题组合h1.lockup { font-family: Anton, ...; font-size: clamp(56px, 9vw, 96px); line-height: 0.95; text-transform: uppercase; } h1.lockup .axis { color: var(--accent); display: inline-block; transform: skew(-8deg); }h1 classlockup>return ${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()} 【输入格式】: ${opts.format} 【用户内容】: ${opts.content} ;最终 Prompt 全局设计指令约 30 行含内容驱动数量、禁文件工具、纯 HTML 流式输出、配色/排版/无障碍准则、内容真实性等硬性要求 本技能正文上述六区块规范 输入格式 用户内容。全局指令负责产出物的底线技能正文负责版式与风格二者叠加后交给 Agent。4.3 Agent 调用与流式输出invokeAgent 按优先级解析 Agent 二进制binOverride→ 环境变量 → PATH 扫描spawn对应 CLI如 Claude Code / Cursor / Codex 等Windows 下走 shell 以支持.cmdshim把 Prompt 写入 stdin或按协议作为位置参数 /--message随后逐行解析 stdout。事件start/delta/html/meta/stderr/done/error通过 SSE 流回前端实现生成中即预览。4.4 HTML 提取与预览兜底Agent 可能返回带 html 围栏或前后缀解释的文本extract-html.ts 依次尝试剥离围栏 → 截取!DOCTYPE html ... /html→ 截取html ... /html→ 信任以开头的内容 → 兜底包裹为最小脚手架。流式过程中的 previewHtml 还会自动补/body/html以便 iframe 增量渲染。用户随后即可在沙箱预览中检查邮件效果并通过导出菜单下载.html单文件、导出 PNG或复制到微信 / 知乎等平台。五、二次编辑最小化差异编辑模式邮件内容经常需要微调换一期发售信息、改价格、增删规格项。如果每次改动都从零生成既费 token 又可能破坏原有设计。/api/convert为此提供了editFromHtml/editFromContent参数当客户端同时传入已有 HTML 与旧内容时服务端改用 buildEditPrompt 组装最小化差异编辑指令——保留原head与无需变化的 DOM、仅按新旧内容差异替换文字 / 数据节点、禁止顺手重排或优化、禁止捏造数据。这正好呼应示例库的定位载入email-marketing的预渲染示例后改一版内容再⌘EnterAgent 只做 diff 编辑省 token 且设计不漂移。六、扩展与复用新增邮件技能或安装社区包如果你需要一套不同风格的邮件模板例如极简订阅信、SaaS 产品更新邮件不必改代码本地新增在 next/src/lib/templates/skills/ 下新建my-email-template/文件夹写一份含 frontmatter 的SKILL.md可选附example.html。开发模式下listSkills()直接重扫磁盘NODE_ENV ! production时跳过缓存刷新选择器即可看到loader.ts。市场安装通过设置面板的 Marketplace 从公开仓库安装技能包装到~/.html-anything/skills/以pkg-owner__repo--originalId命名空间 ID 与内置技能合并进同一注册表loader.ts。安装 / 卸载后调用invalidateSkillsCache()/refreshTemplates()即可让选择器即时更新index.ts。七、小结email-marketing是 HTML Anything 技能体系的一个典型样本它用不足 20 行的SKILL.md定义了一类可交付、可投递的邮件型 HTML600px 单栏 六区块叙事结构 表格布局 内联样式的邮件客户端兼容铁律再配合全局设计指令确保输出为自包含单文件、内容真实且数量由数据驱动。仓库为其配套的 example.html 既是选择器预览也是差异编辑的起点而 loader.ts、shared.ts、convert route 与 extract-html.ts 一起构成了声明模板 → 组装 Prompt → 驱动本地 Agent 流式生成 → 兜底提取 HTML的完整闭环。对于想为邮件营销场景定制新模板的开发者只需复制该目录结构、改写 frontmatter 与版式正文即可快速接入这套管线。赞分享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点击查看免费下载相关推荐React Email 渲染指南使用 react-email/render 将 React 组件转换为 HTML 邮件模板React Email 渲染指南使用 react email/render 将 React 组件转换为 HTML 邮件模板 react email/ren前端UI组件Novu Framework 邮件模板实战用 React Email / Vue Email / Svelte Email 在 step.email 中渲染 HTMLNovu Framework 邮件模板实战用 React Email / Vue Email / Svelte Email 在 step.email 中渲染后端消息路由前端通信AI Agent炉石传说体验重构HsMod 55功能深度解析与实战指南炉石传说体验重构HsMod 55功能深度解析与实战指南 HsMod是基于BepInEx框架开发的炉石传说模改插件通过55实用功能解决游戏中的操作痛点实游戏开发上一篇macOS 安装 OpenCV 完整指南图像识别与目标检测pip、Homebrew、源码三条路线任选下一篇ComfyUI完全指南从零基础到AI创作高手的进阶之路创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表