Claude Code Just Became a Design Tool
3.2万 次观看 · 2026-09-03
UI 设计
🎁 Get 20% discount on Mobbin Pro: https://mobbin.com/chyrkov
💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn
Follow me ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Get -20% on Mobbin Pro plan — http://mobbin.com/chyrkov
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
With the new Design Skill, Claude Code can create UI designs, graphic designs, and complete design systems — and you can actually manipulate those designs directly on a canvas.
In this video, I’m putting this new capability to the test with a real design workflow.
First, I’ll take an existing website and turn it into a complete design system.
Then, I’ll use that design system to create the UI for a hotel booking app.
And finally, I’ll use the same design system to create multiple Instagram carousel variations.
The interesting part isn't just that Claude can generate designs — it's that you can work with the designs, adjust typography, composition, spacing, and other parameters, and then reuse the system across completely different projects.
📝 Chapters:
00:00 — Intro
00:53 — Using Desing Skill in Claude Code Mode
01:35 — Building a Design System from a Website
04:05 — Introduction to Mobbin
05:34 — Designing the Hotel Booking App using the design system + Mobbin MCP.
07:30 — Editing Screens on Claude Code Canvas
09:36 — Creating Instagram Carousel Designs using the design system
11:56 — Updating content on Claude Code Canvas
13:03 — Reviewing Other Variations
14:07 — Wrap-Up
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#claude #ai #cursor #mobbin #webdesign
💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn
Follow me ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Get -20% on Mobbin Pro plan — http://mobbin.com/chyrkov
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
With the new Design Skill, Claude Code can create UI designs, graphic designs, and complete design systems — and you can actually manipulate those designs directly on a canvas.
In this video, I’m putting this new capability to the test with a real design workflow.
First, I’ll take an existing website and turn it into a complete design system.
Then, I’ll use that design system to create the UI for a hotel booking app.
And finally, I’ll use the same design system to create multiple Instagram carousel variations.
The interesting part isn't just that Claude can generate designs — it's that you can work with the designs, adjust typography, composition, spacing, and other parameters, and then reuse the system across completely different projects.
📝 Chapters:
00:00 — Intro
00:53 — Using Desing Skill in Claude Code Mode
01:35 — Building a Design System from a Website
04:05 — Introduction to Mobbin
05:34 — Designing the Hotel Booking App using the design system + Mobbin MCP.
07:30 — Editing Screens on Claude Code Canvas
09:36 — Creating Instagram Carousel Designs using the design system
11:56 — Updating content on Claude Code Canvas
13:03 — Reviewing Other Variations
14:07 — Wrap-Up
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#claude #ai #cursor #mobbin #webdesign