Leech

Attach to any page and edit its design live. Reads the project's own design tokens; exports a change log.

Leech is a design tool for people who review and adjust real pages, not mockups. Open it on any page and it becomes an in-place editor: pick an element, change its colour, type, spacing, borders or text, and see the result immediately. When you are done, export the list of changes and hand it to whoever writes the code. WHAT MAKES IT DIFFERENT Leech reads the design system out of the page it is standing on. It scans the project's CSS custom properties and offers them BY TOKEN NAME, so an edit writes var(--color-primary) rather than a raw hex that no reviewer would accept. If the page has no tokens, it falls back to the colours actually in use, ranked by frequency. Spacing and type scales are derived the same way. A free colour field is there when you genuinely need a value the page does not have. Where an element renders text, its colour is checked against WCAG AA contrast as you work, adjusted for large text, so an unreadable combination is caught before anyone signs off on it. Lower a colour's opacity and the check follows the blended result rather than the value you typed, because that is what the eye actually sees. On an element with no text, or over a gradient where the blend cannot be known, Leech says so instead of showing a number that would mean nothing. WHAT IT DOES - Inspector: with the panel open, hover any element for its size, typography, colours, effects and layout — only the values that are actually set, never a wall of defaults. - Edit colours, typography, per-side spacing, radius, borders, shadows. - Set a colour's opacity on its own, the way a fill works in a design tool, keeping the token name in the exported value. - Step through the project's own scale, or type an exact number. - Preview at desktop, tablet and mobile widths — the window itself resizes, so the page's real breakpoints switch. - Edit text content, including elements that contain other elements. - Drag to reorder, align or space children inside one component, never outside it. - Undo and redo. - Remembers your edits across page reloads, per page. - Export as a plain change list, or as a written brief for a developer. - Hebrew and English interface. PRIVACY Nothing leaves your device. Your edits are stored locally in the browser and are never transmitted anywhere. There are no accounts, no analytics, no network requests of any kind.