Figma 代码生成优化技能

📋 技能概述

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

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

🔍 使用前提

在Figma中的准备

为了获得最佳效果，用户的Figma设计稿应该满足以下条件[citation:1][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有"Primary"变体 → 使用variant="primary"
• 如果Button有"Small"/"Medium"/"Large"属性 → 映射为size="sm"/"md"/"lg"
• 如果Button有"Icon Left"属性 → 添加leftIconprop

步骤3：应用设计规范

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

步骤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组件示例：

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>
  );
};