Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

enjojoyy's profile picture

albina

13,492 subscribers

26,087 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 1 ay önce

Claude Code can now COPY the UI of your favorite websites. Introducing the AIDesigner MCP v2 update! point Claude at any website to extract every media asset, branding, and design system to: > create a perfect CLONE of any website > create a new design INSPIRED by any website > ENHANCE an existing website, giving it a complete UI makeover Compatible with Claude Code, Codex, Cursor, Copilot, and Windsurf
0:55

Claude Code can now COPY the UI of your favorite websites. Introducing the AIDesigner MCP v2 update! point Claude at any website to extract every media asset, branding, and design system to: > create a perfect CLONE of any website > create a new design INSPIRED by any website > ENHANCE an existing website, giving it a complete UI makeover Compatible with Claude Code, Codex, Cursor, Copilot, and Windsurf

FHILY👑

108,410 görüntüleme • 1 ay önce

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 görüntüleme • 3 ay önce

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,071 görüntüleme • 2 ay önce

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch
51:01

how to use Google's NEW open source Design.md + AI Skills to make your startup look like a $100 million company in 1 hour: 1. Design.md is an open source file from Google that captures the soul of a design. Typography, colors, spacing, all in one markdown file. You attach it to your prompt and your agent builds beautiful things every time. 2. Think of it this way. The HTML is the finished dish. The design.md is the recipe. The skills are the ingredients. Put them together and everything you build looks consistent and professional. 3. Don't create a design system from scratch. Find a brand you love. Linear, Stripe, Vercel, whatever resonates. Study it. Use ChatGPT or Claude to help you extract the design language into your own design.md file. 4. Build skills on top of your design.md. A landing page skill. A mobile app skill. A motion design skill. A slide deck skill. Each one references the same design.md so everything looks like it came from the same designer. 5. The biggest mistake people make: they nail one screen and then everything else looks generic. Design.md solves this. One file keeps every page, every format, every medium consistent. 6. Use it across everything. Your landing page. Your app. Your pitch deck. Your promo videos. Same DNA. Same taste. Same system. That's what separates a startup that looks real from one that looks vibe-coded. 7. Build a second brain for design inspiration. When you see something beautiful in the real world or online, capture it. Save it. When you're building something new, reference it. Taste is developed, not downloaded. 8. It's obvious but the difference between a product people trust and a product people bounce from is how it looks and feels. Design.md gives you that edge. you can watch below shoutout to Meng To for coming on The Startup Ideas Podcast (SIP) 🧃 and walking through his full workflow. if you want to use AI to actually build gorgeous designs, you'll want to use see this. watch

GREG ISENBERG

497,601 görüntüleme • 1 ay önce

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

105,187 görüntüleme • 7 gün önce

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

103,685 görüntüleme • 1 ay önce

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.
0:54

Today we’re launching Design Canvas for AI agents. AI can build a feature, but every "design tweak" turns into another prompt. We built a drag & drop editor for Claude Code, Cursor, Codex to explore and iterate on your UI, so you get the best design by default. No endless prompting. Ship better designs in code with Subframe.

Irvin Zhan

299,475 görüntüleme • 4 ay önce

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,080 görüntüleme • 2 ay önce

Today, we’re open-sourcing the draft specification for DESIGN.md, so it can be used across any tool or platform. We’re also adding new capabilities. DESIGN.md lets you easily export and import your design rules from project to project. Instead of guessing intent, agents know exactly what a color is for and can even validate their choices against WCAG accessibility rules. Watch David East break down this shared visual language in action👇. New capabilities and links in 🧵
10:15

Today, we’re open-sourcing the draft specification for DESIGN.md, so it can be used across any tool or platform. We’re also adding new capabilities. DESIGN.md lets you easily export and import your design rules from project to project. Instead of guessing intent, agents know exactly what a color is for and can even validate their choices against WCAG accessibility rules. Watch David East break down this shared visual language in action👇. New capabilities and links in 🧵

Stitch by Google

6,834,099 görüntüleme • 2 ay önce

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too
4:39

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,446 görüntüleme • 3 ay önce

This AI agent is the future of web design... Gamma AI clones ANY website with a single URL paste...and I tested it against Webflow, Wix, & WordPress. It's faster, cheaper, and requires ZERO coding. Here is how you can clone any website in under 30 seconds:
0:20

