1实现原理 · 为什么它能做到
该 skill 不是可执行程序，而是 html-anything 的「模板」：一个目录（SKILL.md + example.html[/example.md]），由 loader.ts 在运行时扫盘读取——新增模板＝新增目录，不需要改 TypeScript。
next/src/lib/templates/loader.ts
Adding a template = adding a folder. No TS code change required; the API
注：SKILLS_DIR 固定在应用 cwd 的 src/lib/templates/skills；listSkills() 遍历一级子目录并按 isValidBundledId 过滤，逐目录读 SKILL.md、解析 frontmatter，所以「选择器元数据」和「生成用 prompt 正文」出自同一份文件。
frontmatter 是给选择器/API 的元数据（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags），由 fmToMeta() 映射成 SkillMeta；frontmatter 之后的正文才是给模型的规格。
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
注：id 取自目录名；example 元数据（example_id/name/format/tagline/desc/source_url）只在目录带 example.md/html 时才产出 SkillExampleMeta，body 被刻意排除在列表 API 之外（注释：Body is excluded so we can return the entire registry in one cheap fetch）。
生成时该模板正文被当成 prompt body：/api/convert 用 assemblePrompt() 把「全局设计指令 + 本模板正文 + 用户内容」拼成一段 prompt，交给宿主的本地 agent CLI，HTML 由 stdout 流式捕获。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：同路由另有 editFromHtml/editFromContent 的「最小化差异编辑」分支；模板正文在这条链路上只是字符串，没有求值、没有执行。
模板正文之上还压着一段全局前置指令（SHARED_DESIGN_DIRECTIVES），把技术与内容纪律统一加在每个模板之前——示例 HTML 里普遍出现的 CDN/字体外链就源自这里（宿主壳注入，不是模板自身要求）。
next/src/lib/templates/shared.ts
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
注：模板正文只负责风格/版面/组件，不重复这些硬要求；判级只算模板自身目录，该端点是宿主壳行为，写进 security.reason 自证。
产物以 stdout 文本返回：全局指令显式禁止 agent 动用文件系统，落盘由前端负责——所以模板目录既无脚本也无写盘能力。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
注：原文续句要求「不要把 HTML 写到任何 .html 文件里……前端直接捕获你的 stdout 文本, 文件落盘由前端负责」；产物最终由前端写入任务记录与导出。
example.html 是随包预渲染示例：/api/templates/<id>/preview 原样按 text/html 返回给 iframe（选择器内联预览），/api/templates/<id>/example 另把 example.md + example.html 一起返回。
next/src/app/api/templates/[id]/preview/route.ts
return new Response(skill.exampleHtml, {
注：示例只作预览/文档，不参与生成 prompt（生成只用 SKILL.md 正文），因此它的外链不影响模板自身的能力边界。
正文把「手绘线框」定成四件事：graph-paper 背景、多 tab 变体标签、scribbled 图表占位 + 斜线填充、黄色轻微旋转的 sticky note。
next/src/lib/templates/skills/wireframe-sketch/SKILL.md
- Graph-paper 背景
注：配套为「- 多 tab labels (variants 标签)」「- scribbled chart placeholders + hatched fills」「- Sticky-note annotations (黄色, 旋转一点点)」。
graph-paper 背景由两组 repeating-linear-gradient 叠加实现（24px 网格），不用图片纹理。
next/src/lib/templates/skills/wireframe-sketch/example.html
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
注：这是「低保真」的关键：网格是结构线而非装饰，与正文「白板/草稿前阶段」定位一致。
「不要规规矩矩」被量化为大量微小旋转：标签 rotate(-2.2deg)、tab rotate(-0.4deg)、sticky note rotate(2.4deg)/(-3.2deg)、KPI 卡各带 tilt。
next/src/lib/templates/skills/wireframe-sketch/example.html
.sticky.sn1 { top: 20px; right: 30px; background: var(--note-yellow); transform: rotate(2.4deg); }
注：正文对应句是「- 字体: Caveat / Architects Daughter; 不要规规矩矩的对齐」——示例把「不整齐」做成了系统化的 0.2–3.2 度旋转谱。
手写字体在示例里落地为 Caveat + Patrick Hand 组合（plus DM Serif Display / IBM Plex Mono），其中并未使用正文点名的 Architects Daughter。
next/src/lib/templates/skills/wireframe-sketch/example.html
--hand-bold: 'Caveat', 'Patrick Hand', cursive;
注：正文写「Caveat / Architects Daughter」，示例实际加载 Caveat + Patrick Hand；属同类替换（都是手写体），已记入确认表。
图表占位走内联 SVG「涂鸦」路径（.panel svg.scribble），符合全局指令「优先使用 CSS / SVG 内联绘制」。
next/src/lib/templates/skills/wireframe-sketch/example.html
.panel svg.scribble { width: 100%; height: 160px; display: block; }
注：示例还有 .kpi.tilt-1..4 的轻微倾斜与 .pin 虚线标签，整体是「未完成感」的一致性构造。
CLI 侧另有一条关键词直配通道：skills-matcher.ts 把用户内容里的关键词直接映射到该模板 id，命中即给 confidence＝命中数×2+3，达到阈值 3 就走本地规则、不再让模型挑模板。
cli/src/skills-matcher.ts
[["原型", "prototype", "线框", "wireframe", "mockup", "低保真", "sketch", "手绘"], "prototype-web"],
注：注意：STRONG_SIGNALS 里 wireframe/线框/sketch/手绘 指向的是 prototype-web 而不是本模板——本模板在强信号通道不可达，只能靠 fallbackMatch（tags 命中 wireframe/lo-fi/sketch/草稿/手绘 每条 +3 分）或选择器手选命中。这是与其余 8 个模板的实质差异，已写入确认表。
CLI 兜底匹配用到的阈值常量：内容长度需超过 60 字符才启用 AI 摘要匹配；强信号阈值是 3。
cli/src/skills-matcher.ts
const MIN_CONTENT_LENGTH_FOR_AI = 60;
注：另有 SCENARIO_SIGNALS 按模板 scenario 给关键词加权、fallbackMatch 用 tags/zhName/description 打分，两层都失效才调用 agent 做摘要匹配。
宿主壳用 sandbox="allow-scripts allow-same-origin" 的 iframe 渲染示例/产物（允许脚本、允许同源）——这是产品壳取舍，写进风险，不参与本 skill 判级。
next/src/components/template-picker.tsx
sandbox="allow-scripts allow-same-origin"
注：preview-pane.tsx / deck-viewer.tsx 同款；示例 HTML 的内联 JS 只在浏览器预览时执行，skill 自身不执行任何脚本。
2核心能力
01Graph-paper 背景（CSS 网格线，无纹理图）
02多 tab 变体标签（active 高亮 + skew）
03scribble 图表占位（内联 SVG）
04Sticky note 注释（黄/粉、带旋转）
05手写字体与「不整齐」对齐纪律
06低保真 KPI 卡片（各带轻微 tilt）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（Caveat / Patrick Hand / DM Serif Display / IBM Plex Mono） |
| network | Google Fonts 静态资源域（preconnect） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- CLI 强信号通道不可达 — skills-matcher.ts 的 wireframe/sketch/手绘 关键词行指向 prototype-web；本模板只能靠 tags 兜底或被用户手选，自动路由时可能被 prototype-web 抢走（verdict.fits 已注明需手选）。
- 正文字体与示例不一致 — 正文点名 Caveat / Architects Daughter，示例用 Caveat + Patrick Hand；若用户按正文要求核对字体会发现差异。
- 低保真产出可能被误当交付稿 — 示例视觉完成度较高（有 KPI 卡、面板、页脚），容易被直接当成品发布，而与「探索稿」定位冲突。
- 外链字体 — 示例引用 fonts.googleapis.com / fonts.gstatic.com（另有产品壳注入的 Tailwind CDN）；属产物/宿主行为，不计档。
风险提醒：绿色，放心使用。判级对象＝本 skill 目录（next/src/lib/templates/skills/wireframe-sketch/），逐文件核对：零脚本、零凭证读取、零写盘；目录内出现的端点仅限 Google Fonts（Caveat / Patrick Hand / DM Serif Display / IBM Plex Mono）、Google Fonts 静态资源域（preconnect），且全部位于 example.html 这一「产物示例」；SKILL.md 正文只规定版面/风格/字体族名，未点名任何运行时外部接口，故为纯指令模板＝green。宿主侧说明（不计档）：html-anything 产品壳会经 assemblePrompt() 把正文拼进 prompt 并 spawn 本地 agent CLI，并注入 cdn.tailwindcss.com + Google Fonts 要求（next/src/lib/templates/shared.ts），预览 iframe 用 sandbox="allow-scripts allow-same-origin"（next/src/components/template-picker.tsx）。
5第二遍独立确认
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
- [ok] 无脚本执行 — grep -c "<script" example.html = 0；SKILL.md 无脚本指令。
- [ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；SKILL.md 正文无 URL。
- [discrepancy] 正文字体 vs 示例字体 — SKILL.md 写「字体: Caveat / Architects Daughter」，example.html 实际加载 Caveat + Patrick Hand（--hand: 'Patrick Hand', 'Caveat' / --hand-bold 反之），未出现 Architects Daughter。
- [discrepancy] CLI 强信号是否覆盖本模板 — cli/src/skills-matcher.ts 中 wireframe/线框/sketch/手绘 的关键词行映射到 "prototype-web"（第 35 行），全套 STRONG_SIGNALS 无 wireframe-sketch 行；本模板仅能通过 fallbackMatch（tags 命中 +3/条）或手选命中。
- [ok] graph-paper 与 sticky note 是否落地 — 两处 repeating-linear-gradient(…1px 24px) 构成网格；.sticky.sn1/sn2 用 --note-yellow/--note-pink 并带 rotate(2.4deg)/(-3.2deg)。
- [ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文无运行时接口，端点仅见示例 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「网格背景 + marker 笔触 + 多 tab + sticky note + scribble 图表」。
6结论
适合：适合白板/草稿前阶段的多方案线框探索、设计评审前的问题对齐、需要「先看结构不看像素」的场景；建议在选择器里手选，别依赖关键词自动路由。
不适合：不适合直接对外发布（低保真度是设计属性）；不适合需要精确像素/设计系统 token 的交付；不适合自动路由期望命中本模板的流水线（强信号被 prototype-web 占用）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 wireframe-sketch.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent40e72150a36c51da…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 license.spdx_id = Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。