Loading video...

Video Failed to Load

Go Home

Cursor's new browser + element annotation turns it into a design studio. Meet Cursor Design ๐ŸŽจ โ€” Claude Design, running locally. Describe a screen โ†’ get polished HTML โ†’ click any element in the preview & say what to change. Best w/ Opus 4.8. npx skills add JimLiu/baoyu-design

dotey's profile picture

ๅฎ็Ž‰

229,086 subscribers

248,360 views โ€ข 1 month ago โ€ขvia X (Twitter)

EducationScience & Technology
LIVE

Anya Rossiโ€ข Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Claude Opus 4.8 in Open Design absolutely cooked. We asked it to recreate a beautiful Three.js hover-card experiment. It captured the interaction, lighting, materials, and complex cube geometry with wild precision. Inspired by Zsolt Kacso original, which was built with Cursor Composer 2.5. Open Design now works with Claude Opus 4.8.
0:24

Claude Opus 4.8 in Open Design absolutely cooked. We asked it to recreate a beautiful Three.js hover-card experiment. It captured the interaction, lighting, materials, and complex cube geometry with wild precision. Inspired by Zsolt Kacso original, which was built with Cursor Composer 2.5. Open Design now works with Claude Opus 4.8.

Open Design

53,073 views โ€ข 1 month ago

Claude released a new design feature that's great for iOS app design. So I extracted the code and skills and turned it into a skill that can be used by any agent. Since Codex has comments and web preview built in... it works basically the same. (Oh and you can use claude 4.7 if you think it's better at design)
2:12

Claude released a new design feature that's great for iOS app design. So I extracted the code and skills and turned it into a skill that can be used by any agent. Since Codex has comments and web preview built in... it works basically the same. (Oh and you can use claude 4.7 if you think it's better at design)

Riley Brown

86,707 views โ€ข 3 months ago

๐ŸŽจ Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters โ€” all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price ๐Ÿ‘‰
1:23

๐ŸŽจ Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters โ€” all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price ๐Ÿ‘‰

Genspark

177,878 views โ€ข 24 days ago

Today weโ€™re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.
0:54

Today weโ€™re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

300,134 views โ€ข 5 months ago

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as the HTML and CSS of that element.
0:26

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as the HTML and CSS of that element.

Visual Studio Code

75,499 views โ€ข 1 year 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

Everyone is talking about Claude Designโ€ฆ but I keep going back to Gemini. Gemini 3.1 Pro is seriously impressive when it comes to motion design. I actually want to try Claude Design, but after only two prompts, I was already running out of credits. If you care about anti AI slop, Gemini is still winning. With a single prompt, it can transform a static HTML layout into dynamic, polished motion graphics.
0:40

Everyone is talking about Claude Designโ€ฆ but I keep going back to Gemini. Gemini 3.1 Pro is seriously impressive when it comes to motion design. I actually want to try Claude Design, but after only two prompts, I was already running out of credits. If you care about anti AI slop, Gemini is still winning. With a single prompt, it can transform a static HTML layout into dynamic, polished motion graphics.

FHILY๐Ÿ‘‘

25,019 views โ€ข 26 days ago

CLAUDE DESIGN SKILLS CAN TURN A $20 PLAN INTO A JUNIOR DESIGN SYSTEM ASSISTANT A blank prompt makes Claude judge design like a generalist, one screen at a time, with too much room for random taste and vague feedback Design Skills give it a repeatable way to look at interface work: spacing, hierarchy, contrast, component consistency, states, layout rhythm, and the small visual rules that make a product feel finished That is where it becomes useful for a designer, it can review a rough screen, catch what feels off, suggest a cleaner structure, keep repeated components aligned, and explain the changes in a way that feels closer to a design lead than a prompt response The value is not that Claude becomes "creative" and the value is that its judgment becomes repeatable, so the same design standards can be applied across every screen instead of being rebuilt from scratch in every chat Check the full article about cowork and skills below
0:45

CLAUDE DESIGN SKILLS CAN TURN A $20 PLAN INTO A JUNIOR DESIGN SYSTEM ASSISTANT A blank prompt makes Claude judge design like a generalist, one screen at a time, with too much room for random taste and vague feedback Design Skills give it a repeatable way to look at interface work: spacing, hierarchy, contrast, component consistency, states, layout rhythm, and the small visual rules that make a product feel finished That is where it becomes useful for a designer, it can review a rough screen, catch what feels off, suggest a cleaner structure, keep repeated components aligned, and explain the changes in a way that feels closer to a design lead than a prompt response The value is not that Claude becomes "creative" and the value is that its judgment becomes repeatable, so the same design standards can be applied across every screen instead of being rebuilt from scratch in every chat Check the full article about cowork and skills below

Penguin

10,349 views โ€ข 1 month ago

In-browser annotations are coming to Polyscope ๐Ÿ”ฅ Select any element in your browser โ†’ Polyscope will create a new workspace โ†’ Claude, Codex or Cursor knows what to change Zero copy paste Zero complex configuration Built with the Polyscope JS SDK ๐Ÿš€
5:08

