企业官网建设流程全解析

0. 先记住一句话

Claude Code 不是普通聊天窗口，它更像一个「会读项目、会改文件、会跑命令的终端 AI 编程助手」。

所以使用它时，最重要的不是直接说：

帮我改一下

而是先让它：

先分析，不要修改代码。先告诉我你准备读哪些文件、改哪些文件、为什么改、有什么风险。

这样会稳很多。

1. 推荐的基础使用流程

以后每次打开一个项目，建议按照这个流程来：

cd D:\your-project claude

进入 Claude Code 后，先说：

请先读取项目结构，不要修改代码。先告诉我这个项目的主要目录、入口文件、运行方式和风险点。

如果是 Chrome 插件项目，可以这样说：

请先读取 manifest.json，分析这个 Chrome Manifest V3 插件的结构。 重点看： 1. popup 入口在哪里 2. background service worker 在哪里 3. 是否有 content script 4. storage/cookies/proxy/webRequest 等权限怎么用 5. 是否有 Chrome / Edge 商店审核风险 先不要修改代码。

2. 安装后第一次使用

2.1 安装 Claude Code

一般用 npm 安装：

npm install -g @anthropic-ai/claude-code

然后进入项目：

cd D:\your-project claude

2.2 不要在用户根目录里乱开

不要这样：

cd C:\Users\admin claude

建议进入具体项目目录：

cd D:\projects\BrowseVeil claude

这样 Claude Code 看到的范围更清晰，也更不容易乱动无关文件。

3. Windows 粘贴图片技巧

3.1 截图后粘贴图片

在 Windows 上：

1. 按Win + Shift + S截图
2. 回到 Claude Code 终端
3. 按：

Alt + V

成功后会出现类似：

