AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载导读本文围绕 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目录下包含三份文件文件作用SKILL.md模板本体frontmatter元数据 prompt body给 AI agent 的版式指令example.md可选示例输入内容展示该模板期望的用户输入格式example.html可选预渲染的预览页在选型器中内联展示成品效果从源码结构看loader.tsloadSkillFromDir会同时读取这三份文件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 ?? iden_name ?? idloader.ts保证选型器在中文界面显示「极简简历」、英文界面显示「Modern Resume」。emoji选型器卡片图标缺省回退为✨。categoryresume模板的分类标识。scenariopersonal。这是选型器按场景筛选的键scenarios.ts 中定义了 12 个规范场景键marketing / engineering / operations / product / design / finance / sales / hr / personal / education / creator / videoresume-modern归入「personal个人」场景。aspect_hintA4 (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-age5——既避免频繁重取又保证开发者新增技能目录后刷新页面即可看到新模板。三、版式规范逐条拆解从 A4 容器到两栏网格SKILL.md 的 prompt body 是整份文档的核心共 7 条版式指令。下面逐条结合 example.html 的落地实现来解读。3.1 A4 容器模拟容器宽度模拟 A4:w-[210mm] min-h-[297mm] mx-auto, 内边距 16-20mm。example.html 中对应的实现是div classpage…/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 classtext-[42px] font-bold tracking-tight leading-none mb-3林清禾/h1 div classtext-[12.5px] text-[#1f4d8f] font-medium tracking-wide mb-3高级前端工程师 · Senior Frontend Engineer/div div classflex flex-wrap items-center gap-x-4 gap-y-1 text-[11.5px] text-[#5a564e] span 上海/spanspan classopacity-30|/span span✉ qinghe.linexample.com/spanspan classopacity-30|/span spangithub.com/qinghelin/spanspan classopacity-30|/span spanlinkedin.com/in/qinghe/span /div实现细节姓名用 42px大于 text-4xl 的 36px更突出加粗、紧凑字距职位行用主题强调色#1f4d8f标注联系方式行通过span classopacity-30|/span渲染 30% 透明度的细竖线作为分隔符并且用flex-wrap保证在窄屏或缩放下自动换行。头部下方以 1px 的#e7e5e0边框线收尾形成与正文的视觉分区。3.3 主体两栏布局60/40 黄金配比主体两栏可选: 左 60% 主线经历/项目/教育, 右 40% 副线技能/语言/获奖。example.html 用 Tailwind 的 12 列栅格实现div classgrid grid-cols-12 gap-8 div classcol-span-8 !-- 工作经历 / 公开项目 -- /div div classcol-span-4 !-- 教育 / 核心技能 / 语言 / 兴趣 -- /div /div左栏 8/12 66.7%、右栏 4/12 33.3%gap-832px留出呼吸感。左栏承载职业主线——工作经历、公开项目右栏承载辅助信息——教育、核心技能、语言、兴趣。这与 SKILL.md 的 60%/40% 指引高度一致实现取整后为 67%/33%属于该指引的可接受变体。3.4 章节标题small caps 短 accent 线章节标题: small caps 风格, 上方一条短 accent 线 (w-8 h-0.5)。h2span classaccent-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:uppercaseletter-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 classrole divspan classfont-semibold text-[14.5px]Acme AI/span span classtext-[#5a564e] text-[13px]— 高级前端工程师/span/div div classmeta2023.06 - 至今/div /div ul classbullets li设计并主导了内部 AI 编辑器产品 (从 0 到 1), 6 个月内 DAU 达到 span classfont-semibold accent12k/span, 内部 NPS span classfont-semibold accent68/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用途色值主 accent章节线、姓名行、高亮数字、技能标签#1f4d8f深蓝正文主色#1a1a1a正文次级色#262421弱化文字时间、元信息#5a564e/#6b6760页面底色 / 纸面#e9e6df预览环境 /#fff技能标签底色#eef2f8技能标签用「浅蓝底 深蓝字」的胶囊样式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.linexample.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 链路从源码看示例与模板的联动链路是选型器调用useTemplates()index.ts获取/api/templates返回的元数据列表用户点击某模板的「Preview」时fetchTemplateExample(id)index.ts请求 GET /api/templates/[id]/example该路由通过loadSkill(id)一次性取回contentexample.md与htmlexample.html省去两次往返用户将真实简历内容粘贴进输入区后/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 中选用启动 next 应用next dev打开模板选型器在「personal」场景或搜索「简历 / resume」即可找到「极简简历」卡片其recommended: 12使其出现在推荐区点击预览可看到 example.html 的成品效果与 example.md 的输入样例由/api/templates/resume-modern/example提供将个人真实简历按 example.md 的 Markdown 结构组织好交给 AI agent 生成得到w-[210mm] min-h-[297mm]的 A4 单文件 HTML在浏览器中打印或导出 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.htmlmetaFromDir会自动检测hasMd/hasHtml并填充到 pickerloader.ts开发模式下listSkills()不做缓存刷新即可看到新技能loader.ts。此外通过 marketplace 安装的用户技能存放在~/.html-anything/skills/经 registry.ts 以pkg-owner-repo--originalId命名空间 ID 合并进同一注册表安装/卸载后调用invalidateSkillsCache()或refreshTemplates()即可让选型器即时更新index.ts。六、要点速查模板定位resume-modern是面向求职的 A4 单页极简简历技能主打「打印 / 导出 PDF」场景scenario: personalrecommended: 12。A4 容器width:210mm; min-height:297mm; margin:0 auto内边距 16-20mm预览带柔和阴影、打印时移除。两栏布局左 60%经历/项目右 40%技能/语言/获奖Tailwindgrid-cols-12col-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 流式输出单文件 HTMLCLI 侧由 skills-loader.ts prompt-assemble.ts 保证行为一致。扩展方式新增文件夹 SKILL.md 即注册新技能无需改 TS 代码recommended越小推荐位越靠前未知 scenario 键会自动落入「other」分组。赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐html-anything resume-modern 技能解析从一份 Markdown 简历到 A4 单页极简简历 HTMLhtml anything resume modern 技能解析从一份 Markdown 简历到 A4 单页极简简历 HTML 本文围绕 html anythAI 应用人工智能AI AgentAI 写作媒体生成终极指南在CPU环境下优化MMS-TTS-CPU的语音合成速度终极指南在CPU环境下优化MMS TTS CPU的语音合成速度 MMS TTS CPU是Facebook开源的Massively Multilingual S终极解决方案RevokeMsgPatcher 2.1 - Windows三大通讯软件防撤回完整指南终极解决方案RevokeMsgPatcher 2.1 Windows三大通讯软件防撤回完整指南 还在为重要消息被撤回而烦恼吗当朋友或同事突然撤回消息时你是桌面应用即时通讯上一篇从零开始用Docker快速部署Plex媒体服务器监控系统下一篇解决macOS音频失真gh_mirrors/ma/macos-virtualbox音频配置高级技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
