UIPro by Locofy.ai

UIPro is a tool by Locofy.ai that enables developers to go from Figma designs to production-ready frontend code in minutes, powered by agentic workflows.

If you already use Figma Dev Mode and modern AI-powered editors such as Cursor, Windsurf, Claude Code, or Gemini, UIPro is designed to integrate directly into your workflow.

It combines the capabilities of Figma MCP (Model Context Protocol), Locofy’s large design models (LDMs), fine-tuned LLMs and AI copilots. Together, these components convert your designs into clean, modular, and extensible frontend code that can be immediately reviewed, edited, and extended inside your IDE.

Installation

Prerequisites

Before getting started, ensure you have the following:

Figma Design or Dev Mode Seat
Node.js v20.0.0 or higher
The UIPro Figma plugin installed and active in your Figma file
A supported development environment:
- Cursor
- Windsurf
- VS Code
- Claude Code
- Gemini CLI

Step 1: Setup in Figma

Open your design in Figma & open the UIPro plugin.
Sign in or create a Locofy account.
Select your target development environment such as Cursor or Windsurf.
Copy the provided MCP configuration snippet.

Step 2: Configure Your Development Environment

Each supported IDE requires a small configuration file to connect to the MCP server.

Cursor

Create a .cursor/mcp.json file in your project root:

{  
  "mcpServers": {  
    "UIPro by Locofy": {  
      "args": ["-y", "@locofy/uipro-mcp@latest"],  
      "command": "npx",  
      "env": { "IDE_SOURCE": "cursor" }  
    }  
  }  
}

Then go to Settings → Features → Model Context Protocol → Enable “UIPro by Locofy”.

Windsurf

Add the following configuration to ~/.codeium/windsurf/mcp_config.json:

{  
  "mcpServers": {  
    "UIPro by Locofy": {  
      "args": ["-y", "@locofy/uipro-mcp@latest"],  
      "command": "npx",  
      "env": { "IDE_SOURCE": "windsurf" }  
    }  
  }  
}

After saving, open Settings → Cascade → Manage MCP Servers and click Refresh.

VS Code

Create .vscode/mcp.json in your project root:

{  
  "servers": {  
    "UIPro by Locofy": {  
      "args": ["-y", "@locofy/uipro-mcp@latest"],  
      "command": "npx",  
      "env": { "IDE_SOURCE": "vscode" }  
    }  
  }  
}

VS Code will automatically detect the configuration and display a Start button to launch the MCP server.

Claude Code

Add the MCP server via CLI:

claude mcp add UIPro --env IDE_SOURCE=claude -- npx -y @locofy/uipro-mcp@latest

To verify or remove:

claude mcp get UIPro
claude mcp remove UIPro

Gemini CLI

Add the configuration to ~/.gemini/settings.json:

{  
  "mcpServers": {  
    "UIPro by Locofy": {  
      "command": "npx",  
      "args": ["-y", "@locofy/uipro-mcp@latest"],  
      "env": { "IDE_SOURCE": "gemini" }  
    }  
  }  
}

Android Studio

Configure UIPro MCP server in Android Studio (requires Android Studio Otter 2025.2.1 Canary or later):

Open Settings
Navigate to Tools → Gemini → MCP Servers
Enable MCP Servers checkbox
Click Import JSON file or add your own JSON with the following configuration:

{
  "mcpServers": {
    "UIPro by Locofy": {
      "command": "npx",
      "args": ["-y", "@locofy/uipro-mcp@latest"],
      "env": {
        "IDE_SOURCE": "studio"
      }
    }
  }
}

Setup: After adding the configuration, click OK to save. The UIPro MCP server will be available for Gemini to use in Android Studio's AI-powered features.

After saving, reload Gemini with the Developer: Reload Window command.

Codex

You can configure UIPro MCP server for OpenAI Codex using either the CLI or by editing the configuration file directly.

Option 1: Using CLI

codex mcp add UIPro --env IDE_SOURCE=codex -- npx -y @locofy/uipro-mcp@latest

Option 2: Manual Configuration Edit your ~/.codex/config.toml file and add:

[mcp_servers.UIPro]
command = "npx"
args = ["-y", "@locofy/uipro-mcp@latest"]
 
[mcp_servers.UIPro.env]
IDE_SOURCE = "codex"

Setup: Configuration is shared between the CLI and IDE extension. Once configured, you can use the UIPro MCP server in both Codex clients. Use /mcp in the terminal UI to see your actively connected MCP servers. See OpenAI Codex MCP Documentation for more details.

Step 3: Connect UIPro to your IDE

Once the MCP server is running, you can connect UIPro to your IDE.

You can go back to Figma & click on "Connect" button in the UIPro plugin to connect to your IDE.

Step 4: Generate Code in Figma

In Figma, select the desired frame or component.
Click Convert to Code in the UIPro plugin.
Wait for the generation process to complete.
When the message “Code is ready for [your IDE]” appears, return to your IDE.

Step 5: Retrieve Code in Your IDE

In your IDE’s AI chat or console, use one of the following prompts:

Get the generated screen code from UIPro
Import the Figma component code from UIPro

The MCP server will connect to UIPro and automatically retrieve:

The generated frontend code
Associated assets and images
A reference screenshot of the design

Once complete, you can review, run, and modify the generated project.

We recommend you to use the following AI models to get the best results:

Claude Sonnet 4.5
Claude Sonnet 4
Gemini 2.5 Pro
Claude Haiku 4.5

Use Cases

1. Figma-to-Code Conversion

Generate fully structured React, TypeScript, or other supported framework code directly from Figma.
UIPro ensures the output remains semantically correct, pixel-perfect, and aligned with your design system.

2. Rapid Prototyping

Move from concept to running prototype in minutes. Ideal for MVPs, demos, and internal tools.

3. AI-Assisted Iteration

After importing the generated code, continue development with AI prompts.
Examples:

“Add form validation logic to the homepage search bar.”
“Implement dark mode using CSS variables or a theme provider.”
“Add multilingual support using i18n for English, Spanish, and German.”

4. Production-Ready Frontend

UIPro generates clean, modular code using your preferred stack (e.g., React + TypeScript + Material UI). Generated components are ready for further integration and deployment.

Custom Components