AI 简历制作系统 · Resume Builder
开源、免费、开箱即用的 Web 端在线简历制作系统，DeepSeek 大模型全流程加持。
一个 Web 端在线简历制作系统：左侧编辑、右侧实时预览，9 套 A4 模板自由切换，导出矢量文本 PDF（ATS 可解析）； 接入 DeepSeek 多模态大模型，支持一键生成、模块润色、JD 定制、旧简历导入识别； 简历数据保存在浏览器本地（localStorage），服务器不存简历正文，隐私友好。
在线体验：https://resume.mychun.cn （游客免登录，免费导出 1 张） 开源仓库：https://github.com/Chun556699/resume-builder （MIT 协议）
✨ 功能特性
编辑与排版
- 实时双栏预览：左侧表单编辑、右侧即时渲染，所见即所得
- 9 套 A4 模板：经典 / 现代 / 紧凑 / 优雅（衬线）/ 极简 / 侧栏（深色）/ 时间轴 / 极客（程序员高密度）/ 块状标签
- 自动排版：按纸张高度自动分页，空白模块自动隐藏，板块顺序自由拖拽
- 预览区直接编辑：点击任意文字就地修改（内联富文本），拖拽板块标题 / 经历条目自由排序
- 压缩到一页：内容超页时一键微调字号行高，自动压回一页
- 双语支持：界面语言与简历成品文案（板块标题等）均支持中 / EN 一键切换
高自由度 DIY
- 9 款中文字体 + 4 款英文字体（思源黑体系列 / 思源宋体 / 霞鹜文楷 / 阿里巴巴普惠体 / 得意黑 / 思源柔黑……全部免费商用授权），中英文可分别单独设置
- 8 种主题色、字号（10–18px）、行高（1.15–2.0×）自由调节
- 头像：圆形 / 矩形切换，48–160px 大小可调
- 批量样式：勾选多个模块，一键同时应用加粗 / 字号± / 颜色 / 清除格式
- 局部样式：预览区框选文字，弹出工具栏直接加粗 / 斜体 / 下划线 / 字号 / 颜色
多格式导出
| 格式 | 说明 |
|---|---|
| 矢量文本版，文字可复制检索、矢量高清，招聘系统 ATS 可精确解析 | |
| 🖼 PNG | html-to-image 高清导出（约 400+ DPI） |
| 📦 JSON | 简历数据备份 / 恢复（免费） |
| 🖨 打印 | 浏览器打印 / 另存为 PDF |
🤖 AI 能力（DeepSeek 多模态）
- ✨ 一键生成完整简历：几句话描述背景，直接产出结构化简历初稿
- 🪄 模块润色：个人简介 / 工作经历 / 项目经历 / 教育经历 / 技能，逐项给出润色建议
- ✍️ 语言润色：大白话写进去，AI 自动改成专业、量化的简历语言
- 🎯 JD 定制：粘贴目标职位描述，AI 针对性调整简历重点
- 🔄 以旧换新：上传旧简历（图片 / PDF，支持 BOSS直聘、智联招聘、前程无忧、猎聘、LinkedIn 等求职网站导出件），AI 自动识别并生成结构化简历
📸 界面截图
主界面——左侧编辑面板（个人信息 / 工作经历 / 教育经历 / 项目经历 / 专业技能 / 自定义模块 / 批量样式 / 布局排序），右侧 A4 实时预览，顶部工具栏一排搞定模板 / 字体 / 纸张 / 主题色 / 导出：
AI 助手面板——一键生成置顶默认展开，润色 / 语言优化 / JD 定制 / 旧简历导入一屏收纳：
🎨 9 套模板
侧栏（深色侧边栏，双栏排版）：
时间轴（经历沿时间线展开）：
极客（程序员高密度排版，一页塞下所有硬货）：
🏗️ 技术选型
动手前调研了 GitHub 上多个高星简历开源项目（reactive-resume 40k+ / open-resume 8.8k+ / sadanandpai/resume-builder 等），成功方案的技术栈高度一致，本项目站在同一条被验证过的路线上：
| 层 | 选型 | 理由 |
|---|---|---|
| 框架 | Next.js 14 (App Router) + React 18 + TypeScript | 主流；自带 API 路由，AI 密钥可服务端代理 |
| 样式 | Tailwind CSS | 所有成功项目一致采用 |
| 状态 | Zustand（+ persist） | 轻量，天然支持 localStorage 持久化 |
| @react-pdf/renderer | 客户端直接生成矢量 PDF | |
| 图片 | html-to-image | 预览 DOM 导出 PNG |
| PDF 解析 | pdfjs-dist | 旧简历 PDF 转图片供视觉识别 |
| AI | DeepSeek（OpenAI 兼容 API） | 服务端代理，密钥不出服务器 |
架构上的几个坚持：
- 密钥零暴露：DeepSeek API Key 只存在于服务端
.env.local，前端一律走/api/ai、/api/ocr路由代理 - 数据本地化：简历数据存浏览器 localStorage，服务器不落简历正文
- 无状态部署：标准 Next.js 应用，可部署到任意 Node 环境（云服务器 / Docker / Vercel 一键部署）
🧠 核心技术点与踩坑
1. 矢量文本 PDF（ATS 友好）
不少在线简历工具导出的 PDF 其实是「截图式」图片版，招聘系统的 ATS（简历解析系统）读不出文字。本项目用 @react-pdf/renderer 在客户端直接排版生成矢量文本 PDF：内嵌中文字体、文字可复制检索、任意缩放不失真；DOM 栅格化的图片版仅作兜底回退。文本层可用 pdf 解析库直接验证。
2. 预览与导出的字体一致性
预览端通过 @font-face 按需加载所选字体，PDF 端注册同一份字体文件渲染——中英文分别设置、导出与预览像素级一致，「所见即所得」不是一句口号。
3. 打印空白坑
预览区用 transform: scale() 缩放适配屏幕后，直接 window.print() 会打出空白页（任何靠 position: absolute 逃逸缩放的打印方案都不可用）。解法：把简历 DOM 克隆进隐藏 iframe，在无缩放环境里调用 iframe 的打印。
4. Next.js 静态化吞掉环境变量
读环境变量的无参 GET 路由（比如「当前启用哪些支付通道」）会被 next build 静态化，把构建时的空 env 内联进产物——线上永远返回构建时的旧值。解法：路由显式声明 export const dynamic = "force-dynamic"。
5. 小内存服务器构建 OOM
1 核 1.7G 的小机器上 next build 容易 OOM（还偶发 uv_cwd ENOENT 瞬时崩溃，重跑即过）。解法：本地构建 output: "standalone" 产物后上传，服务器只负责 pm2 start 运行；依赖安装慢时复用上一次完整 node_modules 再定向补装增量包。
💰 账号与计费
- 账号密码注册 / 登录，密码 scrypt 加盐散列，会话 token 鉴权；每账号绑定一个 6 位公开短号 UID，充值对账一目了然
- 游客免登录可完整制作简历，免费导出 1 张（PDF / PNG / 打印）；登录用户同样首张免费
- 导出额度 6.6 元 / 次、AI 额度 1 元 / 次，两种额度相互独立、按次购买
- 双支付通道：国内 ZPAY 支付宝（人民币）+ 国际 Creem（美元，面向海外用户）；回调均验签 + 金额校验 + 幂等发放，两通道共用同一张订单表
购买弹窗先选择支付通道：
🚀 部署与运维
线上跑在一台 1 核小破阿里云 ECS 上：Nginx 反代 + PM2 守护 + Let's Encrypt HTTPS（随博客定时任务自动续期），账号 / 订单数据目录独立于应用目录，版本更新不丢数据。仓库同时提供 Dockerfile 与 Vercel 部署说明，clone 下来填一个 DeepSeek API Key 就能跑起属于自己的实例。
写在最后
从模板引擎、内联富文本编辑、矢量 PDF，到账号体系、双通道支付、生产部署，这个项目把一个独立全栈产品该踩的坑基本踩了一遍，也是「AI 应用工程化」的一次完整实践：大模型不只是挂个聊天框，而是拆成一键生成、润色、JD 定制、多模态导入这些嵌入工作流的功能点。
如果你最近正好要更新简历，或者想找一个带 AI 的开源简历项目二次开发，欢迎来试试：
觉得有用的话，点个 Star ⭐，或者留言告诉我你想加的功能。