像 vibe coding 一样编辑你的简历:告诉 AI 你想怎么改,它直接修改网页简历,再一键导出为 PDF。
VibeResume 是一个 AI 友好、网页优先、可导出 PDF 的简历模板仓库。你不需要在 Word、LaTeX 或浏览器打印预览里反复对齐版式;把简历维护成 HTML + CSS,让 AI 帮你改内容和排版,然后用脚本把网页看到的布局稳定导出为一页或两页 PDF。
- 示例网页:打开
index.html - 示例 PDF:标准单页 · 高密度双页
- AI 使用说明:skills/vibe-resume-editor/SKILL.md
传统简历维护经常卡在三个地方:
- 简历内容想让 AI 改,但 Word / PDF 不适合 AI 直接编辑。
- 网页看起来正常,浏览器“打印成 PDF”后版式却错位。
- 针对不同岗位微调简历时,内容、排版、PDF 导出很难形成稳定闭环。
VibeResume 的思路是:把网页作为简历源文件,把 AI 当作编辑器,把 PDF 当作构建产物。
- 像 vibe coding 一样编辑简历:直接告诉 AI 目标岗位、修改方向和版式要求,让它修改
index.html与styles.css。 - 网页即源文件:简历内容、布局、图标、链接都在静态 HTML/CSS 中维护,天然适合 Git 版本管理。
- 一键导出 PDF:使用 Chromium 渲染网页的
screen布局;一页模板动态测量.page高度,双页模板识别.resume-page并按页导出。 - 一页 / 两页模板:根目录提供标准一页模板,
templates/dense-two-page/提供高密度技术简历,可保留一页或扩展为两页。 - 避免打印错位:不依赖手动浏览器打印,不触发不可控的纸张边距、分页、缩放和
@media print差异。 - AI 配套 Skill:仓库内置
vibe-resume-editor,可以作为 Codex-style skill 即插即用。 - 开源项目友好:包含 README、License、示例 PDF、预览截图、导出脚本、依赖锁定和 mock 示例内容。
Important
浏览器只负责预览 HTML,不负责生成最终交付 PDF。请勿把浏览器“打印 / 另存为 PDF”的结果作为正式简历;最终 PDF 必须通过本项目官方导出脚本生成。
安装依赖:
npm install本地预览:
npm run preview然后访问:
http://localhost:4173
导出 PDF:
npm run export:pdf默认输出:
export/vibe-resume-demo.pdf
导出高密度双页模板:
npm run export:pdf:dense-two-page输出:
export/vibe-resume-dense-two-page-demo.pdf
也可以指定输出路径:
./export-pdf.sh export/my-resume.pdf通用脚本也可以指定模板 HTML:
./export-pdf.sh export/my-two-page-resume.pdf templates/dense-two-page/index.html- 文件:
index.html+styles.css - 适合:经历较少、强调快速扫描、默认一页投递的简历。
- 导出:
npm run export:pdf
- 文件:
templates/dense-two-page/index.html+templates/dense-two-page/styles.css - 适合:算法、AI Agent、基础设施、研究与开源经历较多的候选人。
- 风格:白底、高密度正文、蓝色章节标题、细分隔线、浅色 Logo 标题条和详细技术 bullet。
- 页数:默认示例为两页;删除第二个
.resume-page后,同一导出器会自动生成一页 PDF。 - 导出:
npm run export:pdf:dense-two-page
当用户明确要求两页简历时,配套 Skill 会默认选择这个模板;未指定页数时仍沿用根目录的一页模板。
如果脚本找不到浏览器,可以手动指定 Chrome / Chromium:
CHROME_PATH=/path/to/chrome ./export-pdf.sh推荐工作流:
- 把你的目标岗位、目标公司、简历语言、已有经历和想强调的能力告诉 AI。
- 让 AI 直接修改
index.html,把 mock 内容替换成你的真实简历。 - 让 AI 调整
styles.css,控制密度、字号、宽度、间距、图标和模块顺序。 - 在浏览器里预览,或者把截图发给 AI 继续微调。
- 运行
npm run export:pdf,检查 PDF 是否仍是一页、内容是否完整。 - 针对不同 JD 重复这个过程,形成多个岗位版本。
示例 prompt:
请基于这个模板帮我制作 AI Agent 工程实习简历。
保持一页 PDF,突出 tool calling、RAG、Agent runtime、评测和工程化能力。
语气正式,不要堆关键词,不要编造我没有做过的经历。
仓库内置一个 Codex-style skill:
skills/vibe-resume-editor/SKILL.md
安装到本机 Codex:
mkdir -p ~/.codex/skills
cp -R skills/vibe-resume-editor ~/.codex/skills/新开一个 Codex 会话后可以直接说:
使用 vibe-resume-editor skill,把这份 Vibe 简历改成我的真实后端开发实习简历,并导出一页 PDF。
如果你的 AI 工具不支持 Codex skills,也可以把 SKILL.md 的内容复制到对话中作为项目说明。
这个仓库里的简历内容是模板演示用 mock 数据。
- 姓名、学校、电话、邮箱、奖项、实习角色、项目描述、日期和技能均为虚构示例。
assets/avatar.png是 AI 生成头像,不是真实人物证件照。- 高密度双页模板使用字节跳动、快手、美团和哔哩哔哩作为公司栏示例,并明确标注
Mock 模拟经历;所有实习内容与指标均为虚构演示。 - MiniCode 作为真实开源项目彩蛋保留:https://github.com/LiuMengxuan04/MiniCode。你可以替换成自己的开源项目、论文、产品或作品集。
VibeResume 负责最后一公里:把简历内容维护成漂亮网页,并稳定导出 PDF。它可以和下面两个项目组成完整求职材料流水线:
- 鼠鼠实习妙妙工具:AI 驱动的实习项目准备工具包。它可以根据目标 JD 选择 GitHub 项目、审计代码仓库、规划运行路径、设计可面试改造点,并生成 STAR 简历项目、核心代码讲解、面试 Q&A 和展示材料。
- 鼠鼠实习简历优化器:面向实习材料的简历整理工具。它把代码仓库、项目总结和业务背景等散乱材料先做成果审计,再按目标 JD 排序,生成简历 bullet、项目总结、STAR 草稿、面试 Q&A、风险检查清单和投递前检查表。
组合流程可以是:
shushu-internship-tool
-> 规划 / 构建 / 理解一个能投递、能面试的项目
shushu-internship-resume-optimizer
-> 把项目证据、业务背景和经历材料整理成可投递表达
VibeResume
-> 让 AI 修改网页简历,并导出稳定的一页或两页 PDF
公司和项目 Logo 是可选项。没有合适图标时,直接保留纯文本公司名即可,简历仍然应该完整、正式。
需要公司 Logo 时,Agent 应主动建议用户打开 Iconfont 手动搜索、核对并下载 SVG,再将文件上传给 Agent。Agent 不应代替用户在 Iconfont 上凭关键字猜选,也不应用产品 Logo 冒充公司 Logo。如有公司官方品牌或媒体素材库,也可优先使用。
需要 AI 模型、产品或供应商图标时,先阅读 LobeHub Icons 官方使用指南。LobeHub 标准流程是:
- 安装
@lobehub/icons。 - 查询包导出的
toc,核对 PascalCaseid、品牌色和param.hasColor/hasBrandColor等变体。 - 使用
getLobeIconCDN(id.toLowerCase(), { format: 'svg', type: 'color', cdn: 'unpkg' })生成静态 SVG 地址。 - 把选定 ID 加入
scripts/sync-lobe-icons.mjs,再运行npm run sync:logos将 SVG 下载到assets/logos/;正式简历只引用本地文件,不热链 CDN。
如果要使用矢量图:
- 自己上传 SVG 到
assets/logos/并在index.html中引用。 - 让 Agent 按上述官方 Skill 流程在 https://lobehub.com/icons 和
toc中确认公司、产品、框架或开源项目图标。
当前双页示例中,字节跳动、快手和美团使用用户从 Iconfont 手动下载后提供的 SVG;哔哩哔哩使用 @lobehub/icons 的 Bilibili.Color。公司栏背景、左侧强调色与 Logo 主色呼应。公司名、Logo 和商标归各自权利方所有。
双页模板的 Logo 应保持透明直贴,不添加白色底座、白边、额外描边或装饰圆角。不要只机械统一 CSS 宽高:应根据 SVG 自带留白逐枚校准,使实际图形的视觉高度约占 44px 公司栏的 75%–80%。当前显示盒约为 35–39px;窄长图形可适度加宽,但不得拉伸或裁切。
.
├── assets/
│ ├── logos/
│ │ ├── bilibili-color.svg
│ │ ├── bytedance-iconfont.svg
│ │ ├── huawei-color.svg
│ │ ├── kuaishou-iconfont.svg
│ │ └── meituan-iconfont.svg
│ ├── fonts/
│ │ ├── eb-garamond-regular.woff2
│ │ ├── eb-garamond-semibold.woff2
│ │ └── eb-garamond-bold.woff2
│ ├── avatar.png
│ ├── minicode-logo.svg
│ └── preview.png
├── export/
│ ├── vibe-resume-demo.pdf
│ └── vibe-resume-dense-two-page-demo.pdf
├── skills/
│ └── vibe-resume-editor/
│ └── SKILL.md
├── scripts/
│ ├── export-pdf.mjs
│ └── sync-lobe-icons.mjs
├── templates/
│ └── dense-two-page/
│ ├── index.html
│ ├── preview.png
│ ├── preview-page-1.png
│ ├── preview-page-2.png
│ ├── styles.css
│ └── README.md
├── export-pdf.sh
├── index.html
├── styles.css
├── package.json
└── README.md
浏览器打印通常会从 screen 媒体切换到 print 媒体,触发不同的纸张大小、分页、边距、缩放、字体渲染和 @media print 规则,所以导出的 PDF 经常和网页预览不一致。
VibeResume 的导出脚本会打开所选模板 HTML,强制使用 screen 布局,隐藏工具栏;一页模板会测量 .page 的实际高度,分页模板会识别 .resume-page 并保持显式分页。这样生成的 PDF 才能稳定复现网页布局。
因此请严格区分:
- 浏览器:只用于查看和调试网页效果。
npm run export:pdf/npm run export:pdf:dense-two-page/./export-pdf.sh:用于生成最终交付 PDF。
无论是一页还是两页模板,正式 PDF 都必须走项目官方导出脚本。
VibeResume 的灵感来源之一,是与 he11x / kexin 的聊天交流。感谢这些关于 AI、简历维护和 vibe coding 工作流的讨论带来的启发。
VibeResume is a vibe-coding friendly web-to-PDF resume template repository. It includes a standard one-page template and a dense technical template that supports one or two pages.
- AI-editable resume: describe what you want, and let an AI agent update the HTML/CSS resume directly.
- Web-first source: content, layout, links, icons, and styling are all version-controlled as static files.
- Stable PDF export: Chromium renders the screen layout and exports either a measured continuous page or explicit
.resume-pagepages. - One-page and two-page layouts: use the root template for a standard one-page resume, or
templates/dense-two-page/for a dense technical resume. - Print mismatch avoidance: no manual browser print workflow, no unexpected print-media pagination.
- Codex-style skill included:
skills/vibe-resume-editor/SKILL.mdgives agents project-specific editing and validation rules. - Open-source ready: MIT license, badges, preview screenshot, sample PDF, export script, and mock demo content.
Important: Use the browser only to preview the HTML. Never deliver a PDF produced by browser Print / Save as PDF. Generate the final PDF with the repository's official export scripts.
npm install
npm run preview
npm run export:pdf
npm run export:pdf:dense-two-pageDefault PDF output:
export/vibe-resume-demo.pdf
- Share your target role, target JD, resume language, and raw experience notes with an AI assistant.
- Ask it to replace the mock content in
index.htmlwith your real resume. - Ask it to tune density, section order, typography, spacing, and icons in
styles.css. - Preview the page, send screenshots back to the AI, and iterate.
- Run
npm run export:pdfand check the generated PDF.
The resume content in this repository is mock data. The avatar is AI-generated. The root one-page demo retains Huawei and Bilibili as demo-only placeholders; the dense two-page demo uses ByteDance, Kuaishou, Meituan, and Bilibili, each explicitly labeled Mock 模拟经历. None of the internship details describe real work experience. MiniCode is kept as a real open-source easter egg and can be replaced.
- shushu-internship-tool: turns a target JD into project selection, repository audit, runnable project planning, modification ideas, resume-ready STAR bullets, code explanations, interview Q&A, and presentation materials.
- shushu-internship-resume-optimizer: turns scattered internship materials into audited achievements, JD-ranked resume bullets, project summaries, STAR drafts, interview Q&A, risk checks, and application checklists.
Recommended pipeline:
shushu-internship-tool -> shushu-internship-resume-optimizer -> VibeResume
One source of inspiration for VibeResume was the conversation with he11x / kexin around AI, resume maintenance, and vibe-coding workflows.


