# 项目准备

URL: https://caijiao.org/claude-code-in-action/05-project-setup
Source: docs/claude-code-in-action/05-project-setup.md
Description: 准备用于练习的示例项目，了解如何设置开发环境和依赖

原文链接：[https://anthropic.skilljar.com/claude-code-in-action/301615](https://anthropic.skilljar.com/claude-code-in-action/301615)

**标签：** 讲义

---

有一个可以操作的项目，会让你在 Claude Code 中练习时更有意思。

我准备了一个小项目供你探索，它就是前面视频里演示的 UI 生成应用。**注意：**你不一定需要运行这个项目，如果你愿意，也可以用自己的代码库跟随课程。

## 准备步骤

该项目需要一些基础设置：

1. 确保本地安装了 Node.js。安装说明：[https://nodejs.org/en/download](https://nodejs.org/en/download)

2. 下载本节附带的 `uigen.zip` 并解压

3. 在项目目录运行 `npm run setup`，安装依赖并初始化本地 SQLite 数据库

4. **可选：**该项目使用 Anthropic API 调用 Claude 生成 UI 组件。如果你想要完整体验应用，需要提供 API Key（不提供也能生成静态假代码）。
   - 在 [https://console.anthropic.com/](https://console.anthropic.com/) 获取 API Key
   - 将 API Key 写入 `.env` 文件

5. 运行 `npm run dev` 启动项目

---

**下一节：** [06 添加上下文](./06-adding-context)