前端代码开发实战
前端开发的核心流程：喂材料给 Claude → 批量生成代码 → 用 Playwright 访问测试 → 发现问题就修 → 循环。
准备材料
开工之前，先把这些东西准备好：
| 材料 | 说明 |
|---|---|
| 需求文档 | 写清楚要做哪些页面、每个页面有啥功能 |
| 后端代码 | 让 Claude 知道有哪些接口可以调 |
| 设计截图 | 页面长啥样，截图比文字描述清楚一万倍 |
开发流程
第一步：把材料喂给 Claude
一次性把上下文给足：
@需求文档.md 这是需求文档
@backend/ 这是后端代码，里面有 API 接口定义
@设计图.png 这是设计稿截图
技术栈：Next.js 14 + Tailwind CSS + shadcn/ui
帮我批量生成前端页面代码
Claude 会根据这些材料，理解你要做啥，然后开始写代码。
第二步：批量生成页面
让 Claude 一口气把页面都写出来：
根据需求文档和设计图，帮我生成以下页面：
1. 首页
2. 登录页
3. 注册页
4. 工作台页面
5. 个人中心页面
每个页面都要对接后端接口
Claude 会批量生成代码，一个页面一个页面写好。
第三步：用 Playwright 访问测试
代码写完了，别急着自己点，让 Playwright 帮你测：
用 playwright 访问 http://localhost:3000，截图给我看看首页效果
用 playwright 访问登录页，帮我检查页面有没有报错
用 playwright 在登录页输入用户名 test，密码 123456，点击登录按钮，看看会发生什么
第四步：发现问题就修
Playwright 测试过程中发现问题，直接贴给 Claude：
页面报错了：
playwright 访问这个页面报错了：[贴报错信息]，帮我修
样式不对：
这个页面的布局跟设计图不一样，@设计图.png 帮我调成这样
功能不对：
点击登录按钮没反应，帮我看看哪里出问题了
接口对不上：
这个接口调用失败了，返回 404，帮我检查一下是不是地址写错了
第五步：循环测试直到通过
测试流程
├── 用 playwright 访问页面
├── 发现问题 → 让 Claude 修
├── 修完再用 playwright 测
└── 重复，直到所有页面都正常
实战示例
例子：测试登录功能
第一轮：访问页面
用 playwright 访问 http://localhost:3000/login，截图看看
发现问题：样式乱了
这个登录页样式不对，表单应该居中显示，帮我修
第二轮：测试交互
用 playwright 在登录页的用户名输入框输入 test@example.com，密码输入 password123，然后点击登录按钮
发现问题：接口报错
点击登录后控制台报错 401 Unauthorized，帮我看看是不是接口地址或参数有问题
第三轮：验证修复
再用 playwright 测一遍登录流程，看看修好没
常用 Playwright 测试命令
| 想干嘛 | 怎么跟 Claude 说 |
|---|---|
| 看页面效果 | 用 playwright 访问 xxx 页面，截图给我 |
| 检查报错 | 用 playwright 访问这个页面，看看控制台有没有报错 |
| 填写表单 | 用 playwright 在输入框里填入 xxx，然后点击提交 |
| 点击操作 | 用 playwright 点击页面上的 xxx 按钮 |
| 验证跳转 | 用 playwright 点击登录后，看看有没有跳转到首页 |
| 检查元素 | 用 playwright 检查页面上有没有显示 xxx 文字 |
核心原则
- 材料给足 - 需求文档 + 后端代码 + 设计截图，一次性喂给 Claude
- 批量生成 - 让 Claude 一口气写多个页面，效率高
- Playwright 验证 - 别自己手动点，让 Playwright 帮你测
- 发现就修 - 测出问题立刻让 Claude 修，别攒着
- 循环到位 - 测试 → 修复 → 再测试，直到全部通过
优化加速的点： 截图信息, 重建一个脚本 进行调试启动前端和后端，避免端口冲突