1实现原理 · 为什么它能做到
模板本体没有可执行代码：loader 从 src/lib/templates/skills/<id>/SKILL.md 读入 frontmatter 与正文，正文（body）与 example 内容一起作为 LoadedSkill 返回。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：这里在做什么：SKILL.md 是唯一行为来源——frontmatter 供选择器渲染（zh_name/emoji/aspect_hint/tags/example_* 等），正文整段即提示词；loader 不做语义校验，模板写什么就下发什么。
下发前宿主固定拼装 prompt：模板正文夹在共享设计指令 SHARED_DESIGN_DIRECTIVES 与【输入格式】/【用户内容】之间。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：这里在做什么：模板只定义「这一个交付物长什么样」（版式/节奏/组件），共享指令承担跨模板硬约束——单文件 HTML、禁止用文件工具、Tailwind 与 Google Fonts 走 CDN、内容真实性、中文盘古之白。
共享指令把硬约束写成对 agent 的显式禁令，并强制内容驱动数量（模板里的数字只作参考下限）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
注：同文件下文还有一条：输出的 slide / frame / card / section 数量完全由【用户内容】的实际长度和信息结构决定——这解释了为什么本类模板不因内容变长而失效：每段内容至少一张卡/一节，模板只提供版面池。
真正执行的是用户本机已安装并登录的编码 agent CLI：宿主 spawn 子进程，把 prompt 交给它，HTML 从 stdout 流式捕获。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：这里在做什么：模板 skill 只提供提示词，能力（含写代码、跑工具）来自宿主 CLI 的既有权限；skill 目录自身没有任何脚本入口，因此判级只看目录内资产（宿主行为不计档）。
/api/convert 是模板的执行路径：它把 skill.body 与用户内容组装成 prompt 后交给 invokeAgent。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：编辑模式另走 buildEditPrompt（最小化差异编辑，禁用文件工具、要求直接流式输出完整 HTML），因此本类模板的产物形态稳定：单文件 HTML、内联 CSS/SVG，外链仅字体与个别模板显式要求的图表库。
输出是 N 张同尺寸卡片的纵向 flex 列，1080×1440（3:4）单卡，整体截图与单张截图两种用法都成立。
next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
- 输出 N 张连续卡片, 每张 `w-[1080px] h-[1440px]`, 用 flex 纵向排列方便整体截图也方便单张截图。
注：这里在做什么：用纵向排列同时满足两个使用场景——一次性长截图（多图连排）或逐张截图上传；示例 .deck 即 display:flex + flex-direction:column + align-items:center。
张数由内容信息量决定，并给出平台侧上限与经验区间（最多 18 图、通常 9 张以内最佳、短内容 3-6 张起步、一张卡一个核心观点）。
next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
N 由【用户内容】信息量决定: 短内容 3-6 张起步
注：这里在做什么：把「几张」这个最常见的模糊点写成判定规则，并与共享指令的内容驱动数量约束一致（模板数字是下限不是上限）。
卡片序列有明确叙事结构：首张封面（巨大标题 + 1 行副标题 + 吸引人的标签）、中间每张一个核心观点（emoji + 短句 + 1-2 例）、末张总结 + 行动号召。
next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
- 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。
注：示例据此产出 7 张：封面带「⚡ 建议收藏 · 干货预警」badge，中间 5 张各一个 AI 使用习惯，末张给出「关注 / 收藏」按钮样式。
移动端可读性写成硬要求：字号大、行距宽、对比强，理由是小红书在手机上看。
next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
- 字号大、行距宽、对比强（小红书在手机上看, 小字根本看不清）。
注：这是本模板与 card-twitter 的关键差别：画布更窄更高（1080×1440 vs 1600×900）、信息密度更高，但仍禁止小字。
每张卡带右下角水印（作者名 / 日期），示例以 @HTMLAnything + 页码形式落地。
next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
- 每张卡片右下角小水印 (作者名 / 日期)。
注：示例中每张卡都有 <div class="watermark">：封面为「@HTMLAnything · 5/11」，内页为「@HTMLAnything」，末张带副标「每周 AI workflow 实战」——水印即品牌位。
配色与元素风格被限定为柔和莫兰迪/粉系、圆润元素、大量留白；示例用整组渐变背景实现。
next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
- 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
注：示例 .card 设置 border-radius:32px，各卡用 linear-gradient(160deg,…) 区分色阶，形成系列感而非同色重复。
2核心能力
01多卡连排出图：N 张 1080×1440（3:4）纵向 flex 列
02封面卡结构：巨大标题 + 1 行副标题 + 吸引人的标签
03正文卡结构：一卡一观点 + emoji + 短句 + 1-2 个例子
04结尾卡：总结 + 行动号召（关注 / 收藏 / 评论）
05张数规则：内容量决定（短内容 3-6 张起步；平台上限 18、通常 ≤9 最佳）
06移动端可读性约束（大字号、宽行距、强对比）
07每卡水印位（作者名/日期）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 平台规则变化风险 — 模板把「单帖最多 18 图」写进正文；平台若调整图片上限，模板数字需同步（文案层面风险，非安全问题）。
- 长内容可能导致卡数过多 — 内容驱动数量会随输入膨胀；虽给出「通常 9 张以内最佳」，但超过 18 张的输入无法一次性发布，需要人工筛选。
- 用户内容逐字进 prompt 的注入面 — 宿主装配层直接插值用户内容；粘贴文本中的指令性内容可影响生成，危害止于产物内容与外观。
- 预览与产物期外链 — 预览 iframe 为 sandbox="allow-scripts allow-same-origin"（宿主行为）；产物引 Tailwind CDN 与 Google Fonts（浏览器端取用），离线时观感退化但内联配色仍生效。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（仅 SKILL.md + example.html + example.md 三个文件，无 scripts/、无自带 CLI、无凭证读取、无写盘）：无脚本入口、无自带 CLI、无凭证读取、无写盘指令；SKILL.md 正文未要求运行时引入任何外部端点（只写画布尺寸、张数规则、配色与字号要求）。执行期不发生任何外发。目录内实际出现的端点仅存在于 example.html:6-7 的 cdn.tailwindcss.com 与 fonts.googleapis.com，按批4 终版口径属**产物期引用**（生成的 HTML 由浏览器打开时拉取 CDN/字体，skill 执行时不抓取、不上报、不传素材），故不判级，仅在此列出端点；宿主壳（loader→assemblePrompt→本地 agent CLI spawn、预览 iframe sandbox）同属宿主行为，记入 verdict.risks。
5第二遍独立确认
- [ok] 张数一致性（输入分节 ↔ 输出卡数） — example.html 中 class="card" 出现 7 次，与 example.md 的封面 + 5 个观点卡 + 总结一致；SKILL.md 的「3-6 张起步 / 通常 9 张以内最佳」是区间指导，示例 7 张落在区间内。
- [ok] 封面徽标与结尾 CTA 是否落实 — 封面卡含「⚡ 建议收藏 · 干货预警」标签（对应吸引人的标签），末卡含「关注」「收藏」按钮样式（对应行动号召），均可逐字定位。
- [ok] 水印要求落地 — 7 张卡各有一个 .watermark 元素；封面带页码「@HTMLAnything · 5/11」，符合水印位（作者名 / 日期页码）设计。
- [ok] 端点与判级 — 目录内 http(s) 仅 cdn.tailwindcss.com 与 fonts.googleapis.com（产物期引用）；SKILL.md 正文无端点要求，执行期零外发，维持 green。
- [ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
- [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。
6结论
适合：适合把一段干货/教程/清单做成小红书图文：知识科普、工具技巧、清单合集、产品笔记；示例（5 个 AI 编辑使用习惯）即为典型短句 + emoji + 例子的干货卡。
不适合：不适合单句金句（应走 card-twitter 的 1600×900 单卡）；不适合长文正文（应走 blog-post/article-*）；不适合需要数据图表的内容（模板未引入图表库）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 card-xiaohongshu.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf54e465c136dc217…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 Version 2.0, January 2004；GitHub API spdx_id=Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。