This AI agent is the future of web design... Gamma AI clones ANY website with a single URL paste...and I tested it against Webflow, Wix, & WordPress. It's faster, cheaper, and requires ZERO coding. Here is how you can clone any website in under 30 seconds:

Hamza Khalid

18,219 görüntüleme • 7 ay önce

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 görüntüleme • 26 gün önce

You can now give AI agents the ability to interact with ANY website. This new MCP server lets Claude, Cursor, or any AI agent navigate, click, fill forms, and extract data from sites without APIs. Just connect it and give it a URL + goal. Here’s how to set it up:
0:32

You can now give AI agents the ability to interact with ANY website. This new MCP server lets Claude, Cursor, or any AI agent navigate, click, fill forms, and extract data from sites without APIs. Just connect it and give it a URL + goal. Here’s how to set it up:

Alvaro Cintas

77,654 görüntüleme • 6 ay önce

Introducing Web to Design. Turn any website into an editable UI. Just paste a URL. Create new variants, different pages, or build components inspired by the original design. We’ve been using this internally a ton, it’s the fastest way to go from a raw idea to a prototype.
0:52

Introducing Web to Design. Turn any website into an editable UI. Just paste a URL. Create new variants, different pages, or build components inspired by the original design. We’ve been using this internally a ton, it’s the fastest way to go from a raw idea to a prototype.

Pietro Schirano

214,685 görüntüleme • 3 ay önce

UI/UX Designers, I just found an AI tool that’s a game-changer for prototyping and design speed. Readdy (Readdy) helps you design, prototype, and refine interfaces faster than ever. Unlike other AI coding tools like v0 or Lovable, Readdy is built for designers to deliver high-quality UIs and understand feedback like a pro. Website →
0:47

UI/UX Designers, I just found an AI tool that’s a game-changer for prototyping and design speed. Readdy (Readdy) helps you design, prototype, and refine interfaces faster than ever. Unlike other AI coding tools like v0 or Lovable, Readdy is built for designers to deliver high-quality UIs and understand feedback like a pro. Website →

Abraham John 🦄🦓

33,984 görüntüleme • 1 yıl önce

Day 34 of vibe-coding as a designer Stripe's new redesign is going viral, and designers are losing it. 💀 So I ran it on a design analyzer tool I built - it breaks down any website UI 👾... conversion rate, ux, copy. The result is stunning. ⚡️ People ask, "what makes this design work?" Finally, we have an answer. If you want to try it, drop your website!
0:22

Day 34 of vibe-coding as a designer Stripe's new redesign is going viral, and designers are losing it. 💀 So I ran it on a design analyzer tool I built - it breaks down any website UI 👾... conversion rate, ux, copy. The result is stunning. ⚡️ People ask, "what makes this design work?" Finally, we have an answer. If you want to try it, drop your website!

Felix Lee

36,519 görüntüleme • 4 ay önce

Introducing frame.md, a spec built for videos & motion design.md kept your brand consistent across screens but when applied to videos, agents translated it back into webpages and decks frame.md teaches your agents how to make branded video turn your design.md into frame.md ↓
1:01

Introducing frame.md, a spec built for videos & motion design.md kept your brand consistent across screens but when applied to videos, agents translated it back into webpages and decks frame.md teaches your agents how to make branded video turn your design.md into frame.md ↓

HeyGen

1,105,944 görüntüleme • 19 gün önce

CLAUDE CODE CAN NOW COPY ANY UI ON THE INTERNET. It scans real websites and rebuilds their design system instantly, turning any page into your own starting point.
0:55

CLAUDE CODE CAN NOW COPY ANY UI ON THE INTERNET. It scans real websites and rebuilds their design system instantly, turning any page into your own starting point.

0xMarioNawfal

1,023,849 görüntüleme • 2 ay önce

AI Agents can now connect to 100,000+ APIs instantly. Postman's AI Agent builder can turn any API into an MCP server in seconds without writing a single line of Code. You can use it in Claude, Cursor, Windsurf and other AI tools.
0:21

AI Agents can now connect to 100,000+ APIs instantly. Postman's AI Agent builder can turn any API into an MCP server in seconds without writing a single line of Code. You can use it in Claude, Cursor, Windsurf and other AI tools.

Shubham Saboo

79,784 görüntüleme • 1 yıl önce