Figma MCP vs Claude: UI Building Battle!

Figma MCP vs. Claude with Screenshot: A Head-to-Head Comparison

Key Concepts:

• Figma MCP (Multiplayer Code Platform): Figma's developer mode allowing code generation and integration with IDEs.
• Claude: An AI assistant used for code generation and manipulation.
• Sonnet: The specific model of Claude being used.
• Tanstack Start: A React framework used as the base for the projects.
• Shadcn/ui: A library of accessible and customizable React UI components.
• Get Code: A Figma MCP tool to extract HTML code from Figma designs.
• Server-Sent Events (SSE): A communication protocol used by Figma MCP.
• Agentic workflow: Using AI agents to automate tasks.

Project Setup and Initial State

Two identical Tanstack Start React applications were created: "Claude with Screenshot" and "Figma MCP." Both initially displayed a basic spinning React logo. The goal was to replace the homepage route in each application with a profile form designed in Figma.

Claude with Screenshot Approach

1. Screenshot Capture: A screenshot of the profile form in the Figma desktop application was taken and saved locally.
2. Claude Integration: Claude was initiated within the "Claude with Screenshot" project directory.
3. Prompt and Execution: The prompt "replace the homepage route with the form from the screenshot" was given to Claude, along with the screenshot file.
4. Result: Claude successfully replaced the homepage route with a functional profile form.

Figma MCP Approach

1. MCP Setup: Figma's developer mode with MCP server enabled was activated in the Figma desktop application.
2. IDE Integration: Cursor (an MCP-enabled IDE) was used. A custom MCP server connection was added in Cursor, pointing to the Figma MCP server URL and specifying SSE as the transport mechanism.
3. Agentic Prompting: Within Cursor, the context was set to the index route, and the prompt "replace the homepage route with the profile form in Figma" was given to Claude (Sonnet model).
4. Initial Result: The homepage route was replaced with a profile form, but with some inaccuracies (e.g., date picker and dropdown not functional, dark theme applied).

Code Analysis and Comparison

Claude with Screenshot:

• Code Quality: The generated code was considered clean, using classic input fields styled with Tailwind CSS.
• Component Structure: No new components were created.
• Styling: The styling was generally accurate, although some elements (e.g., text box underlines) were slightly different from the original Figma design.

Figma MCP (Initial Attempt):

• Code Quality: The initial code quality was lower than expected.
• Component Structure: The generated code primarily consisted of static HTML (divs with p tags) instead of interactive form elements.
• Data Extraction: Claude intelligently used "get image" secondarily to get an image.
• Theme: A dark theme was applied instead of the original light theme.

Figma MCP with Components (Enhanced Approach)

1. Project Setup: A new Tanstack Start application ("Figma with Components") was created.
2. Component Library Integration: Tanstack Form and Shadcn/ui were added to provide pre-built, accessible UI components.
3. Agentic Prompting (Revised): The prompt "bring in that profile form, but use the existing components where they're available" was given to Claude.
4. Result: Claude successfully utilized the Shadcn/ui components for inputs and selects, and the light theme was correctly applied.

Key Findings and Observations

• Claude with Screenshot: Provides a quick and relatively clean starting point, especially for simple forms.
• Figma MCP (Initial): Can produce less accurate code, particularly regarding interactive elements. The "Get Code" tool in Figma MCP returns static HTML, requiring Claude to infer the intended functionality.
• Figma MCP with Components: Significantly improved results when combined with a component library like Shadcn/ui. Claude was able to recognize and utilize the existing components, leading to more accurate and functional code.
• AI Variability: The results of AI-driven code generation can vary, highlighting the importance of experimentation and iterative refinement.
• Theme Selection: The AI's choice of theme (light vs. dark) appears somewhat random.

Notable Quotes

• "This is actually really cool because what they're doing here is they're avoiding having to do authentication as well as figuring out what project you're looking at by basically connecting you to your desktop application." (Regarding Figma MCP's SSE implementation)
• "As a human, I know that, but Figma really doesn't know that." (Referring to Figma MCP's inability to recognize input fields)
• "You roll the dice, you get different things different times." (Regarding the variability of AI-generated results)

Technical Terms Explained

• Tailwind CSS: A utility-first CSS framework.
• SSE (Server-Sent Events): A server push technology enabling real-time data streaming from a server to a client.

Synthesis/Conclusion

While Claude with Screenshot offers a fast initial solution, Figma MCP, especially when combined with a component library like Shadcn/ui and the Sonnet model, demonstrates superior potential for generating high-quality, functional React code from Figma designs. The key is to provide the AI with sufficient context and resources (e.g., pre-built components) to accurately interpret the design and produce the desired output. The variability in AI results underscores the need for ongoing evaluation and refinement of the generated code.