用 Codex Vibe Coding 半天撸了一个记账APP：从想法到上线的全新开发体验
前言 ：作为一个写了十年Java后端的老码农，我一直对前端开发有点抵触------CSS调半天对不齐、组件库选来选去、环境配置搞一天。直到我尝试了 Codex Vibe Coding，才发现原来全栈开发可以这么"丝滑"。
一、什么是 Vibe Coding？
Vibe Coding（氛围编程）是近期AI编程领域的新范式，核心思想是：
用自然语言描述需求，让AI处理实现细节，开发者专注于"想要什么"而非"怎么做"
与传统的Copilot代码补全不同，Vibe Coding 更像是和一个资深全栈工程师结对编程------你负责提需求，它负责架构设计、代码实现、调试排错。
二、项目背景：为什么要做记账APP？
家里一直用Excel记账，痛点很明显：
- 📱 移动端查看困难：Excel在手机上体验极差
- 🏷️ 分类不灵活：人情往来、AA制聚餐等特殊场景不好记录
- 📊 统计麻烦：月底想看收支构成需要手动透视表
需求很简单：一个支持支出、收入、人情往来的轻量级记账工具，数据存在本地，打开即用。
三、开发实录：与Codex的对话式编程
Round 1：一句话启动项目
我：构建一个简单的记账APP，功能包含各类支出、收入、记录人情往来Codex的响应让我惊讶------它没有直接开始写代码，而是：
- 先扫描当前工作区 （
Get-ChildItem、rg --files） - 确认技术栈 ：发现是空目录后，自主决策用 HTML + CSS + JavaScript 单页应用
- 给出执行计划 ：
- 搭建页面结构和视觉布局（账本总览、表单、记录列表）
- 实现三类数据录入（支出、收入、人情往来）
- 统计汇总和筛选功能
💡 这个"先理解再动手"的过程，比很多初级程序员都专业。
Round 2：零配置启动，数据持久化方案
Codex 选择了 localStorage 作为存储方案，理由很充分：
- ✅ 零后端依赖，GitHub Pages可直接部署
- ✅ 隐私数据不上云，符合记账场景
- ✅ 支持JSON结构化存储，方便后续导出
Round 3：视觉设计与交互打磨
最终交付的界面长这样：
设计亮点：
- 暖色调配色：米白+浅棕，符合"家常账本"的温馨感
- 三栏布局：左侧快速记账、中间流水展示、右侧统计卡片
- 智能分类：支出/收入/人情往来用不同颜色标签区分
- 实时计算：顶部总览卡片随输入实时更新
四、核心功能拆解
1. 数据模型设计（AI自主推导）
javascript
// Codex 自动设计的核心数据结构
{
id: "uuid",
type: "expense|income|social", // 支出/收入/人情
category: "餐饮|交通|工资|红包...", // 二级分类
amount: 2300.00,
date: "2026-03-27",
counterparty: "张三", // 往来对象（人情场景专用）
note: "结婚礼金",
createdAt: "timestamp"
}2. 人情往来特殊处理
这是Excel最难处理的场景，Codex 做了针对性设计：
- 双向记录：收礼/送礼自动关联同一人
- 余额计算：自动统计与某人的"人情净值"
- 筛选视图：按人筛选查看往来明细
3. 统计面板
右侧固定显示：
- 💰 本月结余 = 收入 - 支出
- 📈 各类占比：饼图展示消费结构
- 🎁 人情净值：谁欠谁、欠多少一目了然
五、Vibe Coding vs 传统开发
| 维度 | 传统开发 | Vibe Coding |
|---|---|---|
| 启动成本 | 环境配置、脚手架选择、依赖安装 | 一句话需求，AI自动决策技术栈 |
| 代码产出 | 手动编写，100行/小时 | 对话驱动，1000行/小时 |
| 设计决策 | 开发者需具备全栈知识 | AI基于最佳实践自动选择 |
| 调试过程 | 手动排查，Google/StackOverflow | 直接问AI，"为什么这里报错" |
| 代码所有权 | 完全掌控 | 需要理解AI生成代码，便于维护 |
六、踩坑与反思
✅ 做得好的地方
- 需求描述要具体：说"支持人情往来"比"功能完善"更有效
- 迭代式开发：先跑通MVP，再细化样式和交互
- 让AI解释代码：遇到复杂逻辑时，要求Codex逐行注释
⚠️ 需要注意的坑
- 数据迁移：localStorage 清缓存就丢数据，后续需加导出功能
- 移动端适配：AI生成的桌面端优先，需主动要求"移动端响应式"
- 代码体积：单文件HTML会膨胀，大项目需模块化拆分
七、总结：程序员会被取代吗？
体验完 Vibe Coding 后，我的结论是：
不会取代，但会分层。
- 🔴 重复性编码（CRUD、表单验证、样式调整）→ AI接管
- 🟡 架构设计（数据模型、组件拆分、状态管理）→ AI辅助，人决策
- 🟢 需求理解（用户场景、业务规则、体验细节）→ 人主导
Codex 把"写代码"变成了"描述问题 + 验证结果" ，这对业务型开发者是巨大解放。我们可以把更多精力放在理解用户、设计体验、优化流程上。
八、源码与体验
📦 项目特点：
- 纯前端实现，无需后端
- 单HTML文件，双击即用
- 数据本地存储，隐私安全
🚀 后续计划：
- 数据导出Excel/JSON
- 图表可视化（ECharts集成）
- PWA离线支持
- 多账本切换（家庭/个人/项目）
写在最后 ：从"需求一句话"到"可用产品"，这次开发体验让我想起了十年前第一次用Spring Boot时的震撼------技术民主化 正在发生。如果你还没试过 Vibe Coding，强烈建议找个小项目体验一次。工具链已经成熟，缺的只是放下"必须自己写每一行代码"的执念。
本文基于真实开发过程整理，界面截图来自 Codex 生成的记账APP。