{"slug": "fixing-visual-discrepancies-with-claude-code-chrome-extension", "title": "Fixing Visual Discrepancies with Claude Code + Chrome Extension", "summary": "A developer has created a workflow combining Claude Code with a Chrome extension to automatically identify and fix visual discrepancies between a UI mockup and the actual rendered screen. The system captures the rendered DOM and screenshot, compares it with the mockup, and iteratively fixes layout issues. The approach replaces manual visual inspection with AI-driven rendering verification.", "body_md": "📝 Originally published (in Japanese) at\n\n[forge.workstyle.tech].\n\nYou'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.\n\nUntil 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.\n\nThere 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.\n\nThese discrepancies cannot be determined without seeing the \"rendering result\" as a fact. That's why we show the actual screen to the AI.\n\nFirst, provide the target mockup image to the AI and share the baseline that \"this is the correct appearance\". It's particularly helpful to verbalize the **layout skeleton** to make the comparison more accurate later. For example, describe the structure as \"The whole is a 2-column layout. The left column is the adjustment UI. The right column is divided into upper and lower parts, with a radar chart and preview at the top, and voice samples and advanced adjustments at the bottom\".\n\nStart the development server on localhost and have Claude Code open that screen through the browser automation extension. The role of the extension here is to **deliver the actually rendered DOM and screenshot to the AI's eyes**. The AI no longer imagines the code but judges based on the rendered actual object.\n\nIf necessary, operate the screen to a specific state (after recording audio, after moving a slider, etc.) before taking a screenshot. This is because dynamically changing UIs cannot capture all discrepancies just by looking at the static initial screen.\n\nWith the baseline (mockup) and the actual object (screenshot) in hand, have the AI list the differences. What works here is that the skeleton was verbalized in step 1. Have the AI specifically point out **structural-level discrepancies**, such as \"The preview that should be in the upper right column is at the bottom\" or \"The right column is not divided into upper and lower parts and is in one column\".\n\nThe key is to break down the abstract \"something is different\" into specifics, such as \"which area, which element, where it is in the mockup, and where it is in the actual screen\". This becomes the correction instruction as is.\n\nBased on the feedback, have Claude Code fix the code and **open it in the browser again for comparison**. Check if the fix is actually reflected in the rendering result and if it hasn't created new discrepancies. In reality, layout reconstructions such as 2-column + right column vertical splits often don't work on the first try, and this \"show, fix, and show again\" loop is essential. If you skip the confirmation and just fix the code, discrepancies that you thought were fixed may remain.\n\nHere are some cautionary notes that have emerged from running this loop.", "url": "https://wpnews.pro/news/fixing-visual-discrepancies-with-claude-code-chrome-extension", "canonical_source": "https://dev.to/orca_forge/fixing-visual-discrepancies-with-claude-code-chrome-extension-3h2", "published_at": "2026-08-04 00:07:22+00:00", "updated_at": "2026-08-04 00:39:50.179796+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "computer-vision"], "entities": ["Claude Code", "Chrome"], "alternates": {"html": "https://wpnews.pro/news/fixing-visual-discrepancies-with-claude-code-chrome-extension", "markdown": "https://wpnews.pro/news/fixing-visual-discrepancies-with-claude-code-chrome-extension.md", "text": "https://wpnews.pro/news/fixing-visual-discrepancies-with-claude-code-chrome-extension.txt", "jsonld": "https://wpnews.pro/news/fixing-visual-discrepancies-with-claude-code-chrome-extension.jsonld"}}