Загрузка видео...

Не удалось загрузить видео

На главную

Introducing a Design System Agent, powered by Fable 5. Sync your components, typography, spacing, colors, rules. Share with your team, design anything. Watch me change everything within Duolingo's design system on Magic Patterns:

alexdanilowicz's profile picture

Alex Danilowicz

7,534 subscribers

131,840 просмотров • 4 дней назад •via X (Twitter)

ОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Design.md isn't your design system. With design systems in Magic Patterns, AI uses your: - Components (syncs to codebase via MCP) - Typography (can use custom fonts) - Color tokens (import from Figma / tokens.json) - Icons (any library) - Spacing tokens - Rules
0:21

Design.md isn't your design system. With design systems in Magic Patterns, AI uses your: - Components (syncs to codebase via MCP) - Typography (can use custom fonts) - Color tokens (import from Figma / tokens.json) - Icons (any library) - Spacing tokens - Rules

Alex Danilowicz

54,206 просмотров • 2 месяцев назад

Every frontend developer just stopped opening DevTools. Your AI coding agent can now reverse-engineer the entire design system of any website directly from the terminal. Just type: /design And it instantly extracts: • Brand colors • Fonts & typography • Spacing system • Buttons & UI components • Layout patterns • Design tokens Then saves everything into a structured DESIGN.md file your AI agent can understand and reuse. Powered by Hyperbrowser + Claude Code MCP. The crazy part? You can now study, replicate, and rebuild world-class UI systems in minutes instead of wasting hours manually inspecting websites. This changes how vibe coding works forever. Repo👇
0:26

Every frontend developer just stopped opening DevTools. Your AI coding agent can now reverse-engineer the entire design system of any website directly from the terminal. Just type: /design And it instantly extracts: • Brand colors • Fonts & typography • Spacing system • Buttons & UI components • Layout patterns • Design tokens Then saves everything into a structured DESIGN.md file your AI agent can understand and reuse. Powered by Hyperbrowser + Claude Code MCP. The crazy part? You can now study, replicate, and rebuild world-class UI systems in minutes instead of wasting hours manually inspecting websites. This changes how vibe coding works forever. Repo👇

divyansh tiwari

78,201 просмотров • 24 дней назад

Introducing Design System on Magicpath. What if AI generation could follow a specific set of design rules? Now it can. Truly magic. ✨
0:36

Introducing Design System on Magicpath. What if AI generation could follow a specific set of design rules? Now it can. Truly magic. ✨

Pietro Schirano

31,909 просмотров • 11 месяцев назад

🔅 Introducing Genius, your AI design companion in Figma It understands what you’re designing and makes suggestions that autocomplete your design using components from your design system. Genius is coming soon. Join the waitlist →
0:40

🔅 Introducing Genius, your AI design companion in Figma It understands what you’re designing and makes suggestions that autocomplete your design using components from your design system. Genius is coming soon. Join the waitlist →

Diagram

1,713,622 просмотров • 3 лет назад

Announcing Custom Components on Magic Patterns Create a component, add it to your library, reuse it on anything you create. Using your design system has already been live in beta for 1000s of customers and the results are absolutely INSANE.
0:41

Announcing Custom Components on Magic Patterns Create a component, add it to your library, reuse it on anything you create. Using your design system has already been live in beta for 1000s of customers and the results are absolutely INSANE.

Alex Danilowicz

33,189 просмотров • 11 месяцев назад

Turn any website into an AI-readable design system. Here's how: Google recently introduced the DESIGN.md specification: a file that helps AI agents understand a product’s design system. So we built a free tool for designers. Paste any website URL and Masumi’s DESIGN.md Generator extracts the brand’s colors, typography, components, spacing, and visual rules into an editable DESIGN.md file. Your designer can review it, tweak it, and hand it to Claude Code, Cursor, Codex, or any AI coding agent so the generated UI stays on-brand. Links below
3:30

Turn any website into an AI-readable design system. Here's how: Google recently introduced the DESIGN.md specification: a file that helps AI agents understand a product’s design system. So we built a free tool for designers. Paste any website URL and Masumi’s DESIGN.md Generator extracts the brand’s colors, typography, components, spacing, and visual rules into an editable DESIGN.md file. Your designer can review it, tweak it, and hand it to Claude Code, Cursor, Codex, or any AI coding agent so the generated UI stays on-brand. Links below

albina

22,526 просмотров • 1 месяц назад

This is how a top designer uses Cursor + Storybook to build design system components Designers working on design systems should copy this AI workflow to stop manually creating design component specs 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Cursor + Storybook to build their design system 👇
2:03

This is how a top designer uses Cursor + Storybook to build design system components Designers working on design systems should copy this AI workflow to stop manually creating design component specs 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Cursor + Storybook to build their design system 👇

Jayneil Dalal

65,304 просмотров • 3 месяцев назад

This is how a top designer uses Cursor to update design system components in Storybook Designers working on design systems should copy this AI workflow to reduce back and forth meetings with engineers 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Cursor + Storybook to build their design system 👇
2:04

This is how a top designer uses Cursor to update design system components in Storybook Designers working on design systems should copy this AI workflow to reduce back and forth meetings with engineers 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Cursor + Storybook to build their design system 👇

Jayneil Dalal

11,772 просмотров • 3 месяцев назад

Introducing the first step towards design systems in v0: •Create unique color schemes for your v0 generations •Adjust the colors for a design system right from Design Mode •Preview in light & dark mode Learn more directly from v0 team member and creator of tweakcn Sahaj
1:27

