用 Claude Code 做前端

Claude Code 对前端开发的改变是根本性的。你不再是「写代码的人」，而是「指挥代码被写出来的人」。

这个角色切换需要时间适应，但一旦适应，你的输出速度和质量都会上一个台阶。

这个模块讲什么

4 节课，覆盖日常开发从搭环境到调 bug 的完整流程：

课次	主题	核心内容
01	环境与工作流	CLAUDE.md 配置、context 管理、Slash Commands
02	代码生成	写组件、Hook、工具函数的 prompt 技巧
03	重构与审查	重构策略、代码评审、diff 阅读
04	调试	错误定位、stack trace 分析、性能排查

学完你能做什么

• 用 CLAUDE.md 打造专属项目助手，让 Claude 了解你的规范
• 一句话生成完整的 React 组件、自定义 Hook、工具函数
• 让 Claude Code 自主重构一个模块，你只做审查
• 粘贴报错，Claude Code 定位并修复
• 用 Claude Code 做 PR 审查，提交前发现潜在问题

前置要求

• 已安装 Claude Code（npm install -g @anthropic-ai/claude-code）
• 有一个你想做的前端项目（任何框架均可）
• 没有 JS/TS 基础？Claude Code 会帮你写代码，并在过程中解释每一行