1. 项目缘起一个周末的“生产力实验”上周五晚上我和一位做HR的朋友聊天听他吐槽现在市面上简历管理工具的种种不便。要么是功能臃肿、操作复杂要么是数据封闭、导出麻烦对于需要频繁更新简历的求职者或者管理多个版本简历的职场人来说体验并不友好。他半开玩笑地说“你们搞技术的自己写一个不就完了”这句话点醒了我。是啊为什么不用一个周末自己动手解决这个痛点呢但问题来了一个周末满打满算也就48小时刨去吃饭睡觉真正能投入开发的时间可能不到20小时。用传统的方式从环境搭建、前后端框架选型、数据库设计到联调部署时间根本不够。就在我纠结之际最近在开发者社区里被频繁讨论的Vibe Coding进入了我的视野。简单来说Vibe Coding 是一种强调通过高层次的、描述性的“氛围”Vibe来驱动代码生成和系统构建的开发范式。它通常与先进的AI编码助手深度结合你不需要事无巨细地编写每一行代码而是通过清晰的意图描述、组件定义和流程说明让AI助手理解你的“开发氛围”并生成高质量的、可运行的代码骨架和实现。这听起来像是我需要的“加速器”。于是我决定将这个周末作为一个实验完全借助 Vibe Coding 的思路和工具从零开始在两天内构建一个轻量、实用、完全受控的个人简历维护系统。这个系统核心目标很明确允许用户通过一个简洁的Web界面轻松创建、编辑、版本化管理多份简历并能一键导出为美观的PDF。本文将完整记录这次“极限挑战”的全过程包括技术选型、核心思路、具体实现步骤以及最重要的——在Vibe Coding实践中踩过的坑和收获的经验。2. 整体设计与Vibe Coding思路拆解在动手写第一行代码之前清晰的顶层设计至关重要尤其是在时间紧迫的情况下。Vibe Coding 并非意味着可以无脑堆砌需求恰恰相反它要求开发者对最终产品有更抽象、更精准的把握。2.1 核心需求与功能边界划定首先我必须严格限定MVP最小可行产品的范围任何锦上添花的功能都必须为“周末完成”这个核心目标让路。经过思考系统需要具备以下核心功能简历数据管理以结构化的方式存储简历信息如基本信息、工作经历、项目经验、教育背景、技能列表等。多简历支持用户可以创建多份简历例如“针对A公司的技术专家简历”和“针对B公司的管理岗简历”。富文本编辑体验提供近似于Notion或语雀的块编辑器体验方便用户进行内容编排而不仅仅是填写表单。实时预览编辑的同时能在一个面板中实时看到简历的渲染效果。一键导出PDF将编辑好的简历按照预设的精美模板导出为可直接打印或发送的PDF文件。本地优先与数据安全所有数据首先存储在用户的浏览器本地IndexedDB同时提供登录后云端同步的选项但MVP阶段可以只完成本地部分。基于这些功能我决定采用以下技术栈这也是向AI助手描述“开发氛围”的基础前端框架React TypeScript。生态成熟组件化思想清晰便于向AI描述UI结构。UI库与样式Tailwind CSS。实用优先的原子化CSS通过类名描述样式非常高效且AI对其生成准确度很高。富文本编辑器TipTap。基于ProseMirrorAPI友好扩展性强社区活跃是实现块编辑器的好选择。本地数据库Dexie.js。一个对IndexedDB的优雅封装简化了前端数据库操作。PDF生成React-PDF / react-pdf/renderer。允许使用React组件的方式来定义PDF文档与我的前端技术栈完美契合思维模式一致。构建工具Vite。极速的启动和热更新为快速迭代提供保障。这个技术栈的选择不仅仅基于我个人的熟悉程度更是因为它们都具备“声明式”或“配置化”的特质非常适合用Vibe Coding的方式来描述。例如“创建一个使用Tailwind样式、包含头像、姓名、职位标题和个人简介的简历头部组件”这样的描述AI能很好地理解并生成对应代码。2.2 Vibe Coding在此项目中的实践模式我的Vibe Coding工作流可以概括为“描述-生成-调整-集成”的循环。氛围描述Vibe Description这是最关键的一步。我不会说“写一个React组件”而是会这样描述“我需要一个简历条目组件用于展示一段工作经历。它应该包含公司Logo左侧、公司名称和职位上下排列加粗、工作时间段灰色小字、以及一段多行的职责描述。整体布局是水平的在移动端下变为垂直排列。使用Tailwind CSS实现样式要看起来专业、简洁。”代码生成将上述描述输入给AI编码助手如基于DeepSeek等大模型的IDE插件。助手会生成一段包含JSX和Tailwind类名的React组件代码。微调与精修生成的代码通常能完成80%的工作但可能有些细节不符合预期比如边距、颜色深浅或响应式断点。这时我需要手动调整或者给AI更精确的指令例如“将工作时间段的字体颜色从text-gray-500改为text-gray-600并增加mt-1的上边距”。逻辑集成对于包含交互逻辑的部分如“当点击添加按钮时在经历列表末尾插入一个新的空条目并自动聚焦到公司名称输入框”我需要描述清楚状态变化和数据流。AI可以帮我生成对应的useState、事件处理函数和状态更新逻辑。整个过程中我的角色从“码农”转变为了“产品架构师”和“代码审查员”。我专注于定义组件契约、数据结构和用户交互流程而将大量样板代码和基础实现的编写工作委托给AI。这极大地提升了开发速度。3. 核心模块实现与Vibe Coding实操有了清晰的设计周末的“开发冲刺”就正式开始了。我将系统拆解为几个核心模块逐一击破。3.1 项目初始化与基础架构搭建使用Vite快速初始化一个ReactTypeScript项目是第一步。这一步几乎不需要AI参与命令行即可完成。npm create vitelatest resume-keeper -- --template react-ts cd resume-keeper npm install接下来安装核心依赖。这里我向AI助手描述了整体需求“我正在构建一个简历管理应用需要富文本编辑、本地存储和PDF导出。请为我生成一个完整的package.json依赖列表包括React、TypeScript、TipTap编辑器、Dexie.js、React-PDF以及相关的类型定义和工具库。”AI助手生成了一份详尽的依赖列表我经过核对后执行安装。然后我规划了项目的基础目录结构src/ ├── components/ # 可复用UI组件 │ ├── editor/ # 编辑器相关组件 │ ├── resume/ # 简历预览和PDF组件 │ └── ui/ # 基础UI组件按钮、输入框等 ├── db/ # Dexie数据库配置与操作 ├── hooks/ # 自定义React Hooks ├── stores/ # 状态管理我选择了Zustand因其API简洁 ├── types/ # TypeScript类型定义 └── utils/ # 工具函数我手动创建了这些文件夹并让AI助手帮我编写了db/index.ts的初始配置描述了简历的数据模型。实操心得在项目初期花20分钟用文字详细描述你的数据模型接口定义给AI让它帮你生成完整的TypeScript接口文件和数据库Schema能节省大量后续调试类型错误的时间。例如清晰说明WorkExperience接口包含id,company,position,startDate,endDate,description等字段及其类型。3.2 富文本简历编辑器的实现这是系统的核心交互部分。我选择TipTap是因为它不提供现成的UI需要自己用组件搭建这反而给了我和AI更大的协作空间。我的指令是“创建一个基于TipTap的块编辑器组件。它需要支持以下功能1. 可切换的段落、标题H1, H2, H3、无序列表、有序列表。2. 一个浮动格式工具栏当选中文本时出现。3. 支持Markdown快捷键如输入##加空格生成二级标题。请使用tiptap/react、tiptap/starter-kit和必要的扩展来实现。编辑器区域的最小高度为300px。”AI助手生成了一个包含EditorProvider、菜单栏和内容区域的组件。我将其放入components/editor/RichTextEditor.tsx。然后我进一步描述需求“现在我需要将这个编辑器集成到一个简历条目如‘工作经历’的每条记录中。每条经历的描述字段使用这个编辑器。它应该被包裹在一个卡片内工具栏样式需要更紧凑并且当条目被激活点击时编辑器才获得焦点并显示工具栏。”通过几次迭代我得到了一个体验相当不错的内联编辑器。关键在于我通过描述“状态”激活状态、焦点状态和“交互”点击激活、失焦保存让AI理解了组件应有的行为逻辑。3.3 实时预览与PDF模板组件这是体现“所见即所得”的关键。我决定让预览组件和PDF生成组件共享同一套UI组件以确保一致性。我首先描述简历的整体布局“创建一个ResumePreview组件它接收一个ResumeData对象作为props。布局从上到下分为头部姓名、标题、联系方式、工作经历、项目经验、教育背景、技能。每个部分都是一个独立的子组件。使用Flexbox布局字体使用Inter通过Google Fonts引入整体风格是单列、左对齐、专业简约。”AI生成了骨架。接着我重点描述了“工作经历条目”预览组件“ExperiencePreviewItem组件左侧一个圆形的公司图标占位区可用首字母或固定图标右侧是主要内容区。主要内容区分上下两部分上部是公司名粗体和职位常规字体在同一行下部是工作时间段小字灰色和描述文本纯文本换行保留。描述文本来自TipTap编辑器的纯文本输出。”然后我让AI助手将ResumePreview组件适配到react-pdf/renderer中。“请将上述ResumePreview组件及其所有子组件转换为适用于react-pdf/renderer的PDF文档组件。注意react-pdf/renderer有它自己的View,Text,Image等组件样式也使用其StyleSheet API。请保持视觉布局尽可能一致。”这个过程需要一些调试因为Web CSS和PDF的样式模型有所不同例如PDF对Flexbox的支持有限。我通过具体指令调整“在PDF版本中将Flexbox布局改为使用View的flexDirection和alignItems属性来实现垂直堆叠。字体大小需要适当调大以确保打印清晰。”3.4 数据持久化与状态管理为了管理多份简历和复杂的编辑状态我引入了Zustand作为轻量级状态管理库。我向AI描述了Store的结构“创建一个Zustand Store命名为useResumeStore。它应该包含以下状态resumes简历列表数组activeResumeId当前激活的简历IDactiveResume根据ID计算出的当前简历数据。操作包括createResume,updateResume,deleteResume,setActiveResumeId。所有状态变更在同步到内存Store的同时必须自动持久化到Dexie数据库中。”AI生成了Store的初始版本。然后我将本地数据库操作封装成Hook例如useSaveResume。我描述道“创建一个useSaveResumeHook它内部使用Dexie.js。它提供一个saveResume函数接受ResumeData参数如果该简历ID已存在则更新否则新增。操作成功后通过Zustand Store的updateResume动作更新全局状态。”这种“状态管理库 数据库Hook 业务组件”的架构使得数据流非常清晰。组件通过Zustand获取和修改状态状态变更自动触发UI更新和数据库持久化。4. 关键问题排查与Vibe Coding避坑指南在两天的开发中虽然Vibe Coding效率惊人但也遇到了不少需要手动干预和深度思考的问题。4.1 生成代码的“上下文遗忘”与一致性维护AI助手在生成单个文件或片段时表现优异但它没有项目级的“记忆”。例如当我让AI生成ExperiencePreviewItem组件时它可能使用了一个名为Experience的接口。但几分钟后我在另一个文件中让AI生成相关逻辑它可能又基于一个名为WorkExperience的接口。这导致了类型不匹配和运行时错误。解决方案建立权威的“单一样本源”尽早手动或让AI生成一份完整的、集中的类型定义文件src/types/index.ts。之后所有涉及数据结构的指令都首先引用这个文件。例如指令变为“参考src/types/index.ts中定义的Resume和WorkExperience接口生成一个...组件。”分块生成主动集成不要一次性要求AI生成整个页面。而是先生成类型定义再生成Store接着生成子组件最后生成聚合页面。每完成一步都立即运行代码检查是否有类型错误确保上下文正确。使用AI的“聊天上下文”功能一些高级的AI编码助手支持在同一个聊天会话中保持上下文。将同一个功能模块的所有相关请求放在一次对话中完成可以提高一致性。4.2 样式细节的“最后一公里”问题AI生成的Tailwind CSS样式通常能搭出正确的布局骨架但在像素级细节上如颜色深浅、间距微调、悬停效果、响应式断点的精确行为等方面往往达不到生产要求。解决方案从模糊到精确的迭代指令首先生成基础结构和布局。然后针对不满意的部分给出极其精确的指令。例如不说“调整一下间距”而说“将标题和副标题之间的margin-bottom从mb-2增加到mb-3”或者说“在移动端sm:断点以下将这个Flex容器的方向从flex-row改为flex-col并将子项间距从space-x-4改为space-y-4”。亲自进行视觉微调承认AI在纯粹视觉设计上的局限性。对于关键的UI组件如按钮、输入框、卡片最好预留时间自己手动调整样式或使用经过精心设计的UI库组件。Vibe Coding的价值在于快速构建功能骨架视觉抛光仍需人的审美介入。4.3 复杂交互逻辑与状态管理的陷阱对于简单的CRUD操作AI能很好地生成代码。但对于涉及多个状态联动、异步操作顺序、条件渲染等复杂逻辑AI生成的代码可能考虑不周存在竞态条件或状态更新错误。解决方案将复杂逻辑拆解为步骤描述不要一次性描述整个复杂流程。例如对于“保存简历时先验证然后本地存储接着调用模拟API最后更新UI并提示成功”这个流程可以分步指令“第一步写一个验证ResumeData对象的函数。”“第二步写一个将数据保存到Dexie的异步函数。”“第三步将前两步组合到一个handleSave函数中并加入加载状态和错误处理。”自己编写核心业务逻辑对于应用最核心、最容易出错的业务逻辑如简历数据的版本合并、导出PDF时的分页计算最好还是自己亲手编写。你可以让AI为你生成单元测试的架子然后自己填充测试用例和实现逻辑这样更可控。充分利用TypeScript严格要求AI为所有函数、变量生成类型。TypeScript能在编译期捕捉到许多由于上下文误解导致的数据流错误是Vibe Coding模式下不可或缺的安全网。4.4 第三方库集成与版本兼容性AI助手通常基于一个庞大的训练库生成代码它推荐的库安装命令如npm install library-name可能默认安装最新主版本。而最新版本可能与你项目中的其他库存在不兼容或者其API已经发生了破坏性变更。解决方案指定版本号在让AI生成安装命令时可以要求它使用最近一个已知稳定的主要版本。例如“请使用tiptap/react的2.x版本和tiptap/starter-kit的2.x版本”。生成后立即检查文档在集成AI生成的、涉及第三方库用法的代码后花5分钟快速浏览该库的官方文档特别是Getting Started部分核对关键API的使用方式是否与生成的代码一致。这能避免因库版本升级而导致的运行时错误。优先使用你熟悉的库在技术选型时尽量选择你本人有过使用经验的库。当AI生成的代码出现问题时你凭借以往的经验能更快地定位和修复。5. 成果总结与Vibe Coding模式反思周日晚上的10点我按下了npm run build命令。项目成功编译一个功能完整的简历维护系统诞生了。它拥有清晰的界面流畅的富文本编辑体验实时的简历预览以及可靠的一键PDF导出功能。数据安静地存储在浏览器的本地数据库中。虽然界面谈不上惊艳但绝对达到了“实用”和“可靠”的标准。回顾这个周末Vibe Coding 模式展现出了其巨大的威力。它让我在极短的时间内将一个想法变成了可运行的产品。我估算了一下如果完全手动编码完成同样功能和质量的工作量至少需要一周的业余时间。Vibe Coding 将我的效率提升了3倍以上。我个人对Vibe Coding的体会是它并非取代开发者而是重塑了开发者的工作流。我的核心工作从“编写语法正确的代码”上移到了更高层次的领域精准的需求分析与拆解我必须比以往更清楚自己要什么才能给出清晰的指令。系统架构与模块设计我需要规划清晰的数据流、组件边界和接口契约。代码审查与集成测试AI生成了代码但我需要对它的输出质量负责仔细审查逻辑编写测试确保各部分协同工作。解决“最后一公里”问题处理AI不擅长的复杂逻辑、精细样式和第三方库集成难题。这个过程也暴露了当前AI辅助编码的局限性它对项目全局上下文的理解有限对视觉细节的把握不足对复杂业务逻辑的生成存在风险。因此一个优秀的“Vibe Coder”必须具备更强的架构能力、更严谨的审查思维和更扎实的调试功底。AI是强大的副驾驶但驾驶员仍然需要牢牢掌握方向盘知道目的地和行驶路线。最后这个小项目的代码已经开源。它可能不是最完美的简历工具但它完整地展示了一个如何利用现代AI工具进行快速原型开发的实践案例。对于想要尝试Vibe Coding的开发者我的建议是从一个明确的小项目开始就像这个简历系统一样勇敢地给出你的第一个“氛围”指令然后在与AI的协作迭代中不断学习和调整你的“驾驶”技术。你会发现编程的乐趣从写出每一行代码部分转移到了构思和创造整个系统的“氛围”之中。