1实现原理 · 为什么它能做到
本模板是「文件夹即模板」结构里的一份纯数据:SKILL.md 用 YAML frontmatter 供选择器使用,正文是给 agent 的版式指令;仓库不为单个模板写任何代码,新增模板=新增一个文件夹。
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
运行时由宿主把本模板正文夹在共享设计指令与用户内容之间拼成一次 prompt —— 模板的「智能」全在这段自然语言里,没有可执行代码。
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
宿主的 /api/convert 载入该模板后把这些文字交给本地已登录的 coding-agent CLI,只把 stdout 当 HTML 流式回收;模板本身不发网络、不读凭证、不写文件。
prompt = assemblePrompt({ body: skill.body, content, format });
随模板附带的 example.html 是「预渲染示例」,由预览接口原样吐出、进入选择器与画廊的 iframe —— 它决定模板卡片有没有可视预览,不参与内容生成。
Returns the skill's `example.html` verbatim so it can be loaded into an
frontmatter 的字段被逐项映射成选择器元数据(featured 决定全量排序、recommended 进顶部「★ 推荐」组、example_* 生成示例卡文案),并决定它在分类/场景过滤里出现在哪里。
if (typeof fm.featured === "number") meta.featured = fm.featured;
该模板的生成能力全部由它自己的正文兑现:resume-modern/SKILL.md 只描述版面、配色、字体与内容纪律,没有一句让 agent 去跑工具、取接口或读外部数据。
【模板: 现代极简简历】
正文把「A4 单页」翻译成可执行约束:容器用 Tailwind 任意值模拟 A4(w-[210mm] min-h-[297mm] mx-auto),并要求 @media print 打印样式——这是它「可打印 / 导出 PDF」的实现方式。
- 容器宽度模拟 A4: `w-[210mm] min-h-[297mm] mx-auto`, 内边距 16-20mm。
信息架构被写死成 60/40 主副线两栏,副线承载技能/语言/获奖这类次要信息。
- 主体两栏可选: 左 60% 主线(经历/项目/教育), 右 40% 副线(技能/语言/获奖)。
经历条目的写法也被规定:公司 + 职位 + 时间区间右对齐 + 1-3 条动词开头 bullet,等于把简历写作规范编码进模板。
- 经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。
配色被限制为黑白灰 + 1 个 accent(深蓝/墨绿),明确拒绝花哨颜色——降低 HR 阅读负担,也压缩模型自由发挥空间。
- 不使用花哨颜色, 黑白灰 + 1 个 accent (深蓝 / 墨绿)。
随附示例确实按此实现:.page 固定 A4 尺寸,@media print 关掉背景与阴影。
.page { width:210mm; min-height:297mm; margin:0 auto; background:#fff; padding:18mm 16mm; box-shadow:0 30px 60px -20px rgba(0,0,0,0.18); }
2核心能力
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Tailwind CDN(仅出现在产物示例 example.html,运行时不要求) |
| network | Google Fonts(仅出现在产物示例 example.html) |
| cli | 本地 coding-agent CLI(宿主提供,模板自身不调用) |
4风险提醒 风险提醒:绿色 · 放心使用
- 模板只约束版面,不校验事实 — 正文要求经历用动词开头、含量化成就,但不要求 agent 核实数据;用户若给的是占位内容,产出会同样「看起来很专业」。
- 姓名/邮箱/电话等 PII 会逐字进 prompt — 宿主把用户内容原样拼进 prompt 再交给本地 CLI;数据不出本机,但会进入所选模型的上下文与会话记录(宿主侧行为,非模板引入)。
- 呈现层外链由示例产物携带 — example.html 引 cdn.tailwindcss.com 与 Google Fonts,仅在选择器预览/本地打开示例时由浏览器发起;模板运行时不发请求。
5第二遍独立确认
- [ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html / example.md 3 个文件,无 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 的实际取值与之相符。
- [ok] example.html 与 SKILL.md 的一致性 — 正文三条硬约束都能在示例找到实现:A4 容器(.page width:210mm / min-height:297mm)、@media print 关阴影与背景、双栏 + 动词开头 bullet 的经历条目。
- [ok] 端点扫描(目录内) — resume-modern 目录 3 个文件中仅 example.html 含 2 个外部端点(cdn.tailwindcss.com、fonts.googleapis.com);SKILL.md / example.md 零 URL、零工具调用指令。
- [ok] 「可打印 / 导出 PDF」能力核对 — 不是营销词:example.html 真的带 @media print { body { background:#fff; padding:0; } .page { box-shadow:none; } },浏览器打印即可出 A4。
6结论
4f09497e18a7ccfc…553ed98c28