Loading video...

Video Failed to Load

Go Home

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

cursor_ai's profile picture

Cursor

433,042 subscribers

272,757 views • 3 months ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

This Cursor Extension is awesome Accurate tweaking of UI was always a struggle, But stagewise allows you to bring full context to Cursor, just point and command: 1. Directly choose specific elements in browser 2. Send to Cursor with full context And it's open source
4:24

This Cursor Extension is awesome Accurate tweaking of UI was always a struggle, But stagewise allows you to bring full context to Cursor, just point and command: 1. Directly choose specific elements in browser 2. Send to Cursor with full context And it's open source

Jason Zhou

93,308 views • 1 year ago

Frontend coding may be dead with this new ability with Cursor AI ☠️ Just watched it build a complete Stripe pricing page clone in 4 minutes The workflow is insane: 1) Turn on browser mode in chat 2) Provide your localhost link + target page 3) Boom, done Full responsive design, proper styling, interactive elements - everything This is getting ridiculous...
0:49

Frontend coding may be dead with this new ability with Cursor AI ☠️ Just watched it build a complete Stripe pricing page clone in 4 minutes The workflow is insane: 1) Turn on browser mode in chat 2) Provide your localhost link + target page 3) Boom, done Full responsive design, proper styling, interactive elements - everything This is getting ridiculous...

corbin

66,897 views • 8 months ago

cursor design mode + remotion is actually insane everything in remotion is code, so you can annotate changes directly on the video and cursor just updates it. having a lot of fun with this here's 15 minutes of me improving the agent swarm video
3:04

cursor design mode + remotion is actually insane everything in remotion is code, so you can annotate changes directly on the video and cursor just updates it. having a lot of fun with this here's 15 minutes of me improving the agent swarm video

eric zakariasson

155,481 views • 2 months ago

Cursor now has a built-in web browser. You can say "start my app" and it will run the dev server in a terminal and then navigate the browser to localhost:3000. It can take screenshots of the page for iterating on design, and you can send DOM elements to the agent with prompts!
0:24

Cursor now has a built-in web browser. You can say "start my app" and it will run the dev server in a terminal and then navigate the browser to localhost:3000. It can take screenshots of the page for iterating on design, and you can send DOM elements to the agent with prompts!

Lee Robinson

216,167 views • 8 months ago

When should you use Design mode vs App mode in Replit? Here’s the difference in under 60 seconds ⚡ Design = fast UI & layout App = logic, features, real functionality Learn more in the docs:
0:43

When should you use Design mode vs App mode in Replit? Here’s the difference in under 60 seconds ⚡ Design = fast UI & layout App = logic, features, real functionality Learn more in the docs:

Replit ⠕

46,400 views • 4 months ago

you can use the browser in cursor to watch tiktok while your agents work!
0:57

you can use the browser in cursor to watch tiktok while your agents work!

Rhys

153,053 views • 5 months ago

UI Skills are now easier for agents. Introducing UI Skills CLI. ask Codex, Cursor, Claude Code, or any agent to use the CLI, like: "use `npx ui-skills start` to fix the motion in this dialog" it finds the best design-engineering skill for the job and uses it as context
0:20

UI Skills are now easier for agents. Introducing UI Skills CLI. ask Codex, Cursor, Claude Code, or any agent to use the CLI, like: "use `npx ui-skills start` to fix the motion in this dialog" it finds the best design-engineering skill for the job and uses it as context

Ibelick

61,422 views • 1 month ago

You can now design directly in your codebase. Select elements, modify them visually, and Cursor writes the code.
2:05

You can now design directly in your codebase. Select elements, modify them visually, and Cursor writes the code.

Cursor

6,082,558 views • 7 months ago

Introducing: Vibetest-use MCP - automated QA using Browser-Use 🧨 In just one line👀 ⇢ 10+ browser-use agents spin up in parallel ⇢ crawl your dev site in < 60s ⇢ flag every 404, dead button & UI glitch Runs out-of-the-box in Cursor, Claude Code & Codex (soon?). 100% Open Source. Unleash the swarm ↓
0:38

Introducing: Vibetest-use MCP - automated QA using Browser-Use 🧨 In just one line👀 ⇢ 10+ browser-use agents spin up in parallel ⇢ crawl your dev site in < 60s ⇢ flag every 404, dead button & UI glitch Runs out-of-the-box in Cursor, Claude Code & Codex (soon?). 100% Open Source. Unleash the swarm ↓

Browser Use

132,820 views • 1 year ago

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.
1:27

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

OpenAI Developers

