Claude使用体验

image

Claude使用体验

简介

这篇记录主要分享我使用 Claude Code 从零开发一个前端小项目的完整过程,包括环境安装、令牌配置、需求分析、代码开发与优化技巧。文末附上可访问的在线体验地址。

引言

随着大模型的快速发展,AI 辅助编码取得巨大的进步,作为一名程序员,紧跟时代,必须要学习 AI,使用 AI 编码,当前最大强大的编码大模型非 Claude 莫属,趁国庆放假体验一下 Claude Code

1. Claude 是什么

Claude 是由 Anthropic 开发的最先进的大型语言模型系列,Claude Code 是当前最强大的编码大模型,Claude Code 为您做什么?下面介绍来自官网介绍:

  • 从描述构建功能:用简单的英语告诉 Claude 您想要构建什么。它会制定计划、编写代码并确保其正常工作。
  • 调试和修复问题:描述一个错误或粘贴错误消息。Claude Code 将分析您的代码库,识别问题并实施修复。
  • 导航任何代码库​:询问关于您团队代码库的任何问题,并获得深思熟虑的答案。Claude Code 保持对整个项目结构的感知,可以从网络上找到最新信息,并且通过 MCP 可以从外部数据源(如 Google Drive、Figma 和 Slack)获取信息。
  • 自动化繁琐任务:修复复杂的 lint 问题、解决合并冲突并编写发布说明。在您的开发机器上通过单个命令完成所有这些,或在 CI 中自动完成。

当前 Claude Code 有 2 个强大的模型:Claude Sonnet 4.5 和 Claude Opus 4.1。Claude 4 Opus 和 Claude 4 Sonnet 在基础代码生成能力上相差不大,它们的核心区别在于应用场景和运行特性。Opus 是面向复杂编程挑战的”耐力型选手”,具有更强的持久性和系统级编程能力;而 Sonnet 则是日常编程的”高效助手”,提供更快的响应和更高的性价比。

2. 使用 Claude 开发一个项目

为了体验 Claude,我准备使用 Claude Code 开发一个简单的前端项目,从需求分析到代码开发都由 Claude 完成。

2.1 Claude 资源获取

Claude 当前对中国地区进行封禁,国内有很多大模型中转站,原理就是中转站购买大量 Claude 账号,然后把 Claude 提供的 API 中转给大家使用,它在中间收取差价。

下面是网友总结的 A 社在增加使用限制后, 站内部分热门 Claude code 中转现状及应对措施整理表格

服务商 涨价 核心调整内容 备注
88code 涨价 按量从 29.9 用 150 涨到 68 用 200,涨幅 1.7 倍。免费套餐倍率改为(8-24 点 10 倍率, 0-8 点 2 倍率)。包月套餐提升额度上限,取消每小时恢复额度,每天重置次数由 1 次改为 2 次。按量套餐限制使用数量。 变化比较多,大家仔细看。非免费套餐的倍率是否修改未知,欢迎补充
DuckCode 已涨 CC 倍率由 (闲时 0.2, 忙时 0.4) 上调至 (闲时 1.3, 忙时 1.5) (涨幅 6.5/3.75 倍)。 Codex 模型倍率未调整。增加了低价 2API 分组
FoxCode 已涨 CC 倍率上调 ​5~6 倍​,Codex 倍率上调 ​1.5 倍 Codex 应该没新限制吧?
Privnode 已涨 CC 倍率 0.35(后备分组倍率 0.7),Codex 为 0.2 (标注稳定)。 据 N 佬自己说就算涨价上限应该是 0.6(就是 2 倍), 取消 0.15cc 特价倍率,取消 0.3 倍率
packycode 已涨 强制将所有包月套餐转为按量套餐。倍率 1 有补偿详见转换规则(见表格后)。
IKunCode 已涨 强制将包月套餐转为按量套餐,原按量套餐保持,倍率(闲时 1.1, 忙时 1.2)。 提供退款或转换补偿方案,新增了 Codex 0.2 倍率测试。

