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，外链仅字体与个别模板显式要求的图表库。
模板把管理后台单页拆成固定左栏 + 顶栏 + KPI 网格 + 1-2 主图 + recent activity 五段，并声明这是标准 admin/analytics 单页。
next/src/lib/templates/skills/dashboard/SKILL.md
【意图】标准 admin/analytics 仪表板单页。
注：这里在做什么：先在意图段把交付物定性（单页、标准后台），再用五条布局条目固定结构，模型无须自行决定信息架构。
侧栏与顶栏的组成被写死：侧栏 = logo + 导航 + 用户 footer；顶栏 = search + 通知 + avatar。
next/src/lib/templates/skills/dashboard/SKILL.md
- Fixed left sidebar (logo + 导航 + 用户 footer)
注：这种元素清单式指令落地性很高：示例侧栏给出 brand + nav（Overview/Funnels/Cohorts/… + Workspace 分组）与用户位，顶栏给出搜索、通知、头像三件。
主区被量化为 KPI 卡网格（3-5 个）+ 1-2 张主图表（折线/柱/区域）+ 底部 recent activity 列表。
next/src/lib/templates/skills/dashboard/SKILL.md
- Main: KPI cards 网格 (3-5 个)
注：示例取上界：4 个 KPI（MRR / Active accounts / Churn / P95 latency），各带 up/down 变化标注，符合 3-5 个与 KPI 卡的一般形态。
示例以纯内联 CSS + 系统字族 + 内联 SVG 实现（无 Tailwind、无字体 CDN、零 URL、零 <script>），图表用 SVG polyline 手绘而非图表库。
next/src/lib/templates/skills/dashboard/example.html
<svg viewBox="0 0 600 240" preserveAspectRatio="none">
注：这里在做什么：把 1-2 张主图表降级为内联 SVG 折线——离线可用、无脚本、无依赖；代价是没有交互 tooltip，属静态报表而非可交互面板。
示例采用一屏应用壳写法：aside.sidebar 固定宽度 + main 内容区，KPI 用 grid repeat(4,1fr)，并在 900px 断点降为两列。
next/src/lib/templates/skills/dashboard/example.html
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
注：同一 CSS 里带 @media (max-width: 900px) 降级为 2 列，说明示例虽为桌面 1440 定位也保留了窄屏可用性。
示例用 data-od-id 标注区块锚点（sidebar/topbar/kpis/…/recent-events），是可直接使用的结构标记约定。
next/src/lib/templates/skills/dashboard/example.html
<div class="topbar" data-od-id="topbar">
注：这里在做什么：给每个区块加稳定 id，便于后续编辑（宿主的最小化差异编辑模式按 DOM 定位）与人工定位；同一约定也出现在 dating-web 等模板中。
2核心能力
01固定左侧栏（logo + 分组导航 + 用户 footer）
02顶栏（search + 通知 + avatar）
03KPI 卡网格（3-5 个；示例 4 个并带涨跌标注）
041-2 张主图表（折线/柱/区域；示例用内联 SVG polyline 实现折线）
05底部 recent activity 列表（示例为 Recent events 与新账户两张表）
06无脚本 / 无外链的离线实现路径（内联 CSS + 系统字族 + 内联 SVG）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 模板给的是壳，不含真实数据契约 — SKILL.md 未要求解析用户数据（对比 data-report 明确要求解析实际数据）；若用户不提供指标口径，模型可能给出占位数值。
- 示例数值为演示数据 — 示例中 MRR $48.2K、账户 Linear/Cursor/Notion/Vercel 等均为样品；直接沿用会产出虚假看板（用户需替换为真实数据）。
- 用户内容逐字进 prompt 的注入面 — 宿主装配层直接插值用户内容；粘贴文本中的指令性内容可影响生成，危害限于产物内容与外观。
- 预览同源沙箱（宿主行为） — preview-pane.tsx:297 的 sandbox="allow-scripts allow-same-origin"；本模板产物静态无脚本，风险面低。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（仅 SKILL.md + example.html 两个文件，无 scripts/、无自带 CLI、无凭证读取、无写盘）：无脚本入口、无自带 CLI、无凭证读取、无写盘指令；SKILL.md 正文未要求运行时引入任何外部端点（只写布局与元素清单）。执行期不发生任何外发。目录内实际出现的端点仅存在于 example.html 零 URL、零 <script>（内联 CSS + 系统字族 + 内联 SVG）——目录内不存在网络端点，按批4 终版口径属**产物期引用**（生成的 HTML 由浏览器打开时拉取 CDN/字体，skill 执行时不抓取、不上报、不传素材），故不判级，仅在此列出端点；宿主壳（loader→assemblePrompt→本地 agent CLI spawn、预览 iframe sandbox）同属宿主行为，记入 verdict.risks。
5第二遍独立确认
- [ok] 「零外链」判定 — dashboard/ 目录内 http(s) 命中数为 0，<script> 命中数为 0；字体为 -apple-system/system-ui/mono，执行期与产物期均无外发（对比 data-report 的 jsdelivr 图表库为产物期引用）。
- [ok] 布局条目覆盖度 — 侧栏/顶栏/KPI 网格/主图表/活动列表五条全部实现：KPI 取 4 个（区间 3-5 内），图表 1 张（区间 1-2 内），底部另有 New accounts 与 Recent events 两张表。
- [ok] 图表实现方式 — SKILL.md 只要求 1-2 张主图表（折线/柱/区域），示例以 <svg viewBox="0 0 600 240" preserveAspectRatio="none"> + polyline 折线实现，属合规实现且无需脚本。
- [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结论
适合：适合快速产出内部管理/运营看板的静态单页：KPI 概览、增长走势、最近事件列表；尤其适合需要离线可开、零依赖交付的场景（示例即此路线）。
不适合：不适合需要可交互筛选/钻取的 BI 面板（无脚本、无数据绑定）；不适合数据报告类交付（应选 data-report，那里有图表库与必须用真实数据的纪律）；不适合移动端优先场景（aspect_hint 为桌面 1440）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 dashboard.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent41d2f22d7bf54bf4…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 为实时上游，内容可能已更新。