Claude Code 实战：10分钟用AI搭建一个网页应用

覆盖热词：claude code tutorial（30📊）| claude code 实战（10🟢）| ai编程 中文教程（10🟢）

说不如练：一个真实项目

看文档不如真干一次。这篇文章带你从零开始，用 Claude Code 亲手搭一个在线TODO应用——有前端、有后端、能增删改查。

全程只做两件事：在终端里跟 Claude 聊天，偶尔确认它改的代码。

你需要准备： - 装了 Node.js 的电脑 - Anthropic API Key（console.anthropic.com 注册免费拿） - 终端（Mac/Linux 自带，Windows 用 PowerShell 或 Git Bash）

第一步：初始化项目（2分钟）

# 创建一个空目录
mkdir todo-app && cd todo-app

# 启动 Claude Code
claude

Claude 启动后，输入第一段话：

帮我初始化一个 Node.js 项目，用 Express + SQLite 做后端，
前端用纯 HTML/CSS/JS（不要框架），
实现一个 TODO 应用：能添加任务、标记完成、删除。
先帮我搭好项目结构。

Claude 会开始思考、创建文件。你会看到它： 1. 运行 npm init -y 初始化项目 2. 安装 express、better-sqlite3 等依赖 3. 创建 server.js、public/index.html、public/style.css、public/app.js 4. 设置 SQLite 数据库表结构

全程大约 30 秒。你只需要看着它干。

第二步：改到满意（5分钟）

项目搭好了，但界面可能很朴素。继续跟 Claude 说：

界面太丑了，帮我做成毛玻璃风格（Glassmorphism），
背景用深蓝渐变，按钮用渐变色，
卡片有悬浮阴影效果。
整个页面居中，宽度不超过 800px。

Claude 会立刻修改 CSS 文件。不喜欢的接着调：

按钮悬停效果不够明显，加一个上浮动效果。
任务列表每项之间加分割线，已完成的任务文字变灰加删除线。

第三步：加功能（3分钟）

基础功能有了，但TODO应用怎么能没有搜索和分类？

加三个功能：
1. 搜索框——按任务标题实时过滤
2. 分类标签——支持"工作"、"个人"、"学习"三个分类，每个任务可以选一个
3. 统计栏——显示总任务数、已完成数、未完成数

Claude 会同时修改前端和后端代码。如果某个地方不满意，直接说：

搜索框太小了，放到标题下方，宽度 100%。
分类标签用彩色小圆点显示。

成品长什么样？

搭完之后，退出 Claude（按 Ctrl+C 或输入 /exit），然后：

node server.js
# 输出: Server running at http://localhost:3000

打开浏览器访问 http://localhost:3000，你会看到：

• ✅ 深蓝渐变毛玻璃风格的 TODO 应用
• ✅ 添加任务、标记完成、删除
• ✅ 搜索过滤
• ✅ 三色分类标签
• ✅ 统计栏

整个开发过程：不到 10 分钟，你写了不到 20 行提示词。

一些实用技巧

1. 让 Claude 解释它改了什么

改完代码后，加上一句：

刚才改了哪些文件？每个文件改了什么？列个清单。

Claude 会输出类似：

修改了 3 个文件：
- server.js：新增 /api/search 路由，添加 CORS 头
- public/app.js：新增搜索逻辑、分类过滤、统计计算
- public/style.css：重写卡片样式为毛玻璃效果

2. 不满意就回滚

Claude 每次修改前会自动 git commit（如果项目有 git）。想回到上一步：

刚才的修改我不喜欢，恢复到上一个版本。

或者手动：

git checkout -- .

3. 让 Claude 写测试

项目差不多了，让它补测试：

给 server.js 写单元测试，用 vitest + supertest。
测试所有 API 端点：增删改查。

扩展到真实项目

这个 TODO 应用是一个起点。同样的方法可以用来：

• 写 API：给 Claude 一个 OpenAPI 文档，让它生成完整后端
• 写爬虫：描述要爬的网站和数据结构，Claude 输出带反爬处理的脚本
• 写自动化脚本：文件批量处理、数据清洗、CI/CD 配置
• 改现有项目：把 Claude Code 开在已有项目目录里，直接加功能

总结

Claude Code 的核心价值不是"AI 自动写代码"，而是你指挥、它执行。你用自然语言描述需求，它负责写代码、装依赖、改文件、跑命令。

这 10 分钟的 TODO 应用只是开始——当你熟悉了这种交互方式，你会发现写代码这件事本身发生了根本变化。

🔗 相关文章： Claude Code 完整教程：从安裝到配置 | Claude Code 香港能用吗？实测指南

📚 Claude Code 中文开发者系列（持续更新中） → Claude Code vs Cursor vs Aider：三个AI编程工具的真实对比 → Anthropic悄悄更新了Claude 4 Sonnet → Claude Code 写了200行代码然后忘了自己在干嘛 → Claude Code 团队协作实战：CLAUDE.md统一、MCP共享、Code Review自动化 → Claude Code CI/CD 集成：GitHub Actions 自动代码审查与测试生成 → Claude Code 写测试实战：TDD、Mock、覆盖率一条龙 → Claude Code 省钱终极攻略：从月消费$200到$30 → Claude Code + 本地模型混合方案：什么时候用云端、什么时候用本地