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

本模板是「文件夹即模板」结构里的一份纯数据：SKILL.md 用 YAML frontmatter 供选择器使用，正文是给 agent 的版式指令；仓库不为单个模板写任何代码，新增模板＝新增一个文件夹。

next/src/lib/templates/loader.ts

SKILL.md — frontmatter (id, scenario, tags, …) + prompt body

loader.ts 在文件头注释里写明目录约定；frontmatter 由进程内正则解析（无 YAML 依赖），正文原样作为 prompt body 取出，前端不会拿到（「Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.」）。

运行时由宿主把本模板正文夹在共享设计指令与用户内容之间拼成一次 prompt —— 模板的「智能」全在这段自然语言里，没有可执行代码。

next/src/lib/templates/shared.ts

return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}

assemblePrompt 的返回是「共享设计指令 + 模板正文 + 【输入格式】+【用户内容】」。共享段（同一文件 SHARED_DESIGN_DIRECTIVES）负责单文件 HTML、Tailwind/字体 CDN、内容驱动数量、禁止使用文件系统工具等硬性要求，对所有模板一致，不是本模板自带。

宿主的 /api/convert 载入该模板后把这些文字交给本地已登录的 coding-agent CLI，只把 stdout 当 HTML 流式回收；模板本身不发网络、不读凭证、不写文件。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

同一 route 随后调用 invokeAgent({ … }) 拉起 CLI（claude / codex / cursor-agent 等，由宿主 PATH 探测）；与其配套的共享指令还明写「**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**」。

随模板附带的 example.html 是「预渲染示例」，由预览接口原样吐出、进入选择器与画廊的 iframe —— 它决定模板卡片有没有可视预览，不参与内容生成。

next/src/app/api/templates/[id]/preview/route.ts

Returns the skill's `example.html` verbatim so it can be loaded into an

预览按 skill id 缓存（Cache-Control: public, max-age=300）；前端在预览面板里给 iframe 加了 sandbox="allow-scripts allow-same-origin"（宿主侧实现，本模板不可控）。

frontmatter 的字段被逐项映射成选择器元数据（featured 决定全量排序、recommended 进顶部「★ 推荐」组、example_* 生成示例卡文案），并决定它在分类/场景过滤里出现在哪里。

next/src/lib/templates/loader.ts

if (typeof fm.featured === "number") meta.featured = fm.featured;

fmToMeta 同时把 category/scenario/aspectHint/tags 直接搬到 SkillMeta；example 块在 example_id 或 example.{md,html} 存在时生成（id/name/format/tagline/desc + 可选 source）。这些字段只影响展示与排序，不影响生成行为。

该模板的生成能力全部由它自己的正文兑现：social-media-dashboard/SKILL.md 只描述版面、配色、字体与内容纪律，没有一句让 agent 去跑工具、取接口或读外部数据。

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

【模板: 社媒创作者仪表板】

skill 目录共 2–3 个文件（SKILL.md + example.html[+ example.md]），无 scripts/references/数据文件；example.html 只是同一模板的人工示例产物（见 internal_assets）。

正文给出看板的固定分区：平台 switcher、KPI、增长曲线、Top post、侧栏趋势/评论。

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

【意图】面向博主 / 创作者的社媒数据看板。

平台 switcher 列出 X / LinkedIn / YouTube / Instagram / TikTok 五个平台，等于要求「同一看板换数据源复用」。

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

- 顶部平台 switcher (X / LinkedIn / YouTube / Instagram / TikTok)

KPI 组被限定为 followers / engagement / likes / reposts 四项社交指标。

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

- KPI 卡片 (followers / engagement / likes / reposts)

示例产物用一个内联 JS 实现平台切换与整屏重绘（切 hero、KPI、图表、Top post、高亮态）。

next/src/lib/templates/skills/social-media-dashboard/example.html

