Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Claude 3.7 Sonnet with Claude Code creates an entire "glass like" design system in one shot, with ALL the components. How insane is this?

Pietro Schirano

108,887 subscribers

206,545 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

Pietro Schirano1 year ago

Notice how it even uses variables correctly and didn’t just hardcode things like colors, etc.

AndaSeat1 year ago

⌨️ 2AM debugging session: Your code won't compile, Stack Overflow is your best friend, and your Kaiser 4 is the only one who understands... Every developer's late-night reality: 💻 "One more bug fix" turned into sunrise ☕ Coffee cup collection growing 🐛 That bug that just won't die Kaiser 4 speaks fluent Python: 🌟 4D lumbar support for those debugging postures ✨ Perfect height for multiple monitors 💫 Recline mode for code compilation breaks Because good code comes from comfortable devs! ⚡️ Debug in comfort: #AndaSeat #DevLife #CodingLife #ProgrammerSetup #gaming #gamingchair

Flo1 year ago

Way ahead 🚀

Amjad Masad1 year ago

Run it in replit?

Pietro Schirano1 year ago

I will :)

rob_decodes1 year ago

I actually need to create a new components library and have been stressing about it. Stress be gone!

eric provencher1 year ago

That’s just nuts

Dream Machine1 year ago

Taste moat is gone yes?

🐧 lalo adrian morales 𝕏1 year ago

jeeeeeeezz!!!! that's insane! did it create a schema and backend too?

David 🪽1 year ago

Ive noticed its design skills are 🤌

Jeff Bizous1 year ago

It is amazing, it solved all the issues I had with some projects... true game changer

Related Videos

OMG Claude Sonnet 3.7 is insane. I got this stunning 3D city with one shot. Look at the shadows and the way the day transitions. This is just awesome.

OMG Claude Sonnet 3.7 is insane. I got this stunning 3D city with one shot. Look at the shadows and the way the day transitions. This is just awesome.

Ozgur Ozer

534,807 views • 1 year ago

Vibe-coded this game this morning with 0 code edits. Just hit ‘accept all’ in Cursor with Claude Sonnet 3.7 and Three.js 😎

Vibe-coded this game this morning with 0 code edits. Just hit ‘accept all’ in Cursor with Claude Sonnet 3.7 and Three.js 😎

Grégory D'Angelo

1,332,104 views • 1 year ago

Claude 3.7 Sonnet is the best model in the world for code. It’s like having a world-class dev with exceptional taste. “build a next.js SaaS marketing template” And boom - 26 files of beautiful code in one shot. Absolutely unreal.

Claude 3.7 Sonnet is the best model in the world for code. It’s like having a world-class dev with exceptional taste. “build a next.js SaaS marketing template” And boom - 26 files of beautiful code in one shot. Absolutely unreal.

Mckay Wrigley

547,369 views • 1 year ago

Claude 3.7 Sonnet created this 3D “Anthropic Researcher Simulator” in one shot 🤯 Prompt below

Claude 3.7 Sonnet created this 3D “Anthropic Researcher Simulator” in one shot 🤯 Prompt below

zack

59,956 views • 1 year ago

Claude Code with Sonnet 4.5 is actually incredible I gave it a prompt for a super complex app, and it one shot the entire thing In this video I walk you through how to use Claude Code to build a prompt library app you can start using immediately (no coding experience required):

Claude Code with Sonnet 4.5 is actually incredible I gave it a prompt for a super complex app, and it one shot the entire thing In this video I walk you through how to use Claude Code to build a prompt library app you can start using immediately (no coding experience required):

Alex Finn

40,955 views • 10 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.

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 • 2 months ago

We are living in the most insane timeline. I just asked Claude Code (with Claude Sonnet 4.5) to develop an MCP Server (end-to-end) that allows me to programatically create n8n workflows from within Claude Code itself. Took about 10 mins!

We are living in the most insane timeline. I just asked Claude Code (with Claude Sonnet 4.5) to develop an MCP Server (end-to-end) that allows me to programatically create n8n workflows from within Claude Code itself. Took about 10 mins!

elvis

221,878 views • 10 months ago

Anthropic is leading the Industry with models - like Sonnet and Opus - and developer tools - like Claude Code. Here are 5 tips to get more out of Claude Code!

Anthropic is leading the Industry with models - like Sonnet and Opus - and developer tools - like Claude Code. Here are 5 tips to get more out of Claude Code!

Jon Meyers

14,226 views • 11 months ago

Opus Claude Is Insane. This is a tutorial a 12 min on how Build 3D Websites in Minutes with Al (0 Design + 0 Coding) with Claude Opus 4.8

Opus Claude Is Insane. This is a tutorial a 12 min on how Build 3D Websites in Minutes with Al (0 Design + 0 Coding) with Claude Opus 4.8

me

578,177 views • 2 months ago