In-browser annotations are coming to Polyscope ๐Ÿ”ฅ Select any element in your browser โ†’ Polyscope will create a new workspace โ†’ Claude, Codex or Cursor knows what to change Zero copy paste Zero complex configuration Built with the Polyscope JS SDK ๐Ÿš€

Marcel Pociot ๐Ÿงช

13,254 views โ€ข 4 months ago

I built a *human* curated list of 67 design skills (DESIGN md) of popular UI styles that you can use with AI ๐Ÿ’ป locally tested by humans with Opus 4.7 ๐ŸŽจ works with Google Stitch, Claude Design ๐Ÿค– supports SKILL md files too ๐Ÿ’ต free and pro version also available You can also pair these with a collection of UI prompts to build hero, pricing, and feature sections from the TypeUI website ๐Ÿ™Œ
3:56

I built a *human* curated list of 67 design skills (DESIGN md) of popular UI styles that you can use with AI ๐Ÿ’ป locally tested by humans with Opus 4.7 ๐ŸŽจ works with Google Stitch, Claude Design ๐Ÿค– supports SKILL md files too ๐Ÿ’ต free and pro version also available You can also pair these with a collection of UI prompts to build hero, pricing, and feature sections from the TypeUI website ๐Ÿ™Œ

Zoltรกn Szล‘gyรฉnyi

27,737 views โ€ข 2 months ago

Claude Design is f*cking ridiculous ๐Ÿคฏ Claude Design now lets DTC brands and agencies rebuild any high-performing email โ€” logo, hero, headline, CTA button, comparison table, brand colors โ€” in 20 minutes. One reference email + a pre-loaded brand design system + a structured prompt = a finished, on-brand email you can preview as HTML. All inside Claude Design. Perfect for DTC brands and agencies who are still paying email agencies $3-5K/month to design flows that take 2 weeks to ship. If you're sitting on a welcome series, abandoned cart, and post-purchase flow that hasn't been touched in 6 months because the design lift is too painful... This workflow eliminates the entire bottleneck: โ†’ Build a design system in Claude Design once (brand colors, fonts, logo, button styling) โ†’ Upload a screenshot of any email you want to rebuild as your reference โ†’ Use Claude to write a structured prompt that maps every section top-to-bottom (promo bar, logo, headline, CTA, hero, body, table, footer) โ†’ Drop the reference image + the prompt into Claude Design at high fidelity โ†’ Iterate inline โ€” swap the hero image, fix button styling, color-pick brand colors directly from the original No briefing a designer. No waiting 2 weeks for V1. No paying an agency $4K/month for 4 emails. What you get: โ†’ Win-back, welcome, abandoned cart, and post-purchase emails designed in under an hour each โ†’ A reusable brand design system that every new email pulls from automatically โ†’ Full inline editing โ€” fonts, colors, buttons, images all editable in the canvas โ†’ HTML preview ready to hand off to your ESP Built 100% in with Claude Design. I put together a full playbook showing the design system setup, the exact structured prompt format, and the inline editing workflow. Want it for free? > Like this post > Comment "DESIGN" And I'll send it over (must be following so I can DM)
0:36

Claude Design is f*cking ridiculous ๐Ÿคฏ Claude Design now lets DTC brands and agencies rebuild any high-performing email โ€” logo, hero, headline, CTA button, comparison table, brand colors โ€” in 20 minutes. One reference email + a pre-loaded brand design system + a structured prompt = a finished, on-brand email you can preview as HTML. All inside Claude Design. Perfect for DTC brands and agencies who are still paying email agencies $3-5K/month to design flows that take 2 weeks to ship. If you're sitting on a welcome series, abandoned cart, and post-purchase flow that hasn't been touched in 6 months because the design lift is too painful... This workflow eliminates the entire bottleneck: โ†’ Build a design system in Claude Design once (brand colors, fonts, logo, button styling) โ†’ Upload a screenshot of any email you want to rebuild as your reference โ†’ Use Claude to write a structured prompt that maps every section top-to-bottom (promo bar, logo, headline, CTA, hero, body, table, footer) โ†’ Drop the reference image + the prompt into Claude Design at high fidelity โ†’ Iterate inline โ€” swap the hero image, fix button styling, color-pick brand colors directly from the original No briefing a designer. No waiting 2 weeks for V1. No paying an agency $4K/month for 4 emails. What you get: โ†’ Win-back, welcome, abandoned cart, and post-purchase emails designed in under an hour each โ†’ A reusable brand design system that every new email pulls from automatically โ†’ Full inline editing โ€” fonts, colors, buttons, images all editable in the canvas โ†’ HTML preview ready to hand off to your ESP Built 100% in with Claude Design. I put together a full playbook showing the design system setup, the exact structured prompt format, and the inline editing workflow. Want it for free? > Like this post > Comment "DESIGN" And I'll send it over (must be following so I can DM)

Mike Futia

31,687 views โ€ข 2 months ago

Jenny Wen, head of design for Claude at Anthropic: "the design process is dead." what replaces it runs on machine-readable design systems In a 1-hour conversation, Jenny Wen breaks down why the discovery -> mock -> iterate loop is dying and what designers do instead. design system -> Claude Code -> every screen fixed at once, not one at a time i rebuilt the same 10-screen dashboard twice: ~6 hours of restyling by hand vs ~40 minutes when the fix lived in the system. how to build that system and hand it to Claude Code is in the article below.
1:12:40

