作品介绍
「简历构建器」，一个跑在浏览器里的分步简历填写工具。写简历最难受的往往不是不会写字，是不知道从哪下笔、写出来像不像回事：教育背景要不要写课程，工作经历该来几条，每条是不是都得带数字，越想越多，越想越不敢动笔。这个工具把一份简历拆成个人信息、教育背景、工作经历、技能特长、项目经验、证书荣誉、预览导出七步，一次只面对一件事，填完点下一步就进到下一块。左边一列步骤导航，走到哪亮到哪，前面填过的随时点回去改，填到一半关掉页面，下次打开原样接着填，进度一个字都不丢。
个人信息这一步可以传证件照，工具自动压尺寸、按一寸比例裁切，不管原图是横是竖都不会拉变形。填到最后一页是一张 A4 纸的实时预览，版式、配色、字号当场调，调满意了直接导出一张高清 PNG，拿去投递或者发人审阅都行。数据全部存在浏览器本地，不注册账号、不联网也能用，对简历这种敏感信息来说，数据不离开自己的浏览器反而是最让人踏实的一点。
注： 当前展示的是随机生成的示例信息，人物与数据均为虚构，仅供填写格式参考。
为什么要做这个
最近正处在换工作的档口，简历改到第 N 版的时候特别挫败。网上模板一大堆，下载下来是 Word，满页的空格子先给人一个下马威，每改一版都要跟排版搏斗一次：这里字号忘了统一，那里行距又变了，改三版就想放弃。而且模板只管长得好看，管不了内容——该写几条工作经历、每条怎么起头、要不要有数字，模板一个字都不会提。
更早之前用 TRAE 做过一个「转行经历翻译器」，能把「我以前就是在店里排排班」这类大白话翻译成简历上的书面表达，顺手整理了一套口语词和弱动词的替换规则。做完发现只解决了一半问题——话是会说了，可很多人连简历本身都没有，那套规则再好也英雄无用武之地。
所以干脆把旧项目原地推倒，重构成一个从填到导出一气呵成的分步工具。给自己定的标准就两条：每一屏只出现当前要填的东西，别拿一整页空白表格吓人；该提醒的当场提醒，别等填完了才想起来「那段好像一个数字都没有」。视觉上沿用之前定下的米色底、细边框、线性图标那套克制风格，填表工具做得花哨只会让人更烦。
能做什么?
分步填写，边填边提醒
每一步的右侧挂着一个建议面板，本地的规则引擎实时盯着输入框：一句话里没有数字会提醒「用数字说话」，「负责」「协助」这类弱动词开头的句子会被点名，出现「挺」「搞定」「很多」这种口语词直接标出来，单条写得太长、时间顺序前后颠倒也逃不过。填得规范了，面板会安安静静缩下去，不烦人。这些判断全部离线完成，不联网、不用配任何东西。至于「写得好不好」这种更细的事，交给下一节的 AI 深度建议。
必填项没填完点下一步会被拦下来，手机号格式不对、邮箱少了 @、离职时间早于入职时间这类问题，错的字段红框标出并自动滚过去。教育、工作这类可以写多条的板块，填了几条就只校验几条，空着的模板行不找麻烦；项目经验、证书荣誉两个板块整步可跳过，应届生用不上就点跳过，一点不耽误。
AI 深度建议，想更细就点一下
本地规则只能管住「有没有数字、是不是口语」这一层，写得好不好、顺不顺，还得靠更细的看法。右上角齿轮里填上模型地址、密钥、模型名三样，AI 面板就活了：每个模块旁边多出「获取深度建议」按钮，点一下，当前填的内容连同模块特点一起发过去——简介要的是定位和优势，工作经历看的是量化表达和动词力度，教育背景问的是有没有漏掉亮点。回来的建议一条条列在面板里，对着改就行。
几个细节是刻意做的：内容改过之后，旧建议下面会出现一行「内容已修改，以上建议可能过期」，免得拿着过去的药方抓现在的药；请求设了六十秒超时，接口抽风不会一直转圈；密钥没配、配错、断网，面板都会说明原因并自动退回本地规则，不会卡死在半路。密钥存在自己浏览器里，不发往任何第三方。
模板与主题
预览页上方一条工具栏。版式分单栏、双栏：单栏是经典的时间轴排法，左边年份右边条目，适合经历顺的人；双栏是左窄栏放教育、技能、荣誉这些辅助信息，右宽栏放简介、工作、项目这些核心内容，中间一条细分隔线，适合想一眼让人看到重点的场合。左栏内容全空的时候双栏会自动退回单栏，不会挂着一根空荡荡的分隔线。
主题四套配色——暖米蓝、奶咖棕、灰绿豆、米白墨，全是低饱和的米色系，只换纸底色和标题线的强调色，正文始终深灰。当初刻意不做花花绿绿的配色，简历大概率要被打印出来过人手，颜色越少越稳。字号密度分紧凑、标准、宽松三档，正文字号、条目间距、纸的页边距一起动，同样一份内容能在一页纸里松紧自调。所有切换都是实时的，纸变成什么样，导出的图片就是什么样，不存在「预览一套导出另一套」。
模板切换
模板切换是后面单独补上的一块功能。最初版式只有单栏、双栏两种，用下来发现不同人的简历重点不一样：有人靠一段段经历说话，有人要靠项目和技能出彩，一种排法装不下所有情况，索性扩成一面模板库。点开预览页工具栏上的「模板」按钮，十套版式排成卡片墙一次摆开：经典单栏和双栏分区就是原来那两套；顶栏横幅让姓名和联系方式反白在一条主题色色带里；极简留白去掉装饰，细灰线分隔，时间挂在标题右侧；节点时间轴拿一条竖线把每段经历串成节点，脉络一眼看清；侧栏色块把照片、联系方式、技能装进左侧一整条主题色面板，右边全是内容；杂志衬线用衬线字体排大字姓名，顶部一条细色线，纸像杂志刊头；分块卡片给每个分区垫一层浅色圆角底；色块标题拿主题色把标题填成色块，翻起来一眼一块；右侧浅栏反过来，把照片和联系方式放进右边的浅色竖栏。十张卡片没有一张是效果图，全是拿当前填写的内容真实渲染出来的缩微简历，选哪套，自己的简历长什么样当场就能看到。点卡片只是选中，底部再按「使用此模板」才真正应用，应用完弹一行提示，中途反悔点取消就行，已填的内容一个字不会动。选中的模板记在本地，下次打开还是上次那套。
导出与备份
预览页一键导出高清 PNG，两倍采样，文字发微信、插文档、打印都不糊，文件名直接是「姓名-简历.png」。侧栏底部有备份按钮，整份简历连同证件照存成一个 JSON 文件，换电脑、清浏览器缓存，一个文件原样搬回来，连各步骤的解锁进度都一起还原。还做了个随机示例功能：每次点「信息示例」都会生成一份全新的假简历，姓名、城市、公司、数字全部随机，四套职业赛道轮着来，连时间线都对得上号——基层岗在前、主管岗在后，获奖日期落在任职期内，手机号是真的 11 位合法号段。看别人怎么写一遍，比读十遍填写说明都直观。
成果展示
体验方式
技术栈是 React 18 + Vite 5，纯前端零后端，构建完就是一沓静态文件，扔到任意静态托管就能跑，页面之间没有刷新，填表全程不打断。数据走 localStorage，备份用 JSON 导入导出，导出图片用 html2canvas，整个包 gzip 之后不到 70 KB，手机流量打开也不心疼。
创作分享
整个项目是用 TraeCode 在旧项目基础上重构出来的。起手没有直接开写，先把要变成什么样一句话说清楚——分步简历工具、左边步骤导航右边填写区、保持原来的米色视觉——让 AI 先出一份完整的实施计划，数据结构、组件怎么拆、每一步做什么都白纸黑字列出来，确认无误才动手。这一步花的几分钟是整个项目性价比最高的几分钟，后面每次改需求都有据可依，AI 也不会跑偏。中途加的功能全是边聊边冒出来的——证件照上传、随机示例、JSON 备份、版式主题，没有一个是初版计划里的，做到哪觉得顺手就补上哪，这也是跟 AI 结对写东西最舒服的地方：想法永远可以比计划多一步。
最费劲的是导出环节。第一版导出来的 PDF 内容总是偏下，跟预览对不上，来回改了好几轮：先是发现「数学上居中」在视觉上天然显低，把上下留白改成四六开，看起来舒服了，但跟预览还是两回事；后来干脆放弃自己拼版，整张简历纸按原比例铺满 A4，跟预览一比一，才算真正了结。中间还踩过一个更隐蔽的坑：内容不到一页时，尺寸换算会留出 0.1 像素的舍入差，切片逻辑就当它多出了一页，导出来总跟着一页几乎全白的尾页，肉眼看就是「PDF 莫名多了一页空白」，查了半天才发现是这么个小数点的事，最后加了单页快路径才根治。
还有一次排查窄屏适配，无头浏览器里预览纸死活不缩放，改代码怎么都不管用，各种修一轮测一轮全没变化，折腾半天发现是截图工具自己的渲染时序问题，真实浏览器里一点事没有。这类坑最磨人，因为代码本身没毛病，怀疑自己的每一行改动都是白费劲。
做完自己完整用了几轮，最大的感受是「一次只填一件事」真的有效。以前打开 Word 模板，满页空格子看两眼就想关；拆成七步之后，每一屏就三四件事，五分钟填一步，不知不觉就填完了。工具没法替人写出好经历，下笔的终究是自己，但落笔的时候旁边有人小声提一句「这段该有数字」「这个词太口语」，就已经省掉大量改稿的来回。