Loading video...

Video Failed to Load

Go Home

Introducing 🎨 Design Systems in Stitch! Build a single source of truth to keep your screens visually consistent. Create your styles once, then instantly apply them to any new or existing designs. We’ve got more for design systems coming over the next few weeks, stay tuned! 👀

stitchbygoogle's profile picture

Stitch by Google

161,610 subscribers

294,057 views • 6 months ago •via X (Twitter)

ArtsScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Developer Week Day 2. 🛠️ We just gave your Coding Agent a Design Degree🎓🎨 Introducing the Stitch MCP Server. 🔌 You can now pipe Stitch designs directly into your favorite tools like Antigravity. * Generate new screens without leaving your IDE * Fetch the code from any design * Inject context: Give your agent full visual awareness Docs and more information 👇
0:29

Developer Week Day 2. 🛠️ We just gave your Coding Agent a Design Degree🎓🎨 Introducing the Stitch MCP Server. 🔌 You can now pipe Stitch designs directly into your favorite tools like Antigravity. * Generate new screens without leaving your IDE * Fetch the code from any design * Inject context: Give your agent full visual awareness Docs and more information 👇

Stitch by Google

359,830 views • 7 months ago

Curious about design systems but don't know where to start? Whether you're about to build your first design system or just curious about them, our new 4- part course, "Introduction to Design Systems," will provide guidance, real-world applications, and tools to help you make the most informed decisions. - Understand what a design system is - Discover what goes into a design system and explore foundational concepts - Learn which Figma features help manage design systems - Explore the importance of documentation and how to maintain, improve, and advocate for your design system. Learn more:
0:59

Curious about design systems but don't know where to start? Whether you're about to build your first design system or just curious about them, our new 4- part course, "Introduction to Design Systems," will provide guidance, real-world applications, and tools to help you make the most informed decisions. - Understand what a design system is - Discover what goes into a design system and explore foundational concepts - Learn which Figma features help manage design systems - Explore the importance of documentation and how to maintain, improve, and advocate for your design system. Learn more:

Figma

551,164 views • 3 years ago

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 views • 1 year ago

🎨 Stop describing, start showing! One of your most requested features. Your design inspiration is now a core part of the Stitch canvas. 🖼️ Bring in any inspirational image or screenshot to add rich visual context to every step of your design journey—from initial idea to final edit. Four easy ways to add images: * Drag & drop * Paste (CMD/Ctrl+V) * Direct upload button * Attach to prompt Select images alongside your screens (CMD/Ctrl+Click) to provide the ultimate context for your next generation or edit. Coming soon: The ability to seamlessly incorporate images (logos, profile pics) directly into your generated designs.
0:24

🎨 Stop describing, start showing! One of your most requested features. Your design inspiration is now a core part of the Stitch canvas. 🖼️ Bring in any inspirational image or screenshot to add rich visual context to every step of your design journey—from initial idea to final edit. Four easy ways to add images: * Drag & drop * Paste (CMD/Ctrl+V) * Direct upload button * Attach to prompt Select images alongside your screens (CMD/Ctrl+Click) to provide the ultimate context for your next generation or edit. Coming soon: The ability to seamlessly incorporate images (logos, profile pics) directly into your generated designs.

Stitch by Google

28,739 views • 9 months ago

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵
1:29

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵

Stitch by Google

488,040 views • 5 months ago

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉
1:23

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

179,614 views • 1 month ago

DESIGN. md concept introduced by Stitch by Google . Our repo awesome-design-md brought it to the community, 35K+ stars in one week, hundreds of organic shares. Now it has a website: Browse design systems as DESIGN. md inspired by real websites. Preview instantly. Install with one command. One markdown file tells your AI agent exactly how to build matching UI.
0:41

DESIGN. md concept introduced by Stitch by Google . Our repo awesome-design-md brought it to the community, 35K+ stars in one week, hundreds of organic shares. Now it has a website: Browse design systems as DESIGN. md inspired by real websites. Preview instantly. Install with one command. One markdown file tells your AI agent exactly how to build matching UI.

