html-anything 极简简历模板（resume-modern）深度解析：A4 单页现代简历的完整实现指南

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成

导读

本文围绕 html-anything 内置技能模板resume-modern（中文名「极简简历」）展开，它是 75 个 Skills × 9 种版式场景中面向求职场景的 A4 单页简历模板。文章将以 SKILL.md 为主体，结合同目录下的 example.html 与 example.md，讲解该模板的 frontmatter 元数据结构、A4 版式设计规范、两栏布局细节、打印适配方案，并深入仓库源码揭示它如何在 模板加载器 中被解析、通过 API 提供给前端选型器（picker），最终经 提示词组装 驱动本地 AI agent 生成简历 HTML 的完整链路。读完本文，你将掌握在 html-anything 中选用、定制、甚至新增此类简历技能模板的完整方法。

一、模板全景：一个目录、三份文件

html-anything 的每个技能模板都遵循「一目录一技能」的磁盘布局（见 loader.ts 中的说明）。resume-modern目录下包含三份文件：

从源码结构看（loader.ts），loadSkillFromDir会同时读取这三份文件：frontmatter 与 body 经parseFrontmatter拆解，example.md/example.html则作为LoadedSkill的附加字段返回。这意味着新增一个模板 = 新建一个文件夹，无需改动任何 TypeScript 代码，API 路由会重新扫描磁盘，前端刷新即见新模板。

二、frontmatter 元数据：模板如何被识别、分类与推荐

resume-modern/SKILL.md的 frontmatter 是理解整套技能注册体系的最佳范例：

name: resume-modern zh_name: "极简简历" en_name: "Modern Resume" emoji: "📄" description: "现代极简简历, A4 单页, 适合打印或导出 PDF" category: resume scenario: personal aspect_hint: "A4 (210×297mm)" recommended: 12 tags: ["resume", "cv", "简历"] example_id: sample-resume-frontend example_name: "极简简历 · 前端工程师" example_format: markdown example_tagline: "A4 单页, 可打印 / 导出 PDF" example_desc: "高级前端工程师简历, 两栏布局, 数字成就高亮"

对照 loader.ts 中的SkillFrontmatter类型，各字段含义如下：

• name/zh_name/en_name：模板 ID 与中英文展示名。fmToMeta的取值优先级是zh_name ?? name ?? id，en_name ?? id（loader.ts），保证选型器在中文界面显示「极简简历」、英文界面显示「Modern Resume」。
• emoji：选型器卡片图标，缺省回退为✨。
• category：resume，模板的分类标识。
• scenario：personal。这是选型器按场景筛选的键，scenarios.ts 中定义了 12 个规范场景键（marketing / engineering / operations / product / design / finance / sales / hr / personal / education / creator / video），resume-modern归入「personal（个人）」场景。
• aspect_hint：A4 (210×297mm)，告诉用户与 AI 该模板的版面比例。
• recommended: 12：推荐排序权重。loader 注释说明数字越小在「推荐 / Featured」分组中排名越靠前（loader.ts）。
• tags：["resume", "cv", "简历"]，供搜索过滤。
• example_*系列：示例元数据。example_id: sample-resume-frontend、example_format: markdown表示示例输入是一份 Markdown 简历；example_tagline/example_desc用于选型器卡片上的宣传语。只有当example_id存在或磁盘上检测到example.md/example.html时，SkillMeta.example才会被填充（loader.ts）。

这套 frontmatter 最终通过 GET /api/templates 以SkillMeta[]形式返回给前端，缓存策略为Cache-Control: public, max-age=5——既避免频繁重取，又保证开发者新增技能目录后刷新页面即可看到新模板。

三、版式规范逐条拆解：从 A4 容器到两栏网格

SKILL.md 的 prompt body 是整份文档的核心，共 7 条版式指令。下面逐条结合 example.html 的落地实现来解读。

3.1 A4 容器模拟

容器宽度模拟 A4:w-[210mm] min-h-[297mm] mx-auto, 内边距 16-20mm。

example.html 中对应的实现是：

<div class="page">…</div>

.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); }

• width:210mm; min-height:297mm精确对应 A4 纸的物理尺寸，min-height允许内容超出单页时自然撑高；
• padding:18mm 16mm落在 SKILL.md 要求的 16-20mm 内边距区间；
• 页面外加box-shadow模拟「纸上浮起」的预览效果，打印时被移除（见后文 print 样式）。

3.2 头部：巨号姓名 + 细线分隔的联系方式

顶部姓名巨大 (text-4xl), 底下一行 contact (邮箱 / 电话 / 城市 / GitHub / LinkedIn), 中间用细竖线分隔。

example.html 的实现：

