1. 为什么“排得对”比“写得出”难十倍用 Vibe Coding 做简历工具这件事我前前后后折腾了大概三周。最开始的想法特别简单现在 AI 写代码这么顺手我描述一下需求让它帮我把 HTML、CSS、JS 都生成出来一个简历生成器不就搞定了吗结果真正动手之后才发现写代码反而是整个流程里最轻松的部分真正让人抓狂的是另一个问题——简历排得对不对。这个“排得对”包含了好几层意思。第一层是视觉上的对齐左右两栏的边距是不是一致时间线的圆点和文字基线是不是齐平项目符号的缩进在不同浏览器里是不是一样。第二层是内容上的逻辑顺序教育经历和工作经历谁在前谁在后技能标签放在侧边栏还是主栏这些看起来是设计问题实际上直接影响 HR 筛选简历时的阅读路径。第三层是导出后的保真度你在浏览器里看着漂漂亮亮的页面转成 PDF 之后可能就面目全非分页位置不对、字体被替换、颜色偏差这些都是家常便饭。我一开始用 Vibe Coding 的方式让 AI 直接生成一个完整的 HTML 简历模板。出来的东西乍一看挺像样但仔细一检查就发现各种问题!doctype htmlhtml langzh-cnheadmeta charsetutf-8meta nameviewport...这些基础结构倒是没问题可是 CSS 里用了大量绝对定位导致内容一多就重叠打印样式完全没有考虑media print里空空如也更离谱的是有些 AI 生成的代码里居然混进了/bodyscriptwindow.onloadfunction(){setTimeout((){window.close();},500);}/script/html这种莫名其妙的自动关闭脚本估计是从某个弹窗广告页面学来的。所以这篇文章我想聊的不是怎么用 Vibe Coding 快速生成一个简历页面而是怎么让生成出来的简历真正“排得对”。如果你也在做类似的事情或者打算用 AI 辅助自己做一个简历工具这里面的坑我基本都踩过一遍了希望能帮你省点时间。2. 整体设计思路把“排版”当成一等公民2.1 为什么不能直接让 AI 生成完整页面很多人用 Vibe Coding 做工具的第一个直觉是我描述需求AI 输出完整代码我复制粘贴就完事了。这个思路在做一个简单页面的时候没问题但简历工具不行。原因很简单简历的排版规则非常密集而且很多规则是隐性的、依赖上下文的。举个例子你告诉 AI“帮我做一个两栏简历左边放联系方式右边放工作经历”。AI 会给你生成一个 flex 布局或者 grid 布局看起来没问题。但是当你实际填入内容的时候你会发现如果左边的联系方式只有三行右边的工作经历有二十行整个页面的视觉重心就歪了。左边一大片空白右边密密麻麻这种简历拿出去第一印象就打了折扣。再比如AI 生成的代码通常不会考虑内容溢出的情况。你写“负责公司核心产品的后端架构设计”一行放得下。但你写“负责公司核心产品的后端架构设计、数据库优化、接口性能调优以及团队代码审查流程的建立”这一行就放不下了。AI 生成的 CSS 如果没有设置好word-break、overflow-wrap或者hyphens长文本就会直接撑破容器把整个布局搞乱。所以我的做法是不让 AI 一次性生成完整页面而是让它生成“排版规则”和“组件模块”我自己来组装。具体来说我会把简历拆成几个独立的区块头部信息区、教育经历区、工作经历区、项目经历区、技能标签区。每个区块单独让 AI 生成 HTML 结构和对应的 CSS然后我在一个主文件里把它们拼起来。这样做的好处是每个区块的排版逻辑是独立的我可以单独调整不会牵一发而动全身。2.2 技术选型为什么最后还是回到了原生 HTML CSS中间我试过用一些前端框架比如 React 或者 Vue想着组件化开发会更方便。但很快我就放弃了。原因有两个第一简历工具最终是要导出 PDF 的而大部分前端框架的 SSR 方案在导出 PDF 时都会遇到样式丢失的问题第二简历的交互其实非常少无非就是填表单、预览、导出用框架有点杀鸡用牛刀。最后我选择的是原生 HTML CSS 少量原生 JavaScript。这个选择看起来有点“复古”但对于简历工具来说它有几个不可替代的优势打印样式可控原生 CSS 的media print规则可以精确控制打印时的分页、边距、字体大小这是很多框架做不到的。导出 PDF 方便浏览器的打印功能可以直接把 HTML 转成 PDF不需要额外的库。虽然有一些细节需要调但整体流程是最短的。部署简单一个 HTML 文件加上一个 CSS 文件再加一个 JS 文件扔到任何静态服务器上都能跑。甚至可以直接在本地打开不需要构建工具。当然原生方案也有缺点比如代码复用性差、状态管理麻烦。但对于一个个人用的简历工具来说这些缺点完全可以接受。而且用 Vibe Coding 的方式AI 可以帮我快速生成重复的 HTML 结构我只需要关注排版规则就行了。2.3 核心思路用“约束”代替“自由”做简历工具最大的误区就是给用户太多自由。一旦用户可以随意拖拽、随意调整字体大小、随意改变颜色排版就一定会乱。我的思路是把排版规则固化下来用户只能在一个受约束的框架里填内容。具体来说我定义了这样一套约束约束项规则原因页面宽度固定 210mmA4 宽度保证导出 PDF 时尺寸一致左右边距固定 15mm打印安全边距避免内容被裁切主栏宽度固定 120mm保证长文本有足够的换行空间侧栏宽度固定 60mm放联系方式、技能标签等短内容字体大小正文 10.5pt标题 14pt打印可读性最佳区间行高1.5 倍保证密集文本的阅读舒适度颜色仅限深灰、中灰、主题色避免打印时颜色失真这些数字不是随便定的。A4 纸的宽度是 210mm左右各留 15mm 的边距中间内容区就是 180mm。主栏 120mm 加上侧栏 60mm刚好填满。10.5pt 的字体在打印时大约相当于 3.7mm 的字高一行能放大约 30 个中文字符这个密度对于简历来说是比较合适的。有了这些约束之后AI 生成代码的时候就有了明确的边界。我会在 prompt 里直接把这些参数写进去比如“页面宽度 210mm左右边距 15mm主栏 120mm侧栏 60mm正文 10.5pt行高 1.5”。这样生成出来的代码排版基本不会跑偏。3. 核心细节解析那些 AI 不会主动告诉你的排版陷阱3.1 分页控制简历导出 PDF 的第一大坑简历导出 PDF 时最让人头疼的就是分页。你肯定见过那种简历工作经历写到一半突然跳到下一页中间留下一大片空白。或者更糟糕的一行文字被硬生生切成两半上半部分在上一页下半部分在下一页。这个问题的根源在于浏览器默认的分页行为是“能塞多少塞多少”它不会考虑内容的逻辑完整性。要解决这个问题必须手动控制分页。CSS 里有两个关键属性break-inside和break-before。/* 禁止在区块内部断页 */ .resume-section { break-inside: avoid; page-break-inside: avoid; /* 兼容旧版浏览器 */ } /* 强制在某个区块前分页 */ .new-page { break-before: page; page-break-before: always; }这两个属性看起来简单但实际用起来有很多细节。比如break-inside: avoid并不是万能的如果一个区块的高度超过了一页浏览器还是会强行断开。所以我在设计的时候会尽量保证每个区块的高度不超过一页的 80%。如果某个区块内容特别多我会把它拆成两个子区块分别控制分页。还有一个容易被忽略的点打印时的页边距。浏览器打印对话框里有一个“边距”选项默认可能是“默认”或者“无”。如果用户选择了“无”那么你在 CSS 里设置的page边距就会被覆盖内容可能会贴到纸张边缘。我的做法是在page里明确设置边距并且在页面上给用户一个提示告诉他们打印时选择“默认边距”或者“自定义边距”并设置为 15mm。page { size: A4; margin: 15mm; }注意page的margin和页面内容的padding是两回事。page的边距是纸张边缘到内容区的距离而padding是内容区内部的留白。两者叠加才是最终的视觉效果。我一般会把page的边距设为 0然后在body或者容器上设置padding: 15mm这样控制起来更直观。3.2 字体渲染为什么你的简历在别人电脑上变丑了字体是简历排版的另一个大坑。你在自己电脑上用的字体别人的电脑上不一定有。如果 CSS 里只写了font-family: PingFang SC而对方的电脑是 Windows 系统没有这个字体浏览器就会回退到默认字体可能是宋体可能是微软雅黑排版效果完全不一样。解决这个问题的标准做法是字体栈按优先级列出多个字体让浏览器依次尝试。body { font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; }这个字体栈的顺序是苹方macOS→ 冬青黑体macOS 旧版→ 微软雅黑Windows→ 文泉驿微米黑Linux→ 系统默认无衬线字体。这样无论在哪个系统上都能找到一个合适的字体。但是如果你对排版有更高的要求比如希望简历在任何设备上看起来完全一致那就需要考虑嵌入字体。嵌入字体的方法是把字体文件转成 base64 编码直接写在 CSS 里。这样做的好处是字体跟着文件走不依赖系统。缺点是文件体积会变大一个中文字体动辄几 MB转成 base64 之后会更大。我的折中方案是只嵌入标题字体正文字体用系统字体栈。标题字数少嵌入后体积增加有限而且标题的视觉一致性最重要。正文用系统字体栈虽然不同系统会有细微差异但整体可读性是有保证的。font-face { font-family: ResumeTitle; src: url(data:font/woff2;base64,d09GMgABAAAAA...) format(woff2); font-weight: bold; font-display: swap; } h1, h2, h3 { font-family: ResumeTitle, PingFang SC, Microsoft YaHei, sans-serif; }3.3 颜色与打印为什么你的彩色简历打出来是灰的很多人在简历里用各种颜色来区分模块比如蓝色的标题、灰色的分割线、浅色的背景块。在屏幕上看着挺好看但打印出来就变成了深浅不一的灰色有些浅色甚至完全看不见。这是因为大部分打印机是黑白打印的彩色会被转换成灰度。不同的颜色转换成灰度后的明度是不一样的。比如纯红色#FF0000转换成灰度后大约是 30% 的灰而纯蓝色#0000FF转换成灰度后大约是 11% 的灰。如果你用浅蓝色做背景打印出来可能几乎就是白色完全起不到区分的作用。我的做法是在打印样式里强制覆盖颜色。具体来说用media print把所有彩色都替换成灰度值并且确保对比度足够。media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .section-title { color: #333 !important; border-bottom: 1px solid #999 !important; } .skill-tag { background: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc !important; } }print-color-adjust: exact这个属性很重要它告诉浏览器在打印时保留背景色和背景图片。如果不加这个属性浏览器默认会去掉背景色以节省墨水你的浅色背景块就消失了。实操心得我一般会建议用户在导出 PDF 之前先用浏览器的“打印预览”功能检查一遍。打印预览里看到的效果基本就是最终 PDF 的效果。如果预览里发现颜色太浅或者分页不对可以及时调整。3.4 长文本处理中文换行的那些坑中文和英文的换行规则不一样。英文单词之间有空格浏览器可以在空格处换行。但中文没有空格浏览器默认的换行策略是按字符换行这本身没问题。问题出在中英文混排的时候。比如“负责公司核心产品的后端架构设计Java/Spring Boot”括号里的英文和斜杠浏览器可能会把它们当成一个整体导致换行时出现大片空白。要解决这个问题需要设置word-break和overflow-wrap。.resume-content { word-break: break-word; overflow-wrap: break-word; line-break: strict; text-align: justify; text-justify: inter-ideograph; }word-break: break-word允许在长单词内部换行overflow-wrap: break-word是它的标准写法。line-break: strict让浏览器遵循更严格的中文换行规则避免标点符号出现在行首。text-align: justify让文本两端对齐看起来更整齐但要注意text-justify: inter-ideograph是针对中文的优化让字间距而不是词间距被调整。还有一个细节数字和英文的字体。中文简历里经常会出现数字和英文如果和中文用同一个字体数字的宽度可能会不一致导致对齐问题。我的做法是给数字和英文单独指定一个等宽字体或者西文字体。.resume-content { font-family: PingFang SC, Microsoft YaHei, sans-serif; } .resume-content .en { font-family: Helvetica Neue, Arial, sans-serif; }然后在 HTML 里用span classen把英文和数字包起来。这样做虽然麻烦一点但排版效果会好很多。4. 实操过程从零搭建一个“排得对”的简历工具4.1 第一步定义数据结构在写任何 HTML 之前我先定义了一个 JSON 数据结构用来描述简历的内容。这样做的好处是内容和排版分离我可以随时替换数据而不影响排版。{ basics: { name: 张三, title: 高级后端工程师, email: zhangsanexample.com, phone: 13800138000, location: 北京, website: https://example.com }, education: [ { school: 某某大学, degree: 计算机科学与技术 本科, start: 2015-09, end: 2019-06, details: [GPA 3.8/4.0, 校级奖学金两次] } ], experience: [ { company: 某某科技, position: 后端工程师, start: 2019-07, end: 2022-06, details: [ 负责核心交易系统的架构设计与开发, 优化数据库查询性能将平均响应时间从 200ms 降低到 50ms ] } ], skills: [ { category: 编程语言, items: [Java, Python, Go] }, { category: 框架, items: [Spring Boot, MyBatis, gRPC] } ] }这个结构是我参考了 JSON Resume 标准之后简化而来的。JSON Resume 是一个开源的简历数据标准定义了一套通用的字段名和结构。用标准的好处是以后如果想换工具或者换模板数据可以直接迁移。4.2 第二步生成 HTML 骨架有了数据结构之后我让 AI 帮我生成 HTML 骨架。Prompt 大概是这样的请根据以下 JSON 数据结构生成一个简历的 HTML 骨架。要求页面宽度 210mm左右边距 15mm主栏 120mm侧栏 60mm。使用语义化标签每个区块用section包裹区块标题用h2。不要写内联样式所有样式放在单独的 CSS 文件里。AI 生成的骨架大概是这样的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三的简历/title link relstylesheet hrefresume.css /head body div classresume header classresume-header h1 classname张三/h1 p classtitle高级后端工程师/p ul classcontact lizhangsanexample.com/li li13800138000/li li北京/li /ul /header div classresume-body main classmain-column section classsection experience h2 classsection-title工作经历/h2 !-- 工作经历内容 -- /section section classsection education h2 classsection-title教育经历/h2 !-- 教育经历内容 -- /section /main aside classside-column section classsection skills h2 classsection-title技能/h2 !-- 技能内容 -- /section /aside /div /div /body /html这个骨架看起来很简单但它已经包含了几个关键决策用main和aside区分主栏和侧栏用section包裹每个区块用h2作为区块标题。这些语义化标签不仅对 SEO 友好更重要的是它们让 CSS 选择器更清晰后续调整排版的时候不容易出错。4.3 第三步编写核心 CSSCSS 是整个简历工具的灵魂。我把它分成几个部分基础重置、页面布局、区块样式、打印样式。基础重置部分我用了一个简化版的 reset*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; font-size: 10.5pt; line-height: 1.5; color: #333; background: #f5f5f5; }box-sizing: border-box是关键它让元素的宽度包含 padding 和 border这样计算布局的时候不容易出错。页面布局部分我用的是 flex 布局.resume { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 15mm; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .resume-body { display: flex; gap: 10mm; } .main-column { width: 120mm; flex-shrink: 0; } .side-column { width: 60mm; flex-shrink: 0; }这里用flex-shrink: 0是为了防止内容过多时两栏被压缩。gap: 10mm是主栏和侧栏之间的间距加上左右边距 15mm总共是 15 120 10 60 15 220mm比 A4 宽度 210mm 多了 10mm。这是因为我在.resume上设置了padding: 15mm所以实际内容区是 210 - 30 180mm。主栏 120mm 加上侧栏 60mm 正好 180mm中间的gap需要从主栏或者侧栏里扣。我一般会把主栏设为 115mm侧栏设为 55mm中间留 10mm 的间距。区块样式部分重点是标题和列表.section { margin-bottom: 6mm; break-inside: avoid; } .section-title { font-size: 14pt; font-weight: bold; color: #222; border-bottom: 2px solid #333; padding-bottom: 1mm; margin-bottom: 3mm; } .experience-item { margin-bottom: 4mm; } .experience-item .header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1mm; } .experience-item .company { font-weight: bold; font-size: 11pt; } .experience-item .date { color: #666; font-size: 9pt; } .experience-item ul { list-style: none; padding-left: 0; } .experience-item li { position: relative; padding-left: 4mm; margin-bottom: 1mm; } .experience-item li::before { content: •; position: absolute; left: 0; color: #666; }这里用::before伪元素来画项目符号而不是用list-style是为了更精确地控制符号的位置和颜色。position: relative和position: absolute的配合让符号可以独立于文本流定位。打印样式部分前面已经提到了一些这里补充完整的media print { body { background: #fff; font-size: 10.5pt; } .resume { width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none; } .section { break-inside: avoid; } .section-title { break-after: avoid; } a { text-decoration: none; color: #333; } }break-after: avoid是防止标题和后面的内容被分页隔开。如果标题在页面底部内容在下一页这个属性会让标题也移到下一页。4.4 第四步用 JavaScript 填充数据有了 HTML 骨架和 CSS 之后最后一步是用 JavaScript 把 JSON 数据填充进去。我写了一个简单的渲染函数function renderResume(data) { // 填充头部信息 document.querySelector(.name).textContent data.basics.name; document.querySelector(.title).textContent data.basics.title; const contactList document.querySelector(.contact); contactList.innerHTML ; [data.basics.email, data.basics.phone, data.basics.location] .filter(Boolean) .forEach(item { const li document.createElement(li); li.textContent item; contactList.appendChild(li); }); // 填充工作经历 const experienceSection document.querySelector(.experience); const experienceList experienceSection.querySelector(.list) || (() { const list document.createElement(div); list.className list; experienceSection.appendChild(list); return list; })(); experienceList.innerHTML ; data.experience.forEach(exp { const item document.createElement(div); item.className experience-item; item.innerHTML div classheader span classcompany${exp.company}/span span classdate${exp.start} - ${exp.end}/span /div div classposition${exp.position}/div ul ${exp.details.map(d li${d}/li).join()} /ul ; experienceList.appendChild(item); }); // 填充技能 const skillsSection document.querySelector(.skills); const skillsList skillsSection.querySelector(.list) || (() { const list document.createElement(div); list.className list; skillsSection.appendChild(list); return list; })(); skillsList.innerHTML ; data.skills.forEach(skill { const item document.createElement(div); item.className skill-item; item.innerHTML div classskill-category${skill.category}/div div classskill-tags ${skill.items.map(i span classskill-tag${i}/span).join()} /div ; skillsList.appendChild(item); }); }这个渲染函数虽然简单但已经足够用了。它的核心逻辑是找到对应的容器清空然后根据数据生成 DOM 元素。用innerHTML拼接字符串的方式虽然有一些性能问题但对于简历这种数据量很小的场景来说完全够用。实操心得在拼接 HTML 字符串的时候一定要注意转义。如果用户的简历内容里包含或者直接插入会导致 HTML 结构被破坏。我一般会写一个简单的escapeHtml函数来处理。function escapeHtml(str) { return str .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #39;); }4.5 第五步导出 PDF导出 PDF 我直接用浏览器的打印功能。在页面上放一个按钮点击后调用window.print()。document.querySelector(.export-btn).addEventListener(click, () { window.print(); });然后在 CSS 里用media print控制打印样式。这样做的好处是不需要引入任何第三方库浏览器的打印功能已经足够强大。而且用户可以在打印对话框里选择“另存为 PDF”保存下来的 PDF 是矢量格式放大不会模糊。当然浏览器打印也有一些限制。比如不同浏览器的打印效果会有差异Chrome 和 Firefox 的分页行为可能不完全一样。我的做法是在页面上给用户一个提示建议他们用 Chrome 浏览器导出 PDF因为 Chrome 的打印功能对 CSS 的支持最好。5. 常见问题与排查技巧实录5.1 问题速查表问题现象可能原因解决方法导出 PDF 后内容被裁切页面宽度超过 A4 尺寸检查.resume的宽度和 padding确保总宽度不超过 210mm分页位置不对没有设置break-inside给每个.section添加break-inside: avoid字体在别人电脑上变了没有设置字体栈使用font-family列出多个备选字体打印出来颜色太浅没有设置print-color-adjust添加print-color-adjust: exact长文本撑破容器没有设置word-break添加word-break: break-word和overflow-wrap: break-word标题和内容被分页隔开没有设置break-after给.section-title添加break-after: avoid侧栏内容太少主栏内容太多两栏高度不平衡调整内容分配或者用align-items: flex-start让两栏顶部对齐项目符号位置不对用了默认的list-style用::before伪元素自定义符号位置5.2 独家避坑技巧技巧一用“打印预览”代替“导出 PDF”来调试。每次调整 CSS 之后不要急着导出 PDF先用浏览器的打印预览功能看一眼。打印预览的渲染速度和 PDF 导出差不多但不需要生成文件调试效率更高。技巧二给每个区块加一个临时背景色。在调试布局的时候给.section加一个半透明的背景色比如background: rgba(255, 0, 0, 0.1)。这样你可以清楚地看到每个区块的边界方便判断间距和对齐是否正确。调试完之后再把背景色去掉。技巧三用outline代替border来调试。border会影响元素的尺寸计算而outline不会。所以在调试布局的时候用outline: 1px solid red来标记元素边界不会影响布局。技巧四固定行高避免内容多少导致的行高变化。简历里的行高一定要固定不要用line-height: normal或者百分比。用固定的line-height: 1.5或者具体的像素值这样无论内容多少行高都是一致的排版更稳定。技巧五用min-height而不是height。给.resume设置min-height: 297mm而不是height: 297mm这样如果内容超过一页页面会自动扩展不会出现内容被裁切的情况。技巧六测试不同长度的内容。在开发阶段一定要用不同长度的内容测试排版。比如工作经历只写一条和写十条看看布局会不会崩。我一般会准备三套测试数据短内容、中等内容、长内容分别测试。技巧七注意!doctype html的大小写。虽然 HTML 规范不区分大小写但有些工具或者编辑器可能会对!doctype html和!DOCTYPE html有不同的处理。我一般统一用大写!DOCTYPE html避免不必要的麻烦。技巧八html langzh-cn不要漏。这个属性告诉浏览器和屏幕阅读器页面的语言是中文对于字体渲染和断词规则都有影响。如果漏了浏览器可能会用英文的断词规则来处理中文导致换行位置不对。5.3 一个真实的排查案例有一次我发现导出的 PDF 里工作经历的最后一条总是被切掉一半。我检查了 CSSbreak-inside: avoid也加了但问题依旧。后来我用打印预览仔细看发现是因为.section的高度刚好超过了一页的剩余空间浏览器尝试把整个区块移到下一页但下一页也放不下所以只能强行断开。解决方法是把工作经历拆成两个.section每个.section包含一部分工作经历。这样每个区块的高度都小于一页break-inside: avoid就能正常工作了。这个案例告诉我break-inside: avoid不是万能的它只能保证区块不被断开但如果区块本身太高浏览器也无能为力。所以在设计的时候要尽量保证每个区块的高度不超过一页的 80%。6. 后续可以扩展的方向这个简历工具目前已经能满足我自己的需求了但还有一些可以扩展的方向。比如可以加一个“模板切换”功能让用户在不同的排版风格之间选择。实现思路是把 CSS 里的颜色、字体、间距等变量抽出来用 CSS 自定义属性CSS Variables管理切换模板的时候只需要替换一组变量值。:root { --primary-color: #333; --secondary-color: #666; --font-family: PingFang SC, Microsoft YaHei, sans-serif; --section-gap: 6mm; } .theme-blue { --primary-color: #1a56db; --secondary-color: #6b7280; }另一个方向是加一个“内容优化建议”功能。用 AI 分析用户填写的简历内容给出改进建议比如“这条工作经历缺少量化数据”、“这个技能标签和应聘岗位不匹配”等。这个功能需要调用 AI 接口实现起来会复杂一些但价值也更大。还有一个方向是支持多语言。现在的简历工具只支持中文如果要支持英文简历需要调整字体栈、断词规则、日期格式等。这个工作量不小但对于有海外求职需求的用户来说是很有价值的。我个人在实际操作中的体会是做简历工具最难的不是技术而是对排版细节的把控。每一个像素的偏差、每一个换行位置的不对都会影响简历的专业感。用 Vibe Coding 的方式可以快速生成代码但最终的排版效果还是需要人工去调。如果你也在做类似的事情建议把大部分时间花在排版规则的打磨上而不是功能的堆砌上。一个排版精致的简单简历比一个功能繁多但排版混乱的简历要有价值得多。