前言今年2月份的时候心血来潮开坑了一个在线简历的开源项目虽然简历项目已经够多了但是自己还是决定试着做一下主要有以下几点原因有些想要的功能市面上的简历工具没有比如一键隐私打码根据工作经历自动推算工作年限等等简历项目看着简单就是几个网页模块拖拽编辑点点点嘛实际做了才发现没有那么简单适合作为第一次vibe coding来练手的小型项目项目仓库GitHubAI使用情况Claude Code主力使用项目规划以及开发。Gemini 3.1 Pro谷歌账号家庭组的车在网页里使用主要是写前端的demo确定组件UI的交互逻辑毕竟谷歌自家就是做浏览器的前端这块没话说。GPT 5.4主要用于处理非常明确的需求排查bug等等。实战项目冷启动一开始我并没有规划好项目的功能先克隆了 visiky/resume: 在线简历生成器 这个项目让AI帮我分析项目架构技术栈生成了一个文档。我把文档复制到自己的项目中让AI评估使用plan模式重新分析和选择技术栈流程还是参考之前的。这里现在看来感觉有些多余了没必要完全可以自己从零规划不参考老项目。让AI做更现代化的架构规划效率更高。迭代UI打磨第一次vibe coding经验不足总是走一步看一步让AI慢慢帮我新加功能没有在一开始就规划好核心功能导致数据结构经常变化结构一变化项目就得重构。做的过程会体验很多优秀的简历项目比如Reactive Resume魔方简历等一个功能该不该做怎么做除了问AI更多的是自己作为用户去实际体验然后考虑当前功能在现在阶段是必要的吗每次新加了功能总觉得不对劲但又说不上哪里不对劲这时我就会把问题抛给Gemini让他帮我审核交互有问题的地方让他直接出一个HTML文件给我我来体验。比如觉得卡片样式不好看给demo头像选择框不好看给demo编辑器不好看给demo注以上这些都是可以交互的网页前前后后我大概生成了20多个网页demo用来确认界面UI交互逻辑。所以我这个项目的界面还真算的上是精雕细琢过的“幽灵行”交互在用户基本信息中有一个可以自定义添加字段的功能比如添加GitHub地址博客地址等等最开始我设计的是点一个加号新出一行但是这样用户可以一直点加号出现很多空白字段但是不填写我觉得这样是有问题的。于是问Gemini它给了一个我之前从未听过的方案“幽灵行”也就是填完一行内容鼠标焦点丢失才出现新的一行有效的避免了可以无限新增空白行的问题。呐新知识Get后续就是项目慢慢更新遵循 one commit, one thing的原则到写这篇帖子的时候有157次提交。神器安利强烈安利一个插件 Agentation ,可以在本地开发页面时直接在页面上选择元素输入需求再一键复制给AI包含精确定位的需求AI在执行时能剩下很多搜索的时间和token也避免我们在描述时很容易出现不准确的问题再也不用说 “帮我把导入PDF确认对话框右下角那个确认按钮改一下” 了。开发总结AI开发过程的内容大概就这么多了之前踩坑的地方是走一步看一步没有先做好整体的规划。后续的AI项目开发我应该会先写前端demo借着demo思考功能页面完善之后再让AI根据前端代码来写后端前端本身就是最好的项目需求文档。狗头结语本篇文章记录了我用 Vibe Coding 从 0 到 1 开发优派简历的完整踩坑过程如果你也在做类似的项目希望这些经验能帮你少走一些弯路。有问题或者想法欢迎评论区交流我都会回复。项目地址优派简历—— 免费开源的在线简历工具 在线体验https://opresume.pages.dev GitHubhttps://github.com/oopooa/opresume觉得有用的话欢迎点个 Star ⭐也欢迎提 Issue 反馈建议。本系列文章用 Vibe Coding 做了一个开源在线简历工具从想法到上线的踩坑全记录一本篇用 Vibe Coding 做了一个开源在线简历工具从想法到上线的踩坑全记录二即将发布欢迎关注