上一篇【第09篇】Windsurf与GitHub Copilot——AI编程工具的生态战争下一篇【第11篇】Vibe Coding最佳实践——从新手到AI指挥官的进阶之路摘要前面九篇文章讲了概念、原理和工具这篇终于要动手了。我们将用Vibe Coding的方式从零构建一个完整的「开发者工具箱」Web应用——包含Base64编解码、时间戳转换、JSON格式化、正则测试等常用工具。全程记录每个阶段的Prompt、AI的输出、遇到的坑和解决方案。这不是理想状态下的演示而是包含了真实开发中的试错和调整的真实项目记录。读完这篇你就知道Vibe Coding到底能不能用来做真实项目。一、项目规划——让AI帮你做需求分析1.1 用Claude Code做需求分析【阶段1需求澄清】 提示词 我想做一个开发者工具箱Web应用类似在线工具站。 请先帮我分析这个项目的需求 1. 目标用户是谁 2. 核心功能应该有哪些 3. 建议的技术栈是什么 4. MVP版本应该包含哪些功能 AI分析结果 ## 开发者工具箱 - 需求分析 ### 目标用户 - 开发者前后端、全栈 - 运维人员 - 学生/学习者 ### 建议核心功能MVP 根据使用频率和技术实现难度建议MVP包含 1. Base64 编解码 2. 时间戳转换Unix ↔ 可读日期 3. JSON 格式化/压缩/校验 4. URL 编解码 5. 正则表达式测试器 6. 颜色转换HEX ↔ RGB ↔ HSL ### 技术栈建议 - 框架Next.js 14SSGSEO友好部署简单 - 样式Tailwind CSS快速美观 - 状态React Context轻量无需Redux - 部署Vercel免费一键部署 ### 项目结构devtoolkit/├── app/│ ├── page.tsx # 首页工具导航│ ├── tools/│ │ ├── base64/│ │ ├── timestamp/│ │ ├── json/│ │ ├── url/│ │ ├── regex/│ │ └── color/│ ├── layout.tsx│ └── globals.css├── components/│ ├── ToolCard.tsx│ ├── ToolLayout.tsx # 工具页通用布局│ └── CopyButton.tsx # 一键复制组件├── lib/│ └── utils.ts # 工具函数└── public/1.2 项目初始化【阶段2脚手架搭建】 提示词在Claude Code中 初始化一个Next.js 14项目配置Tailwind CSSTypeScript严格模式 Claude Code执行 1. npx create-next-applatest devtoolkit --typescript --tailwind --app 2. 检查 package.json 确认依赖版本 3. 配置 tsconfig.jsonstrict: true 提示词继续 这个项目需要生成的工具页面路由是 /tools/base64 /tools/timestamp /tools/json /tools/url /tools/regex /tools/color 请在app/tools下创建对应的目录结构二、核心功能开发——逐个工具实现2.1 通用组件开发【阶段3搭建通用组件】 提示词在Cursor Composer中 创建以下通用组件 1. ToolLayout组件 - 接收 title, description, children - 显示工具标题、描述、返回首页链接 - 使用Tailwind简洁专业风格 2. CopyButton组件 - 点击复制text到剪贴板 - 复制成功后显示已复制2秒后恢复 - 使用clipboard API处理权限错误 3. ToolCard组件首页用 - 显示工具图标、名称、描述 - 点击跳转到对应工具页 - hover效果轻微上浮阴影 技术React 18 TypeScript Tailwind CSS 放在 components/ 目录下 AI生成代码后我的审查重点 ✅ ToolLayout的Props类型定义正确 ✅ CopyButton的clipboard错误处理 ✅ ToolCard的hover动画性能用transform而非margin ⚠️ 发现CopyButton缺少移动端兼容 → 让AI补充2.2 实现第一个工具JSON格式化【阶段4JSON格式化工具开发】 提示词 创建JSON格式化工具页面 app/tools/json/page.tsx 功能 1. 左侧输入区可输入或粘贴JSON文本 2. 右侧输出区显示格式化后的JSON 3. 操作按钮 - 格式化美化JSON缩进2空格 - 压缩移除所有空格和换行 - 复制复制格式化结果 - 清空清空输入和输出 4. 错误提示如果JSON格式错误显示具体错误位置 5. 统计信息显示原始大小 → 格式化后大小 6. 响应式移动端上下布局桌面端左右布局 样式 - 使用 Tailwind CSS - 深色主题代码编辑器风格类似VS Code暗色主题 - 等宽字体font-mono 工具函数放 lib/json.ts AI生成的代码关键部分审查 lib/json.ts: export function formatJSON(input: string): { success: true; formatted: string } | { success: false; error: string } { try { const parsed JSON.parse(input); return { success: true, formatted: JSON.stringify(parsed, null, 2) }; } catch (e) { if (e instanceof SyntaxError) { // 提取错误位置信息 const match e.message.match(/position (\d)/); const pos match ? parseInt(match[1]) : 0; return { success: false, error: JSON格式错误 (位置 ${pos}): ${e.message} }; } return { success: false, error: 未知错误: ${e} }; } } ✅ 类型安全使用union type区分成功/失败 ✅ 错误信息友好提取位置信息 ⚠️ 补充大JSON的性能 → 让AI添加了100KB文件大小限制2.3 实现正则表达式测试器【阶段5正则测试器】 提示词 创建正则表达式测试器 app/tools/regex/page.tsx 功能 1. 输入区 - 正则表达式输入框支持标志g, i, m, s, u, y - 测试文本输入区 2. 结果展示 - 整体匹配结果匹配/不匹配 - 匹配列表每个匹配项高亮显示 - 捕获组展示如果有分组 3. 常用正则模板点击即可填入 - 邮箱/^[\w.-][\w.-]\.\w$/ - 手机号/^1[3-9]\d{9}$/ - URL/^https?:\/\/[\w.-]\.[a-z]{2,}/ - IP地址/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/ 4. 错误处理 - 正则表达式语法错误提示 - 显示错误位置 交互细节 - 实时匹配输入即显示结果不用点按钮 - 匹配文本在测试区高亮显示黄色背景 - 捕获组用不同颜色区分 放入 app/tools/regex/ 目录 AI生成的代码审查的要点 重点检查正则表达式的安全使用 → 让AI添加了超时保护5秒超时防止ReDoS攻击 // 防ReDoS保护 function safeRegexTest(pattern: string, flags: string, text: string): Result { const timeout 5000; // 5秒超时 const startTime Date.now(); try { const regex new RegExp(pattern, flags); // 使用exec循环时检查超时 const matches: RegExpExecArray[] []; let match: RegExpExecArray | null; while ((match regex.exec(text)) ! null) { if (Date.now() - startTime timeout) { return { success: false, error: 正则执行超时请简化表达式 }; } matches.push(match); if (!regex.global) break; } return { success: true, matches }; } catch (e) { return { success: false, error: 正则语法错误: ${e.message} }; } }2.4 实现时间戳转换【阶段6时间戳转换工具】 提示词 创建时间戳转换工具 app/tools/timestamp/page.tsx 功能 1. 两种转换模式Tab切换 - 时间戳 → 日期输入Unix时间戳转为可读日期 - 日期 → 时间戳选择日期时间转为Unix时间戳 2. 时间戳→日期模式 - 输入框支持秒级和毫秒级时间戳自动识别 - 显示结果 * UTC时间 * 本地时间 * ISO 8601格式 * 相对时间如3天前 - 一键复制各格式 3. 日期→时间戳模式 - datetime-local输入框 - 实时显示对应的时间戳秒级和毫秒级 - 当前时间按钮 4. 额外功能 - 实时时钟每秒钟更新当前时间戳 - 常用时间戳速查如24小时前、一周前等 使用 Date API注意时区处理 审查重点 ✅ 时区处理正确UTC vs 本地时间 ✅ 秒/毫秒自动识别逻辑 ✅ 相对时间计算处理边界刚刚、几分钟前、几天前三、测试——让AI写测试用例【阶段7生成测试】 提示词在Claude Code中 给这个项目的核心工具函数生成测试 1. lib/json.ts - 测试各种JSON场景 2. lib/timestamp.ts - 测试时区和边界情况 3. lib/regex.ts - 测试正则安全和超时 使用Vitest文件放在 __tests__/ 目录下 AI生成的测试示例 describe(formatJSON, () { it(格式正确的JSON, () { const result formatJSON({name:test,age:25}); expect(result.success).toBe(true); expect(result.formatted).toBe({\n name: test,\n age: 25\n}); }); it(格式错误的JSON返回错误信息, () { const result formatJSON({invalid}); expect(result.success).toBe(false); expect(result.error).toContain(JSON格式错误); }); it(空输入, () { const result formatJSON(); expect(result.success).toBe(false); }); it(超大JSON被限制, () { const hugeJson JSON.stringify({ data: x.repeat(200000) }); const result formatJSON(hugeJson); expect(result.success).toBe(false); expect(result.error).toContain(超过大小限制); }); }); 运行测试pnpm test 结果24个测试全部通过 ✅四、打磨与部署4.1 UI打磨【阶段8样式和交互打磨】 提示词 美化整个项目 1. 首页添加渐变色背景和网格动效 2. 工具页添加面包屑导航 3. 所有按钮添加过渡动画 4. 暗色模式支持跟随系统设置 5. 添加加载骨架屏 6. 移动端优化触摸反馈、安全区域 参考设计风格Linear App简洁、现代、深色为主 AI生成后我做的调整 ⚠️ 暗色模式切换有时闪烁 → 让AI用 next-themes 库重写 ⚠️ 骨架屏动画太复杂 → 简化为脉冲效果 ✅ 最终效果简洁专业适配移动端4.2 部署上线【阶段9部署到Vercel】 提示词 将项目部署到Vercel 1. 确认 build 命令next build 2. 检查是否有环境变量需要配置 3. 生成部署说明 Claude Code执行 1. pnpm build → 验证构建成功 2. 检查 .env.local → 无需特殊环境变量 3. 生成 Vercel 部署配置 4. 生成 README.md包含项目说明、本地运行、部署指南 部署结果 ✅ 构建时间45秒 ✅ 首次加载性能Lighthouse 98分 ✅ 全站无第三方依赖纯前端无API调用五、全程复盘——Vibe Coding的真实体验5.1 各阶段耗时统计【开发耗时对比】 任务 传统开发 Vibe Coding 节省 ──────────────────────────────────────────────────── 需求分析 技术选型 2小时 15分钟 87% 项目初始化 配置 1小时 10分钟 83% 通用组件 3小时 30分钟 83% JSON格式化工具 4小时 25分钟 90% 正则测试器 5小时 40分钟 87% 时间戳工具 3小时 20分钟 89% 其他工具×3 9小时 90分钟 83% 测试编写 4小时 15分钟 94% UI打磨 3小时 30分钟 83% 部署 1小时 10分钟 83% 文档 2小时 5分钟 96% ──────────────────────────────────────────────────── 总计 37小时 5小时20分 86%5.2 踩过的坑【Vibe Coding实战经验】 坑1AI的一次性代码生成太长 现象让AI生成整个页面代码400行各种小错误 解决分模块提需求组件 → 逻辑 → 样式每步验证 坑2AI的想当然问题 现象AI自动给所有工具加了登录功能 解决在CLAUDE.md中明确无需认证 坑3Tailwind类名不一致 现象不同组件用的Tailwind类名风格不同 解决在.cursorrules中定义Tailwind使用规范 坑4AI忘记了响应式设计 现象桌面端完美移动端布局崩溃 解决每个工具的需求描述中明确加上响应式要求 坑5测试不够全面 现象AI生成的测试只覆盖了正常路径 解决在测试需求中明确列出边界情况和异常场景5.3 关键收获【Vibe Coding项目实战的核心经验】 1. 分而治之是最重要的原则 → 不要试图用一次对话生成整个项目 → 按功能模块划分逐步推进 2. Prompt要包含约束 → 不仅说做什么还要说不做什么 → 例不需要登录、不需要数据库、不需要后端 3. 审查是必须的但不是每行都看 → 重点审查安全、性能、类型安全、错误处理 → 可以信任样式细节、变量命名、常见模式 4. AI是你的结对编程伙伴 → 复杂的逻辑讨论让AI给出方案你来决策 → 简单的重复劳动完全交给AI 5. 记忆文件是关键基础设施 → .cursorrules / CLAUDE.md 越详细越好 → 每次发现AI的习惯性错误就加到Rules中总结Vibe Coding能做真实项目这个开发者工具箱包含6个工具、24个测试、响应式设计全程只用了不到6小时。效率提升是实实在在的与传统开发相比总体时间节省86%。越是模式化的任务CRUD、工具函数、测试效率提升越明显。核心原则分而治之持续验证不要试图一次性生成整个应用。按模块分步推进每完成一部分就测试验证。AI的角色是高级结对伙伴你负责架构决策和质量把关AI负责代码实现和重复劳动。好的上下文是最好的投资详细的Rules文件、清晰的目录结构、完善的类型定义这些投入会在每一次AI交互中得到回报。上一篇【第09篇】Windsurf与GitHub Copilot——AI编程工具的生态战争下一篇【第11篇】Vibe Coding最佳实践——从新手到AI指挥官的进阶之路