团队用 Claude Code / Codex 怎么避免乱写：AI 编码规范落地教程，再用 cpolar 远程验收本地规则面板

你有没有遇到过这种情况：同一个项目里，Claude Code 和 Codex 都在改代码，功能是跑通了，目录、命名、提交边界却越来越乱。

这篇不讲空话，直接做一套能落地的方案：把团队规则写进项目文件，再做一个本地规则面板，最后用 cpolar 把这个面板临时发给同事验收。目标很明确——让 AI 按团队规矩写代码，而不是让团队去追着 AI 改。

1 什么是这套规范面板？

这里的面板不是复杂后台，而是三层东西：

• 项目规则文件，给 Claude Code / Codex 读取。
• 本地检查命令，给人和 AI 共用。
• 可访问页面，给同事远程验收。

这样做的好处很直接。规则不再靠口头提醒，AI 先读文件再动手；同事看页面就知道项目边界，避免每次都重新解释一遍。

2 环境准备：Node.js、Git、cpolar

先准备一个最小环境：

node -v
git --version
npm -v

然后建个演示目录：

mkdir ai-coding-rules-demo
cd ai-coding-rules-demo
git init

这一步的重点不是工具多，而是把规则放回仓库里。AI 工具在项目目录里工作，规则文件也应该跟着项目走。

3 写进项目的两份规则文件

Claude Code 读 CLAUDE.md，Codex 读 AGENTS.md。内容可以先保持一致，重点写四件事：只改当前任务文件、不顺手重构、不要新增未说明的依赖、改完要跑检查。

cat > CLAUDE.md <<'EOF_RULE'
# Claude Code 项目协作规则
- 只修改当前任务明确要求的文件。
- 不顺手重构无关模块。
- 不新增依赖，除非任务明确要求。
- 涉及数据库、鉴权、支付、权限控制时，先说明风险再动手。
- 修改后运行 npm run lint，页面交互改动再运行 npm run build。
- 禁止把密钥、token、cookie 写入仓库。
EOF_RULE

cat > AGENTS.md <<'EOF_RULE'
# AGENTS.md - Codex 项目协作规则
- 只修改当前任务明确要求的文件。
- 不顺手重构无关模块。
- 不新增依赖，除非任务明确要求。
- 涉及数据库、鉴权、支付、权限控制时，先说明风险再动手。
- 修改后运行 npm run lint，页面交互改动再运行 npm run build。
- 禁止把密钥、token、cookie 写入仓库。
EOF_RULE

别把规则写成制度汇编。团队真会反复看的，通常就这几条：改什么、不改什么、改完怎么验收。

4 本地规则面板怎么搭

用 Vite 起一个页面最省事：

npm create vite@latest rules-panel -- --template vanilla-ts
cd rules-panel
npm install

把 src/main.ts 改成一个极简面板，展示规则和检查命令：

cat > src/main.ts <<'EOF_TS'
import './style.css'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <main class="page">
    <h1>Claude Code / Codex 团队编码规范面板</h1>
    <ul>
      <li>只修改当前任务明确要求的文件</li>
      <li>不顺手重构无关模块</li>
      <li>不新增未说明的依赖</li>
      <li>修改后先跑 lint，再跑 build</li>
    </ul>
    <pre>git status --short\nnpm run lint\nnpm run build</pre>
  </main>
`
EOF_TS

再补一点样式：

cat > src/style.css <<'EOF_CSS'
body { margin: 0; font-family: system-ui, sans-serif; background: #f5f7fb; }
.page { width: min(960px, calc(100% - 32px)); margin: 40px auto; background: #fff; padding: 28px; border-radius: 16px; }
pre { background: #111827; color: #dbeafe; padding: 14px; border-radius: 10px; overflow: auto; }
EOF_CSS

启动页面：

npm run dev -- --host 0.0.0.0 --port 5173

页面能打开，就说明规则面板已经跑起来了。这里不是为了炫 UI，而是为了让同事一眼看到“项目现在按什么规矩干活”。

5 最小验收：让 AI 按规则改一次

给 Claude Code 或 Codex 一个很窄的任务，比如只允许它改 rules-panel/src/main.ts，并明确告诉它不要碰别的文件。

请阅读项目根目录的规则文件，只修改 rules-panel/src/main.ts，新增一条规则：修改前先说明影响范围。完成后告诉我需要运行哪些检查命令。

改完以后先看变更边界：

git status --short

再跑构建：

cd rules-panel
npm run build

如果有无关文件被动到，直接让 AI 回滚，不要自己帮它擦。团队规范能不能立住，看的就是这一步有没有守边界。

6 用 cpolar 远程验收本地面板

本地页面只在你机器上能看，给同事验收时就很不方便。这里用 cpolar 把 5173 临时映射出去，别人不用进你的内网，也不用你把项目部署到公网服务器。

macOS 可用 Homebrew 安装：

brew tap probezy/core && brew install cpolar
sudo cpolar service install
sudo cpolar service start
cpolar version

Linux 可用官方脚本：

curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
cpolar version

打开本地管理页：

open http://127.0.0.1:9200

确认服务在线后，开 HTTP 隧道：

cpolar http 5173

终端里会给出公网地址，把这个地址发给同事就行。这里别忘了两件事：页面不要放密钥，验收完要关隧道。cpolar 在这里的作用很纯粹，就是把本地规则面板临时搬到外网可访问的位置。

7 总结

这套做法落地后，团队会得到一个很实用的闭环：规则文件约束 AI 怎么写，规则面板让人快速验收，cpolar 负责临时远程访问。它解决的不是“AI 会不会写”，而是“AI 能不能按团队规矩写”。

• CLAUDE.md 和 AGENTS.md 先把边界写死。
• 本地规则面板把规则和检查命令摆到浏览器里。
• cpolar http 5173 让远程验收变得很轻。

如果后面要继续扩展，建议把 lint、单测、构建结果也挂到面板里，再把团队常见提示词模板补进去。这样一来，AI 编码就不只是“能写”，而是真正能在团队里稳定写。