1实现原理 · 为什么它能做到
五段布局：Header（团队 + 时间窗）→ KPI 卡片网格 → 7 天 sparkline → Real-time activity feed → linked database 任务表（状态 pill）。
next/src/lib/templates/skills/live-dashboard/SKILL.md
- KPI 卡片网格
注：这是本批信息密度最高的一份模板：五段各自独立成块，适合承载「团队总览」类长页。
没数据源也能出「live」观感：示例自述没有连接器绑定、下方数值是 seeded sample data，并用内联 JS 渲染 sparkline 与活动流。
next/src/lib/templates/skills/live-dashboard/example.html
<div class="pill-live sample" id="livePill" title="No connector bound — values below are seeded sample data">
注：正文也写明「即使没有数据源也用 seed 数据兜底」——seed 兜底是这份模板的核心设计，而非缺陷。
状态语义用 Notion 数据库配色：done/progress/blocked/todo/review 五档 pill 色值写死在 CSS 变量里。
next/src/lib/templates/skills/live-dashboard/example.html
--pill-done-bg: #dbeddb; --pill-done-ink: #2b593f;
注：五组 bg/ink 变量是「Notion 味」最直接的来源，比版式本身更决定观感。
模板本体就是 prompt：SKILL.md 正文经 loader 读出后与共享前言、用户内容拼装，交给本机 agent CLI 执行。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：运行时不吃模板目录里的代码：/api/convert 只收 {agent, templateId, content}，用 loadSkill(templateId) 取 SKILL.md 正文当 prompt 主体，再交给本机已登录的 agent CLI；HTML 由 stdout 流回前端。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：文件系统里的 skill 只是文本：loader 逐个目录读 SKILL.md，frontmatter 抽成 picker 元数据、正文作为 body 返回；本模板目录内没有任何模块被 import 或执行。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
注：共享前言在模板正文之前注入，规定「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」——所以本模板里的版式清单是「可复用版式池」，不是页数/帧数上限。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：前言明令禁用文件系统工具、要求纯 HTML 从回复正文流式输出，落盘由前端负责——skill 侧因此没有写盘行为。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
注：目录里的 example.html 是随仓库分发的黄金样本，预览路由直接读盘返回（无构建、无编译），既是质量基线也是详情页素材。
2核心能力
01KPI 卡片网格
027 天趋势 sparkline 卡
03Real-time activity feed（头像 + 动作 + 时间）
04linked database 任务表 + 五档状态 pill
05sample/seed 模式与刷新按钮（离线演示）
06内联 JS 渲染 sparkline 与演示用行闪烁（本批唯一带脚本的示例）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 正文说 zebra，示例无斑马纹 — 按示例为准；若你确实要斑马纹需在输入里点明，否则模型会跟随示例。
- 「live/实时」是演示语汇，未接任何数据源 — 对客户展示时勿宣称已接数据源：示例自述 values 为 seeded sample data、刷新按钮 title 也写了 sample mode。
- 示例含内联 JS，预览 iframe 为 allow-scripts allow-same-origin — 脚本由模型即时生成并执行；虽无网络请求，仍属宿主侧执行面（预览沙箱策略见 verdict 说明）。
🟢 绿色（风险提醒：绿色，放心使用）。判级对象＝skill 自身目录：目录内零 URL（example.html 也无任何 http(s) 端点）。目录内只有 SKILL.md、example.html，零脚本、零可执行代码、零网络端点、零凭证读取、零写盘指令——照 SKILL.md 执行的结果是宿主模型输出一段 HTML 文本，不含任何外发或落盘动作。宿主壳与产物使用侧行为不作为档位依据，只记入 verdict.risks：shared.ts 前言要求产物引 Tailwind CDN(https://cdn.tailwindcss.com) 与 Google Fonts、runtime 会 spawn 本机已登录的 agent CLI（envFor 透传 process.env）、预览 iframe 为 sandbox="allow-scripts allow-same-origin"。
5第二遍独立确认
- [discrepancy] 规范↔示例：zebra 斑马纹 — 正文写「Linked database task table (zebra + 状态 pill)」；示例没有 nth-child 斑马纹，改用 `.db-row:hover` 高亮与 `.db-row.changed` 行闪烁动画；状态 pill 五档齐备。
- [ok] 示例脚本普查 — example.html 仅 1 个内联 <script>；fetch/XMLHttpRequest/WebSocket 命中 0，脚本只做 seeded 数据渲染与演示动效，与示例自述「seeded fixtures, not a real workspace」一致。
- [ok] 7 日窗口核对 — 示例命中 `Tasks created · last 7 days`，与正文「7 天 sparkline 趋势」一致。
- [ok] seed 兜底核对 — 正文「即使没有数据源也用 seed 数据兜底」；示例 `pill-live sample` 的 title 为 `No connector bound — values below are seeded sample data`，并在刷新按钮 title 里标明 sample mode。
- [ok] commit/host 侧声明 — 示例末尾提示 `tasks and activity below are seeded fixtures, not a real workspace.`——自查诚实，不存在把演示数据冒充真实数据的误导性文案。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 1，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内（含 example.html）零 http(s) 命中，产物离线自持。
6结论
适合：团队周报/运营总览长页、产品 demo 里的「数据看板」视觉、Notion 风格仪表板原型；需要在无数据源时也显得「在跑」的展示稿时最合适。
不适合：需要真实数据接入与自动刷新的生产看板（模板不含连接器，只有 seed 演示）；需要图表交互分析（示例仅 sparkline）；对「不得含脚本」有硬约束的发布渠道。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 live-dashboard.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentd4f43f274c67de59…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；package.json "license": "Apache-2.0"；GitHub API spdx_id Apache-2.0）
本站信息
收录日期2026-09-06
分类文档与知识
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。