AI导哈

Figma设计智能服务器

一个为Figma提供设计智能的MCP服务器，包含201个工具，覆盖17个类别，具备8px网格、类型比例、语义颜色、无障碍检查等功能，适用于设计自动化和协作场景。

  • by Dragoon0x
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 Dragoon0x/conductor

使用说明

导体figma

为Figma设计智能MCP服务器。17个类别的201个工具。每个工具都有内置的设计智能——8px网格、类型比例、语义颜色、可访问性检查、组件默认值。适用于Cursor和Claude代码。

npx conductor-figma

如何使用

1.克隆仓库（用于Figma插件）

git clone https://github.com/dragoon0x/conductor.git

2.导入Figma插件

打开Figma桌面：

  1. 首选 插件→ 发展→ 从清单导入插件
  2. 引导到 conductor/figma-plugin/manifest.json
  3. 点击 打开

插件现已安装。你只需要做一次。

3.添加到光标

打开 ~/.cursor/mcp.json 并添加导体：

{
  "mcpServers": {
    "conductor": {
      "command": "npx",
      "args": ["-y", "conductor-figma"]
    }
  }
}

重新启动游标。

4.连接和设计

  1. 打开Figma文件
  2. 运行插件： 插件→ 发展→ 指挥
  3. 插件应显示一个绿点（已连接）
  4. 在光标聊天中，键入 @conductor 后面跟着任何命令

示例提示

@conductor Create a dark hero section with a big heading and a purple CTA button

@conductor Check contrast between #ffffff and #6366f1

@conductor Create a dashboard layout with sidebar, KPI cards, and chart area

@conductor Audit accessibility on my current selection

@conductor Replace all #6366f1 with #3b82f6 across the file

@conductor Export this frame as React + Tailwind code

@conductor Scan my file and show me all off-grid spacing

@conductor Generate a color palette from #6366f1

替代方案：使用本地路径（更快启动）

而非 npx，直接指向克隆的仓库：

{
  "mcpServers": {
    "conductor": {
      "command": "node",
      "args": ["/path/to/conductor/bin/conductor.js"]
    }
  }
}

运作原理

You type in Cursor → MCP server (stdio) → WebSocket :3055 → Figma plugin → Canvas

Cursor会自动启动MCP服务器。服务器在端口3055上打开WebSocket。Figma插件连接到WebSocket并在画布上执行命令。

这有什么不同

Figma的其他MCP服务器是API包装器。你给出精确的像素值，它们也会遵守——即使这些值是错误的。Conductor在任何东西接触画布之前应用设计规则。

你说“创建一个按钮”。典型的MCP会制作一个矩形。Conductor制作了一个44px高的框架，带有20px水平填充、10px半径、15px半粗体文本——因为这就是按钮的真正含义。

17个类别中的201个工具

创建和布局（20）

create_frame、create_text、create_rectangle、create_ellipse、create_line、create_svg_node、create_component、create_copponent_instance、create_companent_set、create_smart_components、set_auto_layout、create_section、create_page、create_table_fame、create_form、create_nav_bar、create_card_grid、create_sidebar_layout，create_footer、create_header

修改样式（25）

modify_node、set_fill、set_stroke、set_effects、set_image_fill、style_text_range、set_conconstraints、delete_node、move_toparent、duplicate_node、group_nodes、ungroup_node、resize_node、align_node、set_corner_radius、set_ocapacity、set_blend_mode、set_clip_content、重命名_node、锁定_node、set可见性、重新排序_node、设置布局大小、平铺_node、集合旋转

矢量与形状（8）

create_vector、boolean_operation、create_polygon、create_star、offset_path、create_arrow、create_icon（内置35个）、create_divider

读取并检查（18）

get_selection、get_page_structure、get_node_info、get_nodes_info、find_nodes、get_local_styles、get_cal_variables、list_components、list_pages、get_document_info、set_selection、set_focus、get_annotations、set_annotation、list_available_fonts、read_node_css、get_selection_colors、measure_distance

变量和令牌（10）

创建变量集合、创建变量、绑定变量、获取变量、更新变量、删除变量、创建签名标记、导入标记、导出标记、swap_mode

出口与代码（12）

export_as_svg、export_as-png、export_to_react、export_design_specs、export_assets、屏幕截图、copy_css、generate_stylesheet、export_color_palette、export_type、export-component_inventory、export_spacing_tokens

无障碍和过梁（12）

audit_accessibility、check_contrast、fix_touch_targets、lint_design、fix_space、check_naming、suggest_improvements、validate_component、check_consistancy、generate_a11y_report、color_blindness_check、response_check

批量操作（17）

