AI编程第一步：以ClaudeCode为例

通过AI来写代码，毫无疑问 Claude Code 是主流，看个数据：

模型端视角：

Agent端视角：

那么 Claude Code 是什么呢？

Claude Code 是 Anthropic 官方推出的一个"AI 软件工程师助理"：

它直接住进你的电脑终端（Terminal）里，不仅能看懂你的整个项目代码，还能自己创建文件、修改 Bug、甚至帮你运行测试和执行 Git 提交。
而且它是一个命令行工具，无论你之前习惯用哪个IDE，你都没有任何的迁移成本。
它是一个TypeScript开发的node工具，可以通过npm安装。

这篇文章，我们演示个通过claude命令行，让AI给我们生成一个hello world的网页，再加上彩色的跑马灯效果。为此，我们要 ① 安装 claude 命令行； ② 连接大模型（默认是直连官方大模型，我们需要提供账户对应的APIKey或叫AuthToken；但如果我们是通过AI网关链接，还需提供BaseURL，甚至模型映射的模型精确名称）；③ 用自然语言编程（当然我们可以Prompt形式或Loop形式）。

整体的原理示意：

安装

安装：关于node和npm的介绍看参考生态：开发语言的第三方包管理

bash 复制代码

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

安装后，就能运行 claude命令行了：

bash 复制代码

> which claude
~/.nvm/versions/node/v22.22.0/bin/claude

> claude -v
2.1.204 (Claude Code)

查询: 有没有安装

bash 复制代码

npm list -g --depth=0

> npm list -g --depth=0
~/.nvm/versions/node/v22.22.0/lib
├── @anthropic-ai/claude-code@2.1.204

卸载：

bash 复制代码

# 卸载
npm uninstall -g @anthropic-ai/claude-code

# 删除 Claude Code 在本地生成的临时通信和缓存凭证
rm -rf ~/.claude

# 删除本地保存的聊天历史和日志（防止占用空间）
rm -rf ~/Library/Caches/claude-code

配置

安装完了，直接运行 claude 命令即可。但是要真的能写代码，必须先配置。至少要先配置我们的claude LLM的APIKey，因为它是收费的，APIKey是计费凭证，也是访问授权。

当然毕竟claude是面向用户的产品，因而它的配置提供两种方式，一种是程序员式的直接编辑配置(可以是配置文件或环境变量)，另一种是产品化的通过交互对话就能完成的。

我们先看产品化的：

选择长相：一般程序员都喜欢Dark Mode，科技感强。

登录方式：其实就是授权，通常选第三方平台。

如果要通过其他第三方AI网关链接claude LLM，那么我们通常要告诉claude code agent三个重要信息：

1）LLM大模型的BaseURL地址：大模型的根入口地址，可能是第三方AI网关的域名。只要根，因为API路径必须遵循Claude协议，是固定的。

2）LLL大模型的APIKey：这个是大模型的计费凭证和授权凭证。

3）LLL大模型的确切名称：网关上的大模型名称可能不完全跟claude官方的一致，允许做个映射关系。比如Claude Sonnet模型的确切名称，Claude Opus模型的确切名称，兜底的模型是什么名称。当然这个是可选参数，如果完全一样就不需要映射。

告知方式也有两种：一种是环境变量，另一种是配置文件。

环境变量：持久化存储在 ~/.zshrc 里

bash 复制代码

> nano ~/.zshrc

# Claude Code 公司网关配置
export ANTHROPIC_BASE_URL="https://ai-gateway.yourcompany.com/v1"
export ANTHROPIC_AUTH_TOKEN="你的公司网关Token"

# 配置模型标识符映射关系
export ANTHROPIC_DEFAULT_SONNET_MODEL="Claude-Sonnet-4.6-我们对应的ID"
export ANTHROPIC_DEFAULT_OPUS_MODEL="Claude-Opus-4.6-我们对应的ID"

export ANTHROPIC_REASONING_MODEL="Claude-Sonnet-4.6-我们对应的ID"
export ANTHROPIC_DEFAULT_HAIKU_MODEL="Claude-Opus-4.7-我们对应的ID"

export ANTHROPIC_MODEL="Claude-Sonnet-4.6-我们对应的ID"

> source ~/.zshrc

配置文件：存储在~/.claude/settings.json里。

json 复制代码

{
    "env": {
        "ANTHROPIC_BASE_URL": "你公司的大模型地址URL",
        "ANTHROPIC_AUTH_TOKEN": "你的公司网关APIKey",

        "ANTHROPIC_DEFAULT_SONNET_MODEL": "Claude-Sonnet-4.6-你公司的标识符",
        "ANTHROPIC_DEFAULT_OPUS_MODEL": "Claude-Opus-4.6-你公司的标识符",

        "ANTHROPIC_REASONING_MODEL": "Claude-Sonnet-4.6-你公司的标识符",
        "ANTHROPIC_DEFAULT_HAIKU_MODEL": "Claude-Opus-4.7-你公司的标识符",

        "ANTHROPIC_MODEL": "你公司的标识符"
        
    }

}

当然实际上，对于 ~/.claude/settings.json 的管理，我们也可以不用纯手工编辑，也可以借助开源的CC-Switch，它能帮我们可视化的管理这样的配置文件。CC-Switch不仅能管理Claude Code的配置文件，连Codex，OpenClaw等主流的AI Agent CLI的，它都能管理。CC-Switch是用Rust开发，跨平台能力很好，无论你是Mac、Linux还是Window，都能使用。

编码

完成配置后，创建一个工作目录，比如~/Document/workspace/hello-claude下，然后一句话表达我们的需求，纯自然语言，接着AI就生成一个网页了，如下图：

我们还可以跟它说："帮我把Hello World几个字改成跑马灯的形式，而且是彩色的。"