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，外链仅字体与个别模板显式要求的图表库。
模板定位为消费产品感的数据墙，靠 editorial typography（衬线展示体 + 等宽数字）与克制高亮色同常规后台区分。
next/src/lib/templates/skills/dating-web/SKILL.md
【意图】消费产品感的数据墙, editorial typography + 克制的高亮色。
注：示例用 DM Serif Display / DM Serif Text + IBM Plex Mono 三字族实现该观感：品牌名用 800 斜体衬线、数字用等宽，页面底色为暖纸色 #f4ede0。
布局五段：Left rail 导航 → Ticker bar 实时信号 → Headline KPIs → 30-day mutual-matches 柱状图 → Match-rate 趋势 block。
next/src/lib/templates/skills/dating-web/SKILL.md
- Ticker bar 实时信号
注：这里在做什么：把消费感落成具体零件——一个信号条（示例为静态文本条 + NEXT TIER 门槛提示），让页面像产品而非报表。
头部 KPI 区实际做成 3×3 九宫格统计墙（Mutuals on file / Replies in 24h / Communities / Match rate / 2nd dates / Exes…），每格带一句口语化注解。
next/src/lib/templates/skills/dating-web/example.html
<div class="label">Match rate</div>
注：SKILL.md 只说 Headline KPIs，示例自由扩展到 9 格并以 .good/.bad 着色、.note 附一句带态度的解释（如 too fast. wait 4–6h. they notice.），是命名 + 文案共同营造消费感的做法。
30 天柱状图以纯内联 SVG 手工绘制（多根 rect，最后一根用高亮色 #c14a2b 强调），无图表库、无脚本。
next/src/lib/templates/skills/dating-web/example.html
<rect x="630" y="60" width="14" height="160" fill="#c14a2b"></rect>
注：这里在做什么：无 JS 即可呈现 30 天互配的柱状节奏；高亮最后一根既指当前值也承担视觉焦点，无需交互。
示例在窄屏把左栏折叠为顶部条（aside.rail 在媒体查询里改为无右边框、加下边框），说明虽定位桌面也做了一档降级。
next/src/lib/templates/skills/dating-web/example.html
aside.rail { border-right: none; border-bottom: 1px solid var(--ink); }
注：同段媒体查询外还保留 rail 的 brand（mutuals. + 头像位）与导航列表（mutuals & communities 等），布局语义在降级后不丢。
页面保留版本号位（mutuals.v0.6.1）与「NEXT TIER AT 2,080 MUTUALS」等产品化细节，属消费产品的仿真元素。
next/src/lib/templates/skills/dating-web/example.html
<div style="opacity:0.7;margin-top:2px;">mutuals.v0.6.1</div>
注：这里在做什么：版本号、等级门槛这类产品壳细节让数据墙读起来像真实 app 的界面，而非报表截图——这是本模板与 dashboard 的根本差别。
2核心能力
01左侧 rail 导航（品牌 + 头像位 + 导航列表）
02Ticker bar 信号条（示例含 NEXT TIER 门槛提示）
03Headline KPIs（示例扩展为 3×3 九宫格，带 good/bad 语义色与口语注解）
0430 天互配柱状图（内联 SVG 手绘，含高亮当前值）
05Match-rate 趋势块
06编辑式字体系统（衬线展示体 + 等宽数字）营造消费感
07窄屏降级（rail 折叠为顶部条）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 演示数据会被误当真实看板 — 示例内所有数字（1,842 mutuals / 14% match rate / mutuals.v0.6.1）都是样例；用户不替换数据就会产出看似真实的产品界面。
- 模板对内容契约很宽，容易产出好看但空的页面 — SKILL.md 只给五段布局，不要求解析用户数据（对比 data-report 的必须解析实际数据），指标含义依赖用户提供。
- 字体走 Google Fonts（产物期引用） — DM Serif Display/Text 与 IBM Plex Mono 来自 fonts.googleapis.com（浏览器打开产物时取用，skill 执行期不发请求）；离线时退化为系统衬线/等宽字体，观感下降但布局不塌。
- 用户内容逐字进 prompt 的注入面 — 宿主装配层直接插值用户内容；粘贴文本中的指令性内容可影响生成，危害限于产物内容与外观。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（仅 SKILL.md + example.html 两个文件，无 scripts/、无自带 CLI、无凭证读取、无写盘）：无脚本入口、无自带 CLI、无凭证读取、无写盘指令；SKILL.md 正文未要求运行时引入任何外部端点（只写布局段与观感要求；字体族名本身不是端点）。执行期不发生任何外发。目录内实际出现的端点仅存在于 fonts.googleapis.com 与 fonts.gstatic.com（example.html:7-9 的 DM Serif Display / DM Serif Text / IBM Plex Mono），按批4 终版口径属**产物期引用**（生成的 HTML 由浏览器打开时拉取 CDN/字体，skill 执行时不抓取、不上报、不传素材），故不判级，仅在此列出端点；宿主壳（loader→assemblePrompt→本地 agent CLI spawn、预览 iframe sandbox）同属宿主行为，记入 verdict.risks。
5第二遍独立确认
- [discrepancy] KPI 数量与 SKILL.md 的关系 — SKILL.md 仅写 Headline KPIs 未给数量；示例实现为 3×3 共 9 格（含 Exes in your circle / Shared blocks / Logged-off hrs 等生活化指标）。属示例扩展而非模板要求，详情页不应把 9 格当作固定规格。
- [ok] 「无脚本」判定 — dating-web/ 内 <script> 计数为 0；30 天柱状图以 <rect> 手工排布（含高亮柱 fill="#c14a2b"），无图表库、无 Canvas。
- [ok] 端点与判级 — 目录内 http(s) 仅 fonts.googleapis.com（css2 样式表）与 fonts.gstatic.com（preconnect），均为产物期引用；SKILL.md 只写字族风格要求、未点名端点，执行期零外发，维持 green。
- [ok] 窄屏降级是否存在 — 媒体查询内 aside.rail 改为 border-right:none + border-bottom，左栏折叠为顶部条，与桌面 1440 定位不冲突，属可用的移动端降级。
- [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结论
适合：适合做有品牌气质的消费产品数据墙：社区/社交/配对类产品的运营看板、增长复盘、年度总结页；也适合作为数据页的气质备选（当 dashboard 的系统字族路线太像内部工具时）。
不适合：不适合严肃企业报表（语气与配色偏消费/杂志化，指标注解带主观评论）；不适合需要严谨口径与来源标注的报告（应选 data-report）；不适合需要交互筛选的数据探索场景（无脚本、无数据绑定）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 dating-web.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agente3773d07ae610754…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 为实时上游，内容可能已更新。