# The Design Mode for Claude Code...

Source: https://www.youtube.com/watch?v=vcJVnyhmLS4
Recap page: https://rapidrecap.app/video/vcJVnyhmLS4
Generated: 2025-10-31T12:02:44.844+00:00

---
## Quick Overview

The video demonstrates how to use an AI agent, specifically Claude Code, to replicate a complex website design (MotherDuck) into a functional ToDo app UI by providing screenshots and style guides as context, ultimately achieving a pixel-perfect, component-based result that maintains the original aesthetic.

**Key Points:**
- The presenter successfully used an AI agent to convert the design of the MotherDuck website into a functional ToDo app UI, achieving a pixel-perfect match to the original style.
- The process involved providing the AI with screenshots of the target design (MotherDuck) and a detailed style guide document (STYLE_GUIDE.md) as context.
- The AI successfully generated the initial ToDo app UI in a single HTML file using Tailwind CSS, matching the aesthetic (03:16).
- The presenter then refined the result by asking the AI to add new features (description and due date fields) and to create an analytics dashboard, all while adhering to the established style (06:22, 06:34).
- The AI-generated code demonstrated modularity, reusability, and type-safety, reducing the main TSX file size by 53% (06:12).
- The presenter also introduced Superdesign, a tool that uses a Chrome extension to clone any site's style and generate design artifacts like style guides, which was used to extract the MotherDuck style guide (07:40).
- The final output included a fully functional application with new features and an analytics dashboard, all styled consistently using the provided design context.

![Screenshot at 03:10: The user inputs a prompt into Claude Code asking it to rebuild the MotherDuck UI in HTML with extracted CSS, setting the stage for the AI-driven design replication process.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-03-10.png)

**Context:** The video serves as a technical demonstration showcasing the capability of advanced AI coding agents (like Claude Code) to translate complex visual designs and detailed style documentation into production-ready code. The demonstration uses the "MotherDuck" website as the source design inspiration for creating a new, functionally distinct application—a ToDo list manager—while strictly adhering to the original aesthetic rules.

## Detailed Analysis

The video details a workflow for achieving "100% On-brand agentic design" by feeding an AI code agent (Claude Code) visual context (screenshots) and written design specifications (a style guide). Initially, the presenter shows the MotherDuck website and prompts the AI to replicate its design style into a simple ToDo app's HTML structure, which it successfully does, though with minor imperfections like color mismatch (03:15). The presenter then iterates, providing the extracted CSS color information from the original site to correct the background color (04:47). The process is further refined by asking the AI to add new features like description and due date fields to the ToDo form, and subsequently to generate an entire analytics dashboard, all while maintaining the established neo-brutalist, technical aesthetic (06:22, 06:34). The agent successfully refactors the code, resulting in modular, reusable, and type-safe components, with the main TSX file seeing a 53% reduction in lines (06:12). Finally, the presenter showcases Superdesign, an AI design tool that can automatically extract a style guide from any live website, which was used to generate the detailed style guide fed into Claude Code (07:40). This workflow proves that AI can handle complex, multi-step design translation tasks accurately.

### AI Design Replication Workflow

- Provide Hi-fi Context (Screenshots) + Style.md -> Generate Example Design -> Final Style.md
- The goal is 100% on-brand agentic design.

### Initial MotherDuck Replication

- AI successfully rebuilds MotherDuck UI into a single HTML file using extracted CSS, though initial color/style details require iteration (03:15).

### Feature Addition & Dashboard Generation

- AI adds description/due date fields to the ToDo form and generates a matching analytics dashboard based on the existing style guide (06:22, 06:34).

### Code Quality Improvements

- AI refactoring reduces main.tsx file size from 342 lines to 205 lines (53% reduction), resulting in modular, reusable, and type-safe components (06:12).

### Style Guide Extraction Tool

- Introduction of Superdesign, a tool that uses a Chrome extension to clone site styles and generate comprehensive style guides (07:40).

### Animation Generation

- The agent is prompted to create a product demo animation using Framer Motion based on real UI components and interactions (07:20).

![Screenshot at 00:03: The initial view of the MotherDuck website, which serves as the reference design for the AI replication task.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-00-03.png)
![Screenshot at 00:06: The presenter showing the initial TaskDuck UI generated by the AI, which closely resembles the source design but requires refinement.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-00-06.png)
![Screenshot at 00:27: Slide detailing the goal: achieving 100% On-brand agentic design through Hi-fi Context, Example Design, and Style.md input to the agent.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-00-27.png)
![Screenshot at 01:38: The AI agent processing data to generate the AEO Grader report, showing scores across OpenAI, Perplexity, and Gemini.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-01-38.png)
![Screenshot at 02:14: Visual representation of the process: combining the MotherDuck website screenshot \(Hi-fi Context\) with extracted CSS code to generate the Example Design.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-02-14.png)
![Screenshot at 04:47: The VS Code terminal after correcting the background color, showing the AI confirming the change in the style guide file.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-04-47.png)
![Screenshot at 05:50: The final, pixel-perfect TaskDuck application generated by the AI after incorporating all design constraints.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-05-50.png)
![Screenshot at 07:50: The Superdesign interface where the user provides the design context \(style guide content\) and prompts the AI to generate a new UI.](https://ss.rapidrecap.app/screens/vcJVnyhmLS4/00-07-50.png)