Domshift: Inspect websites, extract design system, provide UI context to AI

Inspect any website, select a DOM component, and copy the HTML and CSS needed to recreate it.

Domshift is the design toolkit for the web. Inspect any website, extract its colors, fonts, components, and assets, edit styles live like in Figma, and export clean code, all without opening DevTools. What you can do: - Inspect & edit live. Hover any element to see its styles. Click to open the Editor panel and change colors, fonts, spacing, borders, opacity, and shadows in real time. The page updates as you type. - Click to copy any value. The Info tab shows every property of the selected element as a copyable chip. Grab a hex color, a font family, a shadow, a border-radius. One click, on your clipboard. - Export to code. Select any component, or capture the entire page, and export it as clean HTML + CSS with the site's fonts and styles included. - Capture the design system. The Overview gives you the site's full color palette, font stack, and component/asset counts at a glance, extracted automatically as you browse. - Design tokens. Extract tokens for Tailwind, CSS variables, or JSON — ready to drop into your own project. - Preview before you commit. Open a live preview of any selected element before exporting or copying it out. Who uses Domshift: - Web designers collecting color palettes, font combinations, and visual references - Frontend developers grabbing CSS values, inspecting layouts, and extracting components - Agencies analyzing competitor websites and gathering client brand assets How it works: Open Domshift from the Chrome side panel and browse any website. Colors, fonts, and components are extracted automatically. Click any element to see its full CSS breakdown. In the Editor panel, change any value and watch the page update in real time. Copy or export anything with one click. Just hover, click, and copy.