[Image #1]

然后继续输入：

帮我分析这张图里的报错。

3.2 如果 Alt + V 不生效

可以保存图片，然后把路径发给 Claude Code：

请分析这张截图：C:\Users\admin\Desktop\error.png

或者：

参考这个 UI 截图，帮我修改 popup 样式：D:\project\screenshots\popup.png

3.3 VS Code / Cursor 终端里不行怎么办

如果在 VS Code / Cursor / Windsurf 终端中快捷键异常，可以在 Claude Code 里执行：

/terminal-setup

如果还是不行，建议换成 Windows Terminal / PowerShell 运行：

cd D:\your-project claude

4. 多行输入、外部编辑器、长需求

4.1 换行不要直接按 Enter

在 Claude Code 里，Enter通常是发送消息。想输入多行，用：

Ctrl + J

例如：

请完成下面任务： Ctrl + J 1. 先分析代码 Ctrl + J 2. 不要立刻修改 Ctrl + J 3. 给出风险点

4.2 长需求用外部编辑器

长提示词不要在终端里硬敲，可以用：

Ctrl + G

或者：

Ctrl + X 然后 Ctrl + E

打开外部编辑器，写完后保存退出。

适合这种任务：

请重构 BrowseVeil 授权站点逻辑，要求如下： 1. 不影响已有授权站点 2. 不新增高风险权限 3. 不破坏 background service worker 4. 输出修改文件列表和测试步骤

5. 常用快捷键速查

不同终端可能快捷键略有差异。Windows / VS Code / Cursor 里如果快捷键异常，优先试/terminal-setup。

6. 重要的/命令

Claude Code 里输入/可以看到可用命令。

6.1/clear

清空当前上下文，适合话题已经乱了的时候：

/clear

使用场景：

/clear

然后重新说：

请读取 CLAUDE.md 和 manifest.json，重新理解项目结构。

6.2/compact

压缩上下文，适合会话很长但还想继续：

/compact

也可以指定保留重点：

/compact 只保留当前修改方案、已修改文件、还没解决的问题。

建议：

• 一个大功能完成后，执行一次/compact
• 聊乱了直接/clear
• 长期项目最好配合CLAUDE.md

6.3/config

查看或修改配置：

/config

常看：

• 权限模式
• 模型
• 编辑器模式
• 是否启用某些快捷键
• 终端显示相关设置

6.4/terminal-setup

适合 VS Code / Cursor / Windsurf 终端快捷键不好用：

/terminal-setup

6.5/hooks

查看或配置 Hooks：

/hooks

Hooks 可以用来自动执行固定动作，例如每次改代码后自动跑npm run lint。

7. 权限模式怎么选

Claude Code 可以改文件、跑命令，所以权限模式很重要。

7.1 新手推荐

7.2 Plan Mode 是什么

Plan Mode 适合新手。它会先分析、列方案，通常不会直接修改文件。

你可以这样启动：

claude --permission-mode plan

或者在会话中用：

Shift + Tab

切换到 Plan Mode。

常用提示词：

请进入规划模式。先分析项目，不要修改代码。请列出： 1. 需要读取哪些文件 2. 可能要修改哪些文件 3. 修改原因 4. 风险点 5. 回滚方案

8. 会话恢复和一次性提问

8.1 继续上次会话

回到同一个项目目录：

claude -c

或者：

claude --continue

8.2 恢复某个会话

如果你知道会话名或会话 ID：

claude -r "browseveil-auth"

8.3 一次性问问题，不进入交互模式

适合快速分析一个文件：

claude -p "解释一下这个项目结构"

PowerShell 里把文件内容传进去：

Get-Content manifest.json | claude -p "分析这个 Chrome 插件权限有没有风险"

适合脚本化处理：

Get-Content package.json | claude -p "告诉我这个项目有哪些启动命令"

9. CodeGraph 怎么配合 Claude Code

CodeGraph 的作用是给项目建立本地代码图谱，让 AI 更容易理解调用链、函数关系、模块关系。

9.1 安装和初始化

npm i -g @colbymchenry/codegraph codegraph install cd D:\your-project codegraph init

初始化后会生成：

.codegraph/

这个目录一般不要提交到 Git。

在.gitignore里加：

.codegraph/

9.2 初始化后做什么

检查状态：

codegraph status

试着查一下：

codegraph query "manifest"

或者：

codegraph query "background"

然后重启 Claude Code，再在项目里问：

请优先使用 CodeGraph，分析这个项目的整体结构。

Chrome 插件可以这样问：

请优先使用 CodeGraph，分析 popup 点击按钮到 background service worker 执行逻辑的完整调用链。 先不要修改代码。

9.3 代码改了以后

一般会自动同步。如果感觉 Claude 看到的不是最新代码，可以手动同步：

codegraph sync

10. 一定要写CLAUDE.md

CLAUDE.md就像给 Claude Code 的项目说明书。放在项目根目录。

例如：

D:\projects\BrowseVeil\CLAUDE.md

10.1 浏览器插件项目模板

可以直接复制：

# Project Notes 这是一个 Chrome / Edge 浏览器插件项目，使用 Manifest V3。 ## 基本规则 - 输出中文说明。 - 修改代码前，必须先说明将要修改哪些文件。 - 不要随便新增 manifest permissions。 - 新增 host_permissions 前必须说明原因。 - 不要为了省事使用 `<all_urls>`。 - 不要新增远程上传用户隐私数据的逻辑。 - 所有功能优先本地处理。 - 修改 manifest.json 前必须解释原因。 - 涉及 cookies、proxy、webRequest、browsingData 权限时，必须说明审核风险。 - 修改完成后，必须输出测试步骤。 ## 常见目录 - manifest.json：插件声明文件 - background/：后台逻辑 - src/popup/：弹窗页面 - content/：注入页面脚本 - assets/ 或 icons/：图标资源 ## Chrome 插件审核注意 - 避免过度权限。 - 避免不必要的远程代码。 - 隐私相关功能要有明确说明。 - UI 文案不要强调灰色用途。 - 商店说明要强调隐私保护、本地处理、用户主动授权。

10.2 为什么它重要

有了CLAUDE.md，你不用每次都重复说：

这是 Chrome 插件，不要乱加权限。

Claude Code 每次进入项目时都会更容易理解你的项目规则。

11. Chrome 插件开发专用提问模板

11.1 项目体检

请对这个 Chrome Manifest V3 插件做一次体检。 重点检查： 1. manifest.json 权限是否过度 2. background service worker 是否有生命周期问题 3. popup 和 background 通信是否稳定 4. storage 数据结构是否清晰 5. content script 是否只在必要站点注入 6. 是否有 Chrome / Edge 商店审核风险 7. 是否有隐私政策需要补充的点 先分析，不要修改代码。

11.2 分析调用链

请先用 CodeGraph 和项目搜索分析： 1. popup 页面有哪些入口 2. 哪些消息发给 background 3. background 里监听了哪些事件 4. 哪些地方会修改 chrome.storage 5. 哪些地方会使用 cookies / proxy / browsingData 6. 最后画出调用链 先不要修改代码。

11.3 修改功能前

我要修改这个功能，但请先不要改代码。 请先输出： 1. 当前功能实现位置 2. 相关文件列表 3. 修改方案 4. 可能影响的功能 5. 是否会影响 manifest 权限 6. 是否会影响 Chrome / Edge 审核 7. 回滚方案

11.4 修改完成后自检

修改完成后，请自己检查： 1. 是否破坏 Manifest V3 2. 是否新增不必要权限 3. 是否影响已有 popup UI 4. 是否影响 background service worker 5. 是否影响已授权站点逻辑 6. 是否有语法错误 7. 给出我需要手动测试的步骤

12. 让它别乱改的技巧

12.1 限制文件范围

本轮只允许分析和修改 src/popup 目录。 不要修改 background、manifest.json、content script。

更严格一点：

本轮只允许修改： - src/popup/App.vue - src/popup/style.css 其他文件只能读取，不能修改。

12.2 让它先列文件

先不要修改代码。先列出你准备读取的文件、准备修改的文件、修改原因和风险点。

12.3 让它给回滚方案

修改前请先说明回滚方案：如果改坏了，我应该恢复哪些文件。

12.4 让它总结 diff

改完后说：

请基于 git diff 总结本次修改，并检查有没有误改无关文件。

你自己也可以跑：

git diff

13. Git 配合 Claude Code

13.1 改代码前先确认干净

git status

如果有未提交内容，先保存或提交。

13.2 改完看差异

git diff

然后让 Claude 总结：

请解释当前 git diff，告诉我每个文件改了什么，有没有不必要的修改。

13.3 改坏了回退

回退某个文件：

git checkout -- path/to/file

回退全部未提交修改：

git checkout -- .

注意：这会丢掉未提交修改，谨慎使用。

14. Debug 报错时怎么问

不要只发一句：

报错了，帮我修

更好的写法：

这是报错： 粘贴报错内容 这是我刚才的操作： 我点击了 popup 里的 xxx 按钮 这是相关环境： Windows 10 Chrome 插件 Manifest V3 开发模式加载扩展 请先判断最可能原因，不要直接修改代码。

如果有截图：

这是截图：[Image #1] 请结合截图和代码分析原因。

如果有路径：

请分析这张截图：C:\Users\admin\Desktop\error.png

15. 适合小白的任务拆分方法

不要一次说：

帮我把整个插件优化一下

应该拆成：

第一步：先分析项目结构，不改代码。

第二步：只分析 manifest 权限风险，不改代码。

第三步：只分析 popup 到 background 的消息通信，不改代码。

第四步：给出修改方案。

第五步：只修改一个小功能。

第六步：输出测试步骤。

这样更稳。

16. Skills / Subagents / Hooks 是什么

这三个是高级功能，新手先知道概念就行。

16.1 Skills

Skill 是一个可复用的能力包。比如你经常让 Claude 检查 Chrome 插件，就可以写一个 Skill。

示例目录：

.claude/skills/chrome-extension-review/SKILL.md

示例内容：

--- name: chrome-extension-review description: Review Chrome extension Manifest V3 permissions, privacy risk, store compliance, and code structure. --- 你是 Chrome 扩展审核助手。 请检查： 1. manifest.json 权限是否过度 2. 是否符合 Manifest V3 3. background service worker 是否合理 4. 是否有隐私风险 5. 是否有 Chrome Web Store 审核风险 6. 给出修改建议 输出中文。

以后可以直接调用相关能力。

16.2 Subagents

Subagent 是子代理，适合让不同 AI 分工。

比如：

请用一个子代理专门分析 background/service-worker.js 的消息流，主会话不要改代码。

适合大项目：

• 一个子代理看 UI
• 一个子代理看 background
• 一个子代理看 manifest 权限
• 一个子代理看审核风险

16.3 Hooks

Hooks 是自动化规则，比如：

• 每次改代码后自动运行npm run lint
• 禁止修改某些目录
• 禁止执行危险命令
• 每次任务结束自动提醒你测试

示例需求：

帮我写一个 Claude Code Hook：每次修改 JS/TS 文件后自动运行 npm run lint。

新手建议后面再折腾 Hooks，先把基础流程用熟。

17. 推荐的固定工作流

17.1 每次开始

请先读取 CLAUDE.md、manifest.json 和项目目录结构。 先不要修改代码。 请告诉我项目入口、关键模块、可能风险。

17.2 改功能前

先不要修改代码。 请列出当前功能涉及的文件、调用链、修改方案、风险点和回滚方案。

17.3 确认后再改

按方案修改。只允许修改你刚才列出的文件，不要改其他文件。

17.4 改完后

请输出： 1. 修改了哪些文件 2. 每个文件改了什么 3. 是否影响 manifest 权限 4. 是否影响 Chrome / Edge 审核 5. 手动测试步骤 6. 如果有问题如何回滚

17.5 做完一个大任务

/compact 只保留当前功能的修改方案、已改文件、测试步骤和遗留问题。

或者直接：

/clear

18. 浏览器插件开发特别注意

你做 Chrome / Edge 插件时，下面几条尤其重要：

18.1 不要乱加权限

危险或敏感权限包括：

cookies proxy webRequest browsingData declarativeNetRequest tabs scripting <all_urls>

不是不能用，而是要说明清楚为什么用。

18.2 不要让 Claude 为了省事加<all_urls>

要经常提醒：

不要为了省事新增 <all_urls>，如果必须新增 host_permissions，先说明原因和替代方案。

18.3 background service worker 容易有生命周期问题

Manifest V3 的 background 是 service worker，不是一直常驻页面。

问 Claude 时可以加：

请特别检查 Manifest V3 background service worker 生命周期问题，例如异步任务、事件监听、storage 读写是否可靠。

18.4 popup 关闭后状态会丢

popup 页面不是一直存在。关闭 popup 后页面上下文会消失。

可以问：

请检查 popup 页面是否把重要状态正确保存到 chrome.storage，而不是只保存在内存变量中。

18.5 审核文案要强调正向用途

比如你的 BrowseVeil 这类插件，推荐强调：

• 隐私保护
• 本地处理
• 用户主动授权
• 站点级隔离
• 防追踪
• 不上传隐私数据

不要突出灰色用途，例如：

• 账号多开
• 绕过检测
• 规避风控

19. 常见问题排查

19.1 Claude Code 粘贴不了图片

优先试：

Alt + V

不行就保存图片，发路径：

C:\Users\admin\Desktop\error.png

19.2 终端快捷键异常

执行：

/terminal-setup

或者换 Windows Terminal。

19.3 Claude 越聊越乱

执行：

/clear

或者：

/compact

19.4 它改了不该改的文件

先看：

git diff

然后让它解释：

请解释当前 git diff，并指出有没有误改无关文件。

19.5 它读了太多无关文件

你要限制范围：

本轮只允许读取和修改 src/popup 目录，其他目录不要动。

19.6 它一直猜

你要说：

不要猜。请先搜索项目代码，找到真实实现位置后再回答。

19.7 它直接开始改代码

你要打断：

Esc

然后说：

停止修改。请先给方案，不要继续改代码。

20. 给小白的 10 条核心口诀

1. 开始前先说：先分析，不要修改代码。
2. 改代码前先让它列：要读哪些文件、要改哪些文件。
3. 大功能先用：Plan Mode。
4. 聊乱了用：/clear。
5. 会话长了用：/compact。
6. 粘贴图片用：Alt + V。
7. 输入多行用：Ctrl + J。
8. 修改后一定看：git diff。
9. Chrome 插件不要乱加：permissions / host_permissions /<all_urls>。
10. 每个项目都写：CLAUDE.md。

21. 一份可直接复制的总提示词

以后你新开一个 Claude Code 会话，可以直接复制下面这段：

你现在是一个谨慎的项目代码分析助手。 请先不要修改代码。 请先完成： 1. 读取 CLAUDE.md，如果存在的话 2. 分析项目目录结构 3. 找出主要入口文件 4. 如果是 Chrome 插件，请重点分析 manifest.json、popup、background、content script 5. 列出当前项目可能的风险点 6. 列出你建议下一步读取的文件 7. 不要修改任何文件，等我确认 输出中文，适合小白理解。

如果是 Chrome 插件，再加：

特别要求： - 不允许随意新增 manifest permissions - 不允许为了省事使用 <all_urls> - 修改 manifest.json 前必须说明原因 - 涉及 cookies、proxy、webRequest、browsingData 时必须说明审核风险 - 所有功能优先本地处理，不要新增上传用户隐私数据的逻辑

22. 官方资料入口

下面是整理时参考的官方文档入口。以后功能变化时，优先看官方文档。

• Claude Code Interactive Mode
  Interactive mode - Claude Code Docs

• Claude Code CLI Reference
  CLI reference - Claude Code Docs

• Claude Code Common Workflows
  Common workflows - Claude Code Docs

• Claude Code Commands
  Commands - Claude Code Docs

• Claude Code Memory / CLAUDE.md
  How Claude remembers your project - Claude Code Docs

• Claude Code Keybindings
  Customize keyboard shortcuts - Claude Code Docs

• Claude Code Terminal Setup
  Configure your terminal for Claude Code - Claude Code Docs

• Claude Code Subagents
  Create custom subagents - Claude Code Docs

• Claude Code Skills
  Extend Claude with skills - Claude Code Docs

• Claude Code Hooks
  Hooks reference - Claude Code Docs

• Claude Code Best Practices
  Best practices for Claude Code - Claude Code Docs

• Claude Code Troubleshooting
  Troubleshooting - Claude Code Docs