我选择使用 DuckCode,整体使用体验还不错,它支持的模型也比较多,这样我在一个平台就能体验到各个公司的大模型了 (不过 Deepseek 不能使用)

image

在平台完成充值后,创建令牌,这个令牌相当于使用 Claude 的密钥

image

2.2 Claude 安装

Windows 版本教程

系统要求

  • Windows 10 或 Windows 11
  • Node.js 18+
  • 网络连接

1. 安装 Node.js

访问 https://nodejs.cn/download/current,进入 Node.JS 官网,点击最新版本,选择对应的操作系统和版本下载即可

下载后双击安装,之后一直点击下一步。安装完成后,打开 CMD 窗口,执行命令验证安装:

CMD 复制

1
node -v

2. 安装 Claude Code

打开命令提示符 (CMD) 或 PowerShell,运行:

CMD/PowerShell 复制

1
npm install -g @anthropic-ai/claude-code

3. 验证安装

CMD/PowerShell 复制

1
claude --version

4. 配置 API

4.1 获取 Auth Token

访问 DuckCoding 控制台 进行以下操作:

  • 点击「添加令牌」
  • 令牌分组请选择:Claude Code 专用(务必选择此分组,否则无法使用)
  • 令牌名称:随意填写
  • 额度建议:设置为无限额度
  • 其他选项保持默认
4.2 配置环境变量

重要提示:请将下方的 sk-xxx 替换为您在 https://duckcoding.com/console/token 生成的 Claude Code 专用 API 密钥!

方法一:图形化配置(推荐,永久生效)
  1. 右键点击 “此电脑” → 选择 “属性”
  2. 点击 “高级系统设置”
  3. 在 “系统属性” 窗口中点击 “环境变量”
  4. ⭐ 重要:在 “系统变量” 部分点击 “新建”(多人共享电脑可选择 “用户变量”)
  5. 添加以下两个变量:
  6. • 变量名:ANTHROPIC_AUTH_TOKEN,变量值:您的 API 密钥
  7. • 变量名:ANTHROPIC_BASE_URL​,变量值:https://jp.duckcoding.com
  8. 点击 “确定” 保存
方法二:PowerShell(永久设置)

PowerShell 复制

