Claude Code 前端开发自动化检查规则

If you build frontends with Claude Code, you need this rule.

Once it's in, Opus 5.5 fixes the UI bugs a screenshot can catch 𝗯𝗲𝗳𝗼𝗿𝗲 𝘆𝗼𝘂 𝗲𝘃𝗲𝗿 𝘀𝗲𝗲 𝘁𝗵𝗲𝗺.

It uses Codex's computer use to open your browser and screenshot the live site and your local version to compare them. If something looks off, it fixes it first, screenshots again, and only then comes back to you.

It runs in your own browser (approve it in Codex first), so it can see 𝗮𝗱𝗺𝗶𝗻 𝗽𝗮𝗴𝗲𝘀 𝗯𝗲𝗵𝗶𝗻𝗱 𝘆𝗼𝘂𝗿 𝗹𝗼𝗴𝗶𝗻 too.

Send this rule to Claude Code 👇

"Add a rule to ~/.claude/CLAUDE.md: When you change code that affects how a page looks, check it with codex-cu before you tell me it's done. Hand the check to a subagent, and give it the URLs, the pages to look at and what you changed. It reports back in text only: 1. Open a new tab in the browser I've approved in Codex. Load the live site first, then the local version. If the page isn't live yet, check only the local version. Set the address bar's value to the URL directly; don't type it key by key. If the local page won't load, start the dev server. If it still won't load, stop and tell me 2. Take the screenshot only after the page content has switched to the new page; a changed title doesn't count. On long pages, scroll down and screenshot as you go 3. List what's different between the two. With only a local version, list anything misaligned, overlapping, blank or throwing errors. Mark which differences this change caused 4. Don't touch tabs I already have open, don't type passwords or tokens, and don't click submit, pay or send. If an approval window pops up, stop and tell me. Close the tab you opened when you're done The first time for each project, ask me for its live URL and local address, and save them in that project's CLAUDE.md. Only fix problems this change caused. After fixing, check again, at most two rounds. If problems remain, list them for me. If codex-cu says "native pipe startup failed", tell me to reconnect it in /mcp, and don't switch to another tool to get around it."