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 or image. Select any component, or capture the entire page, and export it as clean HTML + CSS or Tailwind with the site's fonts and styles included, or save it as a PNG. - Hand components to your AI. AI extract turns any component into a short spec with its hover, active, focus, and disabled states. Copy the prompt, then the image, and paste both into your AI coding tool. - Inspect and tweak CSS animations. See every animation on the selected element. Play, pause, replay, change the speed, scrub the timeline, and edit keyframes and timing live. - Grab images, SVGs, and Lottie. The Media page collects every image and Lottie animation on the site. Find any of them on the page, or download it as PNG, WebP, JPG, or SVG, with the file size shown. - Record canvas animations. Capture any <canvas> element as a 60 fps WebM video, up to 30 seconds long. - 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. Click any count to go straight to the Media page or the matching Design System tab. - 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.