解构 Claude Code — 交互式源码分析、深度技术解读与架构探索平台。
Claude Harness 是一个开源平台，用于探索和理解 Claude Code（Anthropic 官方 AI 编程代理）的内部实现。通过交互式代码浏览、深度技术文章和模块级分析，将 50 万行 TypeScript 源码转化为可理解的学习资源。
Claude Code 是目前最精密的 AI 代理工具之一 — 在工具设计、上下文管理、权限治理和多代理协作方面堪称典范。但仅凭原始源码去理解其架构，门槛极高。
Claude Harness 让这套架构变得可读、可探索：
- 引导式文章 — 结合真实代码引用，逐一解读每个子系统
- 交互式代码浏览器 — 语法高亮 + 全文搜索，随时查阅源码
- 模块可视化 — 揭示代码库的结构关系与规模分布
无论你是在构建自己的 AI 代理、研究工具编排模式，还是单纯好奇 Claude Code 的工作原理 — 这个项目都适合你。
| 指标 | 数值 |
|---|---|
| 分析源文件数 | 1,902 |
| 代码行数 | 514,587 |
| 映射模块数 | 35 |
| 技术文章 | 31+ |
| 支持语言 | English, 中文, 日本語 |
浏览完整的 Claude Code 源码目录树，支持文件浏览器导航、Shiki 语法高亮，以及基于 FlexSearch 的客户端即时搜索。
31 篇引导式技术解读，覆盖每个核心子系统：
可视化展示 35 个核心模块的文件数、代码行数与功能描述：
utils 564 文件 181K 行 工具函数
components 389 文件 82K 行 Ink UI 组件 (~140 个)
services 130 文件 54K 行 外部服务集成
tools 184 文件 51K 行 代理工具实现 (~40 个)
commands 207 文件 27K 行 斜杠命令 (~50 个)
hooks 104 文件 19K 行 React Hooks
ink 96 文件 20K 行 Ink 渲染器封装
...以及另外 28 个模块
完整的国际化支持，覆盖英文、中文和日文 — 提供基于 locale 的路由和自动回退机制。
| 层级 | 技术 |
|---|---|
| 框架 | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS 4 |
| 代码高亮 | Shiki |
| 搜索 | FlexSearch |
| 文章 | MDX via next-mdx-remote |
| 国际化 | next-intl |
| 动画 | Motion |
| 图表 | Mermaid |
| Monorepo | Turbo |
| 部署 | Vercel |
- Node.js 22+（见
.node-version） - pnpm（或 npm）
# 克隆仓库
git clone https://github.com/anthropics/claude-harness.git
cd claude-harness
# 安装依赖
pnpm install
# 生成元数据（文件树、模块统计、搜索索引）
pnpm generate
# 启动开发服务器
pnpm dev应用将在 http://localhost:3000 可用。
pnpm buildclaude-harness/
├── content/
│ └── articles/
│ ├── en/ # 英文文章
│ ├── zh/ # 中文文章（31 篇）
│ └── ja/ # 日文文章
│
├── packages/
│ ├── claude-code-source/ # （源码不再分发 — 详见其 README）
│ ├── scripts/ # 元数据生成管线
│ │ └── src/
│ │ ├── generate-file-tree.ts
│ │ ├── generate-module-stats.ts
│ │ ├── generate-search-index.ts
│ │ └── generate-source-summary.ts
│ │
│ └── web/ # Next.js Web 应用
│ └── src/
│ ├── app/[locale]/ # 基于 locale 的页面
│ │ ├── articles/ # 文章列表与详情
│ │ ├── code/ # 交互式代码浏览器
│ │ └── modules/ # 模块浏览器
│ ├── components/ # 共享 UI 组件
│ ├── lib/ # 工具函数与数据加载
│ └── i18n/ # 国际化配置
│
├── turbo.json # Turbo monorepo 配置
├── vercel.json # Vercel 部署配置
└── package.json # 根工作区配置
pnpm generate 命令运行四个脚本，将本地提供的 Claude Code 源码处理为结构化元数据：
- 文件树 — 递归扫描源码目录，生成层级 JSON 树（1,902 个条目）
- 模块统计 — 分析 35 个顶级模块的文件数与代码行数
- 源码摘要 — 汇总整个代码库的总体数据
- 搜索索引 — 构建 FlexSearch 全文索引，供客户端搜索使用
这些生成的文件驱动了 Web UI 的代码浏览器、模块浏览器和搜索功能。
+---------------------------------------------------+
| Web Application |
| |
| +----------+ +----------+ +--------+ +---------+ |
| | Articles | | Code | | Module | | Search | |
| | (MDX) | | Browser | |Explorer| | (Flex) | |
| +----+-----+ +----+-----+ +---+----+ +----+----+ |
| | | | | |
| +----v-------------v-----------v-----------v----+ |
| | Generated Metadata | |
| | file-tree.json module-stats.json search-idx | |
| +------------------------+----------------------+ |
+---------------------------|-------------------------+
|
+---------v---------+
| Generation Scripts |
| (packages/scripts) |
+---------+---------+
|
+---------v---------+
| Claude Code Source |
| (不再分发) |
+--------------------+
欢迎贡献！以下是一些参与方式：
- 撰写文章 — 在
content/articles/中添加新的技术解读 - 翻译 — 帮助扩展英文和日文文章覆盖率
- 改进 UI — 优化代码浏览器、模块浏览器或搜索体验
- 修复 Bug — 查看 Issues 中的待处理项
文章是 content/articles/{locale}/ 中的 MDX 文件，每个文件需要包含 frontmatter：
---
title: "文章标题"
description: "简要描述"
order: 32
tags: ["标签1", "标签2"]
readTime: "15 min"
---
正文内容...- Claude Code — Anthropic 官方 AI 编程代理
MIT