Claude Code、Computer Use、Artifacts 与 Projects

Claude Code:终端 AI 编程

Claude Code 是 Anthropic 于 2025 年推出的命令行 AI 编程工具,直接在终端中与 Claude 协作编程:

• 读写文件:Claude 可以直接读取项目代码、创建/修改文件
• 执行命令:运行测试、安装依赖、执行脚本
• 搜索代码库:理解项目结构,跨文件分析依赖关系
• Git 操作:创建分支、提交代码、生成 PR 描述
• 多步推理:自主规划任务,分步完成复杂开发工作

与 Cursor/Copilot 等 IDE 工具不同,Claude Code 运行在终端中,不依赖特定编辑器,适合服务器端开发和 CI/CD 集成。

Computer Use:AI 操控电脑

Computer Use 是 Claude 的屏幕操控能力(2024年10月发布),让 AI 能像人一样操作电脑:

Computer Use 是迈向通用 AI Agent 的重要一步——AI 不再局限于文本对话,而是能直接操作任何软件。

Artifacts:实时预览

Artifacts 是 Claude.ai 于 2024 年 6 月推出的实时预览功能:

• 代码预览:生成 HTML/CSS/JS 代码时,侧边栏实时渲染网页效果
• SVG 图形:生成矢量图形并即时显示
• Mermaid 图表:流程图、时序图、架构图实时渲染
• React 组件:生成 React 代码并在沙箱中运行
• 迭代修改:看到效果后直接要求修改,Claude 更新代码并刷新预览

Artifacts 让 Claude 从"给你代码自己跑"变成"直接看效果",大幅提升了创作效率。

Projects:知识库工作空间

Projects 是 Claude.ai 的持久化工作空间功能(Claude Pro 可用):

Projects 类似 GPTs 的"知识库 + 自定义指令",但更适合长期项目协作。

国内使用 Claude Code

Claude Code 支持自定义 API 端点,配置 AI的那些事儿 的中转地址即可在国内使用:

配置方法

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

# 设置环境变量,指向 AI的那些事儿中转
export ANTHROPIC_API_KEY="你的Key"
export ANTHROPIC_BASE_URL="https://api.example.com"

# 在项目目录中启动
cd your-project
claude

使用示例

# 进入 Claude Code 后,用自然语言描述任务:

> 分析这个项目的目录结构,告诉我主要模块

> 找到 user.service.ts 中的 N+1 查询问题并修复

> 给 /api/orders 接口添加分页功能,包含单元测试

> 把这个 Express 项目迁移到 Fastify,保持 API 兼容

实战:通过 API 使用 Computer Use

Python 示例:Computer Use API 调用

import anthropic

client = anthropic.Anthropic(
    api_key="你的Key",
    base_url="https://api.example.com"  # AI的那些事儿中转
)

# Computer Use: 让 Claude 操控电脑
r = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20241022",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1,
        }
    ],
    messages=[
        {"role": "user", "content": "打开浏览器,搜索 Python asyncio 教程"}
    ]
)

# Claude 会返回操作指令(移动鼠标、点击、输入等)
for block in r.content:
    if block.type == "tool_use":
        print(f"操作: {block.input}")  # {"action": "click", "coordinate": [x, y]}

常见问题

国内使用 Claude Code,终端 AI 编程

配置中转地址,在国内流畅使用 Claude Code 完成编程任务。