The change we suggest: when debugging UI in code, connect Chrome DevTools for agents to your agent and let it work with the page's real styles.
Why now
The same pattern keeps repeating: tools give agents direct access to real state. The Figma agent reads prototype connections when creating code layers (release notes of 3 Nov 2026), Framer's Harness 2 entry says the same capabilities are available to external agents through MCP, and DevTools now offers get_css_styles with computed and matched styles, @keyframes or @property rules. So the idea rests on a trend, not a single announcement.
What you get
- The agent sees which rule won the cascade instead of guessing from an image.
- A gap between design and implementation (spacing, color, font) is found from numbers.
- The output can go straight into a fix or a comment for developers.
Limitation: the Chrome post gives no performance or pricing details, and how the connection behaves with your agent you must verify yourself.
First step, 15 minutes
- In DevTools, open the main menu and choose Get Chrome DevTools for agents.
- Follow the setup to connect it to your agent.
- Pick a button that differs from Figma and ask: "Explain where this button's padding and color come from and propose a minimal change."
- Compare the answer with the Styles tab.