Změna, kterou ti navrhujeme: při ladění UI v kódu připoj svému agentovi Chrome DevTools pro agenty a nech ho pracovat se skutečnými styly stránky.
Proč právě teď
V posledních týdnech se opakuje stejný vzorec: nástroje dávají agentům přímý přístup ke skutečnému stavu. Figma agent při tvorbě code layerů čte prototypové vazby (release notes z 3. 11. 2026), Framer podle záznamu Harness 2 zpřístupňuje stejné schopnosti externím agentům přes MCP a DevTools nově nabízejí get_css_styles s computed i matched styly, @keyframes či @property. Návrh tedy stojí na trendu, ne na jedné zprávě.
Co ti to přinese
- Agent vidí, které pravidlo vyhrálo kaskádu, a nehádá z obrázku.
- Rozdíl mezi návrhem a implementací (odsazení, barva, font) najde podle čísel.
- Výstup můžeš rovnou použít jako podklad pro opravu nebo komentář ve vývoji.
Omezení: příspěvek Chrome neuvádí výkonnostní ani cenové parametry, a jak se připojení chová u tvého konkrétního agenta, musíš ověřit sám.
První krok na 15 minut
- V DevTools otevři hlavní menu a zvol Get Chrome DevTools for agents.
- Podle návodu připoj nástroj ke svému agentovi.
- Vyber tlačítko, které se liší od Figmy, a zadej: „Vysvětli, odkud se bere padding a barva tohoto tlačítka, a navrhni minimální změnu.“
- Porovnej odpověď s tím, co vidíš v záložce Styles.