1
2
[Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", "sk-xxx", "User")
[Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://jp.duckcoding.com", "User")
方法三:命令提示符(永久设置)

CMD 复制

1
2
setx ANTHROPIC_AUTH_TOKEN "sk-xxx"
setx ANTHROPIC_BASE_URL "https://jp.duckcoding.com"

注意: 永久设置后需要重启终端才能生效。推荐使用永久配置方式。

5. 启动 Claude Code

配置完成后,先进入到工程目录:

CMD/PowerShell 复制

1
cd your-project-folder

然后,运行以下命令启动:

CMD/PowerShell 复制

1
claude

首次启动后需要先进行主题的选择等操作:

  • 选择喜欢的主题(回车)
  • 确认安全须知(回车)
  • 使用默认 Terminal 配置(回车)
  • 信任工作目录(回车)
  • 开始编程!🚀

2.3 需求分析

准备需求:

我在知乎上找到一篇高赞的回答 (99+ 封私信 / 45 条消息) 如何提高自制力? - 知乎,主要介绍的是 基于CTDP和RSIP两代自控技术,通过科学的行为管理机制,帮助用户实现可持续的自制力提升,根据这个回答,我准备实现一个简单的 WEB 端自制力提升工具。

先把这篇文档制作成 pdf,然后我使用 GPT5 根据这篇文档设计一个 web 网站

image

生成计划清单:

接下来我把 GPT 分析的产品需求放到本地文件中,内容如下,然后我告诉 Claude code:根据 projectbrief.md 文件中的内容,设计一个名为 **「自律重构者」(Self-Optimize)** 的Web工具​,生成一个可供 AI 开发执行的计划清单,然后输出到 PLAN.md​ 文件。•格式是不可协商的: 它必须是一个 Markdown 清单,其中每一项都是一个完整、可执行的、用于 AI 下一步操作的提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
项目介绍:

基于文档中的CTDP与RSIP技术框架,设计一个名为 **「自律重构者」(Self-Optimize)** 的Web工具,产品功能架构如下:

# 自制力管理工具 - 产品设计方案

## 一、产品概述

**产品名称:** 自律重构者

**核心理念:** 基于CTDP和RSIP两代自控技术,通过科学的行为管理机制,帮助用户实现可持续的自制力提升。

---

## 二、核心功能模块

### 1. **神圣座位管理模块** (基于CTDP)

#### 功能点:
- **座位创建**:用户可创建多个"神圣座位"(学习、运动、阅读等)
- **任务链管理**
- 显示当前座位的任务链编号(#1, #2, #3...)
- 展示工作量证明历史
- 链条断裂预警
- **规则设定**
- 定义"最好状态"的具体标准
- "下必为例"判例库管理
- 违规判定与处理流程
- **预约系统**
- 15分钟预约倒计时
- 预约信号触发(可自定义手势、声音等)
- 预约链独立管理

#### 对应页面:
- 神圣座位列表页
- 座位详情页
- 任务执行页(含计时器)
- 判例库管理页
- 预约触发页

## 三、核心用户旅程

### **旅程1:新用户入门**

1. **注册/登录** → 欢迎页
2. **自制力评估问卷** → 了解用户基础状态
3. **选择核心痛点** → 手机成瘾/拖延症/作息混乱等
4. **引导创建第一个神圣座位** → 简化版设置向导
5. **引导创建第一个定式** → 从最简单的开始
6. **完成第一次任务** → 获得成就感,理解机制
7. **查看数据反馈** → 了解自己的进步

### **旅程2:日常使用(CTDP为主)**

## 四、页面架构

## 五、关键设计原则

1. **降低认知负担**:复杂理论后置,新手引导简化
2. **即时反馈**:每个操作都有清晰的视觉/数据反馈
3. **防止过度游戏化**:避免积分、排名等外在激励
4. **尊重隐私**:所有数据本地优先,可选云同步
5. **灵活但严格**:机制可自定义,但一旦设定就强制执行
6. **对ADHD友好**
- 大按钮、高对比度
- 最小化干扰
- 支持快捷键
- 分段式内容呈现

## 六、技术亮点

1. **本地优先架构**:离线可用,避免依赖网络
2. **智能算法**
- 不可逃逸区自动识别
- 定式冲突检测
- 稳态评分算法
3. **跨平台同步**:Web数据同步

这个产品设计既忠实于原文的科学理论,又充分考虑了实际使用场景和用户体验,相信能真正帮助到那些与自制力问题斗争的人们。

最后输出的清单长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 自律重构者 - 项目开发计划清单

## 阶段 1:项目初始化

- [ ] **任务 1.1:初始化 Vue3 项目**
- 使用 `npm create vue@latest` 创建 Vue3 项目,选择 TypeScript、Vue Router、Pinia 状态管理
- 项目名称:attention
- 配置选项:TypeScript、Router、Pinia、ESLint

- [ ] **任务 1.2:安装并配置 Element Plus**
- 运行 `npm install element-plus` 安装 Element Plus UI 组件库
- 在 main.ts 中全局引入 Element Plus 及其样式
- 配置自动导入插件(unplugin-vue-components 和 unplugin-auto-import)

- [ ] **任务 1.3:配置项目基础架构**
- 创建 src/stores 目录,用于存放 Pinia 状态管理文件
- 创建 src/utils 目录,存放工具函数(localStorage 封装等)
- 创建 src/types 目录,存放 TypeScript 类型定义
- 创建 src/composables 目录,存放可复用的组合式函数

---

## 阶段 2:核心数据模型设计

## 阶段 3:**
---

## 注意事项

- 每个任务完成后,运行 `npm run typecheck` 确保没有类型错误
- 定期提交代码到 Git,保持版本控制
- 优先开发 P0 和 P1 功能,确保 MVP 快速上线
- 保持代码简洁和可维护性,使用 ESLint 检查代码规范
- 所有用户数据使用 localStorage 存储,确保数据隐私和安全

交叉检验你的计划:

•将你刚生成的 PLAN.md 粘贴到另一个 AI(如 Gemini)中。•问它:“这份计划是由另一个 AI 编写的。作为一名挑剔的资深工程师,你看到了哪些潜在问题或风险?”•这有助于你发现单个模型可能存在的盲点,从而优化你的计划清单

2.4 代码开发

2.4.1 规则文件:

在 2.4 生成计划清单的时候我已经准备了下面的几个文件:

  1. 核心规则手册 (CLAUDE.md): 在你的项目根目录中创建此文件。

    将最重要的规则放在最顶端。内容示例:

    • 使用 ES 模块语法(import/export​),而非 CommonJS(require

    • 尽可能使用解构导入(例如:import { foo } from 'bar'

    • 完成一系列代码修改后,务必进行类型检查

  2. “外部大脑” (memory-bank/ 文件夹): 这是最关键的部分。创建一个名为 memory-bank 的文件夹。

•在其中创建以下文件(从简单开始,逐步填充):

projectbrief.md: 项目的描述。

techContext.md: 你正在使用的技术栈和版本(项目技术栈: VUE3, npm, UI 组件库:Element Plus, 用户产生的数据使用浏览器的 localStorage 保存)。

systemPatterns.md: 你的架构和设计模式。

activeContext.md: 这是“当前记忆”。它追踪你当下正在做什么以及下一步计划。

progress.md: 整体项目进度。记录已完成和未完成的部分。

2.4.2 代码开发

接下来代码开发就比较简单了,根据前面的生成的计划清单,让 Claude code 执行每个子任务,需要注意的是让 Claude code 执行任务时,采用小步快走的方式,让 AI 以一个个最小的功能单元去写代码,写完成后最好让他自己执行编译检查,必要时需要启动服务,检查是否有语法错误、运行错误,小步快走能让 AI 及时发现问题进行改进。

image

最后我用了 4 小时,花费 30¥,生成 68 个文件, 16585 行代码。

image

消费记录

image

期间我一共介入了 2 次修改代码,一次是生成的代码缺少分号,导致运行失败,这个问题是比较低级的错误,Claude code 竟然犯了这种错误;还有一次是生成的页面样式不正确,主页不能铺满全屏,我提示它进行修改,但它始终修改不正确,这类界面样式问题对它来说确实不好处理,后面看看能不能通过 MCP 让它自己到浏览器中去检查、调试

2.5 实现效果

整体实现的完成度还是挺高的,整个功能流程是能打通的。不过发现了在某个下钻功能里,没有实现完整的功能,看了一下,主要还是需求没有考虑到这点,AI 实现的时候也只是实现了个假按钮,这也侧面说明了让 AI 做事,得把需求写清晰。

体验地址:首页 - 自律重构者

image

3 Claude 使用技巧

将 Claude Code 视为一位才华横溢但健忘的专家。 它能力超群,但每隔几分钟就会忘记你是谁、你在做什么。你最重要的工作就是为它构建一个完美的“外部大脑”,让它能随时“恢复记忆”并投入工作。


阶段 0:准备你的环境

在编写第一个提示之前,请先配置好你的工作区,为成功奠定基础。

[1] 核心规则手册 (CLAUDE.md): 在你的项目根目录中创建此文件。

保持简洁。 将最重要的规则放在最顶端。•核心内容示例:

•”开发必须遵循 TDD(测试驱动开发)方法论。”•”所有实现必须严格遵循 PLAN.md 中概述的步骤。”•”我们的主要技术栈是 [React, FastAPI, PostgreSQL]。除非计划中特别指明,否则不要引入其他库。”

[2] “外部大脑” (memory-bank/ 文件夹): 这是最关键的部分。创建一个名为 memory-bank 的文件夹。

•在其中创建以下文件(从简单开始,逐步填充):

projectbrief.md: 项目的一句话描述(例如:“一个任务管理应用程序的后端服务。”)。•techContext.md: 你正在使用的技术栈和版本(例如:“Python 3.11, FastAPI, Pydantic, pytest”)。•systemPatterns.md: 你的架构和设计模式(例如:“使用三层架构:API 层、服务层、数据层。”)。•activeContext.md: 这是“当前记忆”。它追踪你当下正在做什么以及下一步计划。•progress.md: 整体项目进度。记录已完成和未完成的部分。

[3] 赋予 Claude “手和脚” (安装 MCP 服务器 - 可选但推荐):

•像 Serena 或 zen-mcp 这样的工具,可以让 Claude 直接与你的本地机器交互(读/写文件、运行代码、执行 git 命令)。•这能将 AI 的能力提升到一个新的水平。


阶段 1:无懈可击的蓝图(规划)

你在规划上节省的每一分钟,都将以十倍的调试时间偿还。

[4] “清单驱动”的计划 (PLAN.md):

•这是核心技巧。告诉 Claude 你的“​初始状态​”和“​最终状态​”,然后让它生成一个 PLAN.md​ 文件。•格式是不可协商的: 它必须是一个 Markdown 清单,其中​每一项都是一个完整、可执行的、用于 AI 下一步操作的提示​。•示例 PLAN.md

1
2
3
Prompt: "在文件 `models/task.py` 中,为 'Task' 创建 Pydantic 数据模型,包含 id、title、description 和 is_completed 字段。"
Prompt: "在 `database/crud.py` 中,编写创建新任务并将其保存到数据库的函数。"
Prompt: "为'创建新任务'函数编写一个失败的单元测试,并保存在 `tests/test_crud.py` 中。"

[5] 交叉检验你的计划:

•将你刚生成的 PLAN.md 粘贴到另一个 AI(如 Gemini)中。•问它:“这份计划是由另一个 AI 编写的。作为一名挑剔的资深工程师,你看到了哪些潜在问题或风险?”•这有助于你发现单个模型可能存在的盲点。


阶段 2:迭代构建(实施)

小步快跑,持续验证。

[6] 一次只做一件事:

•严格遵循你的 PLAN.md。复制第一个未完成的任务并将其粘贴给 Claude。

[7] 做一个“审查者”,而不是“聊天伙伴”:

•当 AI 完成一项任务时,像审查初级开发人员的 Pull Request 一样审查它的代码。•如果代码 95% 完美: 接受它,然后自己进行微调。•如果代码有明显缺陷: 不要试图通过对话来修复它,这会污染上下文。应该​完全拒绝这次变更​,回去修正你的 PLAN.md 使其更具体,然后让它基于改进后的计划重试该步骤。

[8] 频繁提交你的进度:

•一旦一小部分功能正常工作,立即用 Git 提交它。这能锁定你的进度,并在 AI 稍后犯错时让你能轻松回滚。

[9] 使用“魔法词”:

ultrathink: 在要求进行复杂规划或分析时,将这个词添加到提示的末尾。•sub-task with agents: 当需要它一次性读写多个文件以加快速度时,添加这个指令。

[10] UI 优先,逻辑其次:

•对于有用户界面的应用程序,一个很好的策略是先让 Claude 用虚拟数据构建 UI。一旦你对外观和感觉满意,再让它实现后端逻辑。(笔者注: 或者是逻辑优先,优先设计后端功能和接口,这样不会重新生成 UI 代码)


阶段 3:会话管理

确保你那健忘的专家总能找到回家的路。

[11] 干净地开始和结束会话:

结束会话前: 总是告诉 Claude:“请更新 activeContext.md​ 和 progress.md​,总结我们完成的工作并概述后续步骤。”•开始新会话时: 你的第一个提示应该总是:“你好,让我们继续项目。请先阅读 CLAUDE.md​ 和 memory-bank/ 文件夹中的所有文件,以全面了解当前的项目状态。”

[12] 关注“上下文”条:

•这个指示条显示了 AI 还剩下多少“记忆”。•一旦超过 50%,性能就会下降。使用 /compact 命令,并立即重新陈述当前任务,以帮助它重新集中注意力。