Kwedo Isomer

Inspect a page's DOM structure and make small visual amends from a floating panel.

Isomer is a Chrome extension that floats a small design panel over the page you're on. Pick an element, adjust its layout, colors and type in place, pin comments to it, then copy everything you changed as one brief for a coding model. • Page: pick any element to see and edit its position, alignment, fill, border, radius and typography. Edit a whole group of children at once. Leave comments, shown as numbered dots on the page. • Layers: the DOM as a compact, searchable tree. On React apps, switch to the component tree with each component's source file and line. • Tokens: every CSS custom property on the page, with its value and where it's declared. Edit tokens live. • Changes: every edit and comment you've made on the site, kept across reloads. Copy them as text for an AI coding assistant, revert one, or discard them all. Toggle the panel with the toolbar icon or Alt+Shift+I. Private by design: Isomer only runs on the tab you open it on, when you open it. It has no servers, no analytics and no accounts, and nothing leaves your browser. I've build this as an alternative to jumping between figma and code for fine tuning UI elements. This version adds recognition and support for Design tokens, React layers. List of changes works while navigating across the whole domain, saves changes per page and produces a list of changes for coding agent.