Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

AI tool that uses your design system to create new components (along with all of the code) 👇

ridd_design's profile picture

Ridd 🤿

75,535 subscribers

144,769 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Introducing support for Design Systems in Bolt Now Bolt uses your actual design system components, not some mimic Here’s how to stop building from scratch and start building on-brand: 👇
0:12

Introducing support for Design Systems in Bolt Now Bolt uses your actual design system components, not some mimic Here’s how to stop building from scratch and start building on-brand: 👇

bolt.new

66,945 görüntüleme • 1 yıl önce

We just added a Sora UI Kit to MagicPath. MagicPath is the only design platform where you can do this today: create high-fidelity, interactive components with AI, in your own style, on an infinite canvas. No other tool even comes close.
0:18

We just added a Sora UI Kit to MagicPath. MagicPath is the only design platform where you can do this today: create high-fidelity, interactive components with AI, in your own style, on an infinite canvas. No other tool even comes close.

Pietro Schirano

21,366 görüntüleme • 10 ay önce

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):
0:16

Impeccable 3 natively supports crafting new design with diffusion (e.g. GPT Image 2) in harnesses that support it (e.g. Codex, Gemini w/ nano banana plugin). Impeccable now uses the best mode of operation for net-new vs iterative design: 1) completely new design: diffusion-first, then build w/ best practices for brand or product design (new in 3.0) 2) iterative design (additions/changes): design-system first, discovers your components, reads DESIGN/PRODUCT.md, goes to work. new live mode (new in 3.0) makes it extra convenient. Here's a tutorial documenting the whole workflow (incl. how I made the demo site in the video):

Paul Bakaus

38,319 görüntüleme • 4 ay önce

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)
0:15

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,245 görüntüleme • 5 ay önce

finally, AI will be fluent in your design systems and components ...and be able to design and code just like *you* our biggest launch ever coming up - reserve your spot below:
0:16

finally, AI will be fluent in your design systems and components ...and be able to design and code just like *you* our biggest launch ever coming up - reserve your spot below:

Steve (Builder.io)

55,941 görüntüleme • 2 yıl önce

new Figma plugin in Cursor!! it can inspect your design system, find the right components/variables/styles, then write directly to figma as editable layers
0:11

new Figma plugin in Cursor!! it can inspect your design system, find the right components/variables/styles, then write directly to figma as editable layers

edwin

45,069 görüntüleme • 5 ay önce

Design System Checklist Open-source checklist that will help you plan, build and grow your design system. It covers design language, tokens, core components, and maintenance (support and documentation).
0:15

Design System Checklist Open-source checklist that will help you plan, build and grow your design system. It covers design language, tokens, core components, and maintenance (support and documentation).

Nick Babich

52,116 görüntüleme • 2 yıl önce

Storybook MCP for React is here 🎉 Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time. 🧵 ⤵
0:19

Storybook MCP for React is here 🎉 Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time. 🧵 ⤵

Storybook

169,458 görüntüleme • 5 ay önce

New this week: Components 🧩 Design once. Reuse across your file. Update every instance with a single edit. Out today 👇
0:10

New this week: Components 🧩 Design once. Reuse across your file. Update every instance with a single edit. Out today 👇

Jitter

17,120 görüntüleme • 2 ay önce

Mobile design UI components Line design system is an excellent collection of UI components for mobile apps—from action buttons to pulldown menus. Every component features anatomy, states & behavior, and design dos and donts.
0:16

Mobile design UI components Line design system is an excellent collection of UI components for mobile apps—from action buttons to pulldown menus. Every component features anatomy, states & behavior, and design dos and donts.

Nick Babich

267,070 görüntüleme • 2 yıl önce

1. Webflow. I use this tool to create landing pages for all of my businesses. You can create custom websites on a completely visual canvas with no code.
0:11

1. Webflow. I use this tool to create landing pages for all of my businesses. You can create custom websites on a completely visual canvas with no code.

Modest Mitkus

66,127 görüntüleme • 2 yıl önce

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.
0:13

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

Simplifying AI

56,805 görüntüleme • 1 ay önce

