Google Stitch + Claude Code = Insane App Design

Google Stitch + Claude Code = Insane App Design ![rw-book-cover](https://i.ytimg.com/vi/sZQ7lqaOGMg/sddefault.jpg) 🔗 **Source:** [Google Stitch + Claude Code = Insane App Design](https://www.youtube.com/watch?v=sZQ7lqaOGMg) > [!note]+ Document Notes > tags: #ai-design #design-systems #google-stitch #claude-ai #ui-design #prototyping #design-tools > author: Chris (channel name not specified) > source: YouTube > reference: https://www.youtube.com/watch?v=sZQ7lqaOGMg > date created: 2024-12-19 15:30 > > # 🏷️ Title: Google Stitch + Claude Code = Insane App Design >  ## 🧰 Action Inbox - [H1] Set up Google Stitch MCP with Claude Code — API key setup required #ai-design - [H2] Create design.md file for existing app projects — document design system #design-systems - [H3] Test design.md workflow for maintaining consistent styling — validate AI coding integration #prototyping ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Google Stitch](https://stitch.google.com) - [Google Stitch MCP Documentation](https://stitch.google.com/mcp) ## 📝 Summary - Google Stitch introduced design.md, a paradigm-shifting approach to maintaining design systems in AI-generated code - The workflow involves creating designs in Stitch, generating a design.md file, and using Claude Code with Stitch MCP to apply consistent styling - This addresses the major problem of AI-generated apps looking like "AI slop" by providing systematic design consistency - The integration allows designers and non-designers to create professional-looking applications with maintained visual coherence - While not perfect, design.md represents a significant step forward in bridging design tools and AI coding environments ## 📖 Main Content Google Stitch's latest release introduces design.md, a markdown-based design system documentation approach that integrates with AI coding tools like Claude Code. The system allows users to create professional designs from screenshots or PRDs, automatically generate design system documentation, and apply those styles consistently across applications using the Stitch MCP (Model Context Protocol). The workflow addresses a critical gap in AI-assisted development: maintaining design quality and consistency. Previously, developers using AI coding tools often produced functional but visually poor applications. Design.md provides a structured approach to document typography, color schemes, spacing, and component styles in a format that AI coding assistants can interpret and apply. The demonstration shows transforming a basic copywriting agency app from generic styling to professional design through Stitch's AI-native canvas, then applying those styles via Claude Code integration. The system automatically generates complementary color palettes, typography hierarchies, and component specifications that can be referenced throughout development. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/sZQ7lqaOGMg?t=0) — [H1] Google Stitch's paradigm-shifting release - Key idea: New version represents fundamental change in AI design workflow - Evidence: "What they've done with the latest version of Google Stitch actually marks a significant change in the way that we design with AI" #### ⏱️ [02:15](https://youtu.be/sZQ7lqaOGMg?t=135) — [H2] Design.md solves AI slop problem - Key idea: Design systems documentation enables consistent styling in AI-generated code - Evidence: "How do I design apps that actually look good and not like AI slop? And how do I maintain those styles throughout the rest of my app?" #### ⏱️ [04:30](https://youtu.be/sZQ7lqaOGMg?t=270) — [H3] Five key new features in Stitch - Key idea: AI-native canvas, smarter design agent, voice interaction, instant prototypes, and design systems - Evidence: "AI native canvas... smarter design agent... voice kind of interaction... instant prototype... design systems, design MD" #### ⏱️ [07:45](https://youtu.be/sZQ7lqaOGMg?t=465) — [H2] Demonstrating the workflow with copywriting app - Key idea: Taking screenshots of existing app to redesign in Stitch - Evidence: "I'm going to take screenshots of this app... use these screenshots to create designs in Stitch to kind of improve the design style" #### ⏱️ [10:20](https://youtu.be/sZQ7lqaOGMg?t=620) — [H1] Stitch automatically generates design systems - Key idea: Creates comprehensive design documentation including typography, colors, and components - Evidence: "You can see down at the bottom here, it's created this Obsidian Script design system" #### ⏱️ [12:10](https://youtu.be/sZQ7lqaOGMg?t=730) — [H3] Design.md contains complete style documentation - Key idea: Markdown file includes typography, elevation, components, and usage rules - Evidence: "This is a markdown file for my design system documentation and it has everything that you need to apply this design style" #### ⏱️ [15:30](https://youtu.be/sZQ7lqaOGMg?t=930) — [H2] Stitch creates intelligent color palettes - Key idea: Generates complementary secondary and tertiary colors beyond original designs - Evidence: "Created a very kind of complimentary color palette here with this tertiary color... something that you would pick as a designer" #### ⏱️ [18:45](https://youtu.be/sZQ7lqaOGMg?t=1125) — [H3] Setting up Google Stitch MCP integration - Key idea: Requires API key setup and terminal command to connect with Claude Code - Evidence: "We're going to need to go into Google Stitch, go into settings, and then scroll to the API section and create an API key" #### ⏱️ [22:15](https://youtu.be/sZQ7lqaOGMg?t=1335) — [H2] Claude Code applies design.md with mixed results - Key idea: Design file provides good foundation but isn't 100% accurate in translation - Evidence: "This is definitely like a lot better, but it's not following the same style... it's got like the right fonts but they're not done in the exact right way" #### ⏱️ [25:30](https://youtu.be/sZQ7lqaOGMg?t=1530) — [H1] Stitch MCP enables direct design copying - Key idea: Can reference specific frames in Stitch to replicate exact layouts in code - Evidence: "Let's update the client dashboard screen to match the layout of the editorial dashboard desktop screen in Google Stitch using the Stitch MCP" #### ⏱️ [28:00](https://youtu.be/sZQ7lqaOGMg?t=1680) — [H3] Feature alignment considerations - Key idea: Must ensure Stitch designs match actual app functionality to avoid confusion - Evidence: "Make sure that what you're going to get in your app is going to match what you've got in Google Stitch" #### ⏱️ [30:45](https://youtu.be/sZQ7lqaOGMg?t=1845) — [H2] Design.md paradigm assessment - Key idea: Not perfect but represents significant advancement in AI design workflow - Evidence: "Is the Google stitch new design.md paradigm for UI design in apps and websites perfect? Absolutely not. It's not 100% there yet" ## 📚 References - [Google Stitch](https://stitch.google.com) - [Google Stitch MCP Setup Documentation](https://stitch.google.com/mcp) - [Claude Code](https://claude.ai/code) - [Orchestrate.build](https://orchestrate.build) ## 🗣️ Paraphrase - Google Stitch introduced design.md, a revolutionary approach to maintaining design consistency in AI-generated applications by creating markdown documentation of design systems - The workflow involves uploading screenshots or PRDs to Stitch, letting AI generate professional designs and design system documentation, then using that documentation with Claude Code to apply consistent styling - While the translation from design.md to actual code isn't perfect, it provides a strong foundation for creating professional-looking applications and avoiding the generic appearance of typical AI-generated interfaces ## 📰 Newsletter 🎨 **Game-Changer Alert: Google Stitch + AI Coding = Design Consistency** Google just dropped a paradigm-shifting update that solves one of the biggest problems in AI development: making apps that don't look like "AI slop." Their new design.md system lets you create professional designs and automatically generate design system documentation that AI coding tools can actually follow. **What's Revolutionary:** - Upload screenshots → Get professional redesigns instantly - Automatic design system generation with complementary colors and typography - Direct integration with Claude Code via MCP for consistent styling - Bridges the gap between design tools and AI coding environments **Practical Benefits:** - Transform generic AI-generated UIs into professional applications - Maintain design consistency across your entire project - Enable non-designers to create visually appealing applications - Speed up the design-to-code workflow dramatically While it's not 100% perfect in translation, design.md represents a massive leap forward in AI-assisted design. Perfect for WordPress developers looking to elevate their AI-generated admin interfaces and custom applications. **Try It:** Start with screenshots of your current project, redesign in Stitch, export design.md, and watch Claude Code apply professional styling consistently. Resources: [Google Stitch](https://stitch.google.com), [MCP Setup Guide](https://stitch.google.com/mcp), [Claude Code](https://claude.ai/code) ## ✅ Action Items #### DevRel - Developer advocacy: Create workshops demonstrating Stitch + AI coding integration, measure adoption metrics - Education: Develop curriculum on design systems for developers, host office hours on AI design workflows - Developer experience: Test and document design.md integration patterns, create setup guides - Developer marketing: Showcase before/after transformations, create case study content - Community management: Monitor feedback on AI design quality, survey developer design pain points #### OSPO - Policy & Governance: Review AI design tool licensing, establish design system contribution policies - License Compliance: Scan design.md workflows for license implications, train teams on AI design rights - Security Management: Assess MCP integration security, review API key management practices - Software Inventory: Track design tool dependencies, document AI design toolchain - Developer Support: Provide training on design systems, tooling for design consistency - Community Engagement: Fund design accessibility initiatives, support open design system projects - Strategic Alignment: Measure design quality improvements, track developer productivity gains #### Community - Maintainers: Provide design system templates, governance models for design decisions - Contributors: Create first-issue programs for design improvements, onboard design-focused contributors - Sponsors: Fund design system development, transparent budgets for design tooling - Ecosystem: Coordinate design standards across projects, share design system components #### WordPress - Core: Implement design.md patterns for admin interfaces, establish design system priorities - Core Performance: Profile design system impact, optimize component rendering - Core AI: Integrate design consistency guardrails, evaluate design quality metrics - Mobile: Apply consistent design systems, improve app UI coherence - Playground: Create design system labs, demonstrate WordPress design patterns - Community: Develop design workshop kits, support WordCamp design sessions - Training: Create design system lesson plans, establish design learning paths - Design: Audit current WordPress design systems, create design tokens, research user needs - Documentation: Update design guidelines, create style guides for contributors - Themes: Review design consistency standards, mentor theme designers - Plugins: Establish design review processes, check design system compliance #### The WPCC - Programs: Fund design fellowship programs, provide design microgrants - Projects: Support design system governance, fund documentation sprints - Funding: Match grants for design improvements, milestone payouts for design consistency #### FAIR - Technical independence: Ensure design tool vendor neutrality, support open design standards - Policies: Transparent design decision funding, anti-capture mechanisms for design tools - Governance artifacts: Design system charters, design tool operator agreements ## 🧪 Hypotheses - Design.md integration reduces development time for achieving professional UI quality by 60-80% - AI coding tools with design system documentation produce 90% fewer visual inconsistencies than ad-hoc styling - Non-designers using Stitch + Claude Code workflow achieve design quality comparable to junior designers - Design system documentation in markdown format increases AI tool comprehension over other formats ### 📊 Methodology - A/B testing: Compare development speed and design quality with/without design.md workflow - User studies: Measure design quality improvements across skill levels using standardized design assessment rubrics - Performance analysis: Track visual consistency metrics across applications using automated design auditing tools ### ❓ Questions - How does design.md accuracy compare across different AI coding assistants beyond Claude Code? - What design system complexity level optimizes AI tool comprehension versus human maintainability? - Can design.md patterns be extended to support accessibility requirements and responsive design specifications? ### 🔮 Future Research - Integration patterns between design.md and component libraries like Figma Dev Mode - Automated design quality assessment tools for AI-generated interfaces - Open source design.md standards and tooling ecosystem development ### 💡 Implications - Practice: Transforms AI development workflow from code-first to design-first approach - Policy: May require new guidelines for design system IP and AI tool licensing - Security: MCP integrations introduce new API security considerations for design workflows - Education: Demands new curriculum combining design systems with AI coding skills - Funding: Design tooling becomes critical infrastructure requiring sustainable funding models ### 🧠 Learning Styles Assessment Reading level estimate: 12-14 (Technical content with specialized vocabulary) #### 👀 Visual learners - Present: Screenshots of before/after designs, design system visualizations, workflow diagrams - Improve: Architecture diagrams of MCP integration, visual comparison charts of design quality #### 🔊 Aural learners - Present: Video walkthrough with narration, spoken explanations of workflow steps - Improve: Audio podcast version focusing on design philosophy, recorded Q&A sessions #### 🗣️ Verbal learners - Present: Clear definitions of design.md, MCP, design systems terminology - Improve: Analogies comparing traditional vs AI design workflows, storytelling around user journeys #### 🧩 Kinesthetic learners - Present: Step-by-step setup instructions, hands-on demonstration with real app - Improve: Interactive tutorials, downloadable starter templates, practice exercises #### 🧠 Logical learners - Present: Clear workflow sequence, decision trees for tool selection - Improve: Detailed comparison matrices, performance metrics, ROI calculations #### 🧑‍🤝‍🧑 Social learners - Present: Community references, collaborative potential mentioned - Improve: Discussion forums for sharing results, peer review processes, design critique sessions #### 🧘‍♀️ Solitary learners - Present: Self-contained tutorial, independent experimentation encouraged - Improve: Personal reflection prompts on design decisions, individual progress tracking #### 🌿 Naturalistic learners - Present: Evolution of design tools and workflows - Improve: Design ecosystem thinking, sustainable design practices, tool lifecycle considerations ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear headings structure, descriptive video content - Improve: Alt text for design screenshots, ARIA labels for complex UI elements shown #### Keyboard navigation - Present: Video controls accessible, clear focus indicators - Improve: Keyboard shortcuts documentation, tab order considerations for demonstrated workflows #### Contrast and readability - Present: High contrast in video demonstrations - Improve: Ensure design examples meet WCAG contrast requirements, provide colorblind-friendly examples #### Text resizing and reflow - Present: Video responsive to different screen sizes - Improve: Text-based summaries that reflow properly, zoom considerations for code examples #### Media and captions - Present: Audio narration available - Improve: Detailed captions for technical terminology, audio descriptions of visual design changes #### Forms and interactions - Present: Clear interaction demonstrations - Improve: Accessible error handling examples, inclusive form design patterns #### Standards reference - Ensure design.md examples include WCAG 2.2 AA compliance guidelines ### 🌍 DEIB Assessment --- ## Full Transcript [00:00] Google just dropped one of the biggest [00:01] changes in the AI design world with this [00:03] latest release. And I know this might [00:04] seem like hype, but what they've done [00:06] with the latest version of Google Stitch [00:08] actually marks a significant change in [00:10] the way that we design with AI. It's not [00:12] just about a new tool, it's about a new [00:14] paradigm for maintaining your design [00:16] styles in code. So, in this video, we're [00:18] going to break down how to create [00:20] incredible designs in Stitch. How to [00:22] create a design system in Google Stitch, [00:24] which is called design.md, and then how [00:27] to use design.md with clawed code to [00:30] update the UI design in any app or [00:32] website project. If you don't know me, [00:34] my name is Chris, and for the last 15 [00:36] years, I've been designing apps and [00:37] advising startups on product and design. [00:39] And if you are building apps and you're [00:40] interested in designing them so that [00:42] they don't look like AI slop, I've got a [00:44] community helping people do just that [00:45] with over 250 other people building and [00:47] designing apps and actually making money [00:49] from them. You can find a link in the [00:51] description down below. Otherwise, let's [00:52] jump straight into Google Stitch and see [00:54] what it can do. So, this is the [00:56] announcement from Google Stitch and [00:58] there is a ton of stuff that they have [00:59] introduced with this latest release of [01:01] Google Stitch. But the main one that I [01:03] want to focus on in this video is the [01:05] design systems and design.md paradigm [01:07] because this really changes how [01:09] designers are going to document their [01:11] design styles and then bring that into [01:13] code with tools like claude code. And I [01:15] want to show you exactly how you can use [01:16] Stitch and Claude code together. And [01:18] this is one of the questions I get asked [01:20] over and over again in my community. How [01:22] do I design apps that actually look good [01:24] and not like AI slop? And how do I [01:26] maintain those styles throughout the [01:28] rest of my app as I continue to build it [01:29] with AI? So, this is basically solving [01:31] that problem. And if you've seen a [01:33] previous video I did on how to design [01:35] with cursor, I basically recommend that [01:37] you create a design system file as a way [01:40] of documenting all of your design styles [01:42] and then referencing that throughout [01:44] your codebase using tools like claude [01:46] code and cursor. So, maybe they saw that [01:48] video and that was a bit of inspiration [01:49] for this. They probably didn't, but [01:50] either way, it's a huge need in the AI [01:53] design space and design. MD really [01:56] represents a step change in the way that [01:57] we approach design creating design [01:59] systems and applying them to our [02:01] applications using AI coding tools. And [02:04] so let's rough let's quickly break down [02:06] the features that they've launched here. [02:07] So basically an AI native canvas. So [02:10] this is a spatial canvas accepts images [02:12] code and PRDs as creative seeds which is [02:14] great because now we can start from a [02:16] PRD of our app and that's what we're [02:18] going to do here. We're going to design [02:19] the screens for our app as well is a [02:21] smarter design agent which is basically [02:23] better at creating designs. So, an agent [02:25] that's just better at creating designs, [02:27] the voice kind of interaction, which is [02:29] something that is being added to all of [02:30] these AI agent tools where I can just [02:32] talk basically to the app and it will [02:35] transcribe that into the prompt that I'm [02:37] sending. Instant prototype, which means [02:39] I can click to preview my app and view a [02:42] prototype. I think this works way better [02:43] than a lot of vibe coding tools like [02:45] Lovable or Bolt for actually building [02:47] prototypes and kind of walking through [02:48] them. It's more of a Figma style [02:51] interaction where you kind of view your [02:52] prototype and then you can share that [02:54] with people. And then the final one [02:56] here, the big one, design systems, [02:58] design MD. So you can see as you're [03:00] building your app, it's creating a [03:02] design system for you in Google Stitch. [03:04] And then using the Google Stitch MCP and [03:07] the Google Stitch skills, you can use [03:09] that in clawed code to maintain [03:11] consistent design styles throughout your [03:14] entire application or website. And this [03:16] one is huge. So, with that all covered, [03:19] let's actually get into Stitch and start [03:21] building something. So, for the purposes [03:23] of this video, I've been building an app [03:25] for someone, which is basically an app [03:27] for a copywriting agency that's going to [03:29] help them create different social [03:31] content for their clients, referencing a [03:33] bunch of different files like brand tone [03:35] of voice and social formats for that [03:38] brand, as well as this copywriting [03:40] agency's own kind of frameworks for [03:42] writing copy that actually works. But at [03:44] the moment, as you can see here in this [03:47] demo, um it looks pretty vibecoded. It [03:50] looks pretty basic. Like it's not the [03:52] styling is not great. All I've done is [03:54] go through and build the basic version [03:56] of this with no real styling applied. [03:58] So, what I'm going to do here is I'm [03:59] going to take screenshots of this app. [04:01] So, we've got our two screenshots of the [04:03] two pages in this app. And then I'm [04:05] basically going to use these screenshots [04:07] to create designs in Stitch to kind of [04:10] improve the design style of this. And [04:12] the goal with this is to show you how [04:14] you can create incredible designs just [04:16] from screenshots using Google Stitch or [04:18] from a PRD. Once we've done that, we're [04:19] going to generate our design system and [04:21] we're going to tweak the design of it [04:22] maybe. And then after that, we're going [04:24] to pull that design style into this [04:26] actual app using the Google Stitch MCP [04:29] to read the design. MD file and then [04:32] apply that design to the application [04:33] here. So, let's go over to Google [04:35] Stitch. I'm going to drop my images in [04:37] here. So, now let's now we've dropped [04:39] our screenshots in here. Let's put our [04:40] prompt into Google Stitch. I want to [04:42] redesign these two screens for this web [04:44] app. The purpose of this web app is to [04:46] help a c a copyrightiting agency to [04:49] write content for their clients using [04:51] AI. The app shows a dashboard and a [04:55] library screen. So, let's redesign those [04:57] two screens. I'd like to redesign this [05:00] in a more professional, minimal, and [05:02] dark mode user interface style. And I [05:05] also want to change the fonts that we're [05:07] using for this as well. So, can you [05:08] recommend me some more professional [05:10] looking serif fonts for the headings and [05:13] create some versions and also a sand [05:16] serif font that is readable for the body [05:18] copy here. So, that is my prompt with [05:20] these screenshots. Let's send these off. [05:22] Now, you can choose a bunch of other [05:24] options here as well. So, we can attach [05:25] a screenshot sketch or visual [05:27] inspiration. You can click to use a [05:28] design system and it has some preset [05:30] design systems here. We're not going to [05:32] use those for the purposes of this. So, [05:33] let's send this to Google Stitch. And so [05:35] Google Stitch has imported these um [05:37] these designs onto the canvas here. I [05:40] also just really love this this canvas [05:42] background with the mouse interaction. I [05:44] think that's great. Maybe it's not super [05:46] performant, but I was just doing this [05:47] for ages. So now you can see that Google [05:50] Stitch has created these two updated [05:52] designs on the canvas here. Now these [05:54] are looking a lot better. Kind of [05:56] following my instructions, they already [05:58] look way better than the generic designs [06:01] that we had over here. just going to [06:03] this like makes a huge amount of [06:05] difference. Now, the problem is that [06:07] these are mobile designs right now. So, [06:09] we're going to create some desktop [06:11] designs here for these as well. Let's [06:13] create the desktop versions of the [06:16] redesigned library and dashboard [06:18] screens. So, I'm going to send that to [06:20] the Google Stitch agent. And we can see [06:22] our agent chats down in the bottom left [06:24] here. This is our agent log. But the [06:26] interesting thing about Google Stitch, [06:28] and this is where it starts to get [06:30] really, really powerful is the design [06:32] system part of this. So you can see down [06:34] at the bottom here, it's created this [06:36] Obsidian Script design system. And this [06:38] is for this app that we're building [06:40] here. Now, if I go into design systems [06:42] on the right hand menu, you can see [06:44] Obsidian Script is here. And it's got [06:45] like an overview of what the styles for [06:47] this look like. If I go into this, I can [06:50] see all of the styles in the design [06:52] system here. But even better than that, [06:54] I can go into design. RMD and this is a [06:57] markdown file for my design system [07:00] documentation and it has everything that [07:02] you need to apply this design style in [07:06] your app project. So we can use this [07:08] design.md file with this information to [07:11] redesign our app following the same [07:13] design language that we're using here. [07:16] And we can also use the Google Stitch [07:18] MCP to be able to access these actual [07:20] designs and the code for these designs [07:23] so that we can basically recreate this [07:25] with claude code in our AI coding [07:28] environment. So you see we've got [07:29] typography broken down. So it's got [07:31] display and headline fonts, label and [07:33] title and body fonts. It is using inter. [07:35] I'm going to change that because [07:36] everything uses in elevation and depth [07:39] components here. Dos and don'ts. So [07:41] rules for the styling as well which is [07:43] super interesting. So now we've got our [07:46] design system and our design. There's a [07:48] few changes that we're going to make [07:49] here. First, I'm going to generate the [07:50] the desktop designs for these. And then [07:53] after that, I'm going to make a few [07:55] styling changes to maybe the colors or [07:57] to the layout to get this looking [07:59] exactly how I want. And then once I've [08:01] done that, I'm going to pull that into [08:02] the app project using Claude Code and [08:04] the Google Stitch MCP to redesign our [08:07] app following this design language. And [08:09] as it's working here, you can see that [08:11] it's got the design system reference [08:14] file here. So if I go over to this, [08:16] let's zoom in on this. You can see this [08:18] is the visual kind of reference for our [08:20] design system here. And not only has it [08:22] kind of interpreted the original [08:23] designs, it's also created a very kind [08:26] of complimentary color palette here with [08:28] this tertiary color which we didn't have [08:30] in the original designs, but also a [08:32] secondary color which is like a less [08:34] saturated version of the primary color [08:36] and works together. Something that you [08:38] would pick as a designer, but if you [08:40] were just a non-designer, you probably [08:41] wouldn't pick this kind of set. And [08:43] we've got the scales of all of these [08:45] colors here as well, which you can find [08:46] out the information about examples about [08:48] how the components look here. And these [08:50] are being applied to our designs on the [08:52] canvas here. Now, Stitch seems to be [08:54] overlaying these frames, which is [08:56] interesting. So, we're going to wait for [08:57] it to finish, and then I'll move these [08:58] frames apart. But this is looking so [09:00] much better than the app that we had [09:03] previously. And this is all just from [09:05] one prompt, giving it a bit of design [09:06] direction, giving it the screenshots, [09:08] and redesigning our existing application [09:11] without even using any design [09:12] references. And if you wanted to take [09:14] this to the next level as well, you [09:15] could use design references from Dribble [09:17] or Mobin and pull those into this to [09:19] kind of redesign your app as well. But I [09:21] feel like this is probably one of the [09:23] fastest ways of going from an existing [09:26] kind of vibecoded app that you have that [09:28] kind of looks a bit AI sloppy um into [09:31] something that actually has like a [09:33] professional look and feel to it. And [09:35] this is pretty crazy so far. So what I'm [09:39] going to do here now that we've got this [09:41] library and dashboard page is I'm just [09:43] going to prompt a couple of changes to [09:45] update our design system and update the [09:47] styles for this app here. I'm going to [09:50] say let's change the primary colors here [09:52] from purple to something that's a bit [09:55] more neutral and warm and friendlier and [09:58] feels a bit more like editorial. And can [10:01] you also pick a complimentary tertiary [10:03] color to go with that as well? Make sure [10:06] you update the design system and the [10:08] desktop designs that we have for this [10:10] app here. And we're going to send that [10:11] off to Google Stitch. Get it to update [10:13] this design system and then get it up to [10:15] update the designs for these screens [10:16] here as well. All right. So, Google [10:18] Stitch has now updated our um basically [10:22] called another it's created another [10:23] design system here called Obsidian [10:25] Script Editorial and this is looking way [10:28] better. So, we've removed that kind of [10:29] purple element of the of the designs and [10:32] we've got much better designs here for [10:34] these pages. Now, it has called the app [10:37] Obsidian Script which I don't think it [10:39] needs to do but I really like the [10:41] layouts that are applied here. There are [10:42] some elements here that I don't want to [10:45] I want to remove. So we can remove like [10:47] this quote section here and we can [10:49] remove this recent drafts here and we [10:51] can remove like some of the but overall [10:54] I like the direction of this a lot. So I [10:57] want to now apply this design to my app [10:59] using claw code. So how do I actually do [11:02] that? So first there are a couple of [11:03] ways that we can do that. We can either [11:05] do this by just going into the design [11:07] here and we can get this Obsidian script [11:09] editorial design system. We can click [11:11] through to that. Go to design.mmd. Copy [11:14] that to our clipboard. And then go over [11:16] to our wherever you're building your app [11:18] here. Go to the files. I'm just going to [11:20] create a new file here and call this [11:22] design.md. And in this designd file, I'm [11:26] going to paste all of this design system [11:28] information here. And then save that. So [11:30] that design.md file is now saved in our [11:32] project here. Now that I've got that, we [11:34] can go into claude code. So I'm just [11:36] going to launch a new terminal here. And [11:38] if you're interested in what app I'm [11:39] using to build my apps with here, it's [11:41] called Orchestrate and it's just an app [11:43] that I've built myself to match my way [11:45] of working and you can sign up to the [11:46] weight list over at orchestrate.build if [11:48] you're interested. Um, now we've got [11:50] Claude Code up and running. I'm going to [11:52] just ask it to follow the sty redesign [11:55] the app following the styles as [11:57] documented in design. I'm going to [11:59] switch it into plan mode for this. So, [12:01] first we're going to see like how well [12:02] does Claude Code follow design without [12:05] using the Google Stitch MCP. Create a [12:08] plan to redesign the the entire UI for [12:12] this app using the exact instructions [12:15] from design.md. [12:17] We're going to send this off to claude [12:19] code. And now we're going to get Claude [12:20] Code to create a plan to redesign our [12:23] app following design.md. Whilst we're [12:25] doing that, I'm going to start a new [12:27] terminal here, and I'm going to show you [12:28] how to set up the Google Stitch MCP. So, [12:31] we're going to run Claude Code here. And [12:33] if you go to this documentation on the [12:34] Google Stitch website, if you just [12:36] search for Google Stitch MCP setup, [12:38] you're going to get a link to this exact [12:39] page. And if you scroll all the way down [12:41] here, you're going to get an install [12:42] command for basically any platform that [12:44] you're using. So, you can do it in [12:46] cursor anti-gravity, VS Code. We've got [12:48] our claw code instruction here. We're [12:50] also going to have to get an API key. [12:51] So, we're going to need to go into [12:52] Google Stitch, go into settings, and [12:55] then scroll to the API section and [12:57] create an API key. So, let's go and [12:59] create our API key in Google Stitch. So, [13:01] we just go to Stitch settings here. Go [13:03] down to API key and click create key. [13:06] And now we have our API key here, which [13:09] we can copy to our clipboard. Now that [13:11] we've done that, I'm going to go back to [13:12] the MCP setup documents. I'm going to [13:15] paste this command into claude code to [13:17] set up the Google Stitch MCP. We also [13:20] need to add in our our Google API key in [13:23] here. So, we're going to copy and paste [13:25] that API key in. Now, once we've got [13:27] clawed code up and running, let's go [13:28] back to orchestrate. I'm going to paste [13:30] this command. And then, we're going to [13:32] go back here and replace this with our [13:35] API key. So, let's go and copy our API [13:38] key. Let's copy that. We're going to go [13:39] back to Claude Code. We're going to [13:41] paste this in here. And then I'm just [13:43] going to submit that to Claude Code. [13:45] Now, really, you just need a fresh [13:47] terminal to do this. or what you can [13:49] just send it to claude code like this [13:51] and it's going to be able to do it for [13:52] us. So this is actually a terminal [13:53] command and claude code is just going to [13:55] set this up for us. I know it's not 100% [13:57] right to use the terminal command like [13:58] in claude code actually you can just run [14:00] it straight in the terminal but now the [14:02] stitch MCP server has been added to your [14:03] user level cla claude code config and if [14:06] you start a new session of claude code [14:08] so once you've added the MCP server you [14:10] need to do a you need you'll need to [14:11] start a new claude code session you can [14:13] see that I've got stitch connected here [14:15] and I can use the stitch MCP claude code [14:19] so claw code has now created a plan to [14:21] basically update the app based on this [14:24] designd file It's got the digital Italia [14:27] UA UI redesign here and we've removed a [14:30] bunch of colors. We've changed a bunch [14:32] of colors. We've got a few phases for [14:35] this design. So like phase three is the [14:37] sidebar layout. Phase four is the [14:38] feature components. Phase phase five is [14:41] page level typography. So I would say to [14:43] read through this in a bit more detail, [14:44] but I'm just going to trust Claude code [14:46] on this one. And we're just going to say [14:47] yes, clear context and auto accept [14:49] edits. And then see how well Claude Code [14:51] does interpreting this design file. And [14:54] what I'm trying to do here is basically [14:55] to see how comprehensive is this design. [14:58] MD file and how well is it how good is [15:00] it at replicating the design that you [15:03] actually have in Stitch by by just using [15:04] that markdown reference file. So let's [15:07] let Claw Code run on this and then we're [15:08] going to come back once it's finished [15:10] the redesign. All right. So, Claw Code [15:11] has finished redesigning our app, going [15:13] through these six phases based on the [15:16] designd file that we imported from [15:19] Google Stitch, which is this um design [15:21] system strategy that we just copied over [15:22] from Google Stitch. I'm going to go over [15:24] to the browser now and see what it looks [15:26] like. So, let's go over here, refresh [15:28] this app, and see what we've got. So, [15:31] this is definitely like a lot better, [15:32] but it's not following the same style. [15:35] It's got like some of the it's got like [15:36] the right fonts in here, but they're not [15:38] done in the exact right way. And this is [15:41] compared to the designs that we have in [15:44] Google Stitch here. So, what I'm going [15:46] to do now is we're just gonna say we're [15:48] just going to use the Google Stitch MCP [15:50] to actually copy the layout of this page [15:53] um specifically in this kind of format [15:56] here. So, let's go back over to Claude [15:59] Code. So, I'm just going to do for/clear [16:02] in Claude Code here to start a new [16:03] session. and we're going to say, let's [16:05] update the client dashboard screen to [16:08] match the layout of the editorial [16:10] dashboard desktop screen in Google [16:13] Stitch using the Stitch MCP. We're going [16:16] to send that over to Claude Code and [16:18] that is going to use the Stitch MCP to [16:21] get the design from the frame on Google [16:23] Stitch. So, we're going to say yes to [16:25] list our projects on Google Stitch. This [16:27] is going to find the right project here [16:29] and then it's going to fetch the details [16:31] of this screen. It's looking at the HTML [16:33] code and a screenshot to understand this [16:35] design. So, what it's just doing is it's [16:37] looking at the source code from what [16:39] Google Stitch has pulled together and [16:41] Google Stitch has built all of these [16:42] designs in HTML and CSS. So, Claude Code [16:46] when it reads this design can understand [16:48] the layout and how it kind of comes [16:50] together. So, let's go back to Claude [16:52] Code here and see what it's going to do. [16:54] One thing that it's also doing here as [16:55] well is it's seeing that there is a [16:57] recent draft section on this design and [16:59] it's actually figuring out how to do [17:01] this with the database to actually pull [17:04] any recent drafts through into this [17:06] section and build that feature for us. [17:08] So you want to be careful between the [17:10] features that you have in Google Stitch [17:12] and what you're actually building in [17:14] Claude Code or any AI coding tool to [17:16] make sure that what you're going to get [17:17] in your app is going to match what [17:19] you've got in Google Stitch. And so make [17:20] sure if you've got any extra features [17:22] that you haven't built in Google Stitch [17:24] that you make sure to explicitly not [17:26] include those or update the designs in [17:28] Google Stitch to match your app's [17:30] features. It's just something to be [17:31] aware of here. So Claude Code has [17:33] updated our our app based on the design [17:36] in Google Stitch. So for reference, [17:38] let's have a look at what we've got in [17:40] Google Stitch here. So this is the [17:41] screen that we've got in Google Stitch. [17:43] I'm going to go back to our app. So [17:45] let's go back to our app in the browser [17:46] and have a look what we've got. So, this [17:48] is actually pretty good. This has [17:51] expanded it because this is on a wider [17:52] screen. One thing that I'm noticing here [17:55] is I don't think it's pulled the correct [17:57] font through here. And so, it's using a [17:59] serif font, but it's not using the same [18:01] fonts that we outlined in um in Google [18:04] Stitch. And the styling, it doesn't [18:06] match 100% and the colors are not [18:08] matching 100% here. But I do think this [18:11] is giving us a great foundation to work [18:13] from. So, we can go into any of these [18:15] content types here into the blog [18:17] article. Uh, we've got our new form [18:19] here, which is looking all right. We [18:21] still want to make some design changes [18:22] to this, but using this design file to [18:26] kind of document our design system and [18:28] use this to kind of guide our AI coding [18:31] tool into actually designing an app that [18:33] looks like the one that we're designing [18:35] in Google Stitch. Still feels like a [18:38] super powerful workflow here. And it's [18:40] even it's done the layouts of these [18:42] pretty nicely. And it's got these little [18:44] kind of hover effects here as well. [18:46] They'll work really well that is added [18:48] in that we didn't have in Google Stitch. [18:50] And from this, we can go into the [18:52] library page here and redesign that [18:54] library page based on the way that the [18:56] library page looks in Google Stitch as [18:58] well. So that is how you can use Google [19:01] Stitch to create design systems that you [19:03] can replicate in code, apply to your [19:06] existing app projects so that you can [19:08] take your apps from AI slot to apps that [19:11] actually look like real products that [19:12] people would want to use. And yes, [19:14] design.md is not perfect, but it's [19:17] giving us a starting point for a design [19:19] paradigm for how to design in code using [19:22] a file that stores all of our design [19:24] system details in and allows us to [19:26] maintain consistency throughout our [19:29] project as well. And using this, we can [19:31] also get claude code to update our [19:33] design.md files as well as we go with [19:36] any new rules or new components that we [19:38] want to bring in here. So is the Google [19:40] stitch new design. ND paradigm for UI [19:43] design in apps and websites. Perfect? [19:46] Absolutely not. It's not 100% there yet. [19:49] But what I love about design.nd ND is [19:51] that this is based on a pattern that a [19:53] lot of people were already doing by [19:55] documenting their design systems and [19:57] their design rules in markdown files, [19:59] giving you a canvas to explore a lot of [20:02] different design directions on and also [20:04] having an MCP server to connect to [20:06] Claude code or any coding agent so that [20:09] you can use design references directly [20:11] from Google Stitch in your actual app [20:13] project just changes the way that a lot [20:15] of designers will start to approach [20:17] designing websites and apps. And it also [20:20] gives a lot of non-design people a [20:22] really easy way, a playground to sort of [20:25] explore different designs, raise the [20:27] floor of what the lowest kind of design [20:29] quality is, and helps so many people [20:31] avoid just AI slop looking designs. Now, [20:34] you could go way deeper than I went in [20:36] this video. This is just scratching the [20:38] surface of what the new version of [20:39] Google Stitch can do. I previously [20:41] didn't really rate Google Stitch, but I [20:43] actually really like the direction that [20:44] they're taking with design. MD and the [20:47] way that they're approaching design [20:48] systems in with AI agents and so this is [20:50] definitely one that I would recommend [20:52] trying out if you are building an app [20:53] and you want to elevate that design of [20:55] your app to try exploring different [20:56] visual directions with Google Stitch and [20:58] then applying that design MD direction [21:01] to your actual codebase. Now, if you are [21:03] building apps with AI or you want to [21:05] learn how to build apps with AI and [21:07] actually make them look good, as well as [21:08] how to make money with them, I've got a [21:10] community helping people do that over at [21:11] school.com/hairapps. [21:13] There's over 250 people in there [21:15] building apps, launching apps, and [21:17] making money with apps that they've [21:18] designed themselves as well. So, head [21:19] over there to check it out if you're [21:21] interested. If you enjoyed the video, [21:22] don't forget to like and subscribe. [21:23] Thank you for watching and I will see [21:24] you next  📄 **Full text:** ![[Full Document Contents/Articles/Google Stitch + Claude Code = Insane App Design|Google Stitch + Claude Code = Insane App Design, YouTube]] ## Highlights - building your app, it's creating a design system for you in Google Stitch. And then using the Google Stitch MCP and the Google Stitch skills, you can use that in clawed code to maintain consistent design styles throughout your entire application or website. And this one is huge. So, with that all covered, let's actually get into Stitch and start building something. So, for the purposes of this video, I've been building an app for someone, which is basically an app for a copywriting agency that's going to help them create different social ([View Highlight](https://read.readwise.io/read/01knwvr2qw66mbhezdx8fw2hw3)) - Tags: 👻 ai highlighted - So, we've got our two screenshots of the two pages in this app. And then I'm basically going to use these screenshots to create designs in Stitch to kind of improve the design style of this. And the goal with this is to show you how you can create incredible designs just from screenshots using Google Stitch or from a PRD. Once we've done that, we're going to generate our design system and we're going to tweak the design of it maybe. And then after that, we're going to pull that design style into this actual app using the Google Stitch MCP to read the design. MD file and then ([View Highlight](https://read.readwise.io/read/01knwvr2rbww5q41ka89tex01f)) - Tags: 👻 ai highlighted - features. It's just something to be aware of here. So Claude Code has updated our our app based on the design in Google Stitch. So for reference, let's have a look at what we've got in Google Stitch here. So this is the screen that we've got in Google Stitch. I'm going to go back to our app. So let's go back to our app in the browser and have a look what we've got. So, this is actually pretty good. This has expanded it because this is on a wider screen. One thing that I'm noticing here is I don't think it's pulled the correct font through here. And so, it's using a serif font, but it's not using the same ([View Highlight](https://read.readwise.io/read/01knwvr2trn5yvw49cwdanyw6t)) - Tags: 👻 ai highlighted - tool into actually designing an app that looks like the one that we're designing in Google Stitch. Still feels like a super powerful workflow here. And it's even it's done the layouts of these pretty nicely. And it's got these little kind of hover effects here as well. They'll work really well that is added in that we didn't have in Google Stitch. And from this, we can go into the library page here and redesign that library page based on the way that the library page looks in Google Stitch as well. So that is how you can use Google ([View Highlight](https://read.readwise.io/read/01knwvr2zrzcp5mjfntahvd47q)) - Tags: 👻 ai highlighted