正在加载视频...

视频加载失败

返回首页

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

alexdanilowicz's profile picture

Alex Danilowicz

7,586 subscribers

54,492 次观看 • 3 个月前 •via X (Twitter)

科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

v0 Design Systems 2.0 is here. Import your design system from GitHub, npm, Storybook, Figma, and more. Build with your real components, colors, fonts, and patterns.
3:01

v0 Design Systems 2.0 is here. Import your design system from GitHub, npm, Storybook, Figma, and more. Build with your real components, colors, fonts, and patterns.

v0

209,864 次观看 • 18 天前

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:
1:23

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

136,552 次观看 • 1 个月前

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

You can now generate Themes/Design Systems directly from your Figma import or any link. Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.
1:11

You can now generate Themes/Design Systems directly from your Figma import or any link. Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.

Pietro Schirano

41,940 次观看 • 5 个月前

Design System with AI Part 1: Talked about my agents, setting up the foundation: design tokens in Figma and exporting Local Variables to Claude with rules.
15:47

Design System with AI Part 1: Talked about my agents, setting up the foundation: design tokens in Figma and exporting Local Variables to Claude with rules.

Druids

20,004 次观看 • 2 个月前

Want your AI-generated UI to actually look good? → getdesign.md Production-grade DESIGN.md analysis for coding agents. Get inspiration from: • design patterns • tokens • UI rules • real depth Better UI. Better outputs.
0:48

Want your AI-generated UI to actually look good? → getdesign.md Production-grade DESIGN.md analysis for coding agents. Get inspiration from: • design patterns • tokens • UI rules • real depth Better UI. Better outputs.

Kailash

183,220 次观看 • 1 个月前

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

26,087 次观看 • 2 个月前

This is how a top designer uses Figma MCP + Cursor to build an AI design system Designers working on design systems should copy this AI workflow to free up precious engineering bandwidth 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Figma MCP + Cursor to build their design system 👇
2:57

This is how a top designer uses Figma MCP + Cursor to build an AI design system Designers working on design systems should copy this AI workflow to free up precious engineering bandwidth 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Figma MCP + Cursor to build their design system 👇

Jayneil Dalal

89,610 次观看 • 5 个月前

I made a tool that turns any URL into a clean DESIGN.md Extract layout, typography, colors, and component patterns from any site, then save them to your private library. It also includes 160+ downloadable design systems if you need a good starting point.
0:42

I made a tool that turns any URL into a clean DESIGN.md Extract layout, typography, colors, and component patterns from any site, then save them to your private library. It also includes 160+ downloadable design systems if you need a good starting point.

Meng To

104,111 次观看 • 2 个月前

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇
0:33

The DESIGN.md upgrade is officially live in Stitch! 🚀 Yesterday we open-sourced the spec, and today we are giving you more tools to use it: 📄 Start with DESIGN.md: Attach a DESIGN.md right at the start of a project. Don't have one? Our new wizard will help you extract one from your code base or the web. 🔄 DESIGN.md to Design System: Upload a DESIGN.md file to generate a Design System on the canvas. 🧩 Token Support: Design Systems now support design tokens from DESIGN.md! Add them to your file and Stitch will seamlessly incorporate them. 🗑️ Clean Up: (You asked, we listened) You can now easily delete a design system. We’re excited to build the open design standard together. 👇

Stitch by Google

194,515 次观看 • 2 个月前

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,595,405 次观看 • 9 个月前

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

634,118 次观看 • 3 个月前

🔅 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,800 次观看 • 3 年前

We improved our design system feature to include design.md imports alongside any website and Tailwind files. Best part: your design system isn't just available when creating natively in MagicPath, it can be used by any external agent simply via mentioning it. It's amazing.
0:52

We improved our design system feature to include design.md imports alongside any website and Tailwind files. Best part: your design system isn't just available when creating natively in MagicPath, it can be used by any external agent simply via mentioning it. It's amazing.

Pietro Schirano

106,130 次观看 • 28 天前

Your Product Deserves Better! KernUI gives you a leg up in market while letting you scale, ensuring you don’t feel boxed in my the system. ✅ Light & Dark Mode support ✅ 1600+ carefully designed icons ✅ Expansive color library with tokens ✅ Production-ready components ✅ Auto layout, variants & smart constraints ✅ Typography & spacing scales And So much More!!!
0:47

Your Product Deserves Better! KernUI gives you a leg up in market while letting you scale, ensuring you don’t feel boxed in my the system. ✅ Light & Dark Mode support ✅ 1600+ carefully designed icons ✅ Expansive color library with tokens ✅ Production-ready components ✅ Auto layout, variants & smart constraints ✅ Typography & spacing scales And So much More!!!

Shater Tsavsar ⚡︎

17,954 次观看 • 11 个月前

👀 We’re so close. 🗓️ Monday, July 1st, Supa Design Tokens drops on Figma Community in free beta! (pending Figma approval) Make, manage, and organize your design tokens in seconds. All inside Figma. Let’s go!
1:36

👀 We’re so close. 🗓️ Monday, July 1st, Supa Design Tokens drops on Figma Community in free beta! (pending Figma approval) Make, manage, and organize your design tokens in seconds. All inside Figma. Let’s go!

Angelo Libero

11,966 次观看 • 1 年前

Figma to AI back to Figma This is a great loop for design explorations and gain back full control of the results. You can ask Aura to create new components, icons, graphics and entire screens based on existing design systems. All fully layered, nested and based on your prompt.
0:45

Figma to AI back to Figma This is a great loop for design explorations and gain back full control of the results. You can ask Aura to create new components, icons, graphics and entire screens based on existing design systems. All fully layered, nested and based on your prompt.

Meng To

75,662 次观看 • 1 年前

Introducing Fusion - Vibe code at any scale ☑︎ Connects to any GitHub repo ☑︎ Uses your design system, APIs, MCP servers ☑︎ Figma-like visual editing ☑︎ Agentic pull requests Visually code with your full team, from a browser or your IDE Features & demos in thread:
1:17

Introducing Fusion - Vibe code at any scale ☑︎ Connects to any GitHub repo ☑︎ Uses your design system, APIs, MCP servers ☑︎ Figma-like visual editing ☑︎ Agentic pull requests Visually code with your full team, from a browser or your IDE Features & demos in thread:

Steve (Builder.io)

90,793 次观看 • 1 年前

✨ Big things are happening. I’m building a tool to generate, manage & sync design tokens — directly in Figma ✅ Start from popular design systems 🎨 Customize colors, typography, effects & more 🧠 Export clean code in multiple formats ⚡ Sync everything to your Figma file in <30s From weeks of work to seconds. This changes everything. Coming soon to everyone. Follow for updates 👀
1:39

✨ Big things are happening. I’m building a tool to generate, manage & sync design tokens — directly in Figma ✅ Start from popular design systems 🎨 Customize colors, typography, effects & more 🧠 Export clean code in multiple formats ⚡ Sync everything to your Figma file in <30s From weeks of work to seconds. This changes everything. Coming soon to everyone. Follow for updates 👀

Angelo Libero

21,121 次观看 • 1 年前