Ardot MCP Server

Ardot MCP Server helps developers explore and implement designs more quickly and accurately:

• Retrieve design context from Ardot design files, with support for reading, editing, and generating based on the design
• Enhance the way design components and Code Connect work together (coming soon)

As additional context, Ardot MCP Server is a Model Context Protocol server implementation provided by Tencent Design Ardot, enabling AI coding assistants (such as Claude, Cursor, Windsurf, CodeBuddy, etc.) to directly read and manipulate Ardot design files for seamless design-code integration.

Quick Start

1. Prepare your environment

• Use an AI agent or code editor that supports MCP servers, such as CodeBuddy, WorkBuddy, Cursor, Claude Code, and Codex.
• We recommend using CodeBuddy or WorkBuddy first.

2. Visit Ardot and sign in

• Visit the Ardot website to register and sign in.
• Download the desktop app and open any design file in the client.

Download Ardot Desktop App

Platform	Chip/Architecture	Download
macOS	Apple Silicon (M1/M2/M3/M4)	Ardot_latest_macOS_arm64.dmg
macOS	Intel	Ardot_latest_macOS_x86_64.dmg
Windows	Desktop	Coming soon

• Note: Ardot supports both the macOS desktop app and the web version (desktop browser), but Ardot MCP currently prioritizes support for the macOS desktop app.

How to Use the MCP Server

MCP Server Entry Point

1. Click the MCP configuration entry in the top-right corner of the Ardot home page.

   

2. Enable the code editor you want to use in the configuration dialog.

   

3. Open any Ardot design file and check whether the service connection is working properly.

   

4. Enter the design request you want in the terminal chat.

   

Example prompt:

Use Ardot to design a Todo List for me, with schedule management and AI summary features. Use a gradient diffusion style with a glassmorphism look.

---

MCP Tool Reference

Ardot MCP Server provides the following 11 tools (more APIs coming soon):

Query

Tool	Description
fetch_editor_state	Get current editor state, including active canvas, user selection, open files and other essential info — ideal for understanding context before starting a design task
batch_read	Batch retrieve nodes — supports name/type regex pattern search and node ID lookup, with configurable depth and data detail level
capture_screenshot	Capture a screenshot of a specific node or canvas area to verify AI-generated layouts, check visual output, and inspect component appearance
capture_layout	Get the layout structure tree of a design file, with depth control; can return only nodes with overlapping, clipping, or other layout issues

Design System

Tool	Description
fetch_variables	Read variable definitions (Design Tokens) from the design file, including colors, spacing, font sizes, etc. — useful for generating global CSS style rules
apply_variables	Create or update variable sets with multi-mode support (e.g., Light/Dark), supporting COLOR, FLOAT, BOOLEAN, and STRING variable types; uses merge mode by default
fetch_guidelines	Retrieve Ardot design guidelines for 7 topics: table (tables), landing-page, web-app, mobile-app, slides, code (code generation), and tailwind (Tailwind CSS v4)

Edit Operations

Tool	Description
batch_edit	Execute batch design operations with 7 operation types: Insert, Copy, Update, Replace, Move, Delete, and Image (generate/fetch images); recommended maximum 25 operations per call
locate_available_space	Find empty space on the canvas in a specified direction (top/right/bottom/left) and size, with configurable starting node and minimum padding, for placing new design content

Utilities

Tool	Description
get_available_fonts	Get the list of available fonts and their styles in the current environment, used to verify font availability after creating text nodes and ensure correct fontName (family + style) combinations
export_to_code	Export design nodes to frontend code (coming soon), supporting conversion of selected design elements into usable component code

Use Cases

Design-to-Code

User: Generate React component code based on the login page in the current design
AI: [calls fetch_editor_state to get current state]
    [calls capture_screenshot to get page screenshot]
    [calls batch_read to get layer structure and properties]
    [calls fetch_guidelines to get code generation guidelines]
    → Generates complete React component code

AI-Assisted Design

User: Create a Dashboard page to the right of the current canvas
AI: [calls locate_available_space to find empty area]
    [calls fetch_guidelines to get web app design guidelines]
    [calls batch_edit to create page structure and components]
    [calls capture_screenshot to verify design output]
    → Completes the Dashboard page design

Design System Management

User: Create a set of light/dark theme design variables for the project
AI: [calls fetch_variables to check existing variables]
    [calls apply_variables to create color, spacing, font size tokens]
    → Completes design variable definitions

Design Review

User: Check if the current page has any layout issues
AI: [calls capture_layout with problemsOnly=true]
    → Returns all nodes with alignment/overflow issues

FAQ

MCP Server connection failed?

1. Confirm that the Ardot editor is open and a design file is loaded
2. Check that the MCP configuration in your AI tool is correct
3. Restart your AI coding assistant to re-establish the connection

batch_edit operation errors?

• Ensure every Insert / Copy / Replace operation has a binding name
• Keep each call under 25 operations
• Do not use Update on descendants of nodes you just copied, as child node IDs are regenerated

Screenshot is empty or incomplete?

• Confirm that the nodeId points to a node visible on the canvas
• Check that the node has actual content (empty frames won't produce meaningful screenshots)

---

Roadmap

Ardot MCP Server is under active development. Here are the upcoming plans:

2026 Q2

Feature	Status	Description
Team Component Library Access	In Progress	Read and use shared team component libraries — AI can directly reuse team design assets
Style & Visual Optimization	In Progress	Improve the visual quality of AI-generated designs with better style accuracy and consistency
Screenshot Optimization	In Progress	Improve screenshot clarity and accuracy, optimize experience for large canvas scenarios
Token Consumption Optimization	In Progress	Streamline data returned by tool calls to reduce token overhead in AI conversations
Multi-Agent Concurrent Access	Planned	Support multiple AI Agents connecting and operating on the same design file simultaneously
Cloud MCP Capability	Planned	Support cloud-deployed MCP Server — no local installation required

2026 Q3

Feature	Status	Description
CLI Version	Planned
Animation Generation Support	Planned	MCP support for generating animations — expand AI design generation capabilities

This roadmap is subject to change based on user feedback and business priorities. Feel free to submit feature requests and suggestions via Issues.