Product Thumbnail

Inspector

Figma for Claude Code

Design Tools
Productivity
Artificial Intelligence

Inspector is a visual editor that connects to your favorite AI agent (Claude Code, Codex, Cursor). Click on an element in your UI, tweak it visually, and Inspector writes the change to your codebase. No more design handoff, just push to the repo.

Top comment

Hey Product Hunt 👋

I'm Michael, co-founder of Inspector with my best friend Quentin.

We built this because we were spending hours designing the perfect UI in a visual editor, then losing all that work when it was time to actually implement it in code.

We wanted something that just worked, so we built Inspector.

It's like Figma for your actual codebase. You can just do things like:

  • Tweak the spacing on a card, click apply, and it's in your repo

  • Redesign your nav bar visually, then push a PR without writing a single prompt

  • Hand a designer Inspector and they ship a UI fix straight to prod


It connects to the agent you already use (Claude Code, Cursor, Codex) and writes the changes directly to your codebase or GitHub repo. No design handoff. No "please fix" screenshots. No translating mockups into prompts.

We’d love feedback, questions, or ideas for where we could improve your workflow!

Join the Discord: https://discord.gg/ZURx9ckUgH
Try out Inspector with $20 free (PH special): www.tryinspector.com

Happy shipping,
Michael & Quentin

Comment highlights

looks really promising

figma has been late to the AI party and this looks like a solid improvement!

The React code linking that maps exact source lines to rendered components is a solid approach to give the agent real context. Curious what you're cooking with GLM 4.7 on Cerebras for the Inspector Agent.

Quick question Michael, when a designer redesigns a nav bar visually and pushes a PR through Inspector, is there a review step before merge or does it go straight to the repo?

Smart move to detect existing abstractions like Tailwind classes instead of injecting inline styles, that's how you keep a codebase clean at scale. The .inspectorrules file for team conventions is a nice touch too.

4 fails out of 89 visual test cases vs 43 for cursor browser, that benchmark alone is worth the try.

Wow, Inspector looks amazing! That click & tweak to code workflow is seriously genius. How does it handle more complex UI interactions beyond simple style changes? Super curious!

This nicely bridges the gap between intent and implementation — being able to see a UI change and have it reflected directly in code feels like a real workflow upgrade, not just a demo feature.

Great idea. Make your solution as modules for all popular CMSs, and you could earn a few million dollars from selling such a module) I say this as the CEO of a development company that works a lot with legacy code)

Curious how teams see this fitting alongside Figma long-term; replacement or complement? Feels like a big shift 👀

this tool helped me go from people roasting me for my design work, calling me a hopeless vibecoder, to being asked if i'm taking clients for UI consulting.

if you do anything with your day today, try inspector.

Wow! Passing this to my friends building with Claude Code. Congrats on the launch and the product!

The "Figma for Claude Code" concept is interesting. Bridging visual editing and AI agents addresses a real gap in the design-to-code workflow.

I'm curious about multi-component scenarios: when a visual change affects multiple files (e.g., updating a shared component's layout that cascades to parent containers), how does Inspector handle the context propagation to Claude Code? Does it batch related changes or let the agent discover dependencies through the codebase?

Awesome stuff guys! Love the product and I believe that all roles in Software will converge into one multidisciplinary role. This will play a big role in that future :)

Will do. The GitHub PR flow straight from the visual editor is where I'd start testing it seriously.