$Grok Code just literally cloned the entire Netflix UI with a one shot prompt From the iconic Hero section to the interactive Carousel, all with a single prompt and a few web-sourced image links It’s not just fast, it's the most cost-effective SOTA model out there ➝ Input: Grok $0.20 vs Claude $3 (15x cheaper) ➝ Output: Grok $1.50 vs Claude $15 (10x cheaper) Here’s how you can do it in VS Code with Kilo Code Grok Code matches Claude Sonnet 4 in performance, but is 10-15x more cost-effective All this for less than $1 SOTA power, fractional cost$

Grok Code just literally cloned the entire Netflix UI with a one shot prompt From the iconic Hero section to the interactive Carousel, all with a single prompt and a few web-sourced image links It’s not just fast, it's the most cost-effective SOTA model out there ➝ Input: Grok $0.20 vs Claude $3 (15x cheaper) ➝ Output: Grok $1.50 vs Claude $15 (10x cheaper) Here’s how you can do it in VS Code with Kilo Code Grok Code matches Claude Sonnet 4 in performance, but is 10-15x more cost-effective All this for less than $1 SOTA power, fractional cost

X Freeze

6,973,348 views • 11 months ago

this is insane this guy dropped claude design, but open source with a real interactive editor works with Kimi.ai and DeepSeek the post already went viral with 276k views you don't need to pay that $200 for sure claude code -> omo claude design -> slides-grab

this is insane this guy dropped claude design, but open source with a real interactive editor works with Kimi.ai and DeepSeek the post already went viral with 276k views you don't need to pay that $200 for sure claude code -> omo claude design -> slides-grab

Sisyphus Labs

22,758 views • 2 months ago

Created a personal AI dashboard with Claude Fable 5! This entire dashboard is a one shot using my design style on Claude Design. It has a bunch of active widgets that are interactive.

Created a personal AI dashboard with Claude Fable 5! This entire dashboard is a one shot using my design style on Claude Design. It has a bunch of active widgets that are interactive.

FHILY👑

28,094 views • 2 months ago

Claude Sonnet 5 is crazy efficient for web deisgn. ❤️‍🔥Just recorded a 18-min tutorial on how to build award-winning websites with Claude Code + Sonnet 5!

Claude Sonnet 5 is crazy efficient for web deisgn. ❤️‍🔥Just recorded a 18-min tutorial on how to build award-winning websites with Claude Code + Sonnet 5!

Viktor Oddy

1,196,823 views • 1 month ago

Claude Code made this entire video. The voice, footage, script is all AI. Everything was made with a content system I built in Claude Code. In this video, I'll be taking you behind the curtain. This machine will be responsible for my entire content workflow this week. Full video is in the comments below.

Claude Code made this entire video. The voice, footage, script is all AI. Everything was made with a content system I built in Claude Code. In this video, I'll be taking you behind the curtain. This machine will be responsible for my entire content workflow this week. Full video is in the comments below.

Jacob Klug

18,471 views • 1 month ago

Tip: Ask Claude Code Community to use adapters, feature flags, and interfaces for implementations. 1. Model releases improve rapidly: 2024 June: Sonnet 3.5 2024 Oct: Sonnet 3.6 2025 Feb: Sonnet 3.7 2025 May: Sonnet/Opus 4 2025 Sept: Sonnet 4.5 Design key components around interfaces to do seamless rewrites with stronger released models. Use adapters and feature flags to gradually roll out usage. 2. There's tremendous value in simply updating api to use `claude-sonnet-4-5`. But remembering timeless software abstractions allows for the entire application to improve with the model. 3. Use Claude 4.5 Sonnet beyond code—it's a powerhouse for daily tasks. Try the Claude Chrome extension for forms, calendars, emails, or automating expense reports. These capabilities build on Sonnet 4.5's enhanced agentic capabilities making it easier to integrate to daily life. 4. We're living in a truly magical era, together. Enjoy the moment.

Tip: Ask Claude Code Community to use adapters, feature flags, and interfaces for implementations. 1. Model releases improve rapidly: 2024 June: Sonnet 3.5 2024 Oct: Sonnet 3.6 2025 Feb: Sonnet 3.7 2025 May: Sonnet/Opus 4 2025 Sept: Sonnet 4.5 Design key components around interfaces to do seamless rewrites with stronger released models. Use adapters and feature flags to gradually roll out usage. 2. There's tremendous value in simply updating api to use `claude-sonnet-4-5`. But remembering timeless software abstractions allows for the entire application to improve with the model. 3. Use Claude 4.5 Sonnet beyond code—it's a powerhouse for daily tasks. Try the Claude Chrome extension for forms, calendars, emails, or automating expense reports. These capabilities build on Sonnet 4.5's enhanced agentic capabilities making it easier to integrate to daily life. 4. We're living in a truly magical era, together. Enjoy the moment.

Claude Code Community

14,042 views • 10 months ago

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

Tommy Geoco

22,905 views • 10 months ago

Perplexity’s Deep Research using the API in combination with Claude Sonnet 3.7 to help write market research content in minutes.

Perplexity’s Deep Research using the API in combination with Claude Sonnet 3.7 to help write market research content in minutes.

Aravind Srinivas

72,398 views • 1 year ago

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription

Alvaro Cintas

388,512 views • 6 months ago