ClaudeMap

Figma Context MCP

Framelink 的 Figma MCP 服务器——把真实设计稿布局数据喂给 Claude 做 design-to-code。

MCP 服务器figmadesigndesign-to-codemcp

事实标准的 Figma MCP server(Framelink):让 Claude 通过 Figma API 抓取并简化设计稿布局,生成的代码对齐真实设计——框架、组件与层级——而不是对着截图猜。Claude Code / Cursor 做 design-to-code 的标准桥梁。

它做什么

  • Framelink 出品的 Figma MCP:给 Claude 结构化设计数据(布局、样式、组件)而非截图
  • 通过 Figma 文件/选中节点 URL 拉取设计上下文,1:1 还原 UI
  • npx 单二进制即可跑;`--figma-api-key` 参数或 FIGMA_API_KEY 环境变量

什么时候用

设计稿转代码:贴一个 Figma frame URL,让 Claude 按设计树里的真实间距、颜色、字体生成对应组件。

如何上手

需要 Figma personal access token。macOS/Linux:

{
  "Framelink MCP for Figma": {
    "command": "npx",
    "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
  }
}

Windows 要走 cmd 包装:

{
  "Framelink MCP for Figma": {
    "command": "cmd",
    "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
  }
}

注意事项

token 能看到什么它就能读什么——别把带 token 的配置提交进仓库。输出质量取决于设计稿:图层没命名、没用 auto-layout 的话给出的上下文会更模糊。

代码仓库

GLips/Figma-Context-MCP

收录日期

地图上的相关资源

  • Blitz Strike

    MCP 服务器

    把渗透测试方法论装进一个 MCP server:BLITZ 摸清攻击面,EAGLE-EYE 追 source-to-sink,STRIKE 对每条发现先实测再上报。

    • mcp-server
    • security
    • pentest
    • methodology
  • Ripwire

    MCP 服务器

    Red Hat 出品的「AI 上下文版 ripgrep」——C++23 零依赖 CLI,同时讲 MCP。

    • mcp
    • code-context
    • cli
    • red-hat
  • Deja Vu

    MCP 服务器

    让 25+ 个编码 agent 共享同一份会话记忆——Claude Code、Codex、Cursor 终于记得同一个项目。

    • mcp
    • memory
    • cross-agent
    • context