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 不能使用）

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

2.2 Claude 安装

Windows 版本教程

系统要求

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

1. 安装 Node.js

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

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

node -v

2. 安装 Claude Code

打开命令提示符 (CMD) 或 PowerShell，运行：

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

3. 验证安装

claude --version

4. 配置 API

4.1 获取 Auth Token

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

点击「添加令牌」
令牌分组请选择：Claude Code 专用（务必选择此分组，否则无法使用）
令牌名称：随意填写
额度建议：设置为无限额度
其他选项保持默认

4.2 配置环境变量

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

方法一：图形化配置（推荐，永久生效）

右键点击 “此电脑” → 选择 “属性”
点击 “高级系统设置”
在 “系统属性” 窗口中点击 “环境变量”
⭐ 重要：在 “系统变量” 部分点击 “新建”（多人共享电脑可选择 “用户变量”）
添加以下两个变量：
• 变量名：ANTHROPIC_AUTH_TOKEN，变量值：您的 API 密钥
• 变量名：ANTHROPIC_BASE_URL，变量值：https://jp.duckcoding.com
点击 “确定” 保存

方法二：PowerShell（永久设置）

[Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", "sk-xxx", "User")
[Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://jp.duckcoding.com", "User")

方法三：命令提示符（永久设置）

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

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

5. 启动 Claude Code

配置完成后，先进入到工程目录：

cd your-project-folder

然后，运行以下命令启动：

claude

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

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

2.3 需求分析

准备需求：

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

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

‍

生成计划清单：

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

项目介绍：

基于文档中的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：项目初始化

- [ ] **任务 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 生成计划清单的时候我已经准备了下面的几个文件：

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

将最重要的规则放在最顶端。内容示例：
- 使用 ES 模块语法（import/export），而非 CommonJS（require）
- 尽可能使用解构导入（例如：import { foo } from 'bar'）
- 完成一系列代码修改后，务必进行类型检查
“外部大脑” (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 及时发现问题进行改进。

‍

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

消费记录

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

2.5 实现效果

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

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

‍

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 ：

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 命令，并立即重新陈述当前任务，以帮助它重新集中注意力。

Claude使用体验