AI导哈

Figma模型上下文协议沙盒

一个用于测试和开发Figma模型上下文协议(MCP)集成的沙盒环境，支持通过AI编码助手实现无缝设计到代码的工作流。

  • by brandonwmartin
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 brandonwmartin/figma-mcp

使用说明

Figma MCP沙箱

一个全面的沙盒环境，用于测试和开发Figma的模型上下文协议（MCP）集成。此工作区使用AI编码助手实现了无缝的设计到编码工作流程。

🎯 目的

将AI编码助手与Figma设计连接起来，以像素完美的精度自动生成React/TypeScript组件。提取设计标记，创建组件库，并简化设计到开发的交接。

🚀 快速开始

先决条件

  • Figma桌面应用程序 （最新版本）
  • Node.js 18+
  • AI编码助手（Cursor、VS Code with GitHub Copilot等）

安装说明

  1. 启用Figma MCP服务器

    # Open any Figma design file
# Switch to Dev Mode (Shift + D)
# Click "Enable desktop MCP server" in the inspect panel
# Server will be available at: http://127.0.0.1:3845/mcp

  2. 安装依赖项

    npm install

  3. 生成项目

    npm run build

  4. 发展模式

    npm run dev  # Watch mode with hot reload

🛠 可用的MCP工具

当Figma MCP服务器运行时，您可以在AI助手中使用这些工具：

  • get_design_context -从选定的Figma设计中提取React/TypeScript代码
  • get_variable_defs -检索设计标记和变量
  • get_screenshot -捕捉设计的视觉参考
  • get_metadata -获取组件布局的XML表示
  • create_design_system_rules -从设计中生成编码标准

📁 项目结构

src/
├── components/           # Generated React components
│   └── sample-components.tsx
├── types/               # TypeScript type definitions
│   └── figma.ts
├── utils/               # Helper functions for MCP integration
│   └── figma-helpers.ts
├── examples/            # Sample implementations
│   └── component-showcase.tsx
└── index.ts            # Main entry point

🎨 开发工作流程

1.Figma中的设计

  • 创建或打开Figma设计文件
  • 使用适当的命名约定设计组件
  • 确保启用了开发模式

2.启用MCP集成

  • 切换到开发模式（Shift+D）
  • 在检查面板中启用桌面MCP服务器
  • 验证服务器是否正在运行 http://127.0.0.1:3845/mcp

3.使用AI生成代码

  • 在Figma中选择一个框架或组件
  • 在您的AI助手中，提示生成代码：
Generate a React component from my selected Figma design with Tailwind CSS styling

4.测试和迭代

  • 查看此沙盒中生成的组件
  • 优化Figma中的设计并重新生成
  • 提取设计标记以保持一致性

💡 示例提示

组件生成

Create a React TypeScript component from my selected Figma button with proper props and variants

设计令牌提取

Extract all color, spacing, and typography variables from my Figma selection as design tokens

布局生成

Generate a responsive React layout that matches my Figma frame with Tailwind CSS grid

🧩 样品组件

此沙箱包括演示MCP生成的代码结构的示例组件：

  • 按钮 -多种变体、大小和状态
  • 卡 -具有图像支持的灵活卡组件
  • 输入 -带有验证和错误状态的表单输入

查看以下示例： src/example.component-showcase.tsx

🛡 TypeScript集成

所有组件都包含正确的TypeScript定义：

interface ButtonProps extends ComponentProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
}

🎭 设计令牌系统

从Figma中提取并使用设计标记：

interface DesignTokens {
  colors: Record<string, string>;
  spacing: Record<string, string>;
  typography: Record<string, TypographyToken>;
  borders: Record<string, BorderToken>;
  shadows: Record<string, ShadowToken>;
}

🛠 工具函数

常见MCP任务的辅助功能：

  • rgbToHex() -将Figma RGB转换为CSS十六进制
  • generateTailwindClasses() -从Figma属性创建顺风类
  • extractDesignTokens() -将Figma变量解析为设计标记
  • sanitizeComponentName() -React的干净组件名称

🏗 建立和运行

可用脚本

npm run dev        # Development mode with watch
npm run build      # Build TypeScript to dist/
npm run start      # Run built application
npm run test       # Run test suite
npm run lint       # Lint TypeScript files
npm run format     # Format code with Prettier

VS代码任务

使用Cmd+Shift+P→ “任务：运行任务”：

  • 构建Figma MCP沙盒 -编译TypeScript

🔧 配置

顺风CSS

自定义主题配置 tailwind.config.js 包括：

  • Figma调色板
  • 自定义间距值
  • 设计系统排版
  • 组件特定阴影

TypeScript

通过React JSX支持启用严格类型检查。

🐛 故障排除

未找到MCP服务器

  • 确保Figma Desktop已更新到最新版本
  • 验证设计文件中是否启用了开发模式
  • 检查检查面板中的MCP服务器是否已启用

组件生成问题

  • 确保您已在Figma中选择了一个框架或组件
  • 试着先选择一个更简单的组件
  • 检查您的AI助手是否支持MCP集成

构建错误

npm run build  # Check for TypeScript errors
npm run lint   # Check for linting issues

🤝 贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 使用您自己的Figma设计进行测试
  4. 提交拉取请求

📚 资源

AI代理上下文

官方Figma→ 组件生成工作流

所有新的UI组件都必须使用下面的标准化Figma翻译工作流程生成。

此工作流程适用于任何AI工具（Copilot、Claude Code、Cursor等）。

菲格玛是真理的源泉。

遵循以下文件作为权威规范：

docs/component-standards.md
docs/figma-to-code.md

将这两个文档都视为编译器规则。 违规是执行错误。

组件生成提示

将选定的Figma元素实现为生产就绪的组件包。

组件名称：[组件名称]

所需输出结构：

src/components/[ComponentName]/ [组件名称].tsx [组件名称].stores.tsx

这两个文件都是必需的。 没有完整捆绑包的组件是不完整的。

要求：

仅提供直译。
无设计解释。
没有布局改进。
没有推断状态。
无需额外包装。
在间距、排版或颜色上没有近似值。

如果违反了规范文档中的任何规则，请在最终确定之前进行重构。

📄 许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

编码愉快！ 🎨→💻

通过Figma MCP集成，为无缝设计到编码的工作流程而构建。

相关 MCP