Launching today
Inspector
Figma for Claude Code
199 followers
Figma for Claude Code
199 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.
Inspector
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
Retool
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?
Inspector
@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
Dash
Inspector has saved me like atleast 5h over the past week!
Inspector
@dhruv_roongta Thanks Dhruv! Happy that Slashy uses Inspector 🥹
Slashy
Inspector has helped us a lot with our development workflows overall made life way easier and has allowed us to just not use Figma.
Inspector
@harsha_gaddipati You guys are awesome
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?
Inspector
@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!
Inspector
@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!
Frontend stuff that’s taken me hours w/ claude code can be done in seconds w inspector!