正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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:

Alex Danilowicz

7,549 subscribers

132,306 次观看 • 6 天前 •via X (Twitter)

教育科学技术

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

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 次观看 • 3 个月前

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 次观看 • 27 天前

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

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 →

🔅 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.

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

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 👇

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 👇

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

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

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)

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.

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

Cursor

633,356 次观看 • 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. 🔥

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

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

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:

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 次观看 • 6 个月前

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…

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

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! 🔥

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

"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 年前