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，外链仅字体与个别模板显式要求的图表库。
模板用固定像素画布定死尺寸（1600×900），并要求先按内容情绪选暗色或亮色，一张卡只承载一句英雄金句。
next/src/lib/templates/skills/card-twitter/SKILL.md
- 容器 `w-[1600px] h-[900px]`, 暗色 / 亮色二选一根据内容情绪。
注：这里在做什么：把「可截图直发」的需求翻译成硬尺寸（16:9、1600×900），避免模型输出响应式页面导致截图比例不对。
卡面元素逐项写死：左上角类型小标签、中央 hero 金句（限 2-3 行）、下方作者署名 + 头像占位 + handle、右下角品牌水印。
next/src/lib/templates/skills/card-twitter/SKILL.md
- 左上角小标签 (类型: "Insight" / "Data" / "Quote")。
注：「限 2-3 行」是对字号与文案长度的联合约束：text-6xl 下超过三行会溢出 1600×900 画布，模板用行数上限替代字号自适应。
纹理是观感来源：要求 card 带 grid 网格 / noise / dot pattern 的微妙纹理，示例以 48px 网格渐变实现。
next/src/lib/templates/skills/card-twitter/SKILL.md
- 整张卡片有微妙的纹理 (grid 网格 / noise / dot pattern)。
注：示例实现：.grid-pattern 用两层 linear-gradient 画 48px 方格、opacity 0.06 叠在暗色底上——纯 CSS，无图片资源。
示例产物是单张定尺寸卡（width:1600px + aspect-ratio:16/9），与 SKILL.md 条目一一对应。
next/src/lib/templates/skills/card-twitter/example.html
.card { width:1600px; max-width:96vw; aspect-ratio:16/9; border-radius:24px; overflow:hidden; position:relative;
注：max-width:96vw 让卡在小屏也不溢出（仅预览便利），主体仍是固定 1600px 画布；示例头部另引 Tailwind CDN 与三种字族 Google Fonts（产物期取用）。
2核心能力
01固定画布出卡：1600×900（16:9），暗/亮二选一
02单句 hero 金句版式（text-6xl、font-semibold、限 2-3 行）
03类型标签位（Insight / Data / Quote）
04作者署名 + 头像占位 + handle，以及右下角品牌水印
05纯 CSS 纹理底（48px 网格 / noise / dot pattern）
06截图直发导向的收尾要求（视觉简洁有力）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 金句长度无自动收敛 — 「限 2-3 行」是给模型的建议而非校验：用户给长句时可能溢出画布或缩字号，需人工检查截图效果。
- 产物期引用 CDN 与字体 — 产物头部引 cdn.tailwindcss.com 与 Google Fonts（浏览器打开时取用，skill 执行期不发请求）；离线打开或网络受限时观感退化（内容与主要配色为内联 CSS，尚可读）。
- 用户内容逐字进 prompt 的注入面 — 宿主装配层直接插值用户内容；卡片内容来自用户文本，指令性文本可影响生成，危害限于产物内容。
- 预览面板同源沙箱（宿主行为） — preview-pane.tsx:297 的 sandbox="allow-scripts allow-same-origin"；本模板产物仅一条 Tailwind CDN 脚本引用，无自定义脚本。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（仅 SKILL.md + example.html + example.md 三个文件，无 scripts/、无自带 CLI、无凭证读取、无写盘）：无脚本入口、无自带 CLI、无凭证读取、无写盘指令；SKILL.md 正文未要求运行时引入任何外部端点（只写画布尺寸、元素位置与纹理类型）。执行期不发生任何外发。目录内实际出现的端点仅存在于 example.html:6-7 的 cdn.tailwindcss.com 与 fonts.googleapis.com（含 frontmatter/正文里的 x.com 出处标注），按批4 终版口径属**产物期引用**（生成的 HTML 由浏览器打开时拉取 CDN/字体，skill 执行时不抓取、不上报、不传素材），故不判级，仅在此列出端点；宿主壳（loader→assemblePrompt→本地 agent CLI spawn、预览 iframe sandbox）同属宿主行为，记入 verdict.risks。
5第二遍独立确认
- [ok] 画布尺寸声明 vs 示例实现 — SKILL.md 写 w-[1600px] h-[900px]，示例用 width:1600px + aspect-ratio:16/9（900 = 1600×9/16）；两者等价，16:9 与 frontmatter aspect_hint 一致。
- [ok] 纹理要求落地 — 微妙纹理在示例中是 .grid-pattern（两层 48px linear-gradient、opacity 0.06），纯 CSS 实现，无位图资产。
- [ok] 端点数 — 目录内 http(s) 命中仅三类：cdn.tailwindcss.com、fonts.googleapis.com（含 gstatic preconnect）、frontmatter 的 x.com 出处字段；SKILL.md 正文无 URL，全部属产物期引用层。
- [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结论
适合：适合把一句观点/一个数据点做成可直发 X 的配图卡：推文配图、金句分享、数据结论卡、演讲摘录；固定画布 + 固定元素位适合批量产出风格统一的系列卡。
不适合：不适合多信息量内容（单句 hero 是硬约束，长内容应走 article-* 或 card-xiaohongshu）；不适合需要交互或动画的卡片；不适合要求精确品牌 VI 的场景（模板只给位置框架，配色由模型按情绪选）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 card-twitter.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentae454828e19e9485…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 为实时上游，内容可能已更新。