名称: figma-generate-component 描述: 使用Figma MCP服务器从Figma组件或框架生成生产级代码

从Figma生成组件

名称

figma:figma-generate-component - 从Figma设计生成生产级代码

摘要

使用Figma桌面MCP服务器（HTTP传输位于http://127.0.0.1:3845/mcp）将Figma框架和组件转换为生产代码（React, Vue, HTML/CSS），支持Code Connect映射和设计令牌。

描述

您的任务是通过Figma MCP服务器从Figma设计生成生产级代码。此命令桥接设计到代码工作流，分析Figma框架并将其转换为语义化、可访问、框架特定的组件。

实施

使用Figma桌面MCP服务器访问从Figma URL中选择的框架或节点ID。如果有Code Connect映射可用，优先使用设计系统组件而不是从零生成代码。

输入方法

用户可以以两种方式提供Figma上下文：

基于选择：用户已在Figma桌面应用中选择框架
基于链接：用户提供带有节点ID的Figma URL

您的任务

理解上下文：
- 如果用户在Figma中选择了框架，通过MCP访问它
- 如果用户提供了URL，提取节点ID并访问设计
- 如果都未提供，请用户：
  - 在Figma中选择框架并重试，或
  - 提供带有节点ID的Figma URL
分析设计：
- 使用Figma MCP工具提取框架结构
- 识别组件、布局、样式和内容
- 注意使用的任何设计令牌或变量
- 如果有Code Connect映射可用，检查
生成代码：
- 询问用户想要什么框架/语言（React, Vue, HTML/CSS等）
- 生成干净、生产级的代码以匹配设计
- 使用语义HTML和可访问标记
- 应用目标框架的适当组件模式
- 如果有Code Connect映射，使用设计系统组件
- 包括解释关键决策的注释
提供上下文：
- 解释组件结构
- 注意应添加到设计系统的任何设计令牌
- 建议任何改进或可访问性增强
- 提及响应式行为考虑

最佳实践

语义HTML：使用适当的HTML元素（nav, main, article等）
可访问性：包括ARIA标签、正确的标题层次结构、键盘导航
设计令牌：尽可能使用变量处理颜色、间距、排版
组件组合：将复杂UI分解为更小、可重用的组件
响应式设计：考虑移动、平板、桌面断点
Code Connect：优先使用映射组件而非从零生成

示例输出格式

生成React组件时，结构如下：

// ComponentName.tsx
import React from 'react';
import { DesignSystemButton } from '@/components/Button'; // 使用Code Connect映射

interface ComponentNameProps {
  // 基于Figma变体的Props
}

/**
 * ComponentName - 简要描述
 *
 * Figma: [链接到Figma框架]
 * 使用的设计令牌: --color-primary, --spacing-md, --font-heading
 */
export const ComponentName: React.FC<ComponentNameProps> = ({ ...props }) => {
  return (
    // 匹配Figma布局的JSX
  );
};

验证

完成前：

验证代码编译/语法有效
检查布局是否匹配Figma设计
确保所有交互元素都可访问
确认设计令牌正确引用
注意任何缺失的资产或资源需求

笔记

如果Figma MCP服务器未连接，提供设置说明
如果框架非常复杂，提议将其分解为多个组件
始终尊重用户的框架偏好
建议在不同视口/屏幕尺寸下测试