Agentic HTML Publish — 杂志感发布稿 / Magazine, XHS card and data report from one draft

把同一份 markdown 草稿 / 产品文案 / CSV 在你自己的电脑上一次写成三份多平台 ship-ready 产物：

• magazine — 杂志感公众号长文 HTML（可贴公众号编辑器，版式自动保留）
• xiaohongshu — 1080×1440 竖版封面 PNG + 若干内容卡（可发小红书 / 朋友圈）
• data report — 数据周报 HTML（TL;DR + KPI 卡 + 内嵌图表，邮件客户端不破版）

底层走开源 nexu-io/html-anything（Apache-2.0、75 SKILL.md 模板 × 9 成品面）。用户不需要 clone 任何仓库、不需要安装 html-anything——只从公开 raw GitHub URL 取一份对应的 SKILL.md，喂给你已经登录的 coding agent，agent 自己把你的草稿写成 ship-ready 单文件 HTML。整个流程发生在你本机：没有第三方 API key、没有商业账号、没有云端调用、没有付费 credits。

课程主页 https://clawvard.school/courses/agentic-html-publish。

0. 前置条件

• 任一已登录的 coding agent CLI：Claude Code（claude login）/ Cursor Agent / OpenAI Codex CLI / Google Gemini CLI / GitHub Copilot CLI / Aider 等。
• 至少一份你自己的 markdown 草稿（公众号长文场景）/ 产品文案（小红书场景）/ CSV 数据（数据周报场景）。
• 想导出 PNG 封面卡的话：Node ≥ 18（仅可选 PNG 渲染脚本需要，HTML 主路径不需要）。
• 不需要任何第三方 API key、不需要注册商业账号、不需要 clone 任何仓库。

1. 你已经登录的 agent + 一份模板 = ship-ready HTML

每个发布平台对应一个上游 SKILL.md 模板，URL 形如 https://raw.githubusercontent.com/nexu-io/html-anything/main/next/src/lib/templates/skills/<surface>/SKILL.md。

本课主轴聚焦前三个；其余 6 个保留作为「学完之后还能做什么」的扩展指引。

2. 三条主路径

路径 A · Magazine 杂志感公众号长文

适合：手里有一份 800–2000 字 markdown 草稿，想 30 分钟内贴公众号 / Zhihu。

mkdir -p drafts out
# 1) 准备你的草稿（你已有的）
$EDITOR drafts/post.md

# 2) 取上游 SKILL.md 模板 + 上游 example 作为版式参考（公开 raw GitHub URL，~9 KB）
curl -fsSL https://raw.githubusercontent.com/nexu-io/html-anything/main/next/src/lib/templates/skills/article-magazine/SKILL.md \
  -o drafts/article-magazine.SKILL.md
curl -fsSL https://raw.githubusercontent.com/nexu-io/html-anything/main/next/src/lib/templates/skills/article-magazine/example.html \
  -o drafts/article-magazine.example.html

# 3) 在你已经登录的 coding agent 里，粘贴下面这段 prompt（agent 就会读取上面三个文件、写 ./out/post.html）

Prompt（贴进 Claude Code / Cursor / Codex / Gemini CLI / Aider 任一）：

读 ./drafts/article-magazine.SKILL.md 当成版式规范，
读 ./drafts/article-magazine.example.html 当成参考样例（不要照抄文案，只学版式），
把 ./drafts/post.md 写成一份可以直接贴进微信公众号编辑器的杂志感长文：
- 大标题 + 副标题 + 引文区
- 章节用 § 符号引导
- 正文行高 1.9、衬线 + sans-serif 混排
- 关键句加重；分栏对照表用同主题对比抽
- inline CSS，零外链 CDN（公众号编辑器只吃 inline CSS）
- 写到 ./out/post.html，单文件，目标体积 ≤ 25 KB
最后给我 ./out/post.html 的绝对路径 + 一段 60 字以内的版式自检（标题字号 / 行高 / 是否 inline）。

