Two free Chrome extensions that save me time, tokens, and headaches when I'm vibe coding with Claude Code.
I found a combo that changed how I work with Claude Code. Two free Chrome extensions that save me time, tokens, and headaches.
Click any element in the browser and it instantly shows you the component name and file path. Copy that, paste it into Claude Code, and you can start editing immediately. No more digging through the file tree trying to find where that button lives.
Inspect padding, margin, border radius, colors, and typography directly in the browser. No developer tools needed. It feels like using Figma's inspect mode on a live site.
No digging through dev tools. No guessing which file to edit. Point, check, fix. Done.
It saves Claude Code credits too — you're giving it the exact file path instead of asking it to search. Less back and forth, faster results.
If you're a designer who vibe codes, try this combo. It's almost too easy.
More writings
How I Built a Framer Component and Listed It on the Marketplace in One Day
I wasn't trying to build a product. I was just trying to finish my portfolio. Then I went down a rabbit hole.
Lines of Code Used to Terrify Me. Now I Build Dev Tools.
I'm a designer who vibe codes with Claude Code. The scariest part was opening the terminal. Then I started building my own tools.