This Is Insane... This Just Ended The Google Stitch VS Claude Design Debate
AAI LABS
컴퓨터/소프트웨어창업/스타트업사진/예술AI/미래기술
Transcript
00:00:00Gemini has been the top model when it comes to design despite not being on par in other areas,
00:00:05especially with its design tool Stitch which we've used multiple times in our workflows.
00:00:09This got even better when Stitch released its 2.0 update with multiple new features,
00:00:14pulling it even further ahead. But Anthropic also stepped up and entered the design space with the
00:00:19release of Opus 4.7 and Claude design which made such an impact that people started calling it
00:00:24the end of Figma. But the real question is which one is actually better? So in order to settle this,
00:00:30we're putting them to the test across multiple categories and by the end, you'll know which
00:00:34one earns the spot in your workflow. Both Claude design and Google Stitch have a lot of features
00:00:39that set them apart from each other. Claude design was released alongside Opus 4.7 and it rapidly
00:00:45gained popularity for being the Figma killer because of its interactive features. The model
00:00:49itself got really better at design and along with their design tool, their designs improved a lot.
00:00:54Google Stitch on the other hand has been around for a while and it wasn't that good until Google
00:00:58released Gemini 3, the model that's insanely better at design as compared to all other models. So
00:01:04combined with Stitch, the designs improved significantly. Now let's look at where each
00:01:08one actually pulls ahead. Claude design has this feature where you can create a presentation using
00:01:13its features and write speaker notes inside it as well. But Stitch doesn't have anything like this
00:01:17because Stitch is UI only and doesn't provide any feature for other designs besides mobile and web
00:01:23interfaces. In Claude design you can also reference your other projects that you want the design to
00:01:28follow by connecting your GitHub repo which basically lets Claude import the design styles
00:01:32from it and create the next designs on top of it. Stitch handles this a bit differently. It uses
00:01:37design systems for the same task where you can copy the design system from other websites that are
00:01:42hosted just by providing the link to it in Stitch and from there it imports the exact style and
00:01:46creates a system that gets used in later designs. When it comes to making changes, Claude design lets
00:01:51you reprompt but you can also click directly on the area where you want changes and it reflects
00:01:56on your design. You can just comment directly on anything that you want differently and then it
00:02:00starts applying the changes directly on it. You can pile up the comments and send them to Claude
00:02:04altogether. Stitch goes the other way here. You can't make changes directly on it except for changing
00:02:09text. So if you want any change like color or font size you have to add a comment on the area you
00:02:14select or annotate it and then send the comment to Gemini for it to incorporate your changes.
00:02:19Voice input is another split. Claude design lets you use your voice to type in the prompt instead
00:02:24of typing. But this is a point where Stitch wins because the voice canvas feature in Stitch is
00:02:28basically a live conversation you have with the model where you tell it all about the design you
00:02:33want to create and it asks questions relating to the design and creates the design for you,
00:02:37all happening conversationally. Stitch also has a live preview feature in a separate pane where you
00:02:42can see how your design looks on desktop, mobile and tablet and interact with the design directly.
00:02:47Claude design doesn't have this preview feature separately. Instead it displays the UI on the
00:02:52same pane where you can interact with elements directly instead of going to another preview
00:02:57screen but you cannot check it for responsiveness like you can with Google Stitch. Claude design is
00:03:01also made for working with teams so it lets you share a project with multiple permissions like
00:03:06editing and commenting permissions separately which Stitch does not have. In Stitch you can just share
00:03:11the project and let everyone work on it instead of having separate permissions like Claude design.
00:03:15So despite the fact that Stitch is a much more mature project and Claude design is a project
00:03:20that was just released recently we would give points to Claude design on the features. Claude
00:03:24design is a newer product that is only available in Claude's Pro, Max, Team and Enterprise plans.
00:03:30Stitch on the other hand is available for free regardless of the plan and it just uses a credit
00:03:35system for keeping track of usage. So in terms of how usable they are Stitch offers way more credits.
00:03:40It allows 400 daily design credits and 15 daily redesign credits so you get a lot of credits for
00:03:46use even in one day and the monthly credits are even more. Normally one simple design costs three
00:03:51credits and can vary with complexity as well as the number of generations so you'll be able to get a lot
00:03:56of designs out of it. Claude design has separate limits that span a week. This limit doesn't
00:04:00contribute to your other Claude code limits so you can freely use other Claude features even if the
00:04:05design limits end. But as we talked about in the previous video this limit is practically unusable
00:04:10because it doesn't let you experiment freely and will run out before you can use it for any
00:04:15substantial building and this is even worse if you are on the Pro plan because that just lets you
00:04:20experiment with a few designs before it runs out. So if you actually want to get something out of
00:04:24Claude design you would need to switch to their Max plans. So comparing the costs of them both Stitch is
00:04:29a clear winner by a far margin because at least it lets you experiment with designs which Claude
00:04:34design doesn't. We tested both tools on the same prompt with a brief about the website style and
00:04:39the sections we wanted. Claude design created the to-do's like Claude code usually does and started
00:04:44working. And while Claude design was taking its time we gave the exact same prompt to Google Stitch.
00:04:49The first thing Stitch did was create the design system visualizing everything from colors to
00:04:54typography icons and buttons. Even before Claude design finished Stitch was done. It built a landing
00:04:59page using the exact same style from its design system with complete balance between the main and
00:05:04accent colors. Claude design took a lot more time and after it finished it started working through
00:05:09verification steps. Each part of Claude design's work was interactive unlike Stitch's static page.
00:05:15On its first run it offered us the option to decide between the colors for accents and the main theme
00:05:20so we could make tiny changes ourselves instead of reprompting. On a design quality test we would
00:05:25give Google Stitch the points because its design was way better than the others. Stitch creatively
00:05:30used the color palette to match the style and fit the app's mood while Claude design's choice
00:05:34felt generic and lacked depth. Also in terms of speed Stitch also wins here because Claude
00:05:39design takes way too long on each design. Whenever Claude design needs to add images it creates SVGs
00:05:45and integrates them into the design. Unless you provide assets of your own it relies on SVG
00:05:50generation entirely. Google on the other hand has Nano Banana, its own image generation model. So
00:05:55Stitch integrates it directly into the product and even if you don't tell it explicitly it uses image
00:06:00generation for all the sections in the design and the results get much better. No matter how
00:06:05high quality SVGs can get they can't compete with an image model. So in this situation Google Stitch
00:06:10is a clear winner. Stitch isn't really known for animations because its sole focus is on the design
00:06:16but we still tried to see how it would handle them. It did try to add some but the animations weren't
00:06:21visible directly and could only be previewed in a separate tab and it only generated the scroll
00:06:26reveal on one section of the page. But when we gave the same task to Claude design it added multiple
00:06:32animations like a marquee below the hero section. The scroll reveal was also added but it was way
00:06:37more coordinated and properly applied to each component not just the hero section. Claude design
00:06:43is way better at animations than Stitch because it uses popular libraries like shaders and is able
00:06:48to create much more interactive animations that change behavior with mouse movement and clicks.
00:06:54So in terms of animations Claude design is a clear winner. Also if you are enjoying our content
00:06:59consider pressing the hype button because it helps us create more content like this and reach out to
00:07:04more people. To test how well each one understood the app and handled changes we asked them to create
00:07:09sign up and login pages on top of the existing app. Stitch completed the design first, used the
00:07:14same design system for each page and implemented the same header and footer on each one. We could
00:07:19view how they flowed with the prototype feature and see how each button connected to the other.
00:07:24Claude design's implementation fit the app's idea more and it understood what was needed
00:07:28better. It creatively built the login page and on the sign up page it even went a step ahead
00:07:33and implemented multiple styles of accounts. We also wanted to see how well each one incorporated
00:07:38changes. In Claude design we just added comments and sent them together and it started implementing
00:07:44them. On Stitch we had to annotate the areas where we wanted changes but the change wasn't exactly
00:07:49what we wanted. It just added a footer in the wrong place right after the quotes which was weird.
00:07:54Overall iterating with Stitch isn't friendly because for each change requested it creates a new screen
00:07:59and at one point the screens become too cluttered. Claude design is a much better experience because
00:08:04changes reflect directly on the design and since it understands the app it properly implements them
00:08:09without straying from the style. So in terms of iterating on the design, Claude design is clearly
00:08:14the better way. Each tool has its own design system. For Claude design a design system identifies your
00:08:20brand because this tool is meant for teams working on brand kits. You can add a description of it
00:08:25along with fonts, logos, assets and everything else and it creates a complete system that represents
00:08:30your brand style. For Stitch the design system is a file that doesn't identify a brand but instead
00:08:36represents a particular design. This file isn't limited to Stitch. You can export it and use it in
00:08:41any agent and it will be understood and implemented directly. As we mentioned previously you can import
00:08:46design systems from other websites or create your own. Stitch has open sourced the design.md file
00:08:52which contains npm commands for installation and proper formatting. Each design system serves a
00:08:57different purpose but we prefer Google's because it allows cross-platform switching easily and doesn't
00:09:02lock you into Stitch. Now that we have tested the designs it is time to talk about how the handoff
00:09:07from design to code looks for each. As we previously mentioned Claude design offers more export options
00:09:13with permission control. It lets you export as pdf, slides and even export to canvas so you can
00:09:18further continue your designs there. But the handoff pattern we mostly use is the handoff to Claude code
00:09:23because that's where we develop our apps the most. So with a copy of a single prompt and pasting that
00:09:28inside Claude code it will copy the design and implement it in the app. Google Stitch on the other
00:09:33hand has way better handoff patterns. Stitch has an MCP through which you can connect it to your
00:09:39coding agent and let it send prompts to Stitch to create designs and pull designs from it to implement
00:09:44them in the app. Claude design doesn't have any MCP integration so we like Stitch's MCP because it
00:09:49works the other way around meaning coding agents can prompt it in Stitch tailored language and we
00:09:53don't have to worry about proper prompting and still get the designs we want. Stitch also lets you
00:09:58export as zip code but you have other options as well. You can either export it to Google AI studio
00:10:04where you can build your app further using the studio's resources and Firebase integrated directly
00:10:09in the app or you could directly export it to Figma so you can work with other people there. We use the
00:10:14MCP export the most because with this integration we don't have to worry about the handoff and coding
00:10:19agents handle it themselves easily. It also lets you export as a PRD which you can hand off to other
00:10:25people or coding agents letting them implement the app easily without any issue. So in terms of handoff
00:10:30style Stitch is a clear winner. That brings us to the end of this video. If you'd like to support the
00:10:35channel and help us keep making videos like this you can do so by using the super thanks button below.
00:10:40As always, thank you for watching and I'll see you in the next one.