⚡

FigmaVariables→TailwindCSS转换技能Skill figma-to-tailwind

这个技能指南旨在帮助用户将Figma设计工具中的MCP设计变量自动转换为Tailwind CSS框架的标准类，以提高前端开发效率和一致性。

前端开发 0 次安装 0 次浏览 更新于 3/3/2026

Figma Variables → Tailwind CSS 转换技能

这个技能是关于如何将Figma MCP获取的设计变量（Variables）自动转换为Tailwind CSS标准类的指南。

何时使用这个技能

在以下情况下，请自动应用这个技能：

  1. 在Figma MCP获取设计后

    • 执行mcp__figma-mcp__get_design_context或mcp__figma-mcp__get_variable_defs之后
    • Figma MCP生成的代码包含var(--spacing-*)或var(--width-*)等变量时

  2. 在设计实施中

    • 组件样式设置时
    • 布局调整时
    • 发现使用Figma变量的代码时

  3. 代码审查时

    • 发现px-[var(--spacing-4)]这样的Figma变量直接使用时
    • 发现内联样式style={{ fontSize: 'var(--h4-font-size)' }}这样的描述时

转换步骤

第1步：确认映射文件

参考frontend/lib/figma-tailwind-map.ts，确认Figma变量是否可以转换为Tailwind标准类。

import {
  spacingMap,
  widthMap,
  heightMap,
  borderRadiusMap,
  typographyMap,
  figmaVarToTailwindClass,
  isStandardTailwindClass
} from '@/lib/figma-tailwind-map'

第2步：应用转换规则

间距（spacing）

// ❌ Figma MCP生成的代码
<div className="px-[var(--spacing-4,16px)] py-[var(--spacing-2,8px)] gap-[var(--spacing-3,12px)]">

// ✅ 转换为Tailwind标准类
<div className="px-4 py-2 gap-3">

转换映射：

  • spacing/1 → 1 (4px)
  • spacing/2 → 2 (8px)
  • spacing/3 → 3 (12px)
  • spacing/4 → 4 (16px)
  • spacing/1-5 → 1.5 (6px) ※自定义
  • spacing/2-5 → 2.5 (10px) ※自定义

尺寸（width/height）

// ❌ Figma MCP生成的代码
<div className="w-[var(--width-w-4,16px)] h-[var(--height-h-5,20px)]">

// ✅ 转换为Tailwind标准类
<div className="w-4 h-5">

边框半径（border-radius）

// ❌ Figma MCP生成的代码
<div className="rounded-[var(--border-radius-rounded-md,8px)]">

// ✅ 转换为Tailwind标准类
<div className="rounded-md">

排版（typography）

// ❌ Figma MCP生成的代码（内联样式）
<h1 style={{
  fontFamily: 'var(--h4-font-family)',
  fontSize: 'var(--h4-font-size)',
  fontWeight: 'var(--h4-font-weight)',
  lineHeight: 'var(--h4-line-height)',
}}>

// ✅ 转换为Tailwind标准类
<h1 className="text-h4">

// 或者Tailwind标准可替代的情况
<p className="text-sm">  // body2同等 (14px/20px)
<p className="text-base">  // body1同等 (16px/24px)

已实现的自定义类：（tailwind.config.ts中已定义）

  • text-h4: 24px/32px/bold
  • text-h5: 20px/28px/bold
  • text-title: 18px/28px/bold
  • text-body1: 16px/24px/normal
  • text-body2: 14px/20px/normal
  • text-body3: 12px/16px/normal

注意： 新的设计转换时务必确认Figma MCP的HEX/px值，并与现有类比较。不要仅凭名字相似性判断。

第3步：颜色的处理

颜色需要确认从Figma MCP收到的HEX值，并适当转换。

// ❌ 禁止直接使用Figma独有变量
<div className="bg-[var(--base-primary)]">
<div className="text-[var(--base-foreground)]">

