MCP Configs2026年3月30日·1 分钟阅读

Figma Context MCP — Design-to-Code for AI Agents

MCP server that gives AI coding agents access to Figma design context. Provides layout, styles, and component info so agents like Cursor and Claude Code can generate pixel-perfect code. 14K+ stars.

TO
TokRepo精选 · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY"]
    }
  }
}

Add to your MCP client config (Cursor, Claude Code, etc). Get your Figma API key from Figma Settings > Personal Access Tokens.

介绍

Figma Context MCP is an MCP server that bridges Figma designs with AI coding agents. It provides structured layout information, styles, spacing, typography, and component hierarchy from any Figma file — enabling agents like Cursor and Claude Code to generate code that matches your designs precisely. 14,000+ GitHub stars.

Best for: Frontend developers using AI agents to implement Figma designs Works with: Cursor, Claude Code, Gemini CLI, Windsurf, any MCP client

How It Works

  1. Share a Figma link with your AI agent
  2. The MCP server fetches the design's layout tree, styles, and component info
  3. The agent uses this context to generate pixel-accurate HTML/CSS/React code

What It Provides

  • Layout tree — Component hierarchy with positions, sizes, constraints
  • Styles — Colors, typography, effects, border radius, spacing
  • Component instances — Variant properties, overrides
  • Auto-layout — Flex/grid direction, gap, padding, alignment
  • Images — Exports image fills as optimized assets

FAQ

Q: What is Figma Context MCP? A: An MCP server that gives AI coding agents access to Figma design data — layout, styles, spacing, and component info — so they can generate pixel-perfect code from designs. 14K+ GitHub stars.

Q: Do I need a Figma paid plan? A: No, it works with free Figma accounts. You just need a Personal Access Token from Figma Settings.

🙏

来源与感谢

Created by GLips. Licensed under MIT. GLips/Figma-Context-MCP — 14,000+ GitHub stars

相关资产

Mastra — TypeScript AI Agent Framework

AI agent framework for TypeScript from the Gatsby team. Build agents with tools, workflows, RAG, memory, evals, and 50+ integrations. Modern TS-native design. 22K+ stars.

TokRepo精选

Prompts.chat — 155K-Star ChatGPT Prompt Library

The largest open-source ChatGPT prompt library with 155K+ GitHub stars. Community-curated prompts for every role — developer, writer, translator, analyst, and more. Self-hostable.

TokRepo精选

LangGraph — Build Stateful AI Agents as Graphs

LangChain framework for building resilient, stateful AI agents as graphs. Supports cycles, branching, persistence, human-in-the-loop, and streaming. 28K+ stars.

TokRepo精选
◈首页🏆Trending👤我的