00:00:00AI design has been getting better and better with each new tool release and model update,
00:00:04but good design doesn't come from relying on a single tool and hoping your app looks great.
00:00:09It's always a combination of tools and resources that make designs better,
00:00:12but more importantly, it's about using the right tool for the right purpose.
00:00:16Google's AI design tool Stitch just got a really cool upgrade that made UI designing much easier.
00:00:21And Vercel also recently released something that has surpassed Claude's Chrome extension
00:00:26and has now become my go-to tool for browser testing.
00:00:29We've got a lot to talk about today because I wasn't expecting this
00:00:32combination to deliver such a solid design.
00:00:34Google Stitch is now available as an MCP for connecting the AI agent,
00:00:39enabling it to create and manage projects, as well as create designs using the agent.
00:00:43With this update, I didn't have to give tailored prompts to Stitch myself and let Claude do that
00:00:48for me. It offers multiple features like project management and the ability to create new projects
00:00:53and retrieve all of your active projects. It is able to manage projects by using list screens
00:00:57and by getting projects and screens. It also allows the agent to create new designs from a text prompt.
00:01:02The installation process is explained step by step in their documentation.
00:01:06It requires installing the Google Cloud SDK using curl, but since I'm using a Mac,
00:01:11I installed it using brew and let it download the Google Cloud CLI.
00:01:14You need to log in twice, once as a user and once as an application, because you need to
00:01:19connect it to a project inside Google Cloud to enable the Stitch API inside that project,
00:01:24as it uses that project's resources for creating designs.
00:01:27Once we go through the entire process, you can connect Stitch to any editor.
00:01:31Since I used Claude code, I set it up inside it and all the tools were available for use.
00:01:35Now someone has simplified this entire lengthy setup process for us and created a Stitch MCP,
00:01:41which handles the whole process. From installing Google Cloud to project setup,
00:01:45it handles it all by itself. But this is unofficial. It's just an independent experimental tool,
00:01:50though it works just as well for now. No matter what we are building,
00:01:54planning before implementation is essential. I was working on a mock technical interview app
00:01:59that doesn't just cover technical interviews. It also covers other types of interviews,
00:02:03all aimed at jobs in the tech industry. Throughout the whole video, I found numerous problems in the
00:02:08way that the Stitch MCP operates and how it should be better utilized for my design process.
00:02:13I've put all of those rules inside a Claude.md file along with the source code for this app on
00:02:18AI Labs Pro. For those who don't know, it is our recently launched community where we put together
00:02:23all our resources from this video and all our previous videos in one place, be it prompts,
00:02:28our reusable commands, skills we create for our projects and much more. If you've found value in
00:02:33what we do and want to support the channel, this is the best way to do it. Links in the description.
00:02:38I prefer to plan my apps using Claude Code's plan mode because it iterates on every aspect of the
00:02:43generic idea I give it and writes a detailed document but you can plan with the IDE of your
00:02:48choice. I gave my app idea to Claude Code in planning mode and asked it to create a UI guide
00:02:53for it, making sure the UI didn't look like the generic AI designs that it usually produces.
00:02:58Even though it was a really time consuming process, I went through the entire planning process. It is
00:03:03highly important to read through the plan thoroughly because I even had to refine the plan to my liking
00:03:09by making lots of changes to the plan. I kept refining the plan until I was completely satisfied
00:03:14and in the end, I had a plan exactly how I wanted it. Once the design plan was finalized with Claude's
00:03:19planning mode, it was time to get that plan implemented. Honestly, I prefer Gemini's design
00:03:24capabilities over Claude's models. So I asked Claude to take the plan it had just generated,
00:03:29create an exact design by starting a new project using the Stitch MCP. It used the MCP tool to
00:03:35create a new project and then started generating the sections. It identified the project using a
00:03:40project ID and sent a detailed prompt to Stitch, which received the prompt and started generating
00:03:45the screens. It used Gemini 3 flash to generate the first section. One thing I didn't like was
00:03:50that it sent prompts for all the sections of the landing page separately instead of creating one
00:03:55long design the way web designs are usually done. This might pose trouble when we have to implement
00:04:00them together in one app. So I asked Claude to create one long page design instead of individual
00:04:05components. Claude then produced a really detailed prompt which was received by Stitch and used to
00:04:10generate the entire landing page while keeping all the ideas from the section by section approach
00:04:15intact. In the design, I really liked how it used references like comments and terminal commands to
00:04:20make it feel closer to developers and used references like comments and terminal commands
00:04:25to make it feel closer to developers. I used Stitch's preview feature to check how the UI
00:04:30looked across different platforms and it had implemented smooth hover effects. The design
00:04:34was responsive and worked well on both mobile and desktop. Once I was satisfied with the design that
00:04:40Stitch generated, I wanted to move it into my Next.js project in which I was building the entire app
00:04:45around using Claude code. I asked Claude to use the Stitch MCP to get the code for the complete
00:04:51landing page design and implement it in the newly initialized Next.js project I was working on.
00:04:56It used the get screen tool to fetch the screens. This tool returned downloadable links for code,
00:05:01so Claude used curl commands on those links to extract the code. Once it had the HTML,
00:05:06it became easy to implement it in the existing Next.js project. It started integrating the design
00:05:11into the app but it only made changes to the main page .tsx file, dumping it all in one file and not
00:05:17following a proper component structure as is the recommended standard for React-based applications.
00:05:22For now, I ran the dev server to see how the implemented UI looked. The implemented design
00:05:26was almost identical to what Stitch generated aside from the hero section's text placement.
00:05:31It had implemented all the hover effects, added animations for bento grids and parallax scrolling
00:05:36in the background. To fix the dump of code into a single file, I asked Claude to use a proper
00:05:41component structure for better modularity. It refactored the code and reorganized it into a
00:05:46clean and well-structured set of UI components and pages, making it easier to navigate. With the help
00:05:51of Claude Code and Stitch, I created a complete application with a theme that incorporated the developer
00:05:57vibe with terminal aesthetic. However, it still had several UI issues. For example, the code panel
00:06:02should be editable because that's where users will type code during their technical interview sessions.
00:06:08Also, the question should appear at the top as its current placement creates a poor UX for those using
00:06:14the app. To test the application, I used Versil's Agent Browser. This is a CLI tool designed for AI
00:06:19agents built on Rust and Node.js, meaning it's significantly faster than traditional browser
00:06:24automation tools. Installation is simple, just run the install command and it installs globally
00:06:29across your system. It is limited to Chromium-based browsers for now and isn't available in Firefox or
00:06:34Safari. Agent Browser offers better features than Claude's Chrome extension, Playwright, Puppeteer,
00:06:40or other dev tools. This is because the Chrome extension relies on running a full browser,
00:06:44taking screenshots, visually mapping pixels, and then navigating around on the UI. In contrast,
00:06:50Agent Browser is a CLI tool that runs as bash commands and works with snapshots instead of
00:06:55screenshots. Essentially, a snapshot is an accessibility tree of the entire page tagged
00:07:00with selectors to identify individual components. The agent uses these selectors to navigate the
00:07:05page efficiently. It doesn't share the session with your existing browser and runs in a separate
00:07:10browser, so it won't be able to take actions that require your active sessions, unlike Claude's
00:07:14extension, which runs inside your own browser and can perform actions on your behalf. If you want to
00:07:19see the available commands, you can check out the GitHub repo, which contains a detailed list of all
00:07:24core commands. These show how to navigate the UI, use selectors, simulate mouse control, manage
00:07:30cookies and storage, and even monitor network activity. For my app, I added a Claude.md file
00:07:35and instructed it to use the agent browser tools for all kinds of testing. I also told it to use
00:07:40the help command if it didn't know how to use any agent browser command. You can get these rules
00:07:45along with the complete workflow guidelines in AI Labs Pro as well. Even though this tool is a headless
00:07:50browser automation tool, we can also run it in headed mode by enabling the headed option, which
00:07:55shows the browser window so we can see it working. I asked Claude to use the browser in headed mode
00:07:59to test the application UI. It first used the help command to see all the available commands and then
00:08:05it opened the browser. It used an approach similar to what we suggested with Claude browser use,
00:08:09that is taking a full page snapshot instead of section by section screenshots like Claude's
00:08:14Chrome extension does, which significantly sped up the testing process while maintaining the same
00:08:19level of accuracy. The agent performed many actions, navigating through the entire app and testing
00:08:24multiple features by moving across different UIs and checking the visual layout. It completed the
00:08:29entire testing process in just four minutes, whereas other browser automation tools would have taken
00:08:34much longer because it relies on accessibility trees, not the screenshot approach. It also
00:08:39identified that the code editor needed to be editable and implemented that fix right away.
00:08:43It then tested it in the browser by taking a snapshot, finding the editor selector and using
00:08:48the agent browser's clicking and typing functions to edit a part of the code to see if it was
00:08:53implemented correctly. That brings us to the end of this video. If you'd like to support the channel
00:08:57and help us keep making videos like this, you can do so by joining AI Labs Pro. As always,
00:09:02thank you for watching and I'll see you in the next one.