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外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（仅出现在产物示例 example.html） |
| network | 第三方头像图床（仅出现在产物示例 example.html 的内联脚本数据里） |
| cli | 本地 coding-agent CLI（宿主提供，模板自身不调用） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 示例与规格的平台数量不一致 — 正文列 5 个平台，示例只渲染 X / GitHub 两个 pill；以示例为基准会低估模板适用范围。
- 示例产物含第三方头像请求 — avatars.githubusercontent.com 会在预览时收到请求（IP/Referer 外泄），与共享指令「不要引用任何外部图片 URL」相左。
- 示例内含约 900 行内联 JS — 产物在宿主预览 iframe（sandbox="allow-scripts allow-same-origin"）内执行脚本；这属宿主呈现面行为，但用户复用时等于在自己页面里跑一段未经审计的 JS。
- 数据真假无法校验 — KPI/图表数值全由用户内容或模型生成；正文没有要求标注数据来源或时间窗。
风险提醒：绿色，放心使用。判级对象＝本 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结论
适合：适合创作者/运营把一周或一月社媒表现整理成一屏看板（尤其需要「换平台看同一套指标」的场景）；也适合当社媒数据页的视觉基准。
不适合：不适合需要真实数据接入（本模板不取数、不连 API，数据靠用户粘贴或模型生成）、不适合移动端窄屏阅读（aspect_hint 明写桌面 1440），也不适合严谨报表（无数据来源标注、无导出结构）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 social-media-dashboard.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent5c0986485a0bc508…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 2.0；GitHub API spdx_id=Apache-2.0）
本站信息
收录日期2026-09-06
分类文档与知识
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。