skills.rest
Lutimi
LutimiCOMMUNITY
Explore all skills by this author →
GitHub

cursor2figma

Import HTML into Figma and manage design tokens via an MCP server.

Updated Apr 17, 2026
Search Tags:#components#figma#mcp#tokens#cursor#design-systems#html-import
One-click install
npx skills add https://github.com/Lutimi/claude2figma --skill cursor2figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cursor2figma
Source: https://github.com/Lutimi/claude2figma/tree/main/.cursor/skills/cursor2figma
Command: npx skills add https://github.com/Lutimi/claude2figma --skill cursor2figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the workflow between Cursor/Claude and Figma by providing a dedicated MCP server that handles HTML-to-Figma imports, design tokens, and component orchestration, reducing manual setup and context switching.

Core Features & Use Cases

  • HTML Import: render HTML into Figma with pixel-accurate fidelity using a dedicated import path.
  • Design Tokens & Variables: manage tokens and variables to keep design systems in sync between Cursor and Figma.
  • Components & Workflows: instantiate components and organize variants within Figma from Cursor.
  • Workflow Automation: automate end-to-end design tasks from import to debugging and iteration.

Quick Start

Connect Figma Desktop, activate the Desktop Bridge plugin, and load the MCP server to begin importing HTML into Figma.

Frequently Asked Questions about cursor2figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I import HTML into Figma using Cursor?▼

To import HTML into Figma using Cursor, you need to connect Figma Desktop, activate the Desktop Bridge plugin, and load the dedicated MCP server to render HTML with pixel-accurate fidelity.

Can I manage Figma design tokens and variables directly from Cursor?▼

Yes, you can manage Figma design tokens and variables directly from Cursor by using the tailored MCP server to keep your design systems synchronized across both platforms.

What is needed to set up the MCP server for Cursor and Figma integration?▼

Setting up the MCP server for Cursor and Figma integration requires a running MCP server, Figma Desktop with the Desktop Bridge plugin activated, and a valid Figma access token.

Does the Cursor Figma MCP workflow support component instantiation?▼

Yes, the Cursor Figma MCP workflow supports component instantiation, allowing you to orchestrate components and organize variants within Figma directly from your development environment.

What is the best way to synchronize a design system between Cursor and Figma?▼

The best way to synchronize a design system between Cursor and Figma is by using a dedicated MCP server to manage HTML imports, design tokens, and component workflows within a single automated pipeline.

Related Skills

Explore More Design & Creative Skills→
mims-harvardmims-harvard
1.6k

setup-tooluniverse

Install ToolUniverse and configure MCP with Cursor or Claude Desktop.

Official
Advanced
ThanapatJuthaThanapatJutha

create-ds-component-page

Automate end-to-end Design System component page creation in Figma from prompts.

Community
Advanced
cskworkcskwork
3

pptx-to-html

Convert PPTX files to pixel-accurate HTML with styling and media preservation.

Community
Advanced
altrupetsaltrupets

Figma Dev Mode Integration

Extract assets, components, and design tokens from Figma via MCP.

Official
Intermediate