Loading video...

Video Failed to Load

Go Home

medical profile dashboard design for BoardUI Design System lots of subtle micro-interactions and data visualization in this one. designed by hand and coded all with claude opus 4.8. which component or page you’d like to see next? 🤞🏻

sitenley's profile picture

Mertcan

3,194 subscribers

14,290 views • 2 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

agent progress tracker component is here for BoardUI Design System. spent lots of time with claude to get this right, enjoy. 🤝
0:45

agent progress tracker component is here for BoardUI Design System. spent lots of time with claude to get this right, enjoy. 🤝

Mertcan

13,056 views • 1 month 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

Created a social media profile dashboard with Claude Design. This used my personal Design System to get the font, colors, text and graphics closer to my personal brand style. Prompt in the comments below.
0:27

Created a social media profile dashboard with Claude Design. This used my personal Design System to get the font, colors, text and graphics closer to my personal brand style. Prompt in the comments below.

Jerrod Lew

11,781 views • 4 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

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?
0:59

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?

AK

92,075 views • 7 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

Claude Code is CRACKED at design now and I don't think people understand how BIG this is. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)
0:37

Claude Code is CRACKED at design now and I don't think people understand how BIG this is. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)

Prajwal Tomar

106,397 views • 2 months ago

Motion design today is fragmented. No one wants to admit it. you either design in Figma and struggle with importing to AE, or suffer through AE's sloppy design system. Jude and I fix this with Motioner. Design and motion design in one place. Coming later this summer
0:20

Motion design today is fragmented. No one wants to admit it. you either design in Figma and struggle with importing to AE, or suffer through AE's sloppy design system. Jude and I fix this with Motioner. Design and motion design in one place. Coming later this summer

zellzoi

30,771 views • 2 months ago

I still don't think people understand what just happened with Claude Code. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)
0:37

I still don't think people understand what just happened with Claude Code. There is now one tool that takes you from a rough idea to fully designed, agency-tier, App Store-ready screens in minutes. One design system, every screen, real native code. Most builders hand design to Claude Code, get AI-default screens, and wonder why their app looks like every other vibe coded project. This is the 3-step workflow that fixes it: (full breakdown in the article)

Prajwal Tomar

146,206 views • 2 months ago

Introducing Skywork Design. We moved the design capability of Skywork onto an infinite canvas. Describe what you want. Skywork Design lays out a full set of pages — homepage, flows, dashboard — on one canvas. Iterate page by page; lock your brand assets so every page stays consistent. Hand it back to the Skywork agent to publish as a live website all in one workflow.
0:49

Introducing Skywork Design. We moved the design capability of Skywork onto an infinite canvas. Describe what you want. Skywork Design lays out a full set of pages — homepage, flows, dashboard — on one canvas. Iterate page by page; lock your brand assets so every page stays consistent. Hand it back to the Skywork agent to publish as a live website all in one workflow.

Skywork

968,062 views • 2 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

Stumbled on Vercel’s creative design team page and instantly fell in love with the design, animations, and micro-interactions. So I decided to take a shot at it, recreating the experience for a fictional company called Varxell, with my own spin on everything except the design itself + I didn’t touch any of their assets. Everything was hand-coded from scratch, and every single asset was recreated in Figma. It was a fun challenge. Built with: • React • TypeScript • Vite • Framer Motion Live site: • • Repo: • Every page functionality and animation was implemented as a reusable hook, with internal JSDoc to make it easy to reuse in your own projects or remix however you like. Got any questions? Feel free to shoot me a DM
1:50

Stumbled on Vercel’s creative design team page and instantly fell in love with the design, animations, and micro-interactions. So I decided to take a shot at it, recreating the experience for a fictional company called Varxell, with my own spin on everything except the design itself + I didn’t touch any of their assets. Everything was hand-coded from scratch, and every single asset was recreated in Figma. It was a fun challenge. Built with: • React • TypeScript • Vite • Framer Motion Live site: • • Repo: • Every page functionality and animation was implemented as a reusable hook, with internal JSDoc to make it easy to reuse in your own projects or remix however you like. Got any questions? Feel free to shoot me a DM

David Herbert👨🏽‍💻🚀

23,755 views • 1 year ago

This portable microscope was designed by Opus 5 I gave it a few simple requirements, and it generated the whole design in code Lots of details and interactions It looks sci-fi, but it can be easily 3D printed Some of the code can even run on a Raspberry Pi Live link ↓
1:13

This portable microscope was designed by Opus 5 I gave it a few simple requirements, and it generated the whole design in code Lots of details and interactions It looks sci-fi, but it can be easily 3D printed Some of the code can even run on a Raspberry Pi Live link ↓

Dilum Sanjaya

34,959 views • 1 month ago

UI/UX Designers, you need to see this. I just discovered a website called Design Spells, it collects beautifully crafted UI animations and micro-interactions in one place. Clean, subtle, and incredibly satisfying to watch. I could honestly watch these all day. Perfect for inspiration when refining motion, transitions, and interaction details. Bookmark it; you will love it 💜
0:21