Jenny Wen, head of design for Claude at Anthropic: "the design process is dead." what replaces it runs on machine-readable design systems In a 1-hour conversation, Jenny Wen breaks down why the discovery -> mock -> iterate loop is dying and what designers do instead. design system -> Claude Code -> every screen fixed at once, not one at a time i rebuilt the same 10-screen dashboard twice: ~6 hours of restyling by hand vs ~40 minutes when the fix lived in the system. how to build that system and hand it to Claude Code is in the article below.

Mnimiy

180,024 views โ€ข 1 month ago

New tools I keep coming back to. Save this ๐Ÿ‘‡ - - AI prompts for animated websites - - free animated component library - - pure CSS text animations - - spring physics UI motion - - build terminal UIs with TypeScript - - name any UI element instantly - - logo, color & gradient tools - - 3D product visualizer in browser - - Claude skills for web design What am I missing?
0:41

New tools I keep coming back to. Save this ๐Ÿ‘‡ - - AI prompts for animated websites - - free animated component library - - pure CSS text animations - - spring physics UI motion - - build terminal UIs with TypeScript - - name any UI element instantly - - logo, color & gradient tools - - 3D product visualizer in browser - - Claude skills for web design What am I missing?

Tran Mau Tri Tam โœช

142,584 views โ€ข 4 days ago

Oh my god... AI made creating professionally designed iOS apps so much easier. You can replicate any app design in 3 steps: > screen record for 30 seconds of any app being used > Upload to gemini w the right prompt (in tweet below) > Paste it into , then watch Claude Code build the entire app design. See tweet below ๐Ÿ‘‡
0:36

Oh my god... AI made creating professionally designed iOS apps so much easier. You can replicate any app design in 3 steps: > screen record for 30 seconds of any app being used > Upload to gemini w the right prompt (in tweet below) > Paste it into , then watch Claude Code build the entire app design. See tweet below ๐Ÿ‘‡

Agenteers

77,183 views โ€ข 6 months ago

Make Stitch designs real with AI Studio From design to a live app in under 60 seconds. Here's how you can now take your Stitch designs and make them real with Google AI Studio: 1. Design in Stitch. 2. Export the HTML. 3. Prompt AI Studio to convert it into a working app. And the best part? This is the manual way. We're working on making this a 1-click experience. Consider this the warm-up.๐Ÿ‘Ÿ
1:00

Make Stitch designs real with AI Studio From design to a live app in under 60 seconds. Here's how you can now take your Stitch designs and make them real with Google AI Studio: 1. Design in Stitch. 2. Export the HTML. 3. Prompt AI Studio to convert it into a working app. And the best part? This is the manual way. We're working on making this a 1-click experience. Consider this the warm-up.๐Ÿ‘Ÿ

Stitch by Google

41,584 views โ€ข 9 months ago

Here is a quick walkthrough of everything new in Stitch: ๐ŸŽจ The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS โ€ฆ light mode!) ๐Ÿง  A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. ๐ŸŽ™๏ธ You can vibe design with your voice (in Preview). Stitch can โ€˜seeโ€™ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. โšก๏ธ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. ๐Ÿ“ DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video๐Ÿ‘‡ Details for each major improvement ๐Ÿงต
1:29

Here is a quick walkthrough of everything new in Stitch: ๐ŸŽจ The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS โ€ฆ light mode!) ๐Ÿง  A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. ๐ŸŽ™๏ธ You can vibe design with your voice (in Preview). Stitch can โ€˜seeโ€™ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. โšก๏ธ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. ๐Ÿ“ DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video๐Ÿ‘‡ Details for each major improvement ๐Ÿงต

Stitch by Google

487,548 views โ€ข 4 months ago

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app โ†’ click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.
0:28

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app โ†’ click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

joshpuckett

104,569 views โ€ข 5 months ago

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers
0:51

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

James Rochabrun

61,199 views โ€ข 1 month ago

Our new step by step tutorial shows how to turn a single product image into studio quality visuals with Commerce Studio. No complex workflow. No design skills. Just results in seconds. Try it now โ†’
2:00

Our new step by step tutorial shows how to turn a single product image into studio quality visuals with Commerce Studio. No complex workflow. No design skills. Just results in seconds. Try it now โ†’

Pollo AI

148,290 views โ€ข 1 month ago

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source
0:40

THIS GUY ADDED A LIVE BROWSER TO CLAUDE CODE SO YOU CAN CLICK ANY ELEMENT AND EDIT IT INSTANTLY biggest issue with vibe coding UI is that you have to describe what you want to change. if you prompt it the wrong selector or wrong component, Claude can't find it. now you just click it. your app runs in an embedded browser with Claude Code. you can click any button, any text, any div. Claude instantly knows exactly what you're pointing at. click. instruct. done. no more "change the button in the top right corner of the second card component." all you have to do now is just click the button. AND its open source

Om Patel

152,749 views โ€ข 3 months ago