Figma 代码生成优化技能#

📋 技能概述#

这个技能帮助AI代理从Figma设计稿生成代码时，能够：

1. 识别并复用 你项目中的现有组件库
2. 遵循 你的设计规范（颜色token、间距规则、字体系统）
3. 生成 结构清晰、可维护的生产级代码
4. 避免 常见的代码生成问题（如硬编码值、嵌套过深）

🔍 使用前提#

在Figma中的准备#

为了获得最佳效果，用户的Figma设计稿应该满足以下条件[citation:1][citation:6]：

要求说明为什么重要使用组件和变体将重复元素转为Component，用Variants表示不同状态AI能将它们映射为代码组件和props应用Auto Layout用自动布局代替手动排列便于转换为flex/grid布局使用样式和变量统一用颜色样式、文字样式、间距变量避免生成硬编码值图层命名清晰避免"Frame 42"、"Group Copy"这类自动命名帮助AI理解每个元素的作用避免过度嵌套保持图层层级尽量浅防止生成冗余的div嵌套优先使用Frame用Frame而不是Group作为容器Group在转换时行为不可预测[citation:6]

必要的连接#

• 用户需要已连接Figma MCP服务器（官方远程MCP或Figma-Context-MCP均可）[citation:4][citation:5]
• 需要在Figma中选中要生成代码的Frame或组件

🎯 核心工作流程#

步骤1：获取设计上下文#

当用户在Figma中选中一个Frame并请求生成代码时，AI代理应该：

1. 通过MCP获取设计信息：
   • 获取选中的Frame及其所有子图层
   • 提取应用的样式和变量（颜色、字体、间距）
   • 识别使用的组件及其属性[citation:2][citation:7]
2. 分析设计结构：
   • 识别哪些部分可以映射到现有组件库
   • 分析布局方式（Auto Layout对应flex/grid）
   • 检查是否有不符合规范的地方

步骤2：映射到项目组件库#

根据用户的组件库文档，将Figma中的元素映射到代码组件[citation:9]：

Figma中的元素应映射到的代码组件Button组件<Button variant="primary|secondary">Input组件<Input size="md|lg" />Card组件<Card padding="md" />Icon实例<Icon name="..." size={16} />

映射规则示例：

• 如果Figma中的Button有"Primary"变体 → 使用 variant="primary"
• 如果Button有"Small"/"Medium"/"Large"属性 → 映射为 size="sm"/ "md"/ "lg"
• 如果Button有"Icon Left"属性 → 添加 leftIcon prop

步骤3：应用设计规范#

根据用户的设计规范文档，将Figma中的样式值转换为代码token[citation:2][citation:7]：

Figma中的值应转换为的token#1890FF (蓝色)colors.primary.50016px间距spacing.mdInter 14px mediumtypography.body.medium8px圆角radius.md

步骤4：生成代码#

生成符合以下标准的代码：

代码结构要求

• ✅ 使用组件库导入： import { Button, Card } from 'your-component-library'
• ✅ 使用token变量： color: ${theme.colors.primary.500} 而不是 #1890FF
• ✅ 响应式布局：使用flex/grid，配合断点实现响应式[citation:2]
• ✅ 可访问性：包含ARIA属性和语义HTML[citation:7]
• ❌ 避免硬编码值：除非是临时占位内容
• ❌ 避免多余的wrapper div：除非必要

框架适配示例

React组件示例：

jsx

import React from 'react';
import { Card, Button, Text } from '@your-company/ui';
import { useTheme } from '@your-company/theme';

export const ProfileCard = ({ user, variant = 'default' }) => {
  const theme = useTheme();

  return (
    <Card padding="lg" shadow="sm">
      <div css={{ display: 'flex', gap: theme.spacing.md }}>
        <Avatar src={user.avatar} size="lg" />
        <div css={{ flex: 1 }}>
          <Text variant="heading" size="md">
            {user.name}
          </Text>
          <Text variant="body" color="secondary">
            {user.bio}
          </Text>
        </div>
      </div>
      <div css={{ marginTop: theme.spacing.lg }}>
        <Button variant="primary" size="sm" onClick={handleFollow}>
          Follow
        </Button>
      </div>
    </Card>
  );
};