1实现原理 · 为什么它能做到
Trello 式四列看板 + 顶部 filter bar（assignee / label / search），列头带色点与卡片计数。
next/src/lib/templates/skills/kanban-board/SKILL.md
- 4 列: To do / In progress / In review / Done
注：正文把卡片元数据也定了（标题 / labels / due / avatar / 评论数），是「看起来有人用过」的演示态而非空板。
「不要真拖，但视觉上要像能拖」由静态线索实现：卡片 `cursor: grab`、虚线 add-card 槽、hover 边框变化。
next/src/lib/templates/skills/kanban-board/example.html
.card { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; cursor: grab; transition: border-color 0.15s, box-shadow 0.15s; }
注：示例零脚本，所有「可交互」感都由 cursor/hover/虚线槽这类 CSS 线索承担。
泳道（按 epic/assignee 分组）作为可选扩展写在正文里，示例则以列 + filter chips 呈现。
next/src/lib/templates/skills/kanban-board/SKILL.md
- 可选 swimlanes (按 epic / assignee 分组)
注：泳道是「可选」，说明模板允许同一列在不同分组下重复出现，不把它当作硬约束。
模板本体就是 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核心能力
01四列看板 + 列头计数与色点
02顶部 filter bar（Members / Labels / Search tickets…）
03卡片标签色系（bug/feat/design/chore/research）
04可拖视觉线索（cursor: grab）与虚线加卡槽
05可选泳道分组（按 epic / assignee）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 示例首列 Backlog 与正文 To do 口径不一 — 模型同时看到两份命名，出图可能与你要求的列名不同；需在用户内容里指定列名。
- 规范要求的 due 与评论数在样本中没有示例 — 模型可能省略这两项元数据；若看板需要到期日/评论计数，应在输入里明确要求。
- 看板不能真的拖拽/保存状态 — 产物是静态视觉稿；需要真实交互需另行要求补脚本，而共享前言默认「必要的脚本通过 jsdelivr CDN 引入」，会引入外链依赖。
🟢 绿色（风险提醒：绿色，放心使用）。判级对象＝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] 规范↔示例：列名 — 正文写「To do / In progress / In review / Done」四列，示例首列是 `Backlog`（其余 In progress / In review / Done 一致）——命名口径不一致，模型照示例会输出 Backlog。
- [discrepancy] 规范↔示例：卡片元数据 — 正文要求卡片含「标题 / labels / due / avatar / 评论数」；示例命中标题、标签色（tag-feat 等）、头像缩写（av-sm av-dev）、点数（3 pts）与工单号，但**没有 due 日期、也没有评论数**——两项规范要求未在样本落地。
- [ok] 规范↔示例：filter bar — 示例 topbar 有 `Search tickets…` 输入框，filterbar 有 Members / Labels 两组 chips，与正文 assignee/label/search 要求一致。
- [ok] 「看起来可拖」实现方式 — 示例用 `.card { … cursor: grab; }` 与 `.add-card` 虚线槽表达可拖，未引入任何拖拽脚本，符合正文「不需要真 drag，但视觉上要像可拖」。
- [ok] 泳道未在示例出现 — 正文把 swimlanes 标为「可选」，示例采用单层四列，属可选未启用，非缺口。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内（含 example.html）零 http(s) 命中，产物离线自持。
6结论
适合：Sprint 看板截图、产品/运营流程展示页、Trello 风格 UI 概念稿；需要「像团队在用」的静态看板视觉时最合适。
不适合：需要真实拖拽与状态持久化的项目管理场景；需要与 Jira/Linear 数据联动的实时看板；需要严格按某一工具列名（如 To do/In progress 三段式）交付且不核对示例的场合。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 kanban-board.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agenteec7d423885faf6f…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 为实时上游，内容可能已更新。