figma-optimizer

从Figma设计稿生成符合项目组件库和设计规范的高质量前端代码

Security Scan

The skill's requested actions (reading Figma frames via an MCP, mapping to component library and tokens, and emitting React code) align with its description; there are no installs, credentials, or unrelated system accesses declared — but the SKILL.md assumes an external Figma MCP connection that isn't explicitly declared in the registry metadata, so verify how that connector is provided by your platform.

Purpose & Capability

The name/description (generate component-library‑aligned front-end code from Figma) match the instructions: the SKILL.md describes extracting frames, styles, mapping to components/tokens and producing React code. Nothing requested (no binaries, no env vars) appears unrelated to the stated purpose. The only external dependency the instructions expect is a Figma MCP connection (MCP server or Figma-Context-MCP), which is coherent for a Figma integration but is not declared as a required credential in the registry metadata.

Instruction Scope

Instructions stay on task: fetch selected Frame via MCP, extract styles/variables/components, map to the user's component library and design tokens, and generate code. The doc does not instruct the agent to read arbitrary system files, secrets, or unrelated configuration. It does permit some open-ended mapping decisions (e.g., find best-match components in the user's library), which is expected for code-generation but could lead to broad reads of project documentation if the agent has access — confirm what project artifacts the agent will actually be allowed to access at runtime.

Install Mechanism

This is an instruction-only skill with no install spec and no bundled code. That is the lowest-risk install profile — nothing will be written to disk by the skill itself.

Credentials

The skill declares no required environment variables or credentials, which is consistent with the registry metadata. However, the SKILL.md explicitly expects a Figma MCP connection (official MCP or Figma-Context-MCP). If your platform provides a built-in Figma connector this is reasonable; if the skill expects the agent to call an external MCP endpoint you should confirm which credentials/endpoints will be used and whether any tokens are required or stored.

Persistence & Privilege

The skill does not request always: true and makes no claims about modifying other skills or persisting system-wide configuration. Autonomous invocation (model-invocation enabled) is the platform default and appropriate for this type of skill.

Assessment

This skill appears coherent for generating component-library-aligned React code from Figma. Before installing: 1) Confirm how the Figma MCP connection is provided (platform-built connector vs. an external endpoint) and whether any API tokens will be used or stored. 2) Verify that the agent will not be granted access to unrelated repos or system secrets while doing component-matching. 3) Review any generated code before using it in production (check tokens, ARIA/accessibility, and external calls). 4) If you are concerned about automatic access to your private Figma files, restrict the skill's runtime permissions or avoid enabling autonomous invocation.

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"属性 → 添加leftIconprop

步骤3：应用设计规范

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

Figma中的值	应转换为的token
#1890FF (蓝色)	colors.primary.500
16px间距	spacing.md
Inter 14px medium	typography.body.medium
8px圆角	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组件示例：

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