Every tool, one page each

Thirteen tools on a toolbar that lives in the page, not in a popup. Each one has its own page, and a recording of it in use as they are made.

point at things

• P Pick elementPoint at an element and get the CSS that actually applies to it: every matched rule in cascade order, with hover states, breakpoints and design tokens intact. Free Chrome extension. clip
• M MeasureThe box model shaded in place, margin, border and padding separately, with rulers out to the edges of the viewport and dimensions to a tenth of a pixel. clip
• D Design systemA whole page's design system in one panel: palette ordered by how much of the screen each colour covers, type scale with weights and use counts, spacing, radii, shadows, breakpoints and a contrast check. Exports Tailwind @theme, CSS variables or W3C tokens.
• B Design promptOne prompt that rebuilds a whole site's look: the palette as :root custom properties, the fonts and where they are served from, the CSS of the components that repeat, every section in order, the assets, and the motion.

take one thing

• C Sample a colourAn eyedropper that reads any pixel on screen, including inside images, canvas and video, and copies it as hex, rgb or oklch.
• F Fonts in useHover any text and the box says which font it is rendered in, established by measurement rather than by reading the first name in the stack. Every family on the page, with sizes, weights and the files behind them.
• I Images and SVGsEvery image, inline SVG, CSS background, mask and video poster on a page, largest first, filterable by format and size, downloadable as one zip packed in the browser.

change the page

• E Edit text in placeClick any text on a page and type over it. Real copy in a real layout, at the real dimensions, before anyone builds it.
• X Hide elementsRemove a cookie banner, a sticky header or a chat bubble before a screenshot. Press Z to bring them back one at a time.
• V Move elementsDrag anything anywhere to try a layout. It moves by transform, so nothing around it reflows, and putting it back is exact.

take it with you

• S ScreenshotCropped to the element you selected, or the viewport. The toolbar hides itself and waits for a repaint first, so it never lands in the capture.
• W Save page HTMLThe page as it stands, with the banner dismissed and the menu open, as one file next to its styles and a preview rendered without scripts.
• G Send to agentPick something in your own browser, press G, and your coding agent reads it over MCP. For the pages a headless browser cannot reach: anything behind a login, and any element that only exists while a menu is open.