Neděle 15. 11. 2026

Nové nástroje

• Chrome DevTools: position-area editor, APCA v color pickeru a CSS pro agenty – Anchor positioning se dá nastavit klikáním v mřížce, color picker navrhuje APCA kontrast a agenti přes get_css_styles čtou skutečné styly stránky. Hodí se ti při ladění tooltipů, popoverů a tmavých rozhraní. Příspěvek vyšel 20. 10., funkce se do uživatelů dostávají v listopadu. zdroj

Návrhy pro tool-stack a workflow

• Dej agentovi k ruce DevTools místo screenshotů – Změna: při ladění UI v kódu připoj agentovi Chrome DevTools pro agenty. Přínos: agent čte skutečné computed styly a pravidla místo hádání ze screenshotu, takže rychleji najde, proč se komponenta liší od návrhu. První krok: otevři v DevTools položku Get Chrome DevTools for agents, připoj ji ke svému agentovi a nech ho vysvětlit styly jednoho tlačítka. Vychází z trendu, že agenti čtou skutečný stav nástrojů (Figma MCP, Framer přes MCP, DevTools). zdroj

Dnes vyzkoušej

• Tooltip přes position-area editor (~15 min) – Vyzkoušíš si anchor positioning bez psaní hodnot z hlavy. 1. Otevři libovolnou stránku s popoverem nebo tooltipem postaveným na CSS anchor positioningu (nebo si udělej jednoduchý <button> s popover a position-anchor). 2. V DevTools v záložce Styles klikni na swatch vedle position-area a vyber jinou oblast mřížky. 3. V color pickeru zkontroluj světlý text na tmavém pozadí podle APCA návrhu. Výsledek: tooltip umístěný podle zvolené oblasti a zkontrolovaný kontrast. zdroj