文档与知识 · nexu-io/html-anything

pm-spec

问题 + 成功指标 + 范围 + user stories + 设计 + 发布 + 待解决

风险提醒:绿色 · 放心使用AI 侦查报告
作者 nexu-ioGitHub nexu-io/html-anything ↗Stars 8827许可 Apache-2.0(仓库根 LICENSE 首两行为 "Apache License" 与 "Version 2.0, January 2004";pool.json 记 license=Apache-2.0)commit 553ed98c28
agent 宿主通常会约束 skill 执行权限;风险提醒为 AI 侦查观点,不构成质量或安全保证。第三方 skill 仅作拆解与展示,安装使用风险自负,版权归原作者。

1实现原理 · 为什么它能做到

本 skill 不是可执行程序,而是一段纯文本提示词模板:宿主用正则解析 SKILL.md 的 YAML frontmatter,把正文 body 作为提示词主体加载。

next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
注:仓库对目录约定的自述:‘SKILL.md — frontmatter (id, scenario, tags, …) + prompt body’,以及 ‘Adding a template = adding a folder. No TS code change required’——模板靠目录约定注册;全仓 TS/TSX 中检索不到 "pm-spec" 的硬编码引用,本模板没有被任何代码特判。

模板正文不会单独执行,而是被拼进最终 prompt 的"模板段":共享设计指令 + 本模板正文 + 用户内容。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注:shared.ts 的 assemblePrompt 自述:‘Wrap a per-template instruction body with the shared design directives and the user content tail.’;请求先经 const skill = loadSkill(templateId); 取到本目录的 body,再拼装。

全局"内容驱动数量"规则覆盖模板里的任何数字:模板只定义版面/风格/配色/组件库,不定义输出长度。

next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
注:该规则被标为"最高优先级, 覆盖模板里的任何数字",并明写 deck 类模板里"6-10 张"这类数字"一律视为短示例下的参考下限"。因此本模板给的是可用版面与约束,不是页数上限。

产物形态被全局硬约束:单文件 HTML、纯 HTML 无围栏、第一个字符必须是 <、且不得写文件(由前端捕获 stdout)。

next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
注:同一段还写明 ‘禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具’——文件落盘由宿主前端负责,模板侧不产生写盘行为。

frontmatter 的元数据驱动选择器呈现(中文名/英文名/emoji/描述/分类/场景/画幅/标签/示例元数据)。

next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
注:本模板元数据:category=doc、scenario=product、aspect_hint=长页面(无 featured,选择器里排到推荐桶之后)。选择器按 category/scenario 分组、按 featured 排序,全部由 frontmatter 决定,无代码特判。

随包示例资产经两条只读 API 暴露给前端:example.html 原样返回进 iframe,example.md 作为"预览"按钮的输入内容。

next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
注:example.html 的响应头是 Content-Type: text/html; charset=utf-8;另一路由以 content: skill.exampleMd ?? "", 把示例文本交给客户端。本目录:只有 example.html(14291 字节),无 example.md。

生效链(宿主行为,非本模板代码):宿主 spawn 本机已登录的 agent CLI,把拼好的 prompt 经 stdin 送入,从 stdout 流式回收 HTML。

next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
注:子进程以 cwd=process.cwd()(cwd: opts.cwd ?? process.cwd(),)运行、stdio 全 pipe;prompt 走 stdin/--message 而非 shell 拼接(not interpolated into a shell command)。

模板给的是"章节顺序 + 每节数量/句式约束",是阅读顺序规格而非视觉规格(意图自述:"产品需求文档单页, 结构清晰")。

next/src/lib/templates/skills/pm-spec/SKILL.md
【意图】产品需求文档单页, 结构清晰。
注:与 design 类模板不同,这里几乎不约束配色/字号,价值在于把 PRD 的必备章节固化下来。

两处数量/句式硬约束(KPI 3-5 个;user stories 用 Given/When/Then)让输出可比对、可评审,而不是自由散文。

next/src/lib/templates/skills/pm-spec/SKILL.md
- Success metrics (3-5 个 KPI)
注:共享指令规定 slide/frame/card/section 数量由内容决定,但这里的"3-5 个 KPI"是对内容本身的收敛要求(指标过多=没重点),两者不冲突。

长页面定位(aspect_hint: 长页面)配合共享指令的排版纪律(8px 基线、段落最大宽度 65ch),得到可直接阅读的单文件文档。

next/src/lib/templates/skills/pm-spec/SKILL.md
- Rollout plan + Open questions
注:本份的 example.html 达 14291 字节,是 9 份里最大的预览产物,符合"长页面"定位。

2核心能力

01文档头部带状态 pill(draft/approved/shipped),把文档生命周期写进版式
02成功指标限定 3-5 个 KPI,避免指标堆砌
03范围显式二分:in / out
04用户故事用 Given/When/Then 句式约束
05设计说明区预留 mockup 占位
06发布计划与开放问题收尾

3外部依赖

类型依赖
networkTailwind Play CDN(共享指令对产物的要求)
networkjsdelivr CDN(可选:图表/动画脚本)
networkGoogle Fonts(共享指令指定)
cli本机 coding-agent CLI(宿主检测 PATH 并 spawn)

4风险提醒 风险提醒:绿色 · 放心使用

