02 · 代码生成与补全

代码生成是 Claude Code 最常用的能力。但「能生成」和「生成得好」之间，差距只在 prompt 质量。

写组件的 prompt 公式

生成一个组件，有效的 prompt 需要包含：

组件名称和职责
Props 的类型定义
使用的技术栈
特殊行为或边界情况

差的 prompt：

帮我写一个按钮组件

好的 prompt：

写一个 Button 组件（TypeScript）：

Props：
- variant: 'primary' | 'secondary' | 'ghost'
- size: 'sm' | 'md' | 'lg'（默认 'md'）
- disabled?: boolean
- loading?: boolean
- onClick?: () => void
- children: React.ReactNode

行为：
- loading 时显示 Spinner，禁止触发 onClick
- disabled 时视觉灰化，禁止触发 onClick
- 用 Tailwind CSS，样式随 variant 变化

同时导出组件和 ButtonProps 类型。

生成自定义 Hook

Hook 的 prompt 要说清楚：输入是什么、返回什么、副作用怎么处理。

写一个 useDebounce hook（TypeScript 泛型）：

参数：value（T）, delay（number，默认 300ms）
返回：debouncedValue（T）

逻辑：value 变化时，等 delay ms 后才更新 debouncedValue。
组件卸载时清除定时器。

写一个 useLocalStorage hook：

参数：key（string）, initialValue（T）
返回：[value, setValue, removeValue]

逻辑：
- 初始化时从 localStorage 读取，读不到就用 initialValue
- setValue 同时更新 state 和 localStorage
- 处理 JSON 解析失败的情况
- SSR 友好（window 不存在时降级）

批量生成工具函数

有一批相关工具函数要写？一次告诉 Claude 整体目标：

帮我写 /src/utils/date.ts，包含以下函数（全部 TypeScript）：

- formatDate(date: Date | string, format: string): string
- parseDate(str: string): Date | null
- addDays(date: Date, days: number): Date
- isSameDay(a: Date, b: Date): boolean
- getRelativeTime(date: Date): string（如"3 小时前"、"昨天"）

每个函数加 JSDoc，导出所有函数。

让 Claude 读现有代码再生成

生成的代码要和现有代码风格一致时，先让它读相关代码：

先读 /src/components/Button.tsx 和 /src/components/Input.tsx，
然后按照相同的风格和规范，写一个 Select 组件。

Select 组件需要支持：
- 单选和多选（通过 multiple prop 切换）
- 搜索过滤选项
- 自定义 option render

多文件同时生成

一个功能涉及多个文件时，一次告诉 Claude 全部要创建的文件：

为用户登录功能创建以下文件：

1. /src/api/auth.ts — 登录、登出、token 刷新 API 调用
2. /src/stores/authStore.ts — 用 Zustand 管理登录状态
3. /src/hooks/useAuth.ts — 封装 authStore + 登录逻辑
4. /src/components/LoginForm.tsx — 登录表单，用 react-hook-form

先读 /src/stores/ 目录下现有 store，理解约定后再写。

生成命令

有时候代码不如直接让 Claude 执行命令：

用 shadcn/ui CLI 添加 Dialog、Sheet、Tooltip 三个组件

Claude Code 会直接用 bash 执行，你不需要手动操作。

02 · 代码生成与补全 ​

写组件的 prompt 公式 ​

生成自定义 Hook ​

批量生成工具函数 ​

让 Claude 读现有代码再生成 ​

多文件同时生成 ​