Claude Code 从零搭一个前端项目（React / Vue）：先写规格、再分步实现，用浏览器和钩子做验证

本文根据 Claude Code 官方文档《Best practices for Claude Code》《Use Claude Code with Chrome》《Common workflows》《Choose a permission mode》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是界面截图。本站（bigolab.com）不是 Anthropic 官方网站。

适用于谁

• 想用 Claude Code 从空目录做出一个 React 或 Vue 页面、小应用的人；
• 以前让 AI 一句话生成整站，结果样式乱、点不动的人；
• 不太会前端，但想学会「怎么管着 AI 做」的人。

结论先说

1. 先规格，后代码：不确定要什么时，官方建议让 Claude 采访你，直到能写出规格，再写进 SPEC.md，然后开新会话照着做。
2. 用计划模式定脚手架，确认框架、目录和要装的依赖，再让它动手。
3. 给它能判断对错的东西：构建的退出码、类型检查、测试、浏览器里的真实页面。官方说，没有检查手段，Claude 只能凭「看起来做完了」收工。
4. 贴设计图：官方说可以直接粘贴设计稿或报错截图进提示词；要完整度，官方推荐的措辞是 be ambitious，并说明空状态、错误状态等范围。
5. 必须每次执行的检查用钩子，不要只写在 CLAUDE.md。

图：本站根据 Claude Code 官方文档：Best practices 整理的示意图

第一步：让它采访你，写出 SPEC.md

官方的原话思路是：你还没想清楚时，不用自己先想清楚再提示，让 Claude 采访你，直到它能写出规格。它会用选择题问你没定下来的部分。

提示词 1：采访并写规格

text
我想做一个【例如：个人记账网页】的前端项目，只有想法，还没细想。
请采访我，直到你能写出规格为止，问题尽量用选择题，每次最多问 3 个。
需要弄清楚的包括：核心页面和功能、数据存在哪里（本地还是接口）、要不要登录、适配手机还是电脑、有没有设计稿、哪些功能明确不做。
采访结束后把结果写进 SPEC.md，包含页面清单、功能清单、不做的事、验收标准（每条能被检验）。

写完后开一个新会话，这样构建从干净的上下文开始，并且 SPEC.md 就是后面审查时对照的文件。

第二步：计划模式定脚手架

用 claude --permission-mode plan 启动，或在会话里按 Shift+Tab 直到状态栏显示 ⏸ plan mode on。计划模式下 Claude 只读不改，提方案，你批准后才动手。详见 /guides/claude-code-plan-mode。

提示词 2：脚手架方案

text
请阅读 SPEC.md，为这个项目提出脚手架方案，先不要创建任何文件：
1）用 React 还是 Vue，各给一句理由，并推荐一个（我对两者都不熟）；
2）构建工具、包管理器、需要安装的依赖，每个依赖说明用途，能不装就不装；
3）目录结构；
4）如何验证：构建命令、类型检查命令、单个测试怎么跑、开发服务器怎么启动；
5）分成几个里程碑，每个里程碑做完后我能在浏览器看到什么。

批准后让它搭好空项目，并把第 4 条的命令写进 CLAUDE.md。官方明确说，CLAUDE.md 里最有用的一行就是跑检查的命令；它还应该包含怎么只跑一个测试文件。不要写太长，写法见 /guides/claude-md-agents-md。

第三步：按里程碑实现，每步有检查

提示词 3：一个里程碑一轮

text
现在实现里程碑 1：【内容】。
要求：1）只改与本里程碑有关的文件；2）完成后运行构建命令和类型检查，有错误就读输出并修复，直到通过；3）告诉我怎么启动开发服务器、在浏览器看到什么。
本里程碑做完就停下，不要提前做下一个。

如果你有设计稿，官方说可以把截图粘贴进提示词，并建议明确范围，比如：

text
按这张设计稿实现首页。be ambitious：空状态、加载状态、错误状态、表单校验和键盘操作都要处理，不要只做静态布局。

第四步：让它在真实浏览器里看