Introducing the first step towards design systems in v0: •Create unique color schemes for your v0 generations •Adjust the colors for a design system right from Design Mode •Preview in light & dark mode Learn more directly from v0 team member and creator of tweakcn Sahaj

v0

69,868 просмотров • 9 месяцев назад

Introducing design system automation
0:49

Introducing design system automation

Anima

1,865,601 просмотров • 3 лет назад

design tool experiments: ✍️ make design components graphically 🧑‍💻 generate code, using those components as a little design system (the idea is that you'll be able to build complicated interfaces by mocking them up in several artboards and 'attaching' them to your prompt)
0:25

design tool experiments: ✍️ make design components graphically 🧑‍💻 generate code, using those components as a little design system (the idea is that you'll be able to build complicated interfaces by mocking them up in several artboards and 'attaching' them to your prompt)

nate parrott

10,550 просмотров • 1 год назад

Cursor can now create new components and frontends in Figma using your team's design system.
0:25

Cursor can now create new components and frontends in Figma using your team's design system.

Cursor

633,197 просмотров • 2 месяцев назад

Introducing: VibeFlow UI (VibeFlow (YC S25)) design systems. Generate UIs that actually look like YOUR brand. We got tired of AI design tools outputting anonymous slop. So we gave the model your real design system. > Paste any URL → get your full design system in 30s > Exportable as a skill for any agent > Dashboards, slide decks, landing pages, all on-brand > Set it once → every future UI uses your system I challenge anyone to paste a URL and get a bad result. Haven't seen one yet. 🔥
0:58

Introducing: VibeFlow UI (VibeFlow (YC S25)) design systems. Generate UIs that actually look like YOUR brand. We got tired of AI design tools outputting anonymous slop. So we gave the model your real design system. > Paste any URL → get your full design system in 30s > Exportable as a skill for any agent > Dashboards, slide decks, landing pages, all on-brand > Set it once → every future UI uses your system I challenge anyone to paste a URL and get a bad result. Haven't seen one yet. 🔥

Alessia

12,017 просмотров • 1 месяц назад

Vibe-coded prototypes get thrown away because they don’t use your design system code. Bolt’s Design System Agents fix this: - Upload your npm package, Storybook, repo, etc - Bolt builds using your design system - Engineering wires up the backend and ships
3:10

Vibe-coded prototypes get thrown away because they don’t use your design system code. Bolt’s Design System Agents fix this: - Upload your npm package, Storybook, repo, etc - Bolt builds using your design system - Engineering wires up the backend and ships

bolt.new

13,978 просмотров • 2 месяцев назад

The fastest way to design & build a website with the help of AI ✨ → Sitemaps in seconds → Wireframes with copy in minutes → Paste in to Figma & Webflow Powered by a design system of 1000+ components to generate production-quality websites
0:50

The fastest way to design & build a website with the help of AI ✨ → Sitemaps in seconds → Wireframes with copy in minutes → Paste in to Figma & Webflow Powered by a design system of 1000+ components to generate production-quality websites

Relume

776,758 просмотров • 2 лет назад

Introducing Design OS—the missing design process between your idea and codebase. Step 1: Set your product vision Step 2: Design your screens Step 3: Export production-ready components Not mockups. Real components. Ready to build. Free & open source:
0:31

Introducing Design OS—the missing design process between your idea and codebase. Step 1: Set your product vision Step 2: Design your screens Step 3: Export production-ready components Not mockups. Real components. Ready to build. Free & open source:

Brian Casel

50,104 просмотров • 5 месяцев назад

Working on color generator feature for design system Figma plugin, that creates all color shades based on a base color you pick or given hex. Different algorithms to generate more harmonious or complementary colors for your next design system project. Soon…
0:32

Working on color generator feature for design system Figma plugin, that creates all color shades based on a base color you pick or given hex. Different algorithms to generate more harmonious or complementary colors for your next design system project. Soon…

vijay verma

10,196 просмотров • 11 месяцев назад

Introducing SuperDesign.Dev Design Prompt Library LLM often output AI slop design not because of capability, but lack of context & guidance However design related prompts are not straightforward and most people don't know how to prompt it That's why we built one of largest community driven design prompt library, covering styles, animations, UI components, etc. You can build & share design prompts with your team privately or contribute publicly It works with any coding agent Try it today at
1:34

Introducing SuperDesign.Dev Design Prompt Library LLM often output AI slop design not because of capability, but lack of context & guidance However design related prompts are not straightforward and most people don't know how to prompt it That's why we built one of largest community driven design prompt library, covering styles, animations, UI components, etc. You can build & share design prompts with your team privately or contribute publicly It works with any coding agent Try it today at

Jason Zhou

218,699 просмотров • 5 месяцев назад

Build your Figma design system 10x faster with these plugins! 🔥
0:23

Build your Figma design system 10x faster with these plugins! 🔥

Jan Mraz

18,308 просмотров • 10 месяцев назад

"It's hard to change the rules of this system. And that's by design." - @alanorwick #Crypto #Decentralization #Blockchain #QuaiNetwork #QuaiDevs
1:00

"It's hard to change the rules of this system. And that's by design." - @alanorwick #Crypto #Decentralization #Blockchain #QuaiNetwork #QuaiDevs

Quai Network ⚡️💵

60,990 просмотров • 3 лет назад