Artificial Intelligence 5 min read

How to Use Model Context Protocol (MCP) with Figma in Cursor to Auto‑Generate Front‑End Code

This guide explains what the Model Context Protocol (MCP) is, lists key MCP resources, and provides a step‑by‑step tutorial for creating a token, linking a Figma design, configuring Cursor, and using MCP to automatically generate front‑end HTML and Tailwind CSS from a Figma file.

AI Software Product Manager

Sep 4, 2025

How to Use Model Context Protocol (MCP) with Figma in Cursor to Auto‑Generate Front‑End Code

What is Model Context Protocol (MCP)

Model Context Protocol (MCP) is a universal interaction protocol that enables AI models to communicate with external tools. It functions like an API but is designed for consumption by AI agents rather than programmers.

MCP website directory

https://mcp.so/

https://smithery.ai/

https://mcps.live/

https://cursor.directory/mcp

Using Figma MCP in Cursor

Create an access token

In Cursor open the user avatar menu → Settings → Security → Generate new token. Provide a name, set expiration and permissions, then copy the token value before closing the dialog.

Copy Figma design URL

Right‑click the example design in Figma and copy its share link, e.g. https://www.figma.com/design/V3B3ZpAOIfMMICfbEoq8k8/Figma-basics?node-id=4368-321123&t=u1paVmIu82unuztY-4

Select a Figma MCP implementation

Search "Figma" on https://mcp.so/ and choose the popular entry “Framelink Figma MCP Server”. Its source repository is https://github.com/GLips/Figma-Context-MCP

Configure Cursor

Enter the configuration values for your operating system, replacing YOUR-KEY with the token generated above.

The green indicator confirms a successful configuration.

Invoke MCP

Provide a prompt that includes the Figma design URL and instructs the AI to generate front‑end code using HTML and Tailwind CSS.

Figma UI design: @https://www.figma.com/design/V3B3ZpAOIfMMICfbEoq8k8/Figma-basics?node-id=4368-321123&t=u1paVmIu82unuztY-4
You are a senior front‑end engineer at a large tech company. Using the provided Figma UI design, implement the front‑end page with HTML and Tailwind CSS, and display the chat box in Chinese.

Call the get_figma_data tool to retrieve design information.

Call the download_figma_images tool to fetch required images.

After resources are ready, generate the front‑end code automatically.

Result

The generated page closely matches the original design, reproducing colors, rounded buttons, and layout. Minor differences such as a missing small edit icon are noted.