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

宝玉

241,675 subscribers

251,226 views • 3 months 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

/scandinavian-design built a skill that turns any site into scandi minimalism! npx skills add ericzakariasson/scandinavian-design try it:
0:28

/scandinavian-design built a skill that turns any site into scandi minimalism! npx skills add ericzakariasson/scandinavian-design try it:

eric zakariasson

207,975 views • 27 days ago

Cursor just beat Codex with their design mode. The latest design mode updates plus the new multitask agent mode make design changes in code insanely fast. Here's my step by step walkthrough to designing any app or website with Cursor design mode: 00:00 Introduction to Cursor's new design mode. 01:55 Explaining what Cursor Design Mode is. 03:02 Demonstrating multi-element selection for edits. 04:10 Using the new drawing/annotation feature. 05:23 Live example of improving text hierarchy. 07:29 Using the multitask feature for parallel edits. 08:21 Explaining different modes of AI-assisted coding. 09:35 Summary of new design mode updates.
10:27

Cursor just beat Codex with their design mode. The latest design mode updates plus the new multitask agent mode make design changes in code insanely fast. Here's my step by step walkthrough to designing any app or website with Cursor design mode: 00:00 Introduction to Cursor's new design mode. 01:55 Explaining what Cursor Design Mode is. 03:02 Demonstrating multi-element selection for edits. 04:10 Using the new drawing/annotation feature. 05:23 Live example of improving text hierarchy. 07:29 Using the multitask feature for parallel edits. 08:21 Explaining different modes of AI-assisted coding. 09:35 Summary of new design mode updates.

Chris Ashby

14,737 views • 3 months ago

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

54,653 views • 3 months 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 • 5 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

179,614 views • 2 months 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

301,000 views • 7 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,563 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

62,979 views • 3 months 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 • 2 months 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 • 3 months 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,293 views • 6 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

28,239 views • 4 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,959 views • 4 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,791 views • 3 months 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 ✪

166,839 views • 2 months 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 • 8 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 • 11 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

488,645 views • 6 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

105,097 views • 7 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,608 views • 3 months ago