1实现原理 · 为什么它能做到
这个 skill 不是可执行程序,而是注入给本机 coding-agent CLI 的一段提示词:宿主取 SKILL.md 正文,前面压一段全站共享设计指令、后面接用户内容,拼成一条 prompt 交给已登录的 agent,再把 agent 的 stdout 当 HTML 取回。
【输入格式】: ${opts.format} 【用户内容】: ${opts.content}
共享指令层(不属于任何单个 skill,但每个模板都被它压着)把输出钉成『自包含单文件 HTML』,并明令禁止 agent 使用 Write/Edit/Bash 等文件系统工具,HTML 直接以对话正文流式输出。
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
SKILL.md 之外还有一条『内容驱动数量』覆盖规则:模板里写的任何页数/帧数/卡片数一律视为参考下限,实际数量由用户内容决定——防止 agent 用模板数字压缩用户内容。
- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
加载约定是『一个 skill = 一个文件夹』:SKILL.md(YAML frontmatter 供选择器 + 正文即模板 prompt),可选 example.md(样本输入)与 example.html(可直接打开的预览样张);新增模板只需加目录,不改 TS 代码。
* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker
选择链路(CLI 侧)是三级漏斗:关键词强信号(每命中 1 词 2 分,阈值 3)→ 退化为 tags/scenario 打分 → 仍无把握就把用户内容前 800 字交给本地 agent 做一句话分类。
const CONFIDENCE_THRESHOLD = 3;
预览链路独立于生成:/api/templates/<id>/preview 把 example.html 原样以 text/html 返回给 iframe;前端 iframe 用 sandbox="allow-scripts allow-same-origin"。
sandbox="allow-scripts allow-same-origin"
模板的核心是『固定 9 段报告骨架 + 四选一裁决』:把任意实验材料强制过 Header→Hypothesis→Setup→Result snapshot→Metric table→Interpretation→Decision→Follow-up→Instrumentation notes 的流水线,最后必须落到 Ship / iterate / extend / stop 之一。
【必须输出的结构】 1. Header: 实验名称、owner、日期、实验状态、decision。 2. Hypothesis: 原始假设, 必须改写成可验证句式。 3. Setup: audience、variant、duration、sample size、primary metric、guardrail metrics。 4. Result snapshot: primary metric lift、absolute delta、sample、confidence / caveat。 5. Metric table: Control vs Variant, primary + secondary + guardrail。 6. Interpretation: 解释结果为什么发生, 区分 signal、noise、unknown。 7. Decision: Ship / iterate / extend / stop 四选一, 并给理由。 8. Follow-up experiments: 2-4 个下一步实验, 每个包含 hypothesis、expected impact、effort。 9. Instrumentation notes: 数据缺口、埋点问题、样本偏差。
它明确拒绝『展示数据』这个目标:意图段把定位钉在判断上——这个实验说明了什么、下一步该上线/停止/继续跑/重新设计。
【意图】这不是普通数据报告、不是 dashboard。目标是回答: "这个实验说明了什么, 我们下一步应该上线、停止、继续跑, 还是重新设计?"
反造假条款写进模板正文:只许用用户提供的数据,禁止捏造 p-value / confidence / 样本量。
- 只使用用户提供的数据。不要捏造 p-value、confidence、样本量。
首屏信息层级被指定:必须有『大号 decision badge 和 primary metric delta』,即读者 3 秒内看到裁决与主指标变化。
- 首屏必须有大号 decision badge 和 primary metric delta。
三套风格资产互斥分流:product-readout(默认)/ lab-notebook(研究、保留不确定性)/ growth-console(增长、漏斗、实时),并给了各自使用条件与『不要三种混用』。
根据实验语境选择一种, 不要三种混用:
2核心能力
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Tailwind Play CDN(共享指令强制;示例页与三份资产页均实际引用) |
| network | Google Fonts(Inter / Noto Sans SC,示例页实际引用) |
| package | Chart.js(SKILL.md 允许的可选图表库;示例页未使用) |
4风险提醒 风险提醒:绿色 · 放心使用
- 宿主侧:预览 iframe 用 sandbox="allow-scripts allow-same-origin",预览页脚本可自行摘掉 sandbox(宿主既有取舍,非本 skill 引入)。 — sandbox="allow-scripts allow-same-origin"(next/src/components/preview-pane.tsx)
- 注入面:用户实验材料被逐字拼进 prompt 尾部,无转义/隔离层;粘贴含指令式文本的内容即构成对宿主 agent 的提示注入。 — assemblePrompt 末尾直接拼接【用户内容】
- 风格资产死引用:SKILL.md 让模型参考 assets/ 三份 HTML,但 loader 不装载该目录,模型实际读不到——风格分流只能靠模型脑补。 — 全仓 grep 仅 SKILL.md 自身引用 product-readout/lab-notebook/growth-console
- 离线/内网不可用:示例与生成物依赖 cdn.tailwindcss.com 与 fonts.googleapis.com,断网环境下样式与字体退化。 — assets/product-readout.html 的 <script src> 与 <link href>
5第二遍独立确认
- [ok] 运行时机制(loader→assemblePrompt→agent CLI→捕获 stdout) — 重读 next/src/lib/templates/shared.ts / next/src/app/api/convert/route.ts:拼装顺序与 /api/convert 调用点逐字复核,与第一遍一致。
- [ok] 『固定 9 段结构』宣称 — 重读 SKILL.md 结构段,9 段编号与名称与 JSON 引用一致,无夸大。
- [ok] 外部资源条目(tailwind / Google Fonts) — 在 assets/product-readout.html 命中 <script src="https://cdn.tailwindcss.com">、<link href="https://fonts.googleapis.com/css2?family=Inter…">,调用点真实存在。
- [discrepancy] 『assets/ 三风格可选』可执行性 — SKILL.md 指示参考 assets/,但全仓 grep 显示 product-readout.html / lab-notebook.html / growth-console.html 仅被该 SKILL.md 自身引用;loader.ts 的 loadSkillFromDir 只读 SKILL.md / example.md / example.html。结论:生成时模型看不到这三份资产,指令为死引用。
- [ok] 安全面(脚本/网络/凭证/写盘) — 对 skill 目录做 token 扫描(script/fetch/XMLHttpRequest/API key/process.env/child_process/eval/curl/wget/.env/localStorage/download=)零命中;示例页唯一 <script> 是 Tailwind CDN 标签,无自写 JS。
- [ok] meta 元数据(stars / last_push / license) — GitHub API 实查 owner_repo=nexu-io/html-anything:stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z、license.spdx_id=Apache-2.0,与仓库根 LICENSE(Apache License 2.0)一致。
- [unlocatable] 安装量 — 无公开安装量数据源(README/GitHub API 均无),meta.installs 置 null,不硬写。
6结论
f9361c33db600ac8…553ed98c28