Quick Start

Overview

Anduin Design MCP enables AI-powered code generation directly from your Figma designs. It works by combining two MCP servers:

1. Figma MCP Server - Extracts design context and components from Figma
2. Anduin Design MCP - Transforms that design context into code tailored to the Anduin design system and framework

Setup Instructions

Step 1: Install Figma MCP Server

First, install the Figma MCP Server locally. Follow the official installation guide:

Figma MCP Server Installation Guide

The Figma MCP Server typically runs on http://127.0.0.1:3845/mcp by default.

Step 2: Configure MCP Servers in AugmentCode

1. Open Augment Settings
2. Navigate to Tools → MCP
3. Click Imports from JSON
4. Paste the following configuration:

{
  "mcpServers": {
    "Anduin Design MCP": {
      "url": "https://mcp.anduin.design/mcp",
      "type": "http"
    }
  }
}

Step 3: Verify Configuration

After importing the configuration, both MCP servers should appear in your available tools list:

• Figma Dev Mode MCP - For accessing Figma design context
• Anduin Design MCP - For generating Anduin-tailored code

How It Works

1. Use Figma Dev Mode MCP to select and extract design components from your Figma file
2. Anduin Design MCP automatically transforms the design context into code
3. The generated code follows Anduin Design Systempatterns and uses the appropriate framework components

Next Steps

Now that you have Anduin Design MCP set up, you can start generating code directly from your Figma designs.

Try this prompt:

Implement this design from Figma.
@https://www.figma.com/design/h3aDfXUjgQt8ar7VSxXKwK/LP-Experience-Revamp?node-id=6052-16188&m=dev 
Use Figma MCP and Anduin Design MCP.
Show me the code before writing to file.