Ozmen

190,523 views • 4 months ago

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 views • 11 months ago

We’ve been overwhelmed by the feedback on the new Stitch. 🫶 Now, let’s get to building. 😀 Over the coming weeks, we're dropping Starter Ideas to spark your creativity—and want to showcase what you build! 🌟 Starter Idea #1: Watch the new agent and AI-Native Canvas turn a messy doc into a fully styled portfolio. 📝 The Input: Highlight and copy your raw resume text 🎨 The Prompt: "Make me a single-page resume site in 3 fun styles" + paste your resume text ✨ Stitch turns your resume into a text canvas node where it can be referenced or edited ✨ It generates 3 unique Design Systems and layouts 🔷 The Polish: Upload a headshot, and the agent auto-crops and styles it to match the exact aesthetic of each site. We have loved seeing your creations so far. Drop your shared projects in the replies—we're putting together a plan to showcase our favorites!
0:43

We’ve been overwhelmed by the feedback on the new Stitch. 🫶 Now, let’s get to building. 😀 Over the coming weeks, we're dropping Starter Ideas to spark your creativity—and want to showcase what you build! 🌟 Starter Idea #1: Watch the new agent and AI-Native Canvas turn a messy doc into a fully styled portfolio. 📝 The Input: Highlight and copy your raw resume text 🎨 The Prompt: "Make me a single-page resume site in 3 fun styles" + paste your resume text ✨ Stitch turns your resume into a text canvas node where it can be referenced or edited ✨ It generates 3 unique Design Systems and layouts 🔷 The Polish: Upload a headshot, and the agent auto-crops and styles it to match the exact aesthetic of each site. We have loved seeing your creations so far. Drop your shared projects in the replies—we're putting together a plan to showcase our favorites!

Stitch by Google

68,188 views • 5 months ago

Stream "Smash It Like Belushi” now 💥 Can’t wait to see your faces in the desert this weekend for Coachella!! We’ve got a few more tricks up our sleeves the next few weeks (as always 😏), stay tuned.
0:20

Stream "Smash It Like Belushi” now 💥 Can’t wait to see your faces in the desert this weekend for Coachella!! We’ve got a few more tricks up our sleeves the next few weeks (as always 😏), stay tuned.

Green Day

40,514 views • 1 year ago

✨ 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 views • 1 year ago

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

195,078 views • 4 months ago

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

13,482 views • 4 months ago

🚀 Exciting update in Napkin AI! We’ve just launched Custom Styles to help you generate visuals that match your brand—without the hassle of manual adjustments. Now, you can: ✅ Create custom styles by adding brand colors & fonts or automatically extracting them from brand assets like logos ✅ Instantly apply your custom styles to both new & existing visuals ✅ Create multiple styles & switch between them easily for different projects or clients This update is another big step toward helping you create unique visuals that perfectly reflect your brand or personal style. #NapkinAI #VisualAI #AITools #VisualStorytelling #CustomStyles
1:41

🚀 Exciting update in Napkin AI! We’ve just launched Custom Styles to help you generate visuals that match your brand—without the hassle of manual adjustments. Now, you can: ✅ Create custom styles by adding brand colors & fonts or automatically extracting them from brand assets like logos ✅ Instantly apply your custom styles to both new & existing visuals ✅ Create multiple styles & switch between them easily for different projects or clients This update is another big step toward helping you create unique visuals that perfectly reflect your brand or personal style. #NapkinAI #VisualAI #AITools #VisualStorytelling #CustomStyles

Napkin AI

70,987 views • 1 year ago

🎉 Introducing Designr 🥳7️⃣ – The Smarter Way to Create Designr is here to make design simpler and more intuitive, whether you're starting something new or refining your latest project. It’s all about creativity, without the complexity. ✨ With Designr, you can: - Create with ease using the dynamic editor that gives you full control - Find inspiration with hundreds of fresh templates added daily - Turn ideas into designs in seconds with our smart Text-to-Design AI - Export your work in any format, any size - Animate your designs easily with our animation tools 🌐 Coming soon to LinqHub! We can’t wait for you to try it. $LNQ
0:39