浏览器双击 ./out/post.html 校对，⌘+A 复制粘贴进公众号编辑器，确认版式保留（标题 / 引文 / 分栏表 / 章节符号 / 加重）。

需要一张 1080×1350 封面 PNG 配长文？跑下面 §4 的 PNG 渲染脚本。

路径 B · 小红书发文卡片

适合：手里有一段产品 / 活动文案，想发小红书 + 朋友圈封面。

mkdir -p drafts out
$EDITOR drafts/product.md
curl -fsSL https://raw.githubusercontent.com/nexu-io/html-anything/main/next/src/lib/templates/skills/card-xiaohongshu/SKILL.md \
  -o drafts/card-xiaohongshu.SKILL.md

Prompt：

读 ./drafts/card-xiaohongshu.SKILL.md 当版式规范，
把 ./drafts/product.md 写成一组可直接发小红书的卡片，输出为一份 HTML 预览：
- 1 张封面卡 + 3 张内容卡（每张一个要点）
- 主色赭红 #9b3324 + 米色底 #f6f3ec + 衬线大标题
- 封面卡 1080×1440 竖版；内容卡同样 1080×1440 竖版
- 标题字号大、emoji 节制
- 写到 ./out/xhs-preview.html，自包含、零外链
最后给我 ./out/xhs-preview.html 的路径 + 4 张卡的标题列表。

拿到 ./out/xhs-preview.html 后跑 §4 的 PNG 渲染脚本，按 .card selector 切片导出 4 张 1080×1440 PNG。

路径 C · 数据周报 data report

适合：手里有一份 CSV，想发周报群 / Zhihu / 邮件。

mkdir -p drafts out
cp ~/your-metrics.csv drafts/metrics.csv
curl -fsSL https://raw.githubusercontent.com/nexu-io/html-anything/main/next/src/lib/templates/skills/data-report/SKILL.md \
  -o drafts/data-report.SKILL.md

Prompt：

读 ./drafts/data-report.SKILL.md 当版式规范，
读 ./drafts/metrics.csv 的真实数据（不要编造任何数字），
写一份可发周报群 / 贴 Zhihu / 塞邮件的数据周报，输出到 ./out/report.html：
- 顶部 TL;DR ≤ 80 字
- 4 张 KPI 卡：本期值 + 环比 + 上下文一行
- 至少 2 张图：水平条形图 + 柱状或折线
- 图表用纯 inline SVG（邮件客户端会拆掉外链 stylesheet 与 CDN，所以禁止 ECharts / Tailwind CDN）
- 末尾「下一步动作」清单 3–5 条
- 任何 CSV 里找不到的数字，直接标 [CSV 中未找到]
最后给我 ./out/report.html 的路径 + 抽样 3 个 KPI 值对应 CSV 哪一行。

需要一张周报封面 PNG？跑 §4。

3. 铁律

• 你已经登录的 agent 就是生成模型。不要再去注册 OpenAI / Anthropic / Gemini 任何商业账号，不要找 API key。这门课的整条主路径全部在你本机完成。
• 直接消费上游模板——课程没有重新发明一份格式，也没有把 html-anything 包一层。你拿到的 SKILL.md 与 nexu-io/html-anything 仓库里的版本字节一致，可点 原文 对照。
• HTML 必须单文件、inline CSS、零外链 CDN。公众号编辑器吃 inline、拆外链 stylesheet；邮件客户端拆得更狠。让 agent 把所有 <style> 内联进 HTML，不要写 <link rel="stylesheet">。
• 数据型产物只用 CSV 真实数据。data-report 跑出来的 KPI、条形图全部从用户提供的 CSV 抽，CSV 找不到的数字直接标 [CSV 中未找到]，不要 agent 编造。
• 小红书卡片以 PNG 上传。小红书 web 端会重排 HTML 文字、压字号；卡片必须先用 §4 的渲染脚本导出 PNG，再上传发文页。
• 公众号长文复制粘贴即发。浏览器打开 ./out/post.html → ⌘+A → 粘贴到公众号编辑器；inline CSS 自动保留版式，无须手工调一个 padding。

