1实现原理 · 为什么它能做到
这个 skill 不是可执行程序，而是「一个目录 = 一个模板」：SKILL.md 的 frontmatter 供选择器展示，正文（body）就是发给模型的提示词；加模板＝加目录，不需要改 TypeScript。
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
注：同一文件头注释写明目录约定：SKILL.md（frontmatter + prompt body）/ example.md（可选输入样例）/ example.html（可选预览）。本 skill 目录内正是这一结构。
实际下发提示词 = 平台共享设计指令（SHARED_DESIGN_DIRECTIVES）+ 本 skill 的 SKILL.md 正文 + 用户内容，由 assemblePrompt 拼成一条 prompt。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：所以本 skill 的正文只负责「版式/风格/组件库」这一段；输出纪律（单文件 HTML、必须用用户真实数据、内容驱动数量）来自共享指令，模板作者不必重复声明。
成稿不走文件系统：共享指令明令禁止 Write/Edit/Bash 等文件工具，要求模型把整份 HTML 直接作为回复正文流式输出（stdout 由前端捕获落盘）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：这是「skill 自身零写盘」的机制来源：写文件的是宿主前端，不是 skill；本目录内也无任何脚本。
目标是「能进邮件客户端的 HTML」：SKILL.md 规定 600px 单栏、用 <table role='presentation'> 兜底布局、颜色走 inline style 而非 class。
next/src/lib/templates/skills/email-marketing/SKILL.md
- 使用 `<table role='presentation'>` 做布局兜底
注：这三条是邮件兼容性的标准手段（表格布局 + 内联样式规避客户端剥 <style>/class）。注意样例并未完全遵循（见 verification.second_pass）：它用 div + <style> + grid，说明「规范在提示词、样例是早期版本」。
平台侧的落地链路正好解释「为何必须内联样式」：导出微信/邮件时，前端用 juice 把 <style> 里的 CSS 内联进每个元素，因为目标客户端只认行内样式。
next/src/lib/export/wechat.ts
Take a full HTML document, extract <body> content, inline all CSS via juice,
注：同一段注释还指出 Tailwind via CDN 对 juice 不可见——所以「颜色用 inline style」这条规范不是洁癖，而是让成稿在 juice 内联后仍保持样式的关键。
邮件结构按发布邮件范式铺满：Masthead（wordmark + 导航）→ Hero 图块 → Headline lockup（含斜切 accent）→ 正文 → 主 CTA 按钮 → 规格网格 → 页脚（社交 + 退订）。
next/src/lib/templates/skills/email-marketing/example.html
<div class="frame" data-od-id="email">
注：样例逐块标了 data-od-id（email/masthead/hero/headline/specs/footer），与 SKILL.md 的布局清单一一对应，便于「哪块该改」的定位。
Hero 是内联 SVG 绘制的产品图（一双跑鞋），不依赖外链图片——多段 path + 两个 linearGradient 上色。
next/src/lib/templates/skills/email-marketing/example.html
<svg class="shoe" viewBox="0 0 600 280" aria-hidden="true">
注：对应 SKILL.md「Hero 图块 (SVG 占位)」与共享指令「不要引用任何外部图片 URL」；邮件客户端普遍屏蔽外链图，内联 SVG 是可行解（静态截图导出后即为位图）。
品牌调子的抓手是「斜切元素」：wordmark 的 accent 方块 transform: skew(-12deg)，标题里的强调词 skew(-8deg) 斜体，形成运动品牌的动感语汇。
next/src/lib/templates/skills/email-marketing/example.html
h1.lockup .axis { color: var(--accent); display: inline-block; transform: skew(-8deg); }
注：样例品牌为虚构的 SPORT TEST（--accent:#d8482b 橙红 + 纸色 #f4efe7），所有视觉都靠 6 个 CSS 变量与斜切/字重撑起。
转化闭环写进页脚：Unsubscribe + View in browser 两条合规链接与版权行。
next/src/lib/templates/skills/email-marketing/example.html
<div><a href="#">Unsubscribe</a> · <a href="#">View in browser</a></div>
注：对应 SKILL.md 的「Footer (社交 + 退订)」；样例用占位 #，真实投放时需替换为可用的退订地址。
服务端 /api/convert 只做三件事：按 templateId 从磁盘读 skill、拼 prompt、spawn 本地 agent CLI 并 SSE 流转发输出。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：同文件先 `const skill = loadSkill(templateId);`（无此模板即 400），再交给 invokeAgent；skill 目录本身不产生进程、不联网。
2核心能力
01品牌产品发布邮件单页：masthead / hero / 标题锁排 / 正文 / CTA / 规格网格 / 页脚
02内联 SVG hero 图块，规避邮件客户端屏蔽外链图
03斜切 accent 语汇（wordmark 方块与标题强调词）
04规格网格承载产品参数（大号数字 + 等宽小标签）
05主 CTA 按钮（深底浅字 + 箭头 + 大写宽字距）
06合规页脚（Unsubscribe / View in browser / 版权）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 提示词承诺的兼容性手法未在样例落实 — table 兜底与 inline style 是邮件兼容的关键，样例两条都没做；若模型照样例产出并直接投递，在 Outlook 等客户端可能掉样式（依赖宿主 juice 补救）。
- 宽度不一致 — aspect_hint 写 600、样例 680，而响应式断点在 540px；邮件模板宽度关系到移动端换行与图片尺寸，需在成稿时统一。
- 占位链接与虚构品牌 — 页脚 Unsubscribe/View in browser 与导航均为 href="#"，直接投递等同缺少退订入口（合规风险）；品牌名/地址均为样例虚构内容，不可直接沿用。
- 注入面 — 用户内容逐字进 prompt；邮件 HTML 属会被大量客户端渲染的载体，若用户内容带入脚本/外链，成稿可能在收件人侧执行或追踪。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（SKILL.md + example.html/example.md，本目录零脚本、零凭证读取、零写盘指令、无网络调用代码）。按批4 终版口径，html-anything 模板一律 green：SKILL.md 全文未点名任何运行时服务后端/API，也不把用户素材送外部生成后端（无 orange 要件）；无逆向/冒充/绕过后端（无 red 要件）。目录内实际出现的端点仅有产物示例外链（无（example.html 全文无外链：无字体链接、无 CDN、无图片 URL；字体走 'Inter'/'Anton'/'Bebas Neue' 等本地或系统栈名）），属「產物示例」，按口径不判级，仅在此自证列出。宿主侧另需知悉：预览 iframe 用 sandbox="allow-scripts allow-same-origin"、本地 agent CLI 被 spawn（next/src/lib/agents/invoke.ts）、共享指令要求成稿引 CDN——这些是平台行为，只作说明。
5第二遍独立确认
- [discrepancy] 「600px 单栏」 — 样例 .frame { max-width: 680px; }，为 680px（frontmatter aspect_hint 也写「600 邮件宽」）；单栏成立，宽度不符。
- [discrepancy] 「使用 <table role='presentation'> 做布局兜底」 — 样例全文无 <table>、无 role="presentation"，改用 <div class="frame"> + grid/flex；邮件客户端（Outlook）对 grid 支持差，规范与样例的兼容性结论相反。
- [discrepancy] 「颜色用 inline style (不要依赖 class)」 — 样例把配色写在 <style> 的 :root 变量与 class 里，仅个别元素用 inline style；与规范相悖（宿主可用 juice 内联补救，但那是导出期行为）。
- [discrepancy] 「Specifications grid (3 列)」 — 样例 .specs-grid 为 repeat(2, 1fr)，且实际 4 个 .spec（2 列 × 2 行）。
- [discrepancy] 「Masthead (wordmark 居中)」 — 样例 masthead 为 display:flex; justify-content: space-between，左侧 wordmark + 右侧 SHOP/JOURNAL/MEMBERS 导航，非居中。
- [ok] Hero 为 SVG 占位而非外链图 — <svg class="shoe" viewBox="0 0 600 280"> 含两条 linearGradient 与多段 path，无 <img>。
- [ok] 目录内零脚本/零端点 — 无 <script>、无 CDN、无字体外链；字体族名属本地/系统栈。
6结论
适合：适合新品发布、功能上线、活动通知类营销邮件的单页成品；适合需要「无外链图、可被邮件客户端渲染」的 Newsletter 模板；适合作为邮件服务商模板的起点（补 table 化即可）。
不适合：不适合多栏目 newsletter 排版（单栏、单 CTA，信息量有限）；不适合带图库/多商品的电商邮件（无循环列表组件、无外链图策略）；不适合需要交互（表单、动画）的场景；也不适合直接当合规邮件使用——退订链路需人工替换。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 email-marketing.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agented93a7856ba23d50…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE = Apache License 2.0；GitHub API license.spdx_id = Apache-2.0；next/package.json 亦声明 Apache-2.0）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。