function switchPlatform(platform) {

图表不是静态图片：示例用 JS 现场创建 SVG 折线/面积图，标注点也由脚本生成。

next/src/lib/templates/skills/social-media-dashboard/example.html

const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');

2核心能力

01多平台切换（同一看板换平台数据源）

02KPI 卡片组（followers / engagement / likes / reposts）

03粉丝增长曲线（示例用内联 SVG + JS 现场绘制，带标注点）

04Top post 本周预览（含点赞/转推/评论数）

05侧栏热门话题 / Top 评论

06示例产物的平台切换交互（.platform-pill + data-platform）

07示例产物的 KPI 数值展示（含格式化后的数字与变化率）

3外部依赖

Kind	Dependency / Endpoint
network	Google Fonts（仅出现在产物示例 example.html）
network	第三方头像图床（仅出现在产物示例 example.html 的内联脚本数据里）
cli	本地 coding-agent CLI（宿主提供，模板自身不调用）

4管控建议与判定依据

建议配套管控措施

面向 Agent

分级或逐次授权，建议在沙箱运行

面向管理者

审批流程、可回滚、全程审计

判定依据（文件路径与关键语句摘要）

scripts/: 执行本地脚本或命令: example.html 内联 <script>（浏览器端：平台切换、KPI 格式化、SVG 折线/面积绘制、贡献者网格）——仅在选择器预览 ifra
网络端点: 声明外部网络访问: fonts.googleapis.com（example.html 的 <link>，预览时由浏览器请求字体）

审计说明： 。判级对象＝本 skill 目录（SKILL.md + example.html[+ example.md]）：无自带脚本、无凭证读取、无写盘指令、运行时不要求任何外部端点——正文只给版面/配色/字体族名与内容纪律，字族名不构成请求。目录内实际出现的外链全部是「产物示例」性质，逐条列出自证：fonts.googleapis.com（example.html 第 8-10 行 <link>）、avatars.githubusercontent.com（example.html 内联脚本里的 5 个 GitHub 头像，经 <img src> 加载）；无 Tailwind CDN。按批4 口径（端点仅见于产物示例/出处标注 → green）不影响档位。宿主侧行为（loader.ts 读盘、assemblePrompt 拼 prompt、agents/invoke.ts 拉起本地 CLI、预览 iframe 的 sandbox="allow-scripts allow-same-origin"）写在 verdict.risks，不作为档位依据。

5第二遍独立确认

[ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html 2 个文件，无 scripts/references/数据目录；token 扫描（curl / wget / fetch / exec / spawn / process.env / API_KEY / token / secret / write / save / delete）在该目录的 SKILL.md 中零命中；无自带可执行脚本。
[ok] 运行时链路复核 — 重读 loader.ts / shared.ts / app/api/convert/route.ts / app/api/templates/[id]/preview/route.ts：模板正文只作为 prompt body 被 assemblePrompt 拼装，宿主 spawn 本地 CLI 并捕获 stdout；模板不参与任何执行。
[ok] commit 与元数据 — 工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（＝任务表 pin 的 full 40 位）；GitHub API nexu-io/html-anything：stars 8827、license spdx Apache-2.0、pushed_at 2026-09-15T03:36:24Z（与本地 HEAD 提交时间 2026-09-15 11:36:24 +0800 一致）。
[discrepancy] README 与源码的 frontmatter schema 漂移（仓库级） — README 第 213 / 217 / 468 行称模板 frontmatter 必须含 mode · scenario · surface · preview · design_system；但在 next/src/lib/templates/skills/ 下 '^mode:'、'^surface:'、'^design_system:' 全部零命中，实际字段是 category / scenario / aspect_hint / featured / recommended + example_*（loader.ts 的 SkillFrontmatter）。文档滞后于代码，不影响本模板运行，但照 README 新写模板会踩空。
[ok] frontmatter 元数据映射 — loader.ts fmToMeta 逐字段映射 zhName / enName / emoji / description / category / scenario / aspectHint / tags + featured / recommended + example 卡；本模板取自 SKILL.md 的实际取值与之相符。
[discrepancy] example.html 与 SKILL.md 的一致性（平台数量） — 正文写 '- 顶部平台 switcher (X / LinkedIn / YouTube / Instagram / TikTok)'，示例 HTML 只渲染两个按钮（data-platform="x" 与 data-platform="github"）；内联 platformData 里确有 x/linkedin/youtube/instagram 四套数据，GitHub 走贡献者分支。只看示例会以为平台只有两个。
[discrepancy] 外部图片 URL 与仓库共享指令相左 — shared.ts 的共享指令要求「不要引用任何外部图片 URL」，但本模板的 example.html 把 5 个 GitHub 头像写成 https://avatars.githubusercontent.com/u/… 绝对地址并在 <img src> 里加载，是该产物唯一会向第三方图床发请求的地方（作为示例产物可接受，但用户直接复用示例时会带上外部依赖）。
[ok] 端点扫描（目录内） — 2 类端点：fonts.googleapis.com（Space Grotesk / Inter）与 avatars.githubusercontent.com（5 个头像）；无 Tailwind CDN；SKILL.md 正文零 URL。

6结论

一屏覆盖创作者关心的全部指标（KPI + 增长曲线 + Top post + 趋势 + 评论）

平台切换是交互而非静态：示例用 platformData + switchPlatform() 现场重绘整屏

图表用 SVG 现场绘制，不依赖任何图表库 CDN

示例产物自带可用的排版细节（KPI 数值、变化率、平台 pill 高亮态）

无 example.md 但示例数据自足，打开即见效果，适合当视觉基准

适合： 适合创作者/运营把一周或一月社媒表现整理成一屏看板（尤其需要「换平台看同一套指标」的场景）；也适合当社媒数据页的视觉基准。

不适合： 不适合需要真实数据接入（本模板不取数、不连 API，数据靠用户粘贴或模型生成）、不适合移动端窄屏阅读（aspect_hint 明写桌面 1440），也不适合严谨报表（无数据来源标注、无导出结构）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload social-media-dashboard.tar.gz

sha256: 5c0986485a0bc508…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.