🐴 How I Built the Design Inspect Tool for Claude Code

Upcoming Event:

🏫 Course: AI for Product Designers | Aug 25 - Sep 4

It includes live sessions, expert guest talks, a hands-on Claude Code workshop, a project, and access to a special 400+ alumni network with knowledge sharing.

If you use Lovable, V0, or even Cursor, you know how helpful the browser feature and inspect tool are.

If you want to make a revision, you just select the element with the inspect tool in its browser and ask for the change.

Claude Code doesn’t have that. You can reach for Playwright MCP and a few other tools to handle certain automation, but they don’t give you the inspect feature that makes those quick, precise, point-and-fix edits.

So what I usually end up doing is either running Claude Code’s extension inside Cursor, or staying in the terminal and pasting in visual callout snapshots as references for revisions. I believe this workaround feels familiar to you too.

That’s why I built this tool. More precisely, a Claude Skill.

Let’s dive in.

Design Inspect is a skill I built for Claude Code that lets you click an element in the project you are working on and tell Claude what to change, instead of describing it in words or taking screenshots.

It is helpful because the click points Claude Code to a precise element (a section, component, div block, etc), so it knows exactly what you’re targeting and gives you a much better result.

That makes it especially handy for design revisions.

Think of it like Cursor’s Design Mode or browser DevTools, but wired into Claude Code.

Without Design Inspect:

You might have to prompt things like below in Claude Code.

Change the price text in the listing card header to green, which is the bold number near the top right. See the snapshot for reference. [Snapshot]

This kind of prompts is common in Claude Code during revisions, which is time-consuming and vague.

With Design Inspect:

You click the element in your browser. Claude sees exactly which element (JSX line) it is. Then you just type “make this green.” That’s it.

Here’s a demo video.

• Open your project in Chrome and click the Inspect Mode button in the bottom-right corner.

• As you move your cursor, elements are highlighted. Click any element to select it and add a revision comment. You can also choose to select multiple elements and leave multiple comments.

• When you’re done, click Copy to Clipboard, paste the message into Claude Code, and press Enter.

• Claude understands exactly which element(s) you want to change and make changes precisely to what you selected.

I use Cursor browser a lot, where I can hover over an element in my running app, click it, and a small prompt box appears so you can describe a change. It was a major inspiration for this tool.

I sent Claude Code a screenshot and asked this:

I’m inspired by Cursor’s Design Mode. In the Cursor browser, users can enter an inspect mode, hover over UI elements to highlight them, click an element, and get an inline prompt attached to that specific component to request changes in natural language. The AI then updates that part of the UI based on the instruction.

Can you build a similar experience in Claude Code? If so, explain how you would implement element selection, inline prompting, mapping the selected browser element back to source code, and generating targeted code changes.

I also dug into common tools out there such as Playwright and Superpowers, but they are not I wanted. For this tool, I didn’t need Claude Code to control a browser for me and take action such as filling in forms and taking screenshots.

The first version was a script Claude generated. In order to use it, it told me that I needed to copy it from my clipboard and paste it into the DevTools Console, which is a developer panel that already lives inside Chrome (Command + Option + J).

Then I get to see a Design Mode button appear at the bottom right of my browser, where I can click to initiate the feature.

Directionally, it is what I was looking for. However, there are many areas that I wanted to improve on:

1. Copy paste script into DevTools Console felt like a clunky workflow.

2. I could only click on one element. I couldn’t multi-select.

3. The text in the popup was too small.

4. Some text/copy was unnecessary and confusing

5. The CTA icon in the popup meant “Send”. But it was misleading because the actual behavior after I clicked on it is “Copy to clipboard”.

6. After I selected an element and typed my revision instructions into the popup, I clicked the CTA icon, which copied them. Then I pasted them into Claude Code, but the pasted text wasn’t the same as what I’d written.

7. I wish I didn’t have to switch to Claude Code and hit Enter here. I wish it sent directly to Claude Code and ran.

All in all, there are many little design decisions and some bugs.

Let me go over #6 and #7 here with more details.

I used a landing page I worked on for the test run. I selected a HotMarket element and asked to change to red and then selected a ListingHeader element and asked to change to green.

However, when I copy-pasted into Claude Code, it showed a list of references at the top, and the change request at the bottom:

References:

• HotMarket (button)

• ListingHeader (span)

[HotMarket] [HotMarket] change to red color [ListingHeader] change to green

I did not like it. It was not clear enough which change went with which element. I wanted the change written next to the element it applied to, all in one line.

So I asked for the format to look like this instead:

<button class=”...”> “6:00 pm” [HotMarket] change to red

<span class=”...”> “Seattle is a hot market” [HotMarket] change to green

Each line is one element with the element ID to be specific, then the change request.

So AI can interpret my instruction more clearly with little ambiguity.

I asked Claude Code, “can it auto-run in Claude Code once I click the button, so I do not even have to paste?”

It said it was possible, but it would be a more complex builds with some nuances. I asked the ROI about it because I had learned lesson before that not all the builds are worth the tokens and trade-offs.

After evaluating the implementation plan from Claude Code, I stayed with the copy and paste approach. Good for now.

Once the experience worked, I asked Claude to package the whole thing as a skill.

A skill, in Claude Code, is just a markdown file (or multiple of them) written in plain English that tells Claude how to behave when the skill is triggered, plus any helper files (in this case, the script) and/or reference files.

I created the skill in the global level instead of the project level because it’s a skill that I would like to use in all my projects.

(I’ll publish a detailed guide on Claude Skills soon. Stay tuned.)

I asked Claude if there’s a more streamlined approach than me having to paste the script into the browser every single time.

Claude suggested Tampermonkey, which is a free browser add-on that auto-runs little scripts on the pages you tell it to.

Then I did some research into it, installed it, changed its permission setting for allowing it to work. Lastly, I pinned its toolbar icon from Chrome extension to make it easier for me to use.

Below are some perks for paid subscribers:

• A step-by-step guide to installing this skill and putting it to work

• Full access to every Claude skill I’ve built to supercharge various workflows: design exploration, version control, slide decks, and more, each with its own install-and-use guide

• A seat at monthly coffee chats with me and fellow members. June’s is coming up this Friday.