UI/UX Designers, you need to see this. I just discovered a website called Design Spells, it collects beautifully crafted UI animations and micro-interactions in one place. Clean, subtle, and incredibly satisfying to watch. I could honestly watch these all day. Perfect for inspiration when refining motion, transitions, and interaction details. Bookmark it; you will love it 💜

Abraham John 🦄🦓

49,833 views • 7 months ago

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.
12:14

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Mnimiy

113,663 views • 3 months ago

Design a dashboard - anything you want; the sky is the limit - and ask Claude Code to create it for you in d3.js. Then test and iterate. You'll never see the current UI-driven visualization tools the same, again. At least, I can't.
0:50

Design a dashboard - anything you want; the sky is the limit - and ask Claude Code to create it for you in d3.js. Then test and iterate. You'll never see the current UI-driven visualization tools the same, again. At least, I can't.

Kurt Buhler

126,336 views • 5 months ago

This is insane. An entire CRM dashboard made in MagicPath by @MustofaAmeen with multiple views, functionalities, and dark mode using the Material Design system. Used to take teams months to spin up projects like this.
0:43

This is insane. An entire CRM dashboard made in MagicPath by @MustofaAmeen with multiple views, functionalities, and dark mode using the Material Design system. Used to take teams months to spin up projects like this.

Pietro Schirano

15,850 views • 1 year ago

HE TURNED A $9,000 UI HANDOFF INTO A 3D SAAS INTERFACE IN 30 MINUTES this guy didn’t build another flat dashboard, he built a living 3d workspace with Claude Code reading the structure, logic and components instead of guessing from screenshots Moonchild makes the design system first: tokens, spacing, cards, charts, navigation, typography, then Claude turns it into a working React app through MCP 2 tools, 1 design system, 8+ screens and a second Claude checking drift while most founders still pay agencies to align buttons by hand save the full breakdown before your next SaaS looks like 6 templates fighting for custody of the same logo ↓
0:30

HE TURNED A $9,000 UI HANDOFF INTO A 3D SAAS INTERFACE IN 30 MINUTES this guy didn’t build another flat dashboard, he built a living 3d workspace with Claude Code reading the structure, logic and components instead of guessing from screenshots Moonchild makes the design system first: tokens, spacing, cards, charts, navigation, typography, then Claude turns it into a working React app through MCP 2 tools, 1 design system, 8+ screens and a second Claude checking drift while most founders still pay agencies to align buttons by hand save the full breakdown before your next SaaS looks like 6 templates fighting for custody of the same logo ↓

Gipp 🦅

11,041 views • 3 months ago

Sorry babes, you were all wrong. I put Gemini 3, Claude Opus-4.5, and GPT-5.1 Codex head to head in a one shot design battle, and one was the clear winner. Find out which on this week's mini ep of How I AI: Big 💜 to this week's sponsor, Lovable
1:00

Sorry babes, you were all wrong. I put Gemini 3, Claude Opus-4.5, and GPT-5.1 Codex head to head in a one shot design battle, and one was the clear winner. Find out which on this week's mini ep of How I AI: Big 💜 to this week's sponsor, Lovable

claire vo 🖤

70,817 views • 9 months ago

DOWNLOAD MASTERCARD DESIGN MD AND BUILD CLEAR WITH CLAUDE CODE people onboard Claude with text designers actually getting results onboard it with a file most never think to write step everyone skips: A design md - plain text rulebook for colors, fonts, spacing, component patterns, tone You don’t write it from scratch - pull a public one from an open design system repo, or literally download a real brand’s guidelines and tell Claude “design like this” Upload it once to a Claude Design system, pick the strongest model, set effort to Max, wait 10-20 minutes for real mockups to review Every project after that pulls your actual brand automatically - zero re explaining your look every single prompt mistake that burns the most hours: designing and coding in the same conversation Claude Design is for visual exploration Claude Code is for production “Mixing them is where beginners lose entire afternoons re litigating decisions that were already made” real workflow, start to finish: design system once - structured brief - first draft - refine with chat, inline comments, sliders - export handoff bundle - Claude Code converts it to a real Next.js app - push, deploy, done 10 dashboards in 10 minutes isn’t the headline Never re explaining your brand again is full below
1:03

DOWNLOAD MASTERCARD DESIGN MD AND BUILD CLEAR WITH CLAUDE CODE people onboard Claude with text designers actually getting results onboard it with a file most never think to write step everyone skips: A design md - plain text rulebook for colors, fonts, spacing, component patterns, tone You don’t write it from scratch - pull a public one from an open design system repo, or literally download a real brand’s guidelines and tell Claude “design like this” Upload it once to a Claude Design system, pick the strongest model, set effort to Max, wait 10-20 minutes for real mockups to review Every project after that pulls your actual brand automatically - zero re explaining your look every single prompt mistake that burns the most hours: designing and coding in the same conversation Claude Design is for visual exploration Claude Code is for production “Mixing them is where beginners lose entire afternoons re litigating decisions that were already made” real workflow, start to finish: design system once - structured brief - first draft - refine with chat, inline comments, sliders - export handoff bundle - Claude Code converts it to a real Next.js app - push, deploy, done 10 dashboards in 10 minutes isn’t the headline Never re explaining your brand again is full below

YARD

31,614 views • 14 days ago