html.to.design MCP - Send designs to Figma

html.to.design is a Figma plugin that comes with a MCP server endpoint. You can send HTML designs to Figma and they get translated into Figma layers instantly. This MCP is fast because it uses HTML as the communication medium to Figma and secure because it doesn't read data from the Figma canvas. Your designs on Figma are always private.

Installation Instructions

How to Use Model Context Protocol (MCP) in Cursor

What is MCP?

Model Context Protocol (MCP) is an open protocol that allows you to provide custom tools to agentic LLMs (Large Language Models) in Cursor's Composer feature.

Installation Steps

Open Cursor Settings
- Navigate to Cursor Settings > Features > MCP
- Click the "+ Add New MCP Server" button
Configure the Server
- Name: Give your server a nickname
- Type: Select the transport type (stdio or sse)
- Command/URL: Enter either:
  - For SSE servers: The URL of the SSE endpoint
  - For stdio servers: A valid shell command to run the server

Example Configurations

For stdio Server (Weather Server Example):

Command: node ~/mcp-quickstart/weather-server-typescript/build/index.js

For SSE Server:

URL: http://example.com:8000/sse

Using MCP Tools

Tool Availability
- After adding a server, it will appear in your MCP servers list
- You may need to click the refresh button to populate the tool list
Using Tools in Composer
- The Composer Agent automatically uses MCP tools when relevant
- You can explicitly prompt tool usage by:
  - Referring to the tool by name
  - Describing the tool's function
Tool Execution Process
- Displays a message in chat requesting approval
- Shows tool call arguments (expandable)
- Executes the tool upon user approval
- Displays the tool's response in the chat

Important Notes

MCP tools may not work with all models
MCP tools are only available to the Agent in Composer
For servers requiring environment variables, create a wrapper script that sets the variables before running the server