1实现原理 · 为什么它能做到
这个 skill 不是可执行程序，而是注入给本机 coding-agent CLI 的一段提示词：宿主取 SKILL.md 正文，前面压一段全站共享设计指令、后面接用户内容，拼成一条 prompt 交给已登录的 agent，再把 agent 的 stdout 当 HTML 取回。
next/src/lib/templates/shared.ts
【输入格式】: ${opts.format} 【用户内容】: ${opts.content}
注：拼装模板 = 共享指令 → skill 正文 → 输入格式 → 用户内容；web 端 /api/convert 走同一函数：prompt = assemblePrompt({ body: skill.body, content, format });
共享指令层（不属于任何单个 skill，但每个模板都被它压着）把输出钉成『自包含单文件 HTML』，并明令禁止 agent 使用 Write/Edit/Bash 等文件系统工具，HTML 直接以对话正文流式输出。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：这是本批 skill 能力边界的来源：产出物只是文本，落盘与渲染由宿主前端负责；该禁令是 prompt 软约束，不是沙箱硬隔离。
SKILL.md 之外还有一条『内容驱动数量』覆盖规则：模板里写的任何页数/帧数/卡片数一律视为参考下限，实际数量由用户内容决定——防止 agent 用模板数字压缩用户内容。
next/src/lib/templates/shared.ts
- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
注：对 frame-* 单帧模板尤其关键：它把模板里的版面描述定性为『可复用版面池』而非产量上限。
加载约定是『一个 skill = 一个文件夹』：SKILL.md（YAML frontmatter 供选择器 + 正文即模板 prompt），可选 example.md（样本输入）与 example.html（可直接打开的预览样张）；新增模板只需加目录，不改 TS 代码。
next/src/lib/templates/loader.ts
* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker
注：loader 的 loadSkillFromDir 只读这三类文件，没有其它资产装载通道——第二遍据此核对本 skill 的资产可达性。
选择链路（CLI 侧）是三级漏斗：关键词强信号（每命中 1 词 2 分，阈值 3）→ 退化为 tags/scenario 打分 → 仍无把握就把用户内容前 800 字交给本地 agent 做一句话分类。
cli/src/skills-matcher.ts
const CONFIDENCE_THRESHOLD = 3;
注：AI 兜底的 prompt 原文：const prompt = `请用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：
预览链路独立于生成：/api/templates/<id>/preview 把 example.html 原样以 text/html 返回给 iframe；前端 iframe 用 sandbox="allow-scripts allow-same-origin"。
next/src/components/preview-pane.tsx
sandbox="allow-scripts allow-same-origin"
注：路由注释：* Returns the skill's `example.html` verbatim so it can be loaded into an（宿主侧取舍：allow-scripts + allow-same-origin 组合下，预览页脚本可自行摘掉 sandbox）。
模板定义的是一个三 tab 的团队管理后台单页：Team Members / Team Details / Activity Log，加一行 KPI stat、成员表（avatar+角色+状态）、角色分布柱图、在线状态与活动 sparkline、Top contributors 面板。
next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md
- Tabs: Team Members / Team Details / Activity Log - KPI stat row - Member table (avatar + 角色 + 状态) - Role distribution bar chart - Online presence + activity sparklines - Top contributors panel
注：三 tab 分工写死，避免生成一个没有导航结构的『一坨卡片』。
交互细节被显式列出：light/dark 切换、hover tooltip、click-to-zoom 面板，以及一个『CSV export 按钮 (前端实现)』——即导出走浏览器端生成，不经服务端。
next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md
- light/dark 切换, hover tooltip, click-to-zoom panels - CSV export 按钮 (前端实现)
注：交互与导出都在模板里点名，产出物偏可用界面而非静态图。
意图定位为 FlowAI 美学的团队管理 admin 单页，即版式/配色随共享指令层走，本模板只负责后台信息架构。
next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md
【意图】FlowAI 美学的团队管理 admin 单页。
注：美学交给共享指令层，本模板只负责后台信息架构。
画布口径是桌面 1440（aspect_hint），选择器元数据 category=dashboard、scenario=operations，tags 为 flowai/team/members。
next/src/lib/templates/skills/flowai-team-dashboard/SKILL.md
aspect_hint: "桌面 1440"
注：桌面 1440 是本批唯一明确分辨率约束的 dashboard 模板。
本 skill 的 example.html 只是一个 iframe 壳，指向 ./assets/template.html；该文件在 pin commit 里不存在，因此预览路由会把这份壳原样返回、iframe 404。
next/src/lib/templates/skills/flowai-team-dashboard/example.html
<iframe src="./assets/template.html" title="FlowAI Team Dashboard Example"></iframe>
注：这条是第二遍用 git ls-files 复核出的实现落差（详见 verification）。
2核心能力
01三 tab 后台信息架构（成员 / 详情 / 活动日志）
02KPI 数字行 + 成员表（头像、角色、状态）
03角色分布柱状图
04在线状态 + 活动 sparkline
05Top contributors 面板
06交互：light/dark 切换、hover tooltip、click-to-zoom
07CSV 导出按钮（声明为前端实现）
08选择器关键词：team dashboard / flow / 工单 / ticket / flowai
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Tailwind / Google Fonts 由共享指令层强制（本模板 SKILL.md 未提 CDN；示例壳自身零外链） |
| network | FlowAI 品牌/美学参照（仅出现于正文命名，无端点位） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 预览破损：example.html 指向的 ./assets/template.html 在本 pin 不存在，picker/详情页会拉到 404 壳。 — example.html：<iframe src="./assets/template.html">
- 缺 example.md：没有样本输入，用户无法从仓库直接看到『喂什么内容能出这种后台』。 — skill 目录仅 SKILL.md + example.html（git ls-files 复核）
- 宿主侧：预览 iframe sandbox="allow-scripts allow-same-origin"；若生成物含 light/dark、tooltip 等脚本，页面脚本在预览环境拥有宽松权限（宿主取舍）。 — sandbox="allow-scripts allow-same-origin"（next/src/components/preview-pane.tsx）
- 注入面：团队成员数据（可能含姓名/邮箱）会被逐字拼进 prompt 交给本地 agent。 — assemblePrompt 末尾直接拼接【用户内容】
风险提醒：绿色，放心使用。判级对象是本 skill 自身目录（口径：照 SKILL.md 执行后实际会发生什么）：SKILL.md 为纯指令文本，随附 example.md/example.html 是样本与预览样张，目录内无脚本、无运行时网络调用、无凭证读取、无 agent 侧文件写入；SKILL.md 也未点名任何外部生成/服务后端（对照 orange 先例 ai-image-generation / seedance：后者把素材送外部生成后端并消耗账号额度；本模板不产生素材外发）。不影响档位的说明项：目录内 example.html 会外链 cdn.tailwindcss.com 与 fonts.googleapis.com（批4 口径：example.html 外链属产物示例，不判级）；共享指令层同样要求生成物在 head 里 CDN 引 Tailwind 与 Google Fonts（- 在 \`<head>\` 中通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。），那是宿主壳层行为。宿主背景（不计入档位，见 verdict.risks）：预览 iframe sandbox="allow-scripts allow-same-origin"；宿主以全权模式拉起 agent（"bypassPermissions", / "--yolo",）。另注：本 skill 目录缺 example.md，且 example.html 指向不存在的 assets/template.html（预览 404，见 verification）；均不影响风险档位。
5第二遍独立确认
- [ok] 三 tab / 布局宣称 — 重读 SKILL.md【布局】6 条与 JSON 引用逐字一致。
- [ok] 『CSV 导出前端实现』 — SKILL.md【设计细节】确写『CSV export 按钮 (前端实现)』；对目录做 createObjectURL/download=/Blob 扫描零命中——模板声明了该能力，实现由生成的页面自行承担。
- [discrepancy] 预览样张可用性 — example.html 仅含 <iframe src="./assets/template.html">，而该 pin 的 skill 目录（git ls-files 复核）只有 SKILL.md 与 example.html，无 assets 目录。结论：选择器/详情页预览会 404，样张缺失。
- [ok] featured/recommended 缺失的影响 — loader 只在 if (typeof fm.featured === "number") meta.featured = fm.featured; 时写 meta.featured，故本 skill 不进推荐位——与 README showcase（按 recommended 排的 8 个）中确无 flowai-team-dashboard 相互印证。
- [ok] 安全面 — 目录内 2 个文件无脚本/凭证/写盘/网络调用 token；示例壳无外链。
- [ok] meta 元数据 — GitHub API 实查 stars=8827、pushed_at=2026-09-15T03:36:24Z、license Apache-2.0。
- [unlocatable] 安装量 — 无公开安装量数据源，installs=null。
6结论
适合：适合需要一个内部团队管理后台界面草图/原型的场景（成员管理、角色分布、活动日志），尤其是想一次拿到带交互态与导出按钮的单页 demo 的团队。
不适合：不适合需要真实后端数据接入的场景（模板不做数据层）；不适合想看官方成品效果再决定的人——本 skill 的预览样张在本版本是缺的（404）；也不适合非桌面端（aspect_hint 明确桌面 1440）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 flowai-team-dashboard.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent2b713fbcbced0b31…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；GitHub API spdx_id=Apache-2.0）
本站信息
收录日期2026-09-06
分类文档与知识
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。