CLAUDE.md 最佳实践：10 个必写章节让你的 AI 编程效率翻倍

## Project Overview
项目的简短说明。

## Tech Stack
- TypeScript
- Next.js
- Tailwind
- ShadCN

## Architecture
解释文件夹结构和设计模式。

## Coding Rules
- 使用函数式 React 组件
- 优先使用服务端组件
- 使用 Tailwind 工具类而非自定义 CSS

## Design System
- 遵循 ShadCN 设计模式
- 使用 /styles/tokens.ts 中的令牌

## Commands
- 开发：npm run dev
- 构建：npm run build

## Project Overview
本项目是一个面向产品设计师的 AI 落地页生成和优化 Web 应用。
主要用户是创业公司创始人和营销人员，追求快速获得高质量输出。
产品优化目标：
- 视觉精致度
- 迭代速度
- 干净响应式代码
- 工程交接便利性

避免过度工程化，优先简洁而非炫技。

## Tech Stack
- Next.js 15 with App Router
- TypeScript
- Tailwind CSS
- shadcn/ui
- React Hook Form + Zod (表单处理)
- Supabase (认证与数据)
- Vitest (单元测试)

除非明确要求，否则不要引入：
- Redux
- styled-components
- Material UI

## Architecture
- `app/` 包含路由和服务端组件
- `components/ui/` 包含可复用的设计系统组件
- `components/marketing/` 包含落地页区块
- `lib/` 包含工具函数、API 助手和共享配置
- `features/` 包含特定功能的业务逻辑
- `types/` 包含共享 TypeScript 类型

规则：
- 页面级组合放在路由文件中
- 重复 UI 提取为可复用组件
- 尽量将副作用排除在 UI 组件之外
- 除非需要客户端交互，否则优先服务端数据获取

## Coding Conventions
- 严格使用 TypeScript，避免 `any`
- 优先使用函数式组件
- 共享模块使用具名导出
- 使用 async/await 代替链式 Promise
- 保持组件专注和可组合
- 将重复逻辑提取为 hook 或工具函数
- 使用描述性变量名，避免缩写
- 仅在意图不明显时添加注释
- 不要遗留死代码或注释掉的代码块

## UI and Design Rules
- 默认使用 shadcn/ui 基础组件
- 偏好宽敞布局和强视觉层次
- 克制使用颜色，依赖字体排印、间距和对比度
- 使用 8px 间距节奏
- 按钮应有明确的主/次层级
- 表单应简洁、可扫描、移动友好
- 每个交互元素必须有可见的 hover、focus 和 disabled 状态
- 满足对比度、标签和键盘导航的无障碍标准

## Content Guidelines
- 使用简洁、自信的语言
- 避免夸大和空洞的营销用语
- 标题先求清晰再求巧妙
- 正文聚焦用户收益
- 优先使用短段落和可扫描结构
- 避免行话，除非目标受众明确期望

## Testing and Quality
在标记任务完成前：
- 运行类型检查
- 运行 lint
- 运行修改逻辑的相关测试

测试规则：
- 为可复用逻辑添加单元测试
- 不要为简单的展示区块添加繁重的测试脚手架
- 确保 UI 变更的响应式行为
- 验证空状态、加载状态和错误状态

## File Placement Rules
- 新的落地页区块添加到 `components/marketing/sections`
- 可复用的基础组件添加到 `components/ui`
- 共享工具函数放在 `lib`
- 不要为一次性使用创建新的抽象层
- 优先编辑现有组件，而非创建近似的副本

## Safety Rules
- 除非明确要求，不要重命名公开 API 路由
- 不要修改数据库 schema，除非明确说明
- 除非任务需要，不要修改认证流程
- 保持共享组件的向后兼容性
- 在实现重大架构变更前先标记出来

## Commands
- 安装依赖：`pnpm install`
- 开发：`pnpm dev`
- 构建：`pnpm build`
- Lint：`pnpm lint`
- 类型检查：`pnpm typecheck`
- 测试：`pnpm test`