<h1 class="text-[42px] font-bold tracking-tight leading-none mb-3">林清禾</h1> <div class="text-[12.5px] text-[#1f4d8f] font-medium tracking-wide mb-3">高级前端工程师 · Senior Frontend Engineer</div> <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11.5px] text-[#5a564e]"> <span>📍 上海</span><span class="opacity-30">|</span> <span>✉ qinghe.lin@example.com</span><span class="opacity-30">|</span> <span>github.com/qinghelin</span><span class="opacity-30">|</span> <span>linkedin.com/in/qinghe</span> </div>

实现细节：姓名用 42px（大于 text-4xl 的 36px，更突出）加粗、紧凑字距；职位行用主题强调色#1f4d8f标注；联系方式行通过<span class="opacity-30">|</span>渲染 30% 透明度的细竖线作为分隔符，并且用flex-wrap保证在窄屏或缩放下自动换行。头部下方以 1px 的#e7e5e0边框线收尾，形成与正文的视觉分区。

3.3 主体两栏布局：60/40 黄金配比

主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。

example.html 用 Tailwind 的 12 列栅格实现：

<div class="grid grid-cols-12 gap-8"> <div class="col-span-8"> <!-- 工作经历 / 公开项目 --> </div> <div class="col-span-4"> <!-- 教育 / 核心技能 / 语言 / 兴趣 --> </div> </div>

左栏 8/12 = 66.7%、右栏 4/12 = 33.3%，gap-8（32px）留出呼吸感。左栏承载职业主线——工作经历、公开项目；右栏承载辅助信息——教育、核心技能、语言、兴趣。这与 SKILL.md 的 60%/40% 指引高度一致（实现取整后为 67%/33%，属于该指引的可接受变体）。

3.4 章节标题：small caps + 短 accent 线

章节标题: small caps 风格, 上方一条短 accent 线 (w-8 h-0.5)。

<h2><span class="accent-bar"></span>个人简介</h2>

.section h2 { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#1f4d8f; margin:0 0 14px; } .accent-bar { display:inline-block; width:24px; height:2px; background:#1f4d8f; vertical-align:middle; margin-right:10px; }

text-transform:uppercase+letter-spacing:0.18em构成 small caps 质感；24px × 2px 的 accent 短横线（对应 Tailwind 的w-24px h-2px，即w-8 h-0.5的 CSS 化）置于标题文字左侧，统一使用主题色。

3.5 经历条目：右侧时间轴 + 动词开头 bullet

经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。

<div class="role"> <div><span class="font-semibold text-[14.5px]">Acme AI</span> <span class="text-[#5a564e] text-[13px]">— 高级前端工程师</span></div> <div class="meta">2023.06 - 至今</div> </div> <ul class="bullets"> <li>设计并主导了内部 AI 编辑器产品 (从 0 到 1), 6 个月内 DAU 达到 <span class="font-semibold accent">12k</span>, 内部 NPS <span class="font-semibold accent">68</span></li> … </ul>

.role { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .role .meta { font-size:11px; color:#6b6760; white-space:nowrap; tabular-nums:auto; } ul.bullets li { position:relative; padding-left:14px; font-size:13px; line-height:1.65; } ul.bullets li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; background:#1f4d8f; border-radius:1px; }

三条细节值得注意：时间区间通过flex justify-between推到最右端，white-space:nowrap防止其换行，tabular-nums让数字（如2023.06、12k、68）宽度对齐；bullet 用::before伪元素画 5px 圆角小方块而非原生圆点，强化品牌识别；每条经历控制在 3 条以内的动词开头 bullet（「设计并主导」「把团队升级」「抽象组件库」），与模板要求一一对应。

3.6 色彩：黑白灰 + 单一 accent

不使用花哨颜色, 黑白灰 + 1 个 accent (深蓝 / 墨绿)。

example.html 选择的是深蓝#1f4d8f：

技能标签用「浅蓝底 + 深蓝字」的胶囊样式（px-2 py-0.5 rounded），既不抢版面又能一眼扫出技能关键词。整体完全符合「黑白灰 + 1 个 accent」的约束。

3.7 打印适配

添加 @media print 样式, 隐藏不必要的元素, 颜色保留。

@media print { body { background:#fff; padding:0; } .page { box-shadow:none; } }

打印时移除预览环境的米灰色背景与页面阴影，background:#fff保证纸张为纯白；color:#1f4d8f等颜色样式默认保留，因此 accent 高亮在纸质或 PDF 上依然可见。结合 SKILL.md 的 description（「适合打印或导出 PDF」）与 example_tagline（「A4 单页, 可打印 / 导出 PDF」），打印导出正是该模板的首要使用场景。

四、示例闭环：Markdown 输入 → HTML 成品

4.1 输入侧：example.md 的结构

example.md 是模板约定的输入格式，纯 Markdown、无任何版式信息：

# 林清禾 高级前端工程师 · 上海 · qinghe.lin@example.com · github.com/qinghelin · linkedin.com/in/qinghe ## 个人简介 8 年前端经验, 主导过 50M+ MAU 产品的设计系统重构… ## 工作经历 **Acme AI** — 高级前端工程师 · 2023.06 - 至今 - 设计并主导了内部 AI 编辑器产品 (从 0 到 1), 6 个月内 DAU 达到 12k, 内部 NPS 68 … ## 教育 / 技能 / 公开项目 / 语言 / 兴趣

结构上分为「头部单行信息」「个人简介」「工作经历（每段以**公司** — 职位 · 时间区间开头 + 动词开头 bullet）」「教育」「技能」「公开项目」「语言/兴趣」七个区块，与 example.html 的版式一一对应。注意：示例中的 MAU、DAU、NPS、star 数等均为示例数据，实际使用时必须由用户提供真实信息——这也是全局设计指令「内容真实性」的硬性要求（见 shared.ts：「必须使用用户提供的真实数据, 不要编造」）。

4.2 输出侧：一条 API 链路

从源码看，示例与模板的联动链路是：

1. 选型器调用useTemplates()（index.ts）获取/api/templates返回的元数据列表；
2. 用户点击某模板的「Preview」时，fetchTemplateExample(id)（index.ts）请求 GET /api/templates/[id]/example，该路由通过loadSkill(id)一次性取回content（example.md）与html（example.html），省去两次往返；
3. 用户将真实简历内容粘贴进输入区后，/api/convert路由调用 assemblePrompt，把全局设计指令 + 本模板 body + 输入格式 + 用户内容拼接为最终 prompt 发给本地 AI agent，流式返回自包含单文件 HTML。

assemblePrompt的模板产物形如：

[全局设计指令：内容驱动数量 / 单文件技术约束 / 世界级设计准则 / 内容真实性] 【模板: 现代极简简历】 - 容器宽度模拟 A4: w-[210mm] min-h-[297mm] mx-auto, 内边距 16-20mm。 - … 【输入格式】: markdown 【用户内容】: （用户真实简历）

CLI 侧存在同构实现 cli/src/skills-loader.ts 与 cli/src/prompt-assemble.ts——前者是 next 版 loader 的适配版（多了一个skillsDir参数），后者与 shared.ts 的SHARED_DESIGN_DIRECTIVES逐字一致，保证 Web 与 CLI 两条入口的生成行为完全一致。全局指令中「内容驱动数量」是最高优先级：模板只定义版式池，slide/section/card 数量必须由用户内容长度决定，「长内容输出少页面」被视为严重错误；对简历而言，即所有经历、项目、技能必须逐条完整呈现，不得压缩合并。

五、实践指南：如何用与如何改

5.1 在 html-anything 中选用

1. 启动 next 应用（next dev），打开模板选型器，在「personal」场景或搜索「简历 / resume」即可找到「极简简历」卡片，其recommended: 12使其出现在推荐区；
2. 点击预览可看到 example.html 的成品效果与 example.md 的输入样例（由/api/templates/resume-modern/example提供）；
3. 将个人真实简历按 example.md 的 Markdown 结构组织好，交给 AI agent 生成，得到w-[210mm] min-h-[297mm]的 A4 单文件 HTML；
4. 在浏览器中打印或导出 PDF 前，确认触发了@media print样式（移除页面阴影、白底输出、accent 颜色保留）。

5.2 定制自己的简历技能

由于技能注册是纯磁盘驱动的（loader.ts：「Adding a template = adding a folder. No TS code change required」），你可以：

• 复制resume-modern目录为新 ID（如resume-compact），修改 frontmatter 的name/zh_name/en_name/emoji/description/category/scenario/aspect_hint/recommended/tags与 example 元数据；
• 重写 SKILL.md 的 body 部分（如调整两栏比例为 70/30、更换 accent 为墨绿#1f4a3c、增加证书区块的版式指引），AI 会在assemblePrompt时自动将其与全局设计指令合并；
• 配套提供新的example.md与example.html，metaFromDir会自动检测hasMd/hasHtml并填充到 picker（loader.ts），开发模式下listSkills()不做缓存，刷新即可看到新技能（loader.ts）。

此外，通过 marketplace 安装的用户技能存放在~/.html-anything/skills/，经 registry.ts 以pkg-<owner>-<repo>--<originalId>命名空间 ID 合并进同一注册表，安装/卸载后调用invalidateSkillsCache()或refreshTemplates()即可让选型器即时更新（index.ts）。

六、要点速查

• 模板定位：resume-modern是面向求职的 A4 单页极简简历技能，主打「打印 / 导出 PDF」场景，scenario: personal，recommended: 12。
• A4 容器：width:210mm; min-height:297mm; margin:0 auto，内边距 16-20mm，预览带柔和阴影、打印时移除。
• 两栏布局：左 60%（经历/项目）右 40%（技能/语言/获奖），Tailwindgrid-cols-12+col-span-8/4实现。
• 视觉语言：黑白灰 + 单一深蓝 accent#1f4d8f；章节标题 small caps + 短 accent 线；bullet 用主题色小方块；时间区间右对齐、tabular-nums对齐数字。
• 打印适配：@media print去背景、去阴影、保留颜色，可直接打印或导出 PDF。
• 运行机制：frontmatter 由 loader.ts 解析 →/api/templates提供元数据、/api/templates/[id]/example提供示例 →assemblePrompt合并全局设计指令与模板 body → AI agent 流式输出单文件 HTML；CLI 侧由 skills-loader.ts + prompt-assemble.ts 保证行为一致。
• 扩展方式：新增文件夹 + SKILL.md 即注册新技能，无需改 TS 代码；recommended越小推荐位越靠前，未知 scenario 键会自动落入「other」分组。

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成