// ✅ 正确的实现
// 1. 首先比较Figma的HEX值和现有的shadcn/ui变量
//    --base-primary: #00a0e9 = --primary: #00a0e9 → 相同的颜色！
<div className="bg-primary text-primary-foreground">

// 2. shadcn/ui中没有的独特颜色则添加到tailwind.config.ts
//    --base-dark-primary: #006cab → shadcn/ui中没有
//    → 在tailwind.config.ts中添加 'dark-primary': '#006cab'
<div className="text-dark-primary">

重要原则：

  • 不要仅凭名字相似性判断 - 务必确认HEX值
  • 从Figma MCP收到的是HEX格式，与现有的shadcn/ui变量(HSL格式)比较
  • 相同的颜色则使用现有变量（例如：bg-primary）
  • 不同的颜色则在tailwind.config.ts中添加自定义定义

第4步：非标准值的处理

发现映射中没有的值时：

  1. 添加到tailwind.config.ts
    theme: {
  extend: {
    spacing: {
      '13': '52px',  // 新的自定义值
    }
  }
}
  2. 添加到figma-tailwind-map.ts
    export const spacingMap: Record<string, number | string> = {
  // ... 现有的映射
  'spacing/13': 13,  // 新的映射
}
  3. 在实现中使用
    <div className="px-13">

禁止事项

❌ 直接使用Figma变量

// 禁止
<div className="px-[var(--spacing-4)]">
<div className="gap-[var(--spacing-2,8px)]">
<div style={{ width: 'var(--width-w-4)' }}>

❌ 自定义实用程序类

/* globals.css中添加以下内容是禁止的 */
.w-spacing-2 {
  width: var(--spacing-2);
}

.header-base {
  height: var(--height-h-16);
}

❌ 滥用内联样式

// 除非有特殊理由，否则禁止
<div style={{
  fontSize: 'var(--h4-font-size)',
  padding: 'var(--spacing-4)'
}}>

实施示例

Before（Figma MCP生成）

export default function Main() {
  return (
    <div className="bg-[var(--base/background-gray,#f6f8f9)] border-[var(--base/border,#edeef1)] border-b-0 border-l-[var(--border-width/border,1px)]">
      <div className="bg-[var(--base/background,#ffffff)] h-[64px] px-[var(--spacing/4,16px)] py-0">
        <div className="gap-[var(--spacing/2,8px)]">
          <div className="rounded-[var(--border-radius/rounded-md,8px)] size-[28px]">
            <Icon className="size-[16px]" />
          </div>
          <div className="gap-[var(--spacing/3,12px)]">
            <div style={{
              fontFamily: 'var(--h5-font-family)',
              fontSize: 'var(--h5-font-size)',
              fontWeight: 'var(--h5-font-weight)',
              lineHeight: 'var(--h5-line-height)',
            }}>
              支持
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

After（转换为Tailwind标准类）

export default function Main() {
  return (
    <div className="bg-muted border border-l border-b-0">
      <div className="bg-background h-16 px-4 py-0">
        <div className="gap-2">
          <div className="rounded-md size-7">
            <Icon className="size-4" />
          </div>
          <div className="gap-3">
            <div className="text-h5">
              支持
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

检查列表

转换时请确认以下内容：

  • [ ] var(--spacing-*)转换为px-*, py-*, gap-*等
  • [ ] var(--width-*)转换为w-*
  • [ ] var(--height-*)转换为h-*
  • [ ] var(--border-radius-*)转换为rounded-*
  • [ ] 内联样式的字体指定转换为text-*类
  • [ ] 颜色保持为CSS变量
  • [ ] 非标准值添加到tailwind.config.ts
  • [ ] 没有创建自定义实用程序类

参考文档

  • 转换映射: frontend/lib/figma-tailwind-map.ts
  • Tailwind设置: frontend/tailwind.config.ts
  • 开发指南: documents/development/coding-rules/frontend-rules.md 第12节