Anthropic - Claude Code Rules 实践分享

Anthropic - Claude Code Rules 实践分享

 次点击
 19 分钟阅读

大家好，

最近我在探索如何让 Claude Code (AI 编程助手) 更好地融入我们的开发工作流，发现了一个非常强大的机制——Rules (规则系统)。为了让 AI 生成的代码更符合我们的工程规范，我参考了开源社区的最佳实践，并在我们的 cloud原型设计 项目中正式落地了这套配置。

在此分享给大家，希望能帮助大家提升与 AI 协作的效率。

什么是 Claude Code Rules？

Claude Code 拥有一个“记忆”机制，它会自动读取项目根目录下的 .claude/rules/ 文件夹中的 Markdown 文件。

这些文件实际上充当了 System Prompt (系统提示词) 的一部分。通过这种方式，我们可以把团队的开发规范、技术栈约束、代码风格“灌输”给 AI，而不需要每次在对话中重复强调。

简单来说：Rules 就是 AI 的“员工手册”。

FAQ: 它和 CLAUDE.md 有什么关系？

你可能听说过 CLAUDE.md，它们其实是同一个体系下的不同表现形式：

  • CLAUDE.md (单文件模式):

    • 这是传统的配置方式，适合把所有指令写在一个文件里。

    • 就像是一个简单的 README，告诉 AI “关于本项目你需要知道的一切”。

  • .claude/rules/ (模块化模式):

    • 这是更进阶的配置方式，允许将规则拆分成多个小文件（如 testing.md, style.md）。

    • 优势 1：更易维护，避免一个文件写了几千行。

    • 优势 2：支持按路径生效。例如，我们可以设置某个规则只对 src/backend/ 生效，而不干扰前端代码。

结论：在我们的 cloud原型设计 项目中，我们选择使用 Rules (模块化模式)，因为它更适合我们要维护的大型企业级项目结构。

灵感来源：Everything Claude Code

这套实践参考了 GitHub 上的热门项目 everything-claude-code。

该项目作者是 Anthropic 黑客马拉松的获胜者。这套配置并非纸上谈兵，而是经过了作者在 10 多个月构建真实产品的日常高强度使用中打磨出来的生产级方案。它将 Claude 从一个通用的聊天机器人变成了一个懂 TDD、懂架构设计、懂代码审查的专业工程师。

项目当前配置

我已经根据 cloud原型设计 的技术栈特点，在 .claude/rules/ 目录下配置了以下 5 套核心规则。你可以直接复制以下内容到你的项目中。

1. Project Structure (项目结构)

教 AI 理解我们基于 Ant Design Pro 的目录结构。

  • 文件: .claude/rules/project-structure.md

  • 内容:

# Project Structure Rules

## Directory Organization
- `src/pages/`: Route components. Group by feature (e.g., `src/pages/dashboard/analysis`).
- `src/components/`: Reusable global components.
- `src/services/`: Global API definitions (generated or shared).
- `src/locales/`: i18n translation files.
- `config/`: Umi configuration files (`routes.ts`, `config.ts`).
- `mock/`: Global mock files.

## Page Structure
Each page directory (e.g., `src/pages/User/List`) should typically contain:
- `index.tsx`: Main component.
- `components/`: Page-specific sub-components.
- `service.ts`: API requests specific to this page.
- `data.d.ts`: TypeScript interfaces for data models.
- `_mock.ts`: Mock data for this page (optional).
- `style.less` or `style.ts`: Styles.

2. Tech Stack (技术栈)

明确我们的核心技术选型：Umi Max + React 19 + Ant Design v6。

  • 文件: .claude/rules/tech-stack.md

  • 内容:

# Tech Stack & Framework Rules

## Core Technologies
- **Framework**: Umi Max (`@umijs/max` ^4.3.24)
- **UI Library**: Ant Design v6 (`antd` ^6.1.4) + ProComponents (`@ant-design/pro-components`)
- **Language**: TypeScript v5.x
- **React**: v19.x (Use latest hooks and patterns)
- **Build Tool**: Webpack (via Umi Max)
- **Linter/Formatter**: Biome (`@biomejs/biome`)

## Constraints
- **NO Class Components**: Use Functional Components with Hooks exclusively.
- **NO CSS Modules**: Use `antd-style` or Less files (but prefer CSS-in-JS where possible with Ant Design v5/6 token system).

3. Coding Style (代码风格)

对接我们的 Biome 格式化标准和 TypeScript 规范。

  • 文件: .claude/rules/coding-style.md

  • 内容:

# Coding Style & Conventions

## General
- **Indentation**: 2 spaces (Enforced by Biome).
- **Semicolons**: Always use semicolons.

## Naming Conventions
- **Components**: PascalCase (e.g., `UserList.tsx`).
- **Hooks**: camelCase, start with `use` (e.g., `useUserList`).

## Ant Design Pro Patterns
- **ProComponents**: Prefer `ProTable`, `ProForm`, `ProLayout` over raw `Table`, `Form`, `Layout`.
- **Services**: Define API calls in `service.ts` alongside the page/component.

4. Testing (测试规范)

指定 Jest + React Testing Library 为测试标准。

  • 文件: .claude/rules/testing.md

  • 内容:

# Testing Guidelines

## Framework
- **Runner**: Jest
- **Library**: React Testing Library (`@testing-library/react`)

## Writing Tests
- Test user interactions (clicks, inputs) rather than implementation details.
- Use `screen.getByRole`, `screen.getByText` queries.
- Mock API calls using `jest.mock` or Umi's request mocking.

5. Git Workflow (Git 工作流)

强制执行 Conventional Commits 规范。

  • 文件: .claude/rules/git-workflow.md

  • 内容:

# Git Workflow & Version Control

## Commit Messages
Follow **Conventional Commits** specification.
Format: `<type>(<scope>): <subject>`

### Types
- `feat`: A new feature
- `fix`: A bug fix
- `docs`: Documentation only changes
- `chore`: Changes to the build process or auxiliary tools

### Examples
- `feat(user): add login page`
- `fix(table): fix sorting issue in user list`

团队收益

  1. 减少上下文切换：无需重复强调 TypeScript、Antd ProTable 或禁用 Class 组件等基础规范。

  2. 代码质量统一：无论成员经验如何，AI 生成的代码默认符合团队 Lint 规范和最佳实践。

  3. 新人友好：新加入的同学使用 AI 辅助时，也能直接产出符合项目标准的生产级代码。

如何参与

这套规则是动态演进的。如果你发现 AI 在特定场景下容易犯错（例如未处理错误边界或 API 使用不当），欢迎随时更新对应的 .md 文件。

让我们一起打造更智能的开发体验！

© 本文著作权归作者所有，未经许可不得转载使用。