Hey Product Hunt! 👋 I’m Derek, founder of Handle.
Coding agents are great at the first 80% of UI. But for that last 20%, when you need to make tweaks for final polish, you end up constantly re-prompting it... it's a sledgehammer when you need a scalpel. The best of both worlds is to do the first draft with the agent and then directly fine-tune it by hand with visual tools.
We built Handle, a simple open source MCP + Chrome extension to solve this. We hope it's useful to the community!
Ask us anything, give us feedback, or share how your AI-powered development workflow is changing. We’ll be around to chat all day.
Report
Much needed tool! Btw are you modifying the DOM directly and then reverse engineering code or working through an abstraction layer?
@lak7Â We inspect the DOM directly and also look at associated component-level metadata for React, Vue, Angular, etc. When you make edits, we reflect them on the page immediately but also build up an instruction list for your coding agent so you can land all changes in the codebase
@lak7Â Please share feedback when you've had a chance to test. We're very open to feedback as we refine and evolve the tool.
Report
@derekattonkotsu Sure, I will definitely try it out and share my feedback!
Report
Ok this is solving something that's been driving me crazy. Half my Claude Code prompts are me trying to describe pixel-level UI tweaks in words. "Move that button 8px to the right, no the other right, no go back." Point and click is how this should have always worked. The fact that it's open source too is a nice touch. Does it handle complex component trees well or does it get confused with deeply nested layouts?
@thenomadcode thanks for that! Yes, we map out the full DOM and associate DOM elements with React, Vue, Angular, and Svelte components. So you should be able to precisely select anything in the hierarchy either by just clicking or navigating the tree.
Report
the direct manipulation approach makes sense for UI - natural language is a terrible interface for 'move this 4px left'
@mykola_kondratiuk 100%. Making visual edits via a prompt is so imprecise and time-consuming. Our thinking is this is the best of both worlds: use the agent for the first draft, but then use Handle to bring your taste and judgment to the table and refine.
Report
Makes sense — prompt for intent, direct manipulation for precision. Solid split. Does Handle expose the prompt history so developers can audit what triggered which UI change? That audit trail becomes critical when you're debugging agent-generated diffs in production.
@mykola_kondratiuk We have a Changes tab so as you accumulate changes, you have a log. Curious - what do you use for this workflow now? Do you tend to just go back and forth with the agent on refinements?
Report
Mix of Notion notes and git commits right now — neither is built for the agent edit loop. The Changes tab solves a retrieval problem I didn't know I had. Persists across sessions?
Report
Really enjoyed using this, as a vibe coder who used to code with Dreamweaver (before it was bought by Adobe!), I felt like I had to get in the weeds with the techincal detail, but is made adjusting the website with Gemini CLI so easy! I was sick of saying things like "that black box on page 2 with the xyz in it, make it bigger'!
@mike05683Â Awesome to hear this! What's your workflow like? Sounds like you use Gemini CLI - is that directly on the production codebase?
Report
What's the fallback behavior when the browser edits create conflicting suggestions for the coding agent? If I'm editing a component that has dependencies the agent doesn't have in its current context window, does it alert you or just apply?
Trying to understand if this is designed for quick visual tweaks or if it handles more complex component refactoring workflows.
@ivaylotz The Handle browser extension aggregates the edits you've made and notes the containing element and the containing React/Vue/Angular/Svelte component. It sends these notes back to the agent via MCP. The agent then does what it usually does, which is to say it formulates a plan to execute the changes and if it needs context (e.g. dependencies) that aren't in its context window, it will explore your repo. Handle is really designed for visual tweaks -- that's the part current coding agents aren't great at and which take a lot of back and forth.
Report
Is there integration with Figma? We’re currently building the frontend in Claude Code, but the design is in Figma, so first we need to build a basic frontend and then refine it.
@natalia_iankovych The extension doesn't currently integrate with Figma. It's about making visual refinements in situ in the browser. So as Claude builds the frontend, when you load it in your browser, you'll catch all sorts of issues that maybe were not initially addressed in the Figma or which Claude got wrong. This helps you shorten that feedback loop substantially.
Report
Hey! I tried to use it, installed everything, but the chrome extension's "select" element tool isn't working for some reason.
Replies
Handle
Hey Product Hunt! 👋 I’m Derek, founder of Handle.
Coding agents are great at the first 80% of UI. But for that last 20%, when you need to make tweaks for final polish, you end up constantly re-prompting it... it's a sledgehammer when you need a scalpel. The best of both worlds is to do the first draft with the agent and then directly fine-tune it by hand with visual tools.
We built Handle, a simple open source MCP + Chrome extension to solve this. We hope it's useful to the community!
Ask us anything, give us feedback, or share how your AI-powered development workflow is changing. We’ll be around to chat all day.
Much needed tool! Btw are you modifying the DOM directly and then reverse engineering code or working through an abstraction layer?
Handle
@lak7Â We inspect the DOM directly and also look at associated component-level metadata for React, Vue, Angular, etc. When you make edits, we reflect them on the page immediately but also build up an instruction list for your coding agent so you can land all changes in the codebase
@derekattonkotsu Interesting, that's a cool approach!
Handle
@lak7Â Please share feedback when you've had a chance to test. We're very open to feedback as we refine and evolve the tool.
@derekattonkotsu Sure, I will definitely try it out and share my feedback!
Ok this is solving something that's been driving me crazy. Half my Claude Code prompts are me trying to describe pixel-level UI tweaks in words. "Move that button 8px to the right, no the other right, no go back." Point and click is how this should have always worked. The fact that it's open source too is a nice touch. Does it handle complex component trees well or does it get confused with deeply nested layouts?
Handle
@thenomadcode thanks for that! Yes, we map out the full DOM and associate DOM elements with React, Vue, Angular, and Svelte components. So you should be able to precisely select anything in the hierarchy either by just clicking or navigating the tree.
the direct manipulation approach makes sense for UI - natural language is a terrible interface for 'move this 4px left'
Handle
@mykola_kondratiuk 100%. Making visual edits via a prompt is so imprecise and time-consuming. Our thinking is this is the best of both worlds: use the agent for the first draft, but then use Handle to bring your taste and judgment to the table and refine.
Makes sense — prompt for intent, direct manipulation for precision. Solid split. Does Handle expose the prompt history so developers can audit what triggered which UI change? That audit trail becomes critical when you're debugging agent-generated diffs in production.
Handle
@mykola_kondratiuk We have a Changes tab so as you accumulate changes, you have a log. Curious - what do you use for this workflow now? Do you tend to just go back and forth with the agent on refinements?
Mix of Notion notes and git commits right now — neither is built for the agent edit loop. The Changes tab solves a retrieval problem I didn't know I had. Persists across sessions?
Really enjoyed using this, as a vibe coder who used to code with Dreamweaver (before it was bought by Adobe!), I felt like I had to get in the weeds with the techincal detail, but is made adjusting the website with Gemini CLI so easy! I was sick of saying things like "that black box on page 2 with the xyz in it, make it bigger'!
Great product for me!
Handle
@mike05683Â Awesome to hear this! What's your workflow like? Sounds like you use Gemini CLI - is that directly on the production codebase?
What's the fallback behavior when the browser edits create conflicting suggestions for the coding agent? If I'm editing a component that has dependencies the agent doesn't have in its current context window, does it alert you or just apply?
Trying to understand if this is designed for quick visual tweaks or if it handles more complex component refactoring workflows.
Handle
@ivaylotz The Handle browser extension aggregates the edits you've made and notes the containing element and the containing React/Vue/Angular/Svelte component. It sends these notes back to the agent via MCP. The agent then does what it usually does, which is to say it formulates a plan to execute the changes and if it needs context (e.g. dependencies) that aren't in its context window, it will explore your repo. Handle is really designed for visual tweaks -- that's the part current coding agents aren't great at and which take a lot of back and forth.
Is there integration with Figma? We’re currently building the frontend in Claude Code, but the design is in Figma, so first we need to build a basic frontend and then refine it.
Handle
@natalia_iankovych The extension doesn't currently integrate with Figma. It's about making visual refinements in situ in the browser. So as Claude builds the frontend, when you load it in your browser, you'll catch all sorts of issues that maybe were not initially addressed in the Figma or which Claude got wrong. This helps you shorten that feedback loop substantially.
Hey! I tried to use it, installed everything, but the chrome extension's "select" element tool isn't working for some reason.