Phase 4 — 全栈项目 & 交付

用 Claude 生成前端 UI 不是让它随便画——你需要给它设计系统。这节课讲怎么让 Claude 按照统一的样式系统生成 UI：定义色板、字体、间距、组件风格，写进 CLAUDE.md 或 System Prompt，然后让 Claude 按这套规范生成所有页面。产出一致、专业，不是每个页面风格不同。

学习如何把设计稿或截图交给 AI，让它生成符合你项目规范的前端代码。掌握指定 UI 框架、约束组件结构、控制响应式行为的指令技巧。

阅读「与 AI 结对编程」章节。自主节奏完成，巩固本节课的知识点。

前端 UI 做好了，后端 API 怎么接？这节课用 Claude 实现前后端联调：定义 API Endpoint（路径、方法、参数、返回值）→ Claude 生成后端 API 代码 → Claude 生成前端调用代码 → 联调测试 → 处理跨域和错误。你描述数据流向，Claude 两端的代码都帮你写。

学习

掌握让 AI 输出合法、稳定、可被程序直接消费的 JSON 数据的技巧。

阅读「前后端协同与 API 生成」章节。自主节奏完成，巩固本节课的知识点。

网站需要存数据——用户信息、产品列表、订单记录。Supabase 是免费的 Postgres 数据库 + API 服务，不需要自己搭服务器。这节课用 Claude 完成：设计数据库 Schema（表结构、字段类型、关系）→ 在 Supabase 创建表 → 生成 CRUD API → 前端连接数据库。Claude 帮你写 SQL 和 ORM 代码，你只需要描述业务逻辑。

学习如何把业务需求翻译成数据库 Schema，让 AI 帮你设计表结构、定义关系、生成迁移脚本。掌握 AI 数据库设计中的常见陷阱和避坑指南。

阅读「数据与知识库协作」章节。自主节奏完成，巩固本节课的知识点。

代码写完了怎么上线？Cloudflare Workers 是 Serverless 部署方案——不用管服务器，上传代码就能跑。这节课也对比 Vercel 和 Railway 的部署方式，帮你选最适合的。实操：配置部署脚本 → 一键部署 → 绑定域名 → 配置环境变量 → 设置自动部署（push 代码自动上线）。

代码写完了不算完，部署上线才是真正的

阅读「脚手架与自动化交付」章节。自主节奏完成，巩固本节课的知识点。

项目要展示给别人看，需要两样东西：一份好的 README（项目说明书）和一个 Demo 视频脚本。这节课用 Claude 辅助生成：README 包含项目介绍、技术栈、安装步骤、截图、API 文档；Demo 脚本包含展示顺序、每一步说什么、预计时长。让你的项目看起来专业。

掌握商务邮件 Prompt 的模板——语气、目的、背景、要求，学会调整不同语气完成各种商务场景。

Serverless 部署的参考资料：Cloudflare Workers 配置模板、Vercel 的 vercel.json 模板、Railway 的 Dockerfile 模板、环境变量管理最佳实践、CI/CD 自动部署配置。参考资料课，部署时随时查。

代码写完了不代表能上线——需要 Review。这节课讲 AI 辅助 Code Review 的完整流程：让 Claude 审查你的代码（安全漏洞、性能问题、代码规范、可维护性）→ 根据反馈修改 → 再 Review → 通过后才合并。同时讲项目展示技巧：10 分钟怎么讲清楚你的项目、技术亮点怎么展示、Q&A 怎么应对。

AI 能帮你写代码，但谁来保证代码质量？学会从安全、性能、可维护性三个维度审查 AI 生成的代码，以及如何写出让团队受益的 Review 意见。

阅读「团队协作与 PR 流程」章节。自主节奏完成，巩固本节课的知识点。

阅读「用 AI 做测试与质量保障」章节。自主节奏完成，巩固本节课的知识点。

最终实操：用 Claude Code Review 你的整个项目（不是单个文件，是整个 codebase），修复所有 Review 意见，录制 Demo 演示视频，上传项目到 GitHub。课后你的 GitHub 上有一个完整的、经过 Code Review 的、有 README 和 Demo 的全栈项目——可以直接放进简历。

Commit Message 写得好不好，直接决定你在团队里的

阅读「持续改进与自动化」章节。自主节奏完成，巩固本节课的知识点。

用 Claude 生成项目的完整文档：README.md（项目介绍 + 安装指南 + API 文档）、CONTRIBUTING.md（贡献指南）、Demo 视频脚本（展示顺序 + 旁白文案 + 时间节点）。好的文档让你的项目在 GitHub 上更容易被人发现和理解。这节课的技巧也适用于工作中写技术文档——让 AI 帮你写初稿，你审核调整。

阅读「AI 辅助 UX 文案与交互」章节。自主节奏完成，巩固本节课的知识点。