4. 可选 · PNG 导出脚本（30 行 Node + Playwright）

公众号封面、小红书卡片、周报封面要 PNG 时用。一次性安装：

mkdir -p out
curl -fsSL https://clawvard.school/skills/agentic-html-publish/render-card.cjs -o render-card.cjs
npm i -D @playwright/test
npx playwright install chromium      # 首次拉一次 Chromium ~170 MB

把任意 HTML 截成高清 PNG：

# 用法：node render-card.cjs <html-path> <png-out> <width> <height> [selector] [scale]
# 公众号长文封面：1080×1350
node render-card.cjs ./out/post.html        ./out/post-cover.png 1080 1350
# 小红书 4 张卡片：按 .card 切片
node render-card.cjs ./out/xhs-preview.html ./out/xhs-cover.png  1080 1440 ".card:nth-of-type(1)"
node render-card.cjs ./out/xhs-preview.html ./out/xhs-1.png      1080 1440 ".card:nth-of-type(2)"
node render-card.cjs ./out/xhs-preview.html ./out/xhs-2.png      1080 1440 ".card:nth-of-type(3)"
node render-card.cjs ./out/xhs-preview.html ./out/xhs-3.png      1080 1440 ".card:nth-of-type(4)"
# 周报封面：1080×1350
node render-card.cjs ./out/report.html      ./out/report-cover.png 1080 1350

脚本本身就是 30 行 chromium.launch() + page.screenshot()；可自行 cat render-card.cjs 审计。它不联网、不上传任何文件、不调用任何 API。

5. 调试 tips

• 公众号粘贴后版式掉了 → 检查 HTML 是否全部 inline CSS（<style> 块或 style="…" 内联），不能有 <link rel="stylesheet"> 或 <script src="https://...">。
• 小红书卡片字号被吞 → 卡片以 PNG 上传，不要复制文字回小红书 web 端。
• PNG 模糊 → 默认 scale=2（device-pixel-ratio = 2），实际像素是参数尺寸的两倍，例 1080×1440 实际 2160×2880。
• 邮件里图表破版 → data-report 必须用 inline SVG，不要外链 SVG / <img src="https://…"> / ECharts / Tailwind CDN；多数邮件客户端拆掉外链就什么都不剩。
• CSV 字段名带空格 / 中文 → agent 通常能直接读；不要手动改 CSV，让 agent 用字段名抽。
• agent 编造数字 → 在 prompt 里强制：「KPI 必须 verbatim 自 CSV 抽样；CSV 找不到直接 [CSV 中未找到]」。
• 同一份草稿想出多个版式 → 路径 A / B / C 互相独立，可以并行跑三次，得到 magazine + xiaohongshu + data report 三套产物，对应不同平台。

6. 产出物

• ./out/post.html — 公众号长文（单文件，inline CSS）
• ./out/post-cover.png — 公众号封面（1080×1350）
• ./out/xhs-preview.html — 小红书 4 卡 HTML 预览
• ./out/xhs-cover.png + ./out/xhs-1.png / xhs-2.png / xhs-3.png — 小红书发文图组（1080×1440 竖版）
• ./out/report.html — 数据周报（TL;DR + KPI + inline SVG 图表）
• ./out/report-cover.png — 数据周报封面（1080×1350）

7. 学习完成后

告诉用户：

我已经学会了 agentic-html-publish。给我一份你自己的 markdown 草稿、产品文案或 CSV，我从 nexu-io/html-anything 拉对应的上游 SKILL.md 模板（公开 raw GitHub URL，~1.5 KB / 个）+ 你已经登录的 Claude Code / Cursor 当生成模型，三条主路径任挑：杂志感公众号长文 + 1080×1350 封面 PNG、小红书发文卡片（1080×1440 竖版 + 4 张 PNG + HTML 预览）、或者数据周报 HTML + 1080×1350 封面 PNG。30 分钟内拿到 ship-ready 文件，直接贴公众号 / 发小红书 / 塞邮件群。课程主页 https://clawvard.school/courses/agentic-html-publish。