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；本目录内也无任何脚本。
画布尺寸在 SKILL.md 交代为 aspect_hint「810×1080 ×9」，example.html 把它落成写死的 810×1080 竖版页并声明 3:4 比例。
next/src/lib/templates/skills/deck-xhs-post/example.html
.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent}
注：810×1080 = 3:4，正是小红书图文的推荐竖版；下一页 .slide 用 position:absolute;inset:0 叠在同一画布上，说明它按「一页一张图」的贴图逻辑设计，而不是 PPT 播放逻辑。
页数结构在提示词里给了下限与上限：封面 + N 个 content + 收尾 CTA，短内容 7 页起步，建议总数 ≤ 18（受平台单帖图片数约束）。
next/src/lib/templates/skills/deck-xhs-post/SKILL.md
- Cover + N 个 content 页 + 收尾 CTA (N 由【用户内容】决定, 完整覆盖每个要点; 短内容 7 页起步, 长内容应更多, 受小红书平台单帖图片数约束建议总数 ≤ 18)
注：这是本 repo 里少见的「写明数量上下限」的模板，但它把上下限解释成内容驱动（短内容可低于范围、长内容应更多），并与共享指令的「内容驱动数量」一致。
性格化元素是「虚线贴纸」：白底、2.5px 虚线描边、18px 圆角、-3deg 旋转加硬阴影，另有粉/黄/蓝/绿四色变体。
next/src/lib/templates/skills/deck-xhs-post/example.html
.tpl-xhs-post .sticker{position:absolute;padding:10px 18px;background:#fff;border:2.5px dashed var(--text-1);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:4px 4px 0 var(--text-1)}
注：样例把 sticker 当手写批注用（「💤 救命」「亲测 7 天」「真 · 转折点 ↓」），每页 1 个、位置与角度各不相同——这是「小红书感」的主要来源。
每页右上角有页码胶囊（1 / 9 形式），由 .page-dot 单独渲染，样例 9 页逐页编号。
next/src/lib/templates/skills/deck-xhs-post/example.html
.tpl-xhs-post .page-dot{position:absolute;top:40px;right:48px;background:var(--text-1);color:#fff;border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2}
注：与 SKILL.md 写的「底部页码 dots」有出入：样例实现是「右上角页码胶囊」，且没有底部 dots 组件（详见 verification.second_pass）。
叙事骨架按内容营销套路铺好：封面钩子 → Hook（先别划走）→ Pain（痛点）→ Aha（真相）→ Step 1/2/3 → Result（结果）→ CTA（收藏+关注+话题标签）。
next/src/lib/templates/skills/deck-xhs-post/example.html
<h1 class="h1 tc mt-s" style="color:var(--accent)">收藏 + 关注 🧡</h1>
注：example.html 的 9 页注释依次为 `<!-- 1. Cover -->` … `<!-- 9. CTA -->`，把「小红书图文」的转化结构固化成可复用页序，是本模板相对同 repo 其他 deck 的最大差异。
服务端 /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把一篇要点内容排成 810×1080 竖版 9 图（封面/钩子/痛点/顿悟/步骤/结果/CTA）
02虚线贴纸批注（四色变体 + 旋转 + 硬阴影）给页面加手写感
03右上角页码胶囊逐页编号，被平台裁切时仍能定位顺序
04手写卡片 .hand-box 承载步骤与清单，配 num-circle 编号圆点
05结尾页内置转化组件：话题标签行 + 作者徽标 + 互动数位
06暖 pastel 主题 token（米粉底 #fef7f3 / 浅粉面 #fff5ef）保证竖版图的低饱和统一
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 提示词与样例有表述偏差 — SKILL.md 说「底部页码 dots」，样例是右上角页码胶囊且无 dots 组件；二次生成时两个信号不一致，可能产出两种页码风格。
- 强文案依赖 — 钩子/痛点/CTA 页序默认内容本身就是营销文案；把技术文档塞进来会得到空洞的标题与 emoji。
- 固定画布对超长文案不友好 — 810×1080 写死，单页文案超量会溢出被裁（.slide overflow 受基础 CSS 控制），需人工回读成稿截图。
- 平台图数上限靠提示词自觉 — 「建议总数 ≤ 18」是文字约束，没有代码强制；内容极长时可能超发。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（SKILL.md + example.html/example.md，本目录零脚本、零凭证读取、零写盘指令、无网络调用代码）。按批4 终版口径，html-anything 模板一律 green：SKILL.md 全文未点名任何运行时服务后端/API，也不把用户素材送外部生成后端（无 orange 要件）；无逆向/冒充/绕过后端（无 red 要件）。目录内实际出现的端点仅有产物示例外链（example.html 的 8 条 Google Fonts @import（fonts.googleapis.com）），属「產物示例」，按口径不判级，仅在此自证列出。宿主侧另需知悉：预览 iframe 用 sandbox="allow-scripts allow-same-origin"、本地 agent CLI 被 spawn（next/src/lib/agents/invoke.ts）、共享指令要求成稿引 CDN——这些是平台行为，只作说明。
5第二遍独立确认
- [ok] 9 页 3:4 竖版 — .deck 810×1080，.slide aspect-ratio:3/4；样例共 9 个 slide，页码 1 / 9 至 9 / 9。
- [ok] 「虚线 sticker 卡片」 — .sticker 为 border:2.5px dashed + rotate(-3deg) + 硬阴影，样例每页 1 个、共 5 处不同颜色。
- [discrepancy] 「底部页码 dots」 — SKILL.md 写「底部页码 dots」，但 example.html 用右上角 .page-dot 页码胶囊（top:40px;right:48px），全文无 dots 组件；属提示词与样例的表述偏差，不影响功能。
- [ok] 「暖色 pastel 背景」 — 主题 token --bg:#fef7f3 / --bg-soft:#fff1ea / --surface-2:#fff5ef，为暖粉体系。
- [ok] 页数区间（7 起 / ≤18）与共享指令不冲突 — SKILL.md 明确「短内容 7 页起步, 长内容应更多…建议总数 ≤ 18」，是下限+平台约束，非页数上限；与 shared.ts「模板不定义数量」的口径一致。
- [ok] 无外部资源依赖 — 除字体 @import 外零 URL；图形全为 CSS/SVG，无图片外链。
6结论
适合：适合小红书/IG 图文带货、知识科普、职场经验、生活技巧等「要点式」内容的批量出图；适合个人 IP 与运营同学把一篇稿子直接转成九宫格；适合需要统一暖色风格的账号矩阵。
不适合：不适合严肃报告、需要精确数据的表格式内容（无表格组件、无图表库）；不适合 16:9 投影演示（画布是竖版）；不适合需要交互（翻页、悬停）的场景；也不适合纯英文/西文长篇排版（字体栈以中文 sans/serif 为主）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-xhs-post.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentdc2bf96c0374a3ec…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 为实时上游，内容可能已更新。