官方的 Chrome 集成让 Claude Code 能打开浏览器标签页，读取控制台报错和页面状态，对照设计稿检查，也能测试表单和用户流程。用法是 claude --chrome 启动；前提是装了 Claude in Chrome 扩展（1.0.36 及以上）、使用 Pro、Max、Ultra、Team 或 Enterprise 的直接 Anthropic 套餐，并用 /login 登录；官方说明 WSL 里不支持，并且用 API Key 或 claude setup-token 的长期令牌登录时 Chrome 集成保持关闭。遇到登录页或验证码，它会暂停等你处理。浏览器相关的产品见 /guides/claude-in-chrome。

提示词 4：浏览器验证

text
请在浏览器打开开发服务器的首页，依次：1）查看控制台有没有报错；2）把页面和设计稿对比，列出明显不一致的地方；3）测试【新增一条记录】这个流程，包括提交空表单时的提示。
把发现的问题列出来，再逐个修复，修完重新检查一遍。给我看控制台的最终状态。

第五步：用钩子把检查变成硬规则

CLAUDE.md 里写「改完要跑类型检查」，Claude 多数时候会照做，但不是每次。官方的办法是 Stop 钩子：Claude 每次想结束回合时运行你的脚本，退出码为 2 就让它回去继续做。官方示例（pnpm 版本，换成你的包管理器）写在 .claude/settings.json：

json
{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          { "type": "command", "command": "pnpm tsc --noEmit 1>&2 || exit 2" }
        ]
      }
    ]
  }
}

官方说明：连续阻止八次且期间没有工具调用时，Claude Code 会放行并结束回合。格式化也可以用 PostToolUse 钩子，在每次 Edit 或 Write 之后运行 Prettier。钩子的完整用法见 /guides/claude-code-hooks。

提示词 5：最后对照规格审查

text
请用一个子智能体对照 SPEC.md 审查当前实现：检查每条验收标准是否做到，边界情况是否有测试；
只报告影响正确性的缺口，跳过代码风格。然后运行构建命令，把输出贴给我。

图：本站根据官方 Best practices 与 Chrome 文档整理的示意图

提示词里值得写明的几件事

官方最佳实践反复强调：Claude 读代码能得到的信息不必重复，读不到的要告诉它。前端项目里典型的「读不到」的信息有：设计稿和品牌规范（贴截图即可）、要兼容哪些浏览器和屏幕宽度、接口什么时候才有（没有的话先用假数据，并写明哪些数据是假的）、可访问性要求、文案由谁提供。把这些写进 SPEC.md 的「约束」一节，之后每一轮提示都可以只写一句「按 SPEC.md 做」。另外，官方也提醒不要让 CLAUDE.md 无限变长，每一行都会占用 Claude 每次任务的注意力，所以组件命名、目录约定这类内容写一遍就够。

常见问题

Q：React 和 Vue 选哪个？

官方文档不替你选。让 Claude 在计划阶段分别说明理由，再结合你想找的工作、熟悉的团队或要用的组件库决定。

Q：它装了一堆我不认识的依赖，怎么办？

在提示词里写「能不装就不装，每个依赖说明用途」，并在计划模式里先审批。默认的权限模式会在运行命令前询问，见 /guides/claude-code-permission-modes。

Q：做到一半想换方案？

连按两次 Esc 或输入 /rewind 可回退到之前的检查点，详见 /guides/claude-code-rewind-checkpoints-undo。

订阅和额度

从零做项目要多轮对话，建议分里程碑、及时开新会话。订阅选择见 /chongzhi/claude-code，价格和额度以官方页面当前显示为准。

相关教程

• /guides/claude-code-best-practices：官方最佳实践
• /guides/claude-in-chrome：Claude in Chrome
• /guides/claude-code-hooks：钩子怎么写

参考资料

• Claude Code 文档：Best practices for Claude Code — https://code.claude.com/docs/en/best-practices
• Claude Code 文档：Use Claude Code with Chrome — https://code.claude.com/docs/en/chrome
• Claude Code 文档：Common workflows — https://code.claude.com/docs/en/common-workflows
• Claude Code 文档：Choose a permission mode — https://code.claude.com/docs/en/permission-modes