团队用 Claude Code / Codex 怎么避免乱写:AI 编码规范落地教程,再用 cpolar 远程验收本地规则面板
团队用 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.mdCodex 读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 vitelatest rules-panel -- --template vanilla-ts cd rules-panel npm install把src/main.ts改成一个极简面板展示规则和检查命令cat src/main.ts EOF_TS import ./style.css document.querySelectorHTMLDivElement(#app)!.innerHTML main classpage h1Claude Code / Codex 团队编码规范面板/h1 ul li只修改当前任务明确要求的文件/li li不顺手重构无关模块/li li不新增未说明的依赖/li li修改后先跑 lint再跑 build/li /ul pregit 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 versionLinux 可用官方脚本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 编码就不只是“能写”而是真正能在团队里稳定写。