批次名称、批次样式、批次位置文本、批次位置颜色、批次大小、批次对齐、批次删除、批次重复、批次设置可见性、批次锁定、选择所有类型、清洁中间层、批次设置字体、批次边界值、批次移动行程、批次移动效果、批次设置角半径

设计系统（10）

scan_design_system、create_style_guide、detect_inconsistency、normalize_design、extract_components、get_design_craft_guide、suggest_color_palette、suggest type_scale、import_design_systems、compare_to_system

响应式（5）

创建响应变量、设置断点、转换响应、生成移动、堆栈移动

排版（10）

type_scale_apply、type_audit、type_set_hierarchy、type_check_measure、type_normalize、type_list_styles、type_pair_suggest、type_replace_font、set_text_content、type_create_style

颜色（10）

color_lette_generate、color_extract、color_harmonize、color_markmode、color_lightmode、color-check_all、color_create_style、color_apply_style、color replace_global、color_generate_symotic

原型与交互（10）

create_prototype_link、create_scroll_behavior、set_overflow、create_overlay、set_fixed_position、create_hover_state、create_flow、list_flow、remove_prototype-link、set_transition

页面管理（8）

创建新页面、切换页面、复制页面、删除页面、重命名页面、排序页面、合并页面、页面概览

库和组件（8）

search_library、list_team_libraries、swap_component、detach_instance、reset_overrides、component_audit、batch_swap_components、publish_components

注释和交接（10）

注释间距、注释颜色、注释排版、创建测量、创建规格表、注释网格、注释层次结构、创建组件文档、注释响应、创建更改日志

效果与风格（8）

create_glassmorphism、create_neumorphism、create_noise_texture、set_gradient_fill、create_shadow_system、apply_hacktop_blur、create_border_gradient、remove_all_effects

设计智能引擎

每个工具在触摸Figma之前都会查询智能引擎：

  • 8px网格 --所有间距值均已捕捉。卡扣（13）=16。
  • 类型比例 --7个预设比率：小调到黄金比率。
  • 语义色彩 --一个品牌的完整调色板。暗+亮模式。
  • 组件默认值 --18种不同尺寸的组件类型。
  • 无障碍 --WCAG AA/AAA对比度，44px触摸目标，字体最小值。
  • 字体权重 --自动解析“粗体”→ “粗体”、“600”→“半粗体”。
  • 布局智能 --13种布局预设：行、列、中心、展开、侧边栏、网格、表格。

故障排除

插件显示“已断开连接” MCP服务器未运行。确保游标已打开，导体已在mcp.json中配置。尝试在Cursor聊天中发送任何@conductor消息，这会触发服务器启动。

端口3055已在使用中 终止旧进程： kill $(lsof -t -i :3055) 2>/dev/null 然后重新启动Cursor。

光标永远显示“加载工具” 确保你有最新版本。运行： npx conductor-figma@latest 或者使用本地路径方法以加快启动速度。

免责声明

本软件仅严格用于教育和实验目的。 在任何生产环境中使用之前，请先进行自己的研究（DYOR）。

  • 这是实验性的开源软件，按“原样”提供 绝对没有任何形式的保证、陈述或担保 --明示、暗示或法定的——包括但不限于适销性、特定目的适用性、准确性、可靠性或不侵权的保证。
  • 该项目的作者、贡献者和维护者，包括被称为0xDragoon的个人-- 不承担责任 对于因使用、误用、无法使用或依赖本软件而产生的或与之相关的任何直接、间接、附带、特殊、后果性或惩罚性损害、损失、成本或费用，包括但不限于数据丢失、收入损失、业务中断或Figma文件、设计资产或任何其他数字财产的损坏。
  • 该软件与作者无法控制的第三方服务（Figma、Cursor、Claude Code）进行交互。作者假设 无责任 针对这些第三方可能影响本软件功能的任何更改、中断、API修改或策略更新。
  • 此软件不执行数据收集、遥测或分析。所有操作都在您的机器和Figma桌面应用程序之间本地运行。然而，作者使 没有保证 关于数据安全、隐私或机密性。
  • 这个软件是 不隶属于、不支持或赞助 Figma，股份有限公司，Anthropic，PBC，Anysphere（Cursor）或任何其他公司或组织。
  • 用户全权负责确保其对本软件的使用符合所有适用的法律、法规、服务条款和许可协议，包括Figma的服务条款和API使用政策。
  • 使用风险自负。 在运行任何自动化操作之前，请务必备份Figma文件。作者不对设计文件的任何意外修改、删除或损坏负责。

麻省理工学院许可证·版权所有2025 0xDragoon

相关 MCP