374,796 views • 1 month ago

Thanks to Cursor I've rewrite in 2 hours. It parses the README file automatically and builds the UI with cool UX and the dark mode option.
0:36

Thanks to Cursor I've rewrite in 2 hours. It parses the README file automatically and builds the UI with cool UX and the dark mode option.

fatih kadir akın

29,966 views • 1 year ago

We added a device tool bar to the Codex in-app browser, so it's easier to build and test responsive apps! Now, you can have Codex test your app in different dimensions, so it can fix bugs & improve UI for every device. Just click the 3 dots on the right of the URL bar to use it! As part of this change, we also: - improved the speed of browser use (~30% in my vibe testing) - tightened the animation of the cursor - added a way to hide the composer in full screen mode - fixed a few bugs for browser use in Windows Oliver Tepman and John Nastos cooked on this one! Try it out and let us know what you think!
0:25

We added a device tool bar to the Codex in-app browser, so it's easier to build and test responsive apps! Now, you can have Codex test your app in different dimensions, so it can fix bugs & improve UI for every device. Just click the 3 dots on the right of the URL bar to use it! As part of this change, we also: - improved the speed of browser use (~30% in my vibe testing) - tightened the animation of the cursor - added a way to hide the composer in full screen mode - fixed a few bugs for browser use in Windows Oliver Tepman and John Nastos cooked on this one! Try it out and let us know what you think!

James Sun

148,198 views • 2 months ago

Introducing Annotate mode ✏️ while you vibe code in Google AI Studio, mark up any UI with simple drawing tools and then have Gemini action them directly in the code!
0:54

Introducing Annotate mode ✏️ while you vibe code in Google AI Studio, mark up any UI with simple drawing tools and then have Gemini action them directly in the code!

Logan Kilpatrick

252,004 views • 9 months ago

Used the updated Build Web Apps plugin that uses GPT-Image-2 to design a UI and assets to recreate Windows 3.1 incl. a virtual filesystem for the MS-DOS prompt. Naturally the next step was to use Browser Use to interact with it and play Minesweeper 😂 Note: Once the cursor is starting to move the video is unedited
1:20

Used the updated Build Web Apps plugin that uses GPT-Image-2 to design a UI and assets to recreate Windows 3.1 incl. a virtual filesystem for the MS-DOS prompt. Naturally the next step was to use Browser Use to interact with it and play Minesweeper 😂 Note: Once the cursor is starting to move the video is unedited

dominik kundel

37,219 views • 3 months ago

you can now share canvases in cursor! also, you can use design mode to make sniper edits in your canvases. very in flow with the speed of composer 2.5 here's a paperclipmaxxing canvas i just built and shared using slack mcp
0:38

you can now share canvases in cursor! also, you can use design mode to make sniper edits in your canvases. very in flow with the speed of composer 2.5 here's a paperclipmaxxing canvas i just built and shared using slack mcp

eric zakariasson

37,279 views • 2 months ago

Introducing Design Mode for Cursor! 🧑‍🎨🤖 Vibe code and vibe design in one place, stay in the flow. Uses the same existing AI agent that's in your favorite coding tool, same context, intertwined.
0:50

Introducing Design Mode for Cursor! 🧑‍🎨🤖 Vibe code and vibe design in one place, stay in the flow. Uses the same existing AI agent that's in your favorite coding tool, same context, intertwined.

Tom Krcha

858,909 views • 1 year ago

Design Mode for Cursor Introducing a new way to design right where you code.
0:59

Design Mode for Cursor Introducing a new way to design right where you code.

Tom Krcha

360,873 views • 10 months ago

Today we're launching the easiest way to use: Claude Code Codex w/ GPT-5 Gemini Cli Cursor Agent And more (soon) In the browser. With one subscription. @vibe_terminal
1:39

Today we're launching the easiest way to use: Claude Code Codex w/ GPT-5 Gemini Cli Cursor Agent And more (soon) In the browser. With one subscription. @vibe_terminal

Riley Brown

134,472 views • 11 months ago

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:
1:58

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Jason Zhou

78,413 views • 7 months ago

Today we are rolling out edit mode in AI Studio Vibe Coding ✏️, select components to quickly edit them, annotate right on the UI with a pen, and select image assets to change them with Nano Banana + upload content!
0:39

Today we are rolling out edit mode in AI Studio Vibe Coding ✏️, select components to quickly edit them, annotate right on the UI with a pen, and select image assets to change them with Nano Banana + upload content!

Logan Kilpatrick

135,753 views • 2 months ago