用 Claude Code 从零开发一个待办任务管理系统

前言

最近体验了 Claude Code 的编程能力，决定用它从零开发一个完整的项目来试试水。我选择了一个经典但实用的场景------待办任务管理（Todo List），最终产出了一个支持日历视图、重复任务、分类管理和 Excel 同步的 Web 应用。

GitHub 地址 ：https://github.com/scottli8071/todo-list

一、项目功能概览

核心功能

功能	说明
任务管理	创建、编辑、删除任务，支持任务内容和详细描述
日历视图	按月展示所有任务，直观查看每日安排
重复任务	支持按天/周/月/年重复，完成后自动生成下次任务
优先级	高、中、低三种优先级，一目了然
分类管理	自定义分类（工作、生活、学习、其他），支持增删改
提醒功能	浏览器通知，支持提前设定提醒时间和天数
Excel 存储	所有数据持久化存储在 Excel 文件中，方便备份和迁移

界面截图

任务列表主界面

日历视图

新建任务弹窗

二、技术栈

层级	技术	说明
后端	Express.js (Node.js)	轻量级 HTTP 服务，提供 RESTful API
前端	Vanilla HTML/CSS/JS	零框架依赖，原生实现
数据存储	Excel (xlsx)	通过 `xlsx` 库读写 `.xlsx` 文件
测试	Playwright	E2E 自动化测试

选择 Excel 作为存储是个有意思的决策------数据可读性强，用户可以直接用 Excel 打开编辑，无需数据库环境。

三、API 接口设计

后端提供了简洁的 RESTful API：

方法	端点	功能
GET	`/api/todos`	获取任务列表（支持日期范围筛选）
POST	`/api/todos`	创建新任务
PUT	`/api/todos/:id`	更新任务
DELETE	`/api/todos/:id`	删除任务
GET	`/api/settings`	获取应用设置
PUT	`/api/settings`	更新设置
POST	`/api/categories`	添加分类
PUT	`/api/categories/:oldName`	更新分类（同步更新所有关联任务）
DELETE	`/api/categories/:name`	删除分类（关联任务归入"其他"）

四、用 Claude Code 开发的真实体验

4.1 什么是 Claude Code

Claude Code 是 Anthropic 推出的 AI 编程助手，可以在终端中直接与你的代码仓库交互。它能够理解整个项目上下文、读取文件、编写代码、执行命令、运行测试------像一个随时待命的资深搭档。

4.2 开发过程

整个项目完全通过自然语言与 Claude Code 对话完成，零手写代码。大致流程如下：

第一步：项目初始化

复制代码

> 帮我创建一个待办任务管理应用，使用 Express 作为后端，前端用原生 HTML/CSS/JS

Claude Code 自动生成了 package.json、server.js 和前端页面骨架。

第二步：逐步迭代功能

复制代码

> 添加日历视图，按月展示任务
> 支持重复任务，完成后自动创建下一次
> 加入优先级和分类管理
> 用浏览器 Notification API 实现提醒

每一条指令，Claude Code 都能准确理解并生成对应代码，遇到 Bug 也会自行调试修复。

第三步：测试验证

复制代码

> 用 Playwright 写 E2E 测试，覆盖核心流程

Claude Code 自动生成了测试脚本并运行验证。

4.3 真实感受

优点：

上下文理解很强：整个项目文件都在 Claude Code 的视野中，它能准确知道改哪里、怎么改
迭代效率高：一句"把分类管理改成可编辑的"就能完成完整的功能改造，不用手动定位代码
Bug 自愈：运行报错后，Claude Code 会自动读错误日志并修复，循环直到通过
零上下文切换：不需要在 IDE、文档、StackOverflow 之间跳来跳去

局限：

大项目需拆分：如果一次性描述太多需求，Claude Code 容易遗漏细节。建议逐个功能点推进
复杂逻辑需要描述清楚：对于业务规则（如重复任务的日期计算），需要把规则讲明白，否则容易产生偏差
费用：按 token 计费，复杂项目可能会消耗较多的 API 额度

4.4 开发心得

用 Claude Code 开发这种规模的项目，体验非常流畅。从"我想做一个 Todo 应用"到完整可用的产品，全程对话式完成。如果你是一名独立开发者或者想快速验证想法，Claude Code 可以极大提升效率。

不过它并不是"无脑输入需求就能出产品"------你需要：

对项目架构有基本认知，能判断 AI 生成的代码是否合理
描述需求时尽可能清晰具体
功能复杂时，拆分成小步骤逐个实现

五、项目结构

复制代码

todo-list/
├── server.js              # Express 后端（所有 API 端点）
├── public/
│   └── index.html         # 前端页面（HTML + CSS + JS）
├── assets/
│   └── style.css          # 样式文件
├── todos.xlsx             # 任务数据存储
├── settings.json          # 应用配置
├── task_struct.json       # 任务结构参考
├── package.json           # 依赖管理
└── README.md              # 项目文档

六、快速开始

bash 复制代码

# 克隆仓库
git clone https://github.com/scottli8071/todo-list.git
cd todo-list

# 安装依赖
npm install

# 启动服务
npm start

浏览器访问 http://localhost:3000 即可使用。

七、总结

这个项目虽然不大，但完整覆盖了前后端开发的全流程：RESTful API 设计、前端交互、数据持久化、自动化测试。用 Claude Code 开发，整个过程只花了几个小时。

如果你对 Claude Code 开发感兴趣，或者想找一个轻量级的待办管理工具，欢迎 Star 和试用。

GitHub ：https://github.com/scottli8071/todo-list

本文由 Claude Code 协助开发，博客由 Marvis (马维斯) 辅助撰写。