风险提醒:绿色 · 放心使用
  • 用户内容逐字拼进 prompt,无隔离标记 → 指令注入面 — assemblePrompt 把用户内容直接接在 ‘【用户内容】:’ 之后,模板正文在前、用户内容在后且无分隔;宿主侧 agent 以高权限运行(claude 为 --permission-mode bypassPermissions),注入若生效即为高权限落地。
  • 宿主环境变量全量透传给被 spawn 的 CLI — argv.ts envFor 以 ‘const base = { ...process.env };’ 构造子进程环境:shell 里存在的一切变量(含各类 *_API_KEY)都会随 agent 进程可见。属宿主行为,非本模板代码。
  • 预览 iframe 允许脚本且同源 — 产物/示例经 sandbox="allow-scripts allow-same-origin"(template-picker.tsx:544 与 preview-pane.tsx:297)加载;同源 + 允许脚本意味着产物内 JS 可达宿主页面上下文。本模板的 example.html 不含 <script>,风险来自将来生成的产物。
  • 产物运行期外链第三方 CDN — 共享指令要求 <head> 引 cdn.tailwindcss.com(必要时 jsdelivr / Google Fonts):断网或 CDN 变更会让产物外观退化;CDN 被投毒则脚本进入产物执行环境,模板侧无 SRI/完整性校验。
风险提醒:绿色,放心使用。判级口径:只判本 skill 目录(SKILL.md + example.html),宿主壳与产物外链不参与判级。目录内零脚本、零网络端点、零凭证读取、零写盘指令:全目录 token 扫描零命中;SKILL.md 未点名任何运行时要引入的 CDN/字体/接口。 仅作说明、不改档的两点:① 宿主壳(loader.ts → assemblePrompt → agents/invoke.ts spawn 本机 CLI;claude 参数含 --permission-mode bypassPermissions,envFor 以 {...process.env} 全量透传环境变量)属宿主行为,已写入 verdict.risks;② 宿主注入的共享设计指令要求产物在 <head> 引 Tailwind Play / Google Fonts(属产物运行期外链)。

5第二遍独立确认

  • [ok] skill 目录资产面(脚本 / references / 数据 / 模板) — 目录实为 2 个文件:SKILL.md 与 example.html;无 scripts/、无 references 目录、无任何可执行文件(.sh/.py/.js/.mjs/.ts 零命中)。
  • [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描(api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.):零命中;SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描,仅命中 font-semibold / font-black 这类字重类名,无端点。
  • [ok] 官方描述 vs 实际能力(有无夸大) — frontmatter description(问题 + 成功指标 + 范围 + user stories + 设计 + 发布 + 待解决)与正文一致:描述承诺的版式要素都能在正文找到对应条目,未见正文未支持的越界承诺。
  • [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目(Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI)逐条回到 shared.ts 与 argv.ts 原文取证;本模板无目录级端点条目。
  • [ok] 宿主执行链(供 security.reason / verdict.risks 使用,不参与判级) — prompt 经 stdin 送入被 spawn 的本机 CLI(invoke.ts),HTML 从 stdout 分流捕获;claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env;预览 iframe sandbox="allow-scripts allow-same-origin"(template-picker.tsx:544 / preview-pane.tsx:297)。
  • [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(与任务表 pin 一致);skill.path=next/src/lib/templates/skills/pm-spec 下确有 SKILL.md,全仓无第二份同名模板。
  • [ok] "设计备注含 mockup 占位"是否意味着抓取外部图 — 原文是 "- Design notes (含占位 mockup)",即版面占位;共享指令另有"不要引用任何外部图片 URL"的禁令,方向一致,不存在外链图片要求。
  • [ok] 随包 example.html 的外链与脚本面 — pm-spec/example.html(14291 字节)无 http(s) 外链、无 <script>:长文档排版全部内联 CSS,预览不会产生外部请求。

6结论

  • 零代码零依赖:模板即提示词,靠目录约定注册,新增/替换模板不需要改任何 TS 代码
  • PRD 章节顺序与句式固化(KPI 3-5 个、user stories 用 Given/When/Then),输出可直接进评审会
  • 与全局设计纪律协同:内容驱动数量 + 真实数据 + 单文件 HTML + 中文排版纪律(Noto Sans SC / 盘古之白)由宿主统一注入,模板只需专注自身版式
  • 示例闭环:随包 example.html 可在选择器里直接预览,但缺 example.md,示例输入文本需自备,降低试用门槛
  • 适合:适合把已有需求素材快速转成一份能评审的 PRD 单页:问题陈述、指标、范围、用户故事、发布计划一次成型,发给产品/研发/设计评审。
    不适合:不适合需要严格模板合规(公司 PRD 模板字段齐全、含评审签核流)的正式交付——本模板只给章节骨架与句式建议,不做字段校验;不适合纯视觉展示需求(应选海报/deck 类)。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-15
    方式 A · 人下载镜像包下载 pm-spec.tar.gz
    sha256: 3cd90ed0d79647d1…
    方式 B · JSON 格式安装指南,复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub?直接去上游安装(实时版,可能已更新)GitHub 原始 ↗
    本页镜像锁定 commit 553ed98c28;上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库nexu-io / nexu-io/html-anything
    Stars8827
    最近推送2026-09-15
    本 skill commit553ed98c28
    许可Apache-2.0(仓库根 LICENSE 首两行为 "Apache License" 与 "Version 2.0, January 2004";pool.json 记 license=Apache-2.0)
    本站信息
    收录日期2026-09-06
    分类文档与知识
    侦查报告AI 侦查 · 2 遍 · 2026-09-06
    本站镜像与 GitHub 原始是不同来源:本站锁定 commit 快照经 /r2 分发;GitHub 为实时上游,内容可能已更新。
    同分类邻近