\r \r

Figma 代码生成优化技能\r

\r

📋 技能概述\r

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

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

🔍 使用前提\r

\r

在Figma中的准备\r

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

必要的连接\r

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

🎯 核心工作流程\r

\r

步骤1：获取设计上下文\r

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

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

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

根据用户的组件库文档，将Figma中的元素映射到代码组件[citation:9]：\r \r | Figma中的元素 | 应映射到的代码组件 |\r |--------------|-------------------|\r | Button组件 | \x3CButton variant="primary\|secondary"> |\r | Input组件 | \x3CInput size="md\|lg" /> |\r | Card组件 | \x3CCard padding="md" /> |\r | Icon实例 | \x3CIcon name="..." size={16} /> |\r \r 映射规则示例：\r

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

步骤3：应用设计规范\r

根据用户的设计规范文档，将Figma中的样式值转换为代码token[citation:2][citation:7]：\r \r | Figma中的值 | 应转换为的token |\r |------------|----------------|\r | #1890FF (蓝色) | colors.primary.500 |\r | 16px间距 | spacing.md |\r | Inter 14px medium | typography.body.medium |\r | 8px圆角 | radius.md |\r \r

步骤4：生成代码\r

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

代码结构要求\r

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

框架适配示例\r

\r React组件示例：\r

import React from 'react';\r
import { Card, Button, Text } from '@your-company/ui';\r
import { useTheme } from '@your-company/theme';\r
\r
export const ProfileCard = ({ user, variant = 'default' }) => {\r
  const theme = useTheme();\r
  \r
  return (\r
    \x3CCard padding="lg" shadow="sm">\r
      \x3Cdiv css={{ display: 'flex', gap: theme.spacing.md }}>\r
        \x3CAvatar src={user.avatar} size="lg" />\r
        \x3Cdiv css={{ flex: 1 }}>\r
          \x3CText variant="heading" size="md">\r
            {user.name}\r
          \x3C/Text>\r
          \x3CText variant="body" color="secondary">\r
            {user.bio}\r
          \x3C/Text>\r
        \x3C/div>\r
      \x3C/div>\r
      \x3Cdiv css={{ marginTop: theme.spacing.lg }}>\r
        \x3CButton variant="primary" size="sm" onClick={handleFollow}>\r
          Follow\r
        \x3C/Button>\r
      \x3C/div>\r
    \x3C/Card>\r
  );\r
};