Replit just launched Replit Design. Designing an app is one of the hardest parts, and AI often creates designs that all look the same. I like that Replit Design works like a design partner, helping you create designs that feel more unique and fit your app better. Now anyone can be a designer, not just people with design experience.
0:12

Replit just launched Replit Design. Designing an app is one of the hardest parts, and AI often creates designs that all look the same. I like that Replit Design works like a design partner, helping you create designs that feel more unique and fit your app better. Now anyone can be a designer, not just people with design experience.

Markandey Sharma

52,463 görüntüleme • 1 ay önce

Dress To Impress teases a new color-all system along with a brand-new feature coming soon.
0:18

Dress To Impress teases a new color-all system along with a brand-new feature coming soon.

DTI News ⭐️

35,920 görüntüleme • 7 ay önce

Your imagination is your tool 🫵🎨 It’s now your turn to design our PUMA Football 26/27 Third Kit with PUMA AI CREATOR 👕
0:15

Your imagination is your tool 🫵🎨 It’s now your turn to design our PUMA Football 26/27 Third Kit with PUMA AI CREATOR 👕

Manchester City

261,193 görüntüleme • 1 yıl önce

Hello, world! It’s time for an #HourofCode adventure 🖥️ Learn the basics of coding with the trusty Agent to create helpful AI-powered inventions in the new Minecraft Hour of Code: Generation AI Start your coding journey here for free (no license required):
0:20

Hello, world! It’s time for an #HourofCode adventure 🖥️ Learn the basics of coding with the trusty Agent to create helpful AI-powered inventions in the new Minecraft Hour of Code: Generation AI Start your coding journey here for free (no license required):

Minecraft

314,827 görüntüleme • 2 yıl önce

Stop editing timelines. Start writing prompts. Replit Animation lets you create animated videos inside Replit using code. Replit ⠕ #replitanimation It generates TypeScript behind the scenes with modern animation libraries, turning your ideas into fully rendered mp4 videos. Plug in your existing design systems, typography, tokens, and production components to create videos that match your product perfectly. Video as code changes the workflow. Your components become reusable animation blocks. Update the code, regenerate the video, ship again. From automated changelog videos to polished feature releases, video creation becomes a scalable pipeline. Here is an example of a video I generated with Replit Animation. Export in your preferred resolution and frame rate or host it online with a shareable URL. Mention video in your first prompt or choose Animation under App mode to activate it. Start creating:
0:18

Stop editing timelines. Start writing prompts. Replit Animation lets you create animated videos inside Replit using code. Replit ⠕ #replitanimation It generates TypeScript behind the scenes with modern animation libraries, turning your ideas into fully rendered mp4 videos. Plug in your existing design systems, typography, tokens, and production components to create videos that match your product perfectly. Video as code changes the workflow. Your components become reusable animation blocks. Update the code, regenerate the video, ship again. From automated changelog videos to polished feature releases, video creation becomes a scalable pipeline. Here is an example of a video I generated with Replit Animation. Export in your preferred resolution and frame rate or host it online with a shareable URL. Mention video in your first prompt or choose Animation under App mode to activate it. Start creating:

MAPUNDA

143,053 görüntüleme • 6 ay önce

Extract any website's design system in one line. Colors, fonts, spacing, components. Formatted as a DESIGN .md your AI agents can use instantly. Built on our Fetch API. Fast, accurate, and structured. Powered by Hyperbrowser ↓
0:16

Extract any website's design system in one line. Colors, fonts, spacing, components. Formatted as a DESIGN .md your AI agents can use instantly. Built on our Fetch API. Fast, accurate, and structured. Powered by Hyperbrowser ↓

Hyperbrowser

23,588 görüntüleme • 3 ay önce

I teach people to earn with AI. New rule: stop making pretty AI images, start making AI ads that sell. This tool does the second one for you. Show it your product.
0:10

I teach people to earn with AI. New rule: stop making pretty AI images, start making AI ads that sell. This tool does the second one for you. Show it your product.

Leo Martin

33,130 görüntüleme • 2 ay önce