🎉 Introducing Designr 🥳7️⃣ – The Smarter Way to Create Designr is here to make design simpler and more intuitive, whether you're starting something new or refining your latest project. It’s all about creativity, without the complexity. ✨ With Designr, you can: - Create with ease using the dynamic editor that gives you full control - Find inspiration with hundreds of fresh templates added daily - Turn ideas into designs in seconds with our smart Text-to-Design AI - Export your work in any format, any size - Animate your designs easily with our animation tools 🌐 Coming soon to LinqHub! We can’t wait for you to try it. $LNQ

LinqAI

31,288 views • 1 year ago

Want to see your screens in dark mode or different colors with just a click? 🎨 Theming is now enabled for new projects in Experimental (Gemini 2.5 Pro) mode. Instantly swap primary colors, fonts, and corner radiuses. Apply a dark mode theme to a single screen or your entire flow with SHIFT+Click. Use copy+paste to see multiple versions side by side. Perfect for quickly exploring new brand styles and modes. (Note: theming is not backwards compatible with existing experimental projects)
0:36

Want to see your screens in dark mode or different colors with just a click? 🎨 Theming is now enabled for new projects in Experimental (Gemini 2.5 Pro) mode. Instantly swap primary colors, fonts, and corner radiuses. Apply a dark mode theme to a single screen or your entire flow with SHIFT+Click. Use copy+paste to see multiple versions side by side. Perfect for quickly exploring new brand styles and modes. (Note: theming is not backwards compatible with existing experimental projects)

Stitch by Google

28,044 views • 11 months ago

Introducing SuperDesign.Dev The first open-source Design Agent that lives inside Cursor, Windsurf, or any IDE: 👉 Instantly spin up 10 different design in parallel 👉 Explore, fork, and iterate 10x faster 👉 Create new or iterate on your existing UI — all fully local JackJack and I shipped this as a quick weekend experiment to validate a hunch: design is the killer use case for parallel agents. Currently at V0.005 — a simple customization of the Claude Code SDK + static HTML generation. (We might be the first product powered by the Anthropic Claude Code SDK!) More coming soon: web app, mobile app, SVG generation, and more. GitHub: Try it out: ----- Upvote on Hacker News ❤️:
0:55

Introducing SuperDesign.Dev The first open-source Design Agent that lives inside Cursor, Windsurf, or any IDE: 👉 Instantly spin up 10 different design in parallel 👉 Explore, fork, and iterate 10x faster 👉 Create new or iterate on your existing UI — all fully local JackJack and I shipped this as a quick weekend experiment to validate a hunch: design is the killer use case for parallel agents. Currently at V0.005 — a simple customization of the Claude Code SDK + static HTML generation. (We might be the first product powered by the Anthropic Claude Code SDK!) More coming soon: web app, mobile app, SVG generation, and more. GitHub: Try it out: ----- Upvote on Hacker News ❤️:

Jason Zhou

49,435 views • 1 year ago

If you're looking for your next steps in learning FlutterFlow, we're in the middle of producing FlutterFlow University. This will bring you from a beginner to an intermediate FF developer, ready to design, develop &amp; ship apps. First lesson: Introduction to Design Systems.
2:22

If you're looking for your next steps in learning FlutterFlow, we're in the middle of producing FlutterFlow University. This will bring you from a beginner to an intermediate FF developer, ready to design, develop &amp; ship apps. First lesson: Introduction to Design Systems.

FlutterFlow

21,266 views • 3 years ago

Today we're changing how people build for the web. Introducing MagicPath Libraries. Your component library is a living doc that AI uses to design in your style. No more slop. Build with defaults or custom libraries, share them with teams. Always synced with your code.
0:59

Today we're changing how people build for the web. Introducing MagicPath Libraries. Your component library is a living doc that AI uses to design in your style. No more slop. Build with defaults or custom libraries, share them with teams. Always synced with your code.

Pietro Schirano

134,956 views • 11 months ago