Claude Code + 智谱 AI 配置使用指南

# 安装 Node.js

# 安装

参考官方文档，使用 nvm 和 npm 方式安装 Node.js。

安装完成后验证版本：

1
2
3
4


❯ node -v
v22.19.0
❯ npm -v
10.9.3

# 升级

查看当前可用版本：

1

nvm ls-remote

安装目标版本：

1

❯ nvm install 24

设为默认版本：

1
2


❯ nvm alias default 24.12.0
❯ node -v

升级 npm

1
2


❯ npm install -g npm@latest
❯ npm -v

卸载旧版本

1
2


nvm ls
nvm uninstall <version>

# 安装 Claude Code

1
2
3
4
5
6
7
8


# 安装
npm install -g @anthropic-ai/claude-code

# 检查当前版本
claude --version

# 升级到最新版本
claude update

# 配置智谱 API

注册智谱开放平台，创建API Keys。

使用智谱 Coding Tool Helper ，按照提示进行配置。

1

npx @z_ai/coding-helper

使用 Coding Tool Helper 还可以安装智谱用量查询插件，以及套餐专属 MCP 服务：

# 精选 MCP 服务

context7 给 AI 工具提供最新的 API 文档。

1
2


claude mcp add --transport http context7 https://mcp.context7.com/mcp \
  --header "CONTEXT7_API_KEY: YOUR_API_KEY" -s user

1

claude mcp add playwright npx @playwright/mcp@latest

# 精选 Skills

# 官方 skills

推荐插件列表

frontend-design
ralph-wiggum Claude Code 之父 Boris Cherny 推荐的 skill，内部是一个循环，不停的根据任务说明书，一遍又一遍地改进工作，直到彻底完成，可以让 Claude Code“通宵干活”。

# superpowers

superpowers 一套专为 AI 编程 Agent 设计的全流程工作流系统。

1
2


/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

# dev-browser

让 Claude 控制浏览器，进行测试和验证。功能和 Playwright MCP 类似，但据说比 Playwright MCP 强。

1
2


/plugin marketplace add sawyerhood/dev-browser
/plugin install dev-browser@sawyerhood/dev-browser

# 使用技巧

# 危险模式

1

claude --dangerously-skip-permissions

# Plan Mode

连续按 Shift + Tab，直到切换成 Plan Mode，只和你讨论需求，不会进行任何代码的修改。

# 深度思考

在提示中加入关键词：

1
2
3
4
5


"think about how to implement user authentication"
"think harder about this performance issue"
"ultrathink about the architecture design"

（你的需求描述）ultrathink

# CLAUDE.md

开发指南、构建命令、代码风格等关键信息，参考Xuanwo’s AGENTS.md

# IDE

1

/ide

选择 Claude Code 连接的 IDE，如果选择 vs code，会自动安装 Claude Code for VS Code 插件。

# 输入多行

在 macOS 上，使用 Option + Enter 插入换行符（Line breaks）。可用通过设置，将换行操作绑定到 Shift + Enter。

1

/terminal-setup

# 上下文处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


# 查看当前上下文的使用
/context 

# 情况上下文状态。
# 先让 Claude 把计划与进度写入一个 .md 文件，再清空。
/clear

# 恢复会话
claude --resume
/resume

# 继续上次会话
claude --continue

# 回退对话（撤销代码更改）
/rewind

# 规划/头脑风暴

如果你只有一个初步的想法，还没有详细的规划，可以先使用 Superpowers 的 /superpowers:brainstorm 进行头脑风暴，和 Claude Code 讨论，一步步梳理想法，清晰目标，最终完成详细的产品规划。

有了规划，可以继续使用 /superpowers:write-plan 创建具体的实现方案，最后 /superpowers:execute-plan，方案落地执行。

另外，Claude code 内置的 AskUserQuestion 工具也很有用，它的作用是，AI 在遇到模糊不清的情况或需要决策时，AI 会主动暂停，然后不断向你提问，目标清晰后再继续执行。

你也可以主动触发 AskUserQuestionTool ，例如 Thariq 分享的方法，开始动手前，让 AskUserQuestionTool 对你的规划进行“面试“：

1
2
3


read this @SPEC.md and interview me in detail using the AskUserQuestionTool about literally anything: technical implementation, UI & UX, concerns, tradeoffs, etc. but make sure the questions are not obvious

be very in-depth and continue interviewing me continually until it's complete, then write the spec to the file

结合 Superpowers，我们可以在 Superpowers 完成设计后，让 AskUserQuestionTool 面试提问，相信经过 AskUserQuestionTool 的锤炼，产品设计更加清晰，符合你的预期。

# 参考 spec-kit

Spec Kit 是一套很重的规则，很多人不建议使用，但参考部分技巧还是可取的，例如 yetone 在推文中提到，可参考The Nine Articles of Development的前三个规则。

如何使用？可以将规则定义放在一个固定的路径，然后在 http://AGENTS.md/CLAUDE.md 中引用这个路径。

# UI/UX

关于 UI/UX 设计，我还没有太多经验，不知道怎么生成令人惊艳的界面。目前只是在产品设计规划阶段，细化对界面的需求：

1

我希望使用 shadcn/ui，主题为 npx shadcn@latest add https://tweakcn.com/r/themes/claude.json，页面布局参考常见的 SaaS 软件，左右两栏布局，左边是菜单栏。

上面的提示让 Claude Code 参考 tweakcn.com 预定义的样式生成界面，也可以直接将theme的 css 代码直接复制给 Claude code。

据说可以用 frontend-design 改进前端设计，打算先学习 Frontend Aesthetics: A Prompting Guide。是否可以让 frontend-design 根据需求直接生成页面？

另外可以参考一些生成前端页面的 prompt 或 skills：

designprompts.dev 和 designprompt.vercel.app 提供了多种前端风格的 prompt，可以直接复制使用。
UI UX Pro Max UI/UX skill，包含了多种前端样式。

# 前端测试

配置好 Playwright MCP server，就可以在 Claude Code 中明确要求使用 Playwright 进行前端功能测试。

如果是在本地开发，也可以使用 dev-browser 进行前端测试。

# 状态栏定制

目前有两个定制 statusline 的小工具，都能实时显示使用的模型，context usage 等信息。

我选择了 Claude Powerline，配置很简单，在 .claude/settings.json 中添加如下配置即可：

1
2
3
4


  "statusLine": {
    "type": "command",
    "command": "npx -y @owloops/claude-powerline@latest --style=powerline --theme=gruvbox"
  },