Use Design Mode in Cursor 3 to annotate and target UI elements in the browser.

Design Mode in Cursor 3 is exactly what frontend development needed. Point at any element in the browser, annotate it, and get precise code changes. No more vague descriptions like ‘the blue button on the right. This is going to save so much time.

Cursor users right now

really shitty of you guys to rip such a feature without crediting react-grab + steal from OSS

annotating ui elements directly in the browser collapses the worst part of front end iteration which is translating what i see into a description for the agent. the gap between point and prompt is where most of the friction lives

How much Cursor changed in just one year since I started to use it... hard to imagine. But it's going in a real cool direction.

Been building a React Native app mostly with generated code and the biggest pain was always "change that button over there" - this solves it.

pointing at a live localhost instead of describing "the button next to the other button" is the feedback loop frontend devs have wanted for a decade

this is the missing piece honestly. clicking directly on UI elements instead of writing descriptions is how designers already think. the gap between intent and implementation just got smaller 🎨

Can’t eat for this to get started

point → annotate → generate code is clean Now just let Claudex verify it doesn’t break the rest 😭

people will not believe me I'm developer, if they see me using this.

htf do you enable this feature?

This is the play. Point at the thing you want changed instead of describing it for 3 paragraphs. Cursor going visual while Claude Code stays terminal is where the real split happens.

this is so much easier now

2 things: breakpoints and where is the css editor? Otherwise, it’s pretty useful!

what happened to the old design panel @cursor_ai, it wasn't perfect but I like that it allows us to more easily select the correct div instead of just first selected div At the very least of not the entire panel, bring back a way to select elements precisely. cc: @ryolu_ @leerob

Software engineers rn

annotating UI elements directly in the browser and pointing cursor at them is how design-to-code should have worked from the start. screenshots and paste was never the final form. the feedback loop just got way tighter

I need help being able to view and use this feature. I’m on the latest version of Cursor (Version 3.0.13, VSCode Version 1.105.1) on my iMac M1. How can I enable design mode?

wow, this is sick

Curious how well it handles messy real-world UIs. That’s usually where something like Claudex ends up doing the heavy lifting

Now I'm interested.. But the price needs to be good. Good for devs.

Yeah

what is agentation. glad this is built in now.

Nice feature… but real power is when you’re not limited to one tool. Blackbox AI makes that easy

Jfyi

Really impressed by Cursor lately

Still the best design mode tool that exists but it eats up tokens fast! I can use Codex with agentation a ton without hitting limits, but Cursor I hit the limits in like 20 minutes. Cursor is by far the better DX though so far.

Agreed🙌

that is such a cool feature letting ai exactly know what needs to change without going through the hassle or copy pasting screenshots nice work cursor team

how is it even a new feature? the box changed location, that's all

Ow, you guys are alive.

turned into pointing and complaining

Design Mode is so underrated. Being able to annotate and point at specific UI elements instead of describing them in text cuts a huge amount of back-and-forth out of the workflow.