用Claude Code构建真实项目
配置Claude Code很有用，但真正的价值来自于用它构建东西。在本文中，我们将构建一个个人书签管理器——一个包含HTML、CSS和JavaScript的功能性Web应用——完全通过Claude Code提示词完成。你不需要手动编写任何代码。
项目概览
我们将构建一个"Link Vault"应用，让你可以保存、标记和搜索书签。它将使用localStorage，因此不需要服务器。最终你将拥有一个可用的单页应用。
第1步：搭建项目框架
创建新目录并启动Claude Code：
mkdir link-vault && cd link-vault
git init
claudeClaude Code启动后，给出第一个提示词：
设置一个新的Web项目，包含：index.html、style.css和app.js。
创建index.html，使用基本的HTML5结构，链接两个文件。
创建style.css，使用现代深色主题和卡片式布局。
创建app.js，包含console.log("Link Vault loaded")占位符。
用package.json初始化npm。Claude Code会创建所有四个文件。如果你想查看，可以用cat index.html审阅。
第2步：构建书签表单
在同一会话中提示Claude Code：
在app.js中实现：
1. 一个函数 addBookmark(url, title, tags)，保存到localStorage
2. 一个函数 getBookmarks()，返回所有已保存的书签
3. 一个函数 renderBookmarks()，将书签显示为卡片
4. 在index.html中添加一个表单，包含URL、标题和标签字段
5. 表单在提交时应调用addBookmark
使用现有的深色主题使其看起来美观。标签应在每张卡片上显示为彩色徽章。第3步：添加搜索和筛选
现在添加搜索功能：
在app.js中添加：
1. 在index.html中添加书签网格上方的搜索输入框
2. 一个 filterBookmarks(query) 函数，匹配标题、URL和标签
3. 用户输入时实时筛选（使用input事件）
4. 没有匹配时显示"未找到结果"
另外添加：在每个卡片上添加一个小X按钮来删除书签。
删除前要求确认。第4步：导入和导出
添加数据可移植性：
在app.js中添加：
1. 一个"导出"按钮，将书签下载为JSON文件
2. 一个"导入"按钮，让用户上传JSON文件
3. 验证导入的数据（必须有url、title字段）
4. 显示成功消息，包含导入的书签数量
在书签网格上方添加一个工具栏区来放置这些按钮。Claude Code的不同之处
注意在这个过程中发生了什么：
- Claude Code读取了所有项目文件，了解现有代码后才做修改
- 它保持了HTML、CSS和JS之间一致的风格
- 它自动处理了跨文件依赖关系（添加JS期望的CSS类）
- 它每次更改都创建了一个git提交（用
git log检查） - 当被要求修改现有代码时，它会读取并更新，而不是覆盖
测试你的应用
# 在浏览器中打开
open index.html # Mac
# 或
start index.html # Windows
# 或
xdg-open index.html # Linux添加一些书签，搜索它们，导出、删除和导入。应用应该是完全可用的，且没有一行代码是手动编写的。
常见问题
问：Claude Code能处理多大的项目？
Claude Code的上下文窗口约为200K token。对于一个有几十个文件的项目，它可以理解完整的结构，但可能需要你指定关注哪些文件。对于大型代码库，使用.claudeignore排除生成的文件和依赖。
问：Claude Code会覆盖我的更改吗？
Claude Code使用git来跟踪更改。在修改之前，它会向你展示它计划更改的内容并请求确认。你也可以在提交前用git diff审查更改。如果你拒绝某个更改，Claude Code不会应用它。
问：我能在现有项目中使用Claude Code吗？
可以。导航到任何现有项目，确保它已初始化git，然后运行claude。它读取完整的项目结构，可以立即开始提供帮助。这是Claude Code相对于仅能看到打开文件的IDE工具的优势所在。