# This Just Changed How I Design

Source: https://www.youtube.com/watch?v=VNx9Gy5pHZI
Recap page: https://rapidrecap.app/video/VNx9Gy5pHZI
Generated: 2026-01-25T14:33:09.755+00:00

---
## Quick Overview

The video demonstrates a powerful AI-driven design workflow using Claude and the Stitch MCP tool to create a complex, developer-focused landing page for a mock interview application called InterviewOS, resulting in a fully implemented, modular Next.js application adhering to detailed design specifications.

**Key Points:**
- The workflow successfully used Claude, powered by Gemini 3 and integrated with Stitch MCP, to generate a complete, cohesive landing page design from a single prompt.
- The design concept, "Terminal Meets the Future," incorporated developer-centric aesthetics like dark mode, syntax-highlighting colors (Terminal Green #00FF9D and Electric Cyan #00D4FF), and terminal/IDE-inspired UI elements.
- Stitch MCP provided tools for project creation, screen generation from text, and fetching HTML output, which was then integrated into a Next.js project structure using standard development practices.
- The AI agent also demonstrated the use of the `agent-browser` CLI for automated testing, including taking full-page screenshots and interacting with UI elements like clicking buttons.
- A specific issue regarding the code editor being static was identified by Claude, fixed by replacing static `<pre>` tags with an editable `<textarea>`, and verified via browser testing.
- The final implementation included 7 distinct sections (Hero, Features, How It Works, Testimonials, Pricing, CTA, Footer) with complex features like asymmetric Bento grids and scroll-driven animations.

![Screenshot at 00:11: The key moment showing the combination of design tools \(Figma, Claude, Gemini 3, Stitch, MCPs\) merging into 'Good Design' illustrates the core concept of using multiple AI resources together for superior design output.](https://ss.rapidrecap.app/screens/VNx9Gy5pHZI/00-00-11.jpg)

**Context:** This video showcases an advanced workflow where a large language model (Claude, leveraging Gemini 3) acts as an AI developer agent, utilizing the Stitch Model Context Protocol (MCP) to programmatically generate and implement a complex, highly customized landing page for a fictional product named InterviewOS. The process involves planning, generating design specifications, creating the project structure, implementing the design using Stitch, and finally, testing the resulting application using another AI tool, `agent-browser`.

## Detailed Analysis

The video details an advanced AI-assisted design and implementation process. It starts by showcasing the branding for Lois Jeans' 'Call of the Wild' collection, then transitions to introducing the integration of various AI tools: Figma, Claude, Gemini 3, MCPs, Stitch, and UI Kits, which combine to create 'Good Design' (00:10). The core of the demonstration revolves around developing a landing page for 'InterviewOS,' an AI-powered mock interview application, using Claude in plan mode and the Stitch MCP tool. Claude first developed a comprehensive UI design guide, specifying a 'Terminal Meets the Future' concept with dark mode, terminal green accents (#00FF9D), and developer-centric elements (03:00). Using Stitch's `create_project` and `generate_screen_from_text` tools, Claude generated all seven sections of the landing page, including a Hero section mimicking a terminal boot sequence (03:37). The agent proactively refactored the generated HTML into a modular Next.js component structure, moving content from `app/page.tsx` into dedicated files within `components/landing` (05:44). Finally, the agent used the `agent-browser` CLI to test the output, successfully navigating the page, verifying the code editor was editable by clicking and typing into the generated `<textarea>` element (08:47), and confirming theme consistency across all sections. The entire process, from planning to final testing, was managed by the AI agent in rapid succession.

### AI Tool Integration

- Figma
- Claude
- Gemini 3
- Stitch
- MCPs
- UI Kits
- Combined into 'Good Design' (00:10)

### Stitch MCP Setup

- Requires Google Cloud SDK installation and double authentication ('You' as user, 'Application' as client) (01:07)

### Design Planning (InterviewOS)

- Concept is 'Terminal Meets the Future'; includes dark mode, Terminal Green accent (#00FF9D), and terminal aesthetic (02:59)

### Screen Generation via Stitch

- Used `stitch_generate_screen_from_text` with Project ID to build 7 sections individually, then refined to one cohesive page (03:31, 04:03)

### Code Implementation & Refactoring

- HTML output fetched via Stitch was implemented in a Next.js project; code structure refactored into modular components for better organization (05:05, 05:44)

### Automated Testing with agent-browser

- Used `agent-browser` to navigate, take full-page screenshots, and confirm the code editor's interactivity by clicking and typing into the `<textarea>` element (07:57, 08:47)

![Screenshot at 00:00: The initial splash screen for the Lois Jeans 'Call of the Wild' AW '25 collection, setting a high production value context.](https://ss.rapidrecap.app/screens/VNx9Gy5pHZI/00-00-00.jpg)
![Screenshot at 00:10: Visual representation of the tools \(Figma, Claude, Gemini 3, Stitch, MCPs, UI Kits\) combining to produce 'Good Design'.](https://ss.rapidrecap.app/screens/VNx9Gy5pHZI/00-00-10.jpg)
![Screenshot at 01:15: The Stitch documentation highlighting the need for double-layer authentication: logging in once as the user and once as the application/MCP client.](https://ss.rapidrecap.app/screens/VNx9Gy5pHZI/00-01-15.jpg)
![Screenshot at 03:43: The Stitch tool generating the 'Hero Section' for InterviewOS, showing the detailed prompt used and the resulting UI preview.](https://ss.rapidrecap.app/screens/VNx9Gy5pHZI/00-03-43.jpg)
![Screenshot at 05:57: The final InterviewOS dashboard UI, showcasing the successful implementation of the terminal aesthetic, custom metrics, and performance analytics.](https://ss.rapidrecap.app/screens/VNx9Gy5pHZI/00-05-57.jpg)