Inspector
Figma for Claude Code
964 followers
Figma for Claude Code
964 followers
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.
Free
Launch Team / Built With
AWS Startup AdvisorPersonalized AWS guidance that meets you where you’re already building
Promoted
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
Woah this looks really interesting! I could see EPD teams really leveraging this to get non technical people shipping code. How do you compare to Cursor's In-App Browser Editor?
@zhengming thanks! We actually created 89 visual test cases to make sure our Figma-like editor was reporting correct values and benchmarked Inspector on it, and then Cursor Browser. Cursor's visual editor failed 43 of the tests and Inspector only failed 4 (we're still working to make it perfect!).
We did a full blog post about how we compared it here: https://www.tryinspector.com/blog/code-first-design-tools
@quentin_romero_lauro Wow Cursor failing 43 cases is pretty surprising
Love this! Even as a non-designer, this really appeals to me. It really takes me out of the flow jumping between browser and Claude Code when doing front end work.
@fabian_lindfors Hi Fabian! We agree, Inspector is just as powerful for developers!
This is a huge step towards eliminating the design-to-code handoff! How do you ensure the changes Inspector writes stay aligned with existing design systems and abstractions as a codebase scales?
@jemluu Great question! Keeping AI edits consistent with your existing design system is a core design principle for us.
A few of the ways we do that:
Project-level rules (.inspectorrules). Teams using Inspector can define project-specific conventions in a .inspectorrules file (things like "always use our design tokens from theme.ts"). These rules are injected into every AI-assisted edit, so the output matches your team's standards.
Framework-aware styling. Inspector detects your existing abstractions. For example, if your element uses Tailwind classes, Inspector updates the className (for example, shadow-md to shadow-lg) instead of injecting raw inline styles. Your design system stays intact.
React code linking. Even though Inspector is framework agnostic, React is where we really shine. We link the exact lines of React to the component they render on the frontend, giving your agent perfect context every time.
Hope that answers your question!
This is truly amazing! I wonder if, with the right marketing strategy, this could reach the size and power of Cursor or Figma.
I tried developing one once (I'm not a programmer, just an enthusiast) and realized I had many difficulties editing specific elements in my app's structure, even when creating it using AI. Are you already promoting it?
@nicolas55 Thanks so much! Totally agree on the difficulty of editing specific elements---it's exactly why we built Inspector. Yes - marketing a community involvement are so important for us! We just started on Friday to advertise Inspector and are actively building our Discord community.
If you want to join and share more feedback, we'd love to have you join: https://discord.gg/AuXBs3VssV
Figma for Claude Code is a brilliant concept! How do you handle version control when multiple people are iterating on the same UI components with AI?
Congrats on the launch! 🚀
@adam_lab Thanks Adam! We actually integrate directly with Git, so you can stage pull from a remote repo, stage, unstage, commit, and push changes all from inside Inspector! You can even create a PR directly from Inspector.
When you do, the PR will have an "Open in Inspector" link, so if another person on your team has Inspector, they can checkout a branch and go directly to your changes in Inspector just by clicking the link.
@boagworld Hey Paul! That's actually my fault, we've been shipping so fast the entire pricing flow is triggered from the desktop app. I'll be sure to add transparent pricing on the lander asap!
Here's the rundown:
Connecting Claude Code, Cursor CLI, Codex is always free
Free users get access to the same visual editing features as paid users
Paid users get access to more usage on Inspector Agent, which exposes GLM 4.7 (2x speed on Cerebras) as a model option
A paid subscription is $20/ month
Basically, the Inspector Agent is a way for us to provide $20 of free usage to people who would otherwise not connect their agent so that they can feel the magic. We're working on some really cool stuff that makes Inspector Agent even more powerful, so stay tuned!