Claude Code + 前端：效率翻倍的秘密武器
不是让 AI 写代码，是让 AI 帮你思考——从"动手做"转向"动嘴说"。
Superpower Skill：Brainstorming
真正的效率飞跃，不是用更多工具，而是把"思考过程"本身封装成 Skill。
什么是 Brainstorming Skill？
普通 AI 工具：
你：写个拖拽排序
AI：给你一段代码
你：试了一下，移动端有问题
AI：再给你改一版
...（反复试错）
Brainstorming Skill：
你：写个拖拽排序
AI：
【方案脑暴】
方案A：HTML5 Drag API — 简单但移动端兼容性差
方案B：@dnd-kit — 功能全，学习成本中等
方案C：react-beautiful-dnd — 成熟但包体积大
【推荐】方案B，理由：1) 项目已有React 2) 需要触控支持
【潜在风险】
- 大数据量时性能问题 → 建议加虚拟滚动
- 无障碍支持 → 需加键盘操作
【实现步骤】
1. 安装 @dnd-kit/core @dnd-kit/sortable
2. 创建 SortableItem 组件
3. 在现有列表中集成
4. 加单元测试覆盖拖拽逻辑
要我执行哪一步？
Brainstorming 的核心价值
| 能力 | 说明 |
|---|---|
| 需求拆解 | 把模糊需求变成可执行步骤 |
| 方案对比 | 列出多种实现方式，分析优劣 |
| 风险预判 | 提前指出潜在坑点 |
| 迭代优化 | 基于反馈自我改进 |
实战示例：技术选型
你：新项目状态管理用什么？
Brainstorming Skill：
【候选方案】
1. Redux Toolkit — 生态成熟，适合复杂业务
2. Zustand — 轻量，学习成本低
3. Jotai — 原子化，适合细粒度更新
4. Context + useReducer — 零依赖，简单场景够用
【项目匹配分析】
- 读 package.json：已有 React 18，无状态管理库
- 读 CLUDE.md：团队偏好"简单优先"
- 预估规模：中等复杂度后台系统
【推荐】Zustand
- 理由：满足需求，代码量少，团队上手快
- 对比 Redux：减少 60% 样板代码
- 对比 Context：避免重渲染问题
【迁移路径】
如果未来规模扩大，可平滑迁移到 Redux Toolkit，
两者 Redux 生态兼容。
确认用 Zustand 吗？我可以初始化配置。
Prompt 技巧：触发 Brainstorming
| 关键词 | 效果 |
|---|---|
| "分析一下" | 进入脑暴模式 |
| "有几种方案" | 强制多方案对比 |
| "有什么风险" | 专注风险扫描 |
| "帮我设计" | 完整脑暴 + 执行计划 |
控制深度：
- "快速分析" → 简版脑暴，2-3 个方案
- "深入分析" → 完整版，含实现细节
- "对比 A 和 B" → 聚焦特定方案比较
工程化配置：CLUDE.md
Brainstorming 能发挥作用，前提是 AI 了解你的项目规范。这就是 CLUDE.md 的作用——项目级的 AI 行为指南。
前端项目 CLUDE.md 模板
# CLUDE.md - 项目 AI 协作指南
## 技术栈
- Next.js 14 (App Router)
- TypeScript (严格模式)
- Tailwind CSS + shadcn/ui
- Zustand (状态管理)
- React Query (服务端状态)
## 代码规范
- 所有组件用函数式 + Hooks
- Props 必须定义 interface
- 异步操作统一用 try/catch + toast 错误提示
- 颜色必须用 tailwind.config 里的语义化命名
## 文件组织
- 页面 → app/ 目录
- 组件 → components/ 目录，按功能分子文件夹
- 工具函数 → lib/utils/
- API 调用 → lib/api/
## 常用模式
- 表单：React Hook Form + Zod
- 列表：表格 + 分页 + 搜索（参考 components/data-table/）
- 弹窗：shadcn Dialog，确认操作二次确认
## AI 协作模式
- 默认启用 brainstorming 模式
- 复杂任务（>3 个文件改动）必须输出方案对比
- 技术选型类问题先分析后执行
## 禁止事项
- 不要用 any
- 不要直接操作 DOM
- 不要在组件里写死样式值
效果
- 每次对话不用重复技术栈
- AI 生成的代码自动符合团队规范
- 新成员 onboarding 更快
工作流整合：三件套配合
需求描述（人）
↓
GLM5 推理拆解任务（Brainstorming 模式）
↓
Claude Code 执行（调用 Skills）
↓
生成代码 + 自动检查（ESLint/TypeScript）
↓
人审阅 + 微调
典型会话
人：加用户管理页面，参考现有角色管理页
CC（读 CLUDE.md）：了解技术栈和规范
CC（读 app/roles/page.tsx）：分析参考实现
CC（调 GLM5 思考）：拆解为组件、API、类型三部分
CC（执行）：生成代码、安装依赖、创建文件
CC（自检）：运行 type-check，修复类型错误
人：验收，提微调意见
CC：快速迭代
效率提升的本质
不是"AI 写代码比人快"，而是：
- 上下文切换成本归零 → 不用在浏览器、文档、IDE 之间跳来跳去
- 样板代码消失 → 你只需要关注业务逻辑
- 试错成本极低 → 说错需求了？改一句话，5 秒后看新结果
- 知识即时获取 → "这个 API 怎么用"变成直接问，不用查文档
给中级开发者的上手建议
第一周：从简单任务开始
- 让 CC 帮你写单元测试
- 让它解释看不懂的代码
- 用它生成 TypeScript 类型定义
第二周：尝试完整功能
- 一个小表单、一个列表页
- 刻意练习"描述需求"的能力
第三周：建立自己的工作流
- 哪些事交给 CC（样板代码、配置、测试）
- 哪些事必须自己把控（架构设计、核心算法、代码审查）
总结
效率翻倍的三个支柱：
- 模型配置 → GLM5 提供推理能力
- Brainstorming Skill → 把思考过程自动化
- 工程规范 → CLUDE.md 保证一致性
不是让 AI 代替你思考，是让 AI 承担执行负担，你把精力花在架构设计和业务理解上。
GLM5 让我敢想，Claude Code 让我敢做。
你有什么 Claude Code 的使用技巧？欢迎在评论区分享。
