Fixing Visual Discrepancies with Claude Code + Chrome Extension

📝 Originally published (in Japanese) at forge.workstyle.tech . You've got a code that looks correct when read, but when you open it in the browser, it's slightly different from the mockup - this "visual discrepancy" is the most troublesome part of UI development. A slight CSS specification, nesting of elements, and flex wrapping. Discrepancies that cannot be noticed by statically reading the code together will only appear when actually rendered. Until now, it was necessary for a human to open the screen in a browser, compare it with the mockup image, and verbally communicate the differences to the AI. This workflow replaces the process of "humans visually seeing and verbalizing" by showing the screen to the AI agent itself via the browser . By combining Claude Code and browser automation extensions (Chrome extensions), we will "see" the screen actually rendered on localhost, compare it with the mockup, identify layout discrepancies, and fix them. Why is it necessary to "show the actual screen"? There are limitations to just handing over the code for UI review. It's difficult for both humans and AI to completely reproduce the final rendering result in their minds from the code. In particular, these discrepancies are difficult to detect just by looking at the code. Layout skeleton discrepancies - One area is crushed when it's supposed to be a 2-column layout, or the vertical split ratio is different from the mockup, resulting in structural-level discrepancies Element placement errors - A preview that should be in the upper right column is wrapped around to the bottom Unexpected wrapping and overflow - The component wraps due to insufficient width, changing the impression from the mockup These discrepancies cannot be determined without seeing the "rendering result" as a fact. That's why we show the actual screen to the AI. Workflow: Show, Compare, and Fix 1. Provide the mockup as a baseline First, provide the target mockup image to the AI and share the baseline that "t