twiddle — CSS inspector & visual editor for AI agents

Inspect spacing and design tokens, tweak live UI visually, and copy precise changes to your AI coding agent.

Stop telling your agent “make it a bit smaller.” twiddle is a Chrome extension for inspecting and visually refining live UI before handing the changes to your AI coding agent. Select an element, adjust it with familiar visual controls, and use Copy changes to get a before-and-after handoff. Paste it into your agent so it can apply the changes in your project. EDIT VISUALLY Adjust spacing, sizing and colours through a visual panel, including Fill / Fixed / Hug sizing and four-sided padding controls. WORK WITH THE PAGE'S TOKENS Inspect design-token references and off-scale values where the page provides a detectable scale. Apply available tokens explicitly. Typed numbers stay numbers; twiddle does not silently turn them into tokens. HAND THE CHANGE TO YOUR AGENT Copy changes includes element details and the values you changed. Transfer it through the clipboard to your coding agent. No direct agent connection is required. FOUR STEPS 1. Turn on twiddle on the page. 2. Select the element you want to change. 3. Adjust it visually. 4. Copy changes and paste the handoff into your agent. The edits are a local preview. Your agent still needs to apply them to the project, and you should review the result. twiddle does not write to your repository or publish website changes. Use it on ordinary web pages, including local development and hosted previews. Browser-protected pages are not supported. The interface is in English. Beta: behaviour and UI may change. Created by Artem Pirog, a product designer building with AI agents.