Claude Code基础使用 - I

创建next.js项目

新建一个项目文件夹，比如cluade-project，在cursor中打开它。

然后打开claude code，输入：

帮我初始化一个nextjs项目，并安装依赖，运行它

image-20260131165422072

中间会弹出一些交互，需要我们手动允许。最后执行完成后，打开浏览器3000端口，next.js正在运行：

image-20260131165524086

文件目录类似如下：

image-20260131165642245

claude code init命令

/init 命令用于初始化项目的 CLAUDE.md 文件。

CLAUDE.md 是一个特殊的配置文件，用来告诉 Claude 关于项目的重要信息。运行 /init 后，Claude Code 会：

  1. 自动分析代码库 - 检测项目结构、构建系统、测试框架等
  2. 生成初始 CLAUDE.md 文件 - 包含检测到的配置信息
  3. 为所有后续会话保存上下文 - Claude 在新对话中会自动加载这些信息

典型内容示例：

# Code style
- 使用 TypeScript，严格模式
- 使用 2 空格缩进

# Workflow
- 修改代码后运行 npm run type-check
- 提交前运行 npm test

# Common commands
- npm run dev - 启动开发服务器
- npm test - 运行测试
- npm run build - 生产构建

在我们的next.js下运行这个命令：

image-20260131165950324

执行完成后，生成的CLAUDE.md内容示例：

image-20260131170108867

安装playwright mcp

Playwright 是一个由 Microsoft 开发的现代化 Web 端到端测试和浏览器自动化框架。它的主要特点：

  • 跨浏览器支持 - Chromium、Firefox、WebKit（Safari）
  • 自动化能力 - 点击、填表、截图、录制视频等
  • 可靠性高 - 自动等待元素就绪，减少测试不稳定性
  • 强大的调试工具 - 时间旅行调试、trace 查看器
  • 多语言支持 - TypeScript、JavaScript、Python、.NET、Java

常用于 UI 测试、Web 抓取、截图生成等场景。

项目仓库： https://github.com/microsoft/playwright

在claude code中安装它

命令行执行：

# User 范围 - 跨所有项目，存储在 ~/.claude.json
claude mcp add --transport stdio --scope user playwright -- npx -y @playwright/mcp@latest

执行完成后，查看~/.claude.json，最后内容如下：

  },
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ],
      "env": {}
    }
  }
}

或者执行：

> claude mcp list
Checking MCP server health...

playwright: npx -y @playwright/mcp@latest - ✓ Connected

安装完成后，在 Claude Code 中可以直接请求浏览器自动化任务：

"截取首页的屏幕截图"
"测试登录流程是否正常工作"
"在移动端访问产品页面并截图"

例如：

image-20260131170909942

会在浏览器中打开对应网址：

image-20260131170835312

它的原理是在当前目录生成了一个mjs文件：

image-20260131171148310

运行以下命令停止后台进程：

pkill -f "open-cnn.mjs"

下次需要打开网站时，只需运行：

node open-cnn.mjs

/cost命令

在使用claude code和项目做交互后，执行/cost命令，能查看当前session的花费：

image-20260131182121097