AI导哈

Figma令牌提取与主题生成工具

一个用于从Figma设计系统中提取设计令牌并生成Tailwind CSS v4主题的工具，适用于设计系统开发和管理。

  • by abhayzmp
  • CSS
  • 本地部署
  • 更新于
在 GitHub 查看 abhayzmp/mcp_figma_report

使用说明

MAPS设计系统——Figma令牌提取与主题

Figma设计令牌提取、Tailwind CSS v4主题生成和MAPS设计系统的工具分析。

Figma文件： 地图

项目结构

.
├── theme.css                          # Tailwind CSS v4 theme (production-ready)
├── figma_exports/                     # Source JSON exports from Figma Variables panel
│   ├── Value.tokens.json              #   Primitive collection (colors, numbers, strings)
│   ├── Light.tokens.json              #   Color collection — Light mode
│   ├── Dark.tokens.json               #   Color collection — Dark mode
│   └── Mode 1.tokens.json             #   Number-Font collection
├── variables2css/
│   └── theme.css                      # Raw Variables2CSS plugin export (reference only)
├── reports/
│   ├── 2026-01-16/                    # Initial design system audit
│   │   ├── README.md                  #   Original audit summary & scorecard
│   │   ├── 01-design-system-overview.md
│   │   ├── 02-variables-tokens-analysis.md
│   │   ├── 03-components-analysis.md
│   │   ├── 04-mvp-pages-analysis.md
│   │   ├── 05-recommendations.md
│   │   └── 06-ai-mcp-consumability.md
│   └── 2026-02-16/                    # Token extraction & theme generation
│       ├── report.md                  #   Session report & progress
│       ├── figma-variables-extraction.md  # Complete 238-token inventory
│       ├── figma-mcp-limitations.md   #   MCP, plugin & API limitation analysis
│       └── theme-mcp-draft.css        #   Initial MCP-only extraction (incomplete, reference)
└── README.md                          # This file

进度跟踪器

日期 焦点 关键成果
2026年1月16日 初始设计系统审计 6部分报告：结构、令牌、组件、MVP页面、建议、AI可消费性
2026年2月16日 代币提取和Tailwind v4主题 提取了238个代币， theme.css 生成，记录工具限制

1月16日——设计系统审核

MAPS-Figma设计系统的初步审查包括：

  • 设计系统结构和架构
  • 变量/代币库存和缺口分析
  • 组件质量评估（60%）
  • MVP页面一致性（65%）
  • 优先改进路线图
  • AI/MCP消耗性分析

报告： reports/2026-01-16/

2月16日——代币提取和主题生成

从3个Figma变量集合中提取了所有238个设计标记，并生成了一个支持全亮/暗模式的生产就绪Tailwind CSS v4主题。测试并记录了4种提取方法的限制（MCP工具、Variables2CSS插件、手动JSON导出、REST API）。

1月16日以来的主要更正：

  • 代币计数从~95修订→ 238 （完全提取）
  • MCP可消费性降低——工具仅达到约60%的覆盖率
  • 之前标记为“完成”的几个令牌类别是不完整的

报告： reports/2026-02-16/report.md

主题文件： theme.css

4层架构的Tailwind CSS v4主题：

层 指令 目的
1 @theme { } 原始令牌——生成Tailwind实用程序类
2 @theme inline { } 语义别名——没有值重复的实用程序
3 :root { } 光模式绑定（内部变量→ 图元）
4 :root { @variant dark { } } 黑暗模式覆盖

令牌摘要

类别 计数
颜色（图元） 95
数字（基元） 25
字符串（字体系列、粗细） 4
语义颜色别名（浅+深） 57
组件标记（间距、填充、半径、笔划、尺寸、排版） 57
总计 238

提取方法总结

方法 值 别名 模式 自动化 需要计划
MCP get_variable_defs 约60% 否 单身 是 任何
Variables2CSS插件 100% 是 两者都有（CSS损坏） 否 任何
手动JSON导出 100% 是 两者都有 否 任何
REST API+PAT 不适用 不适用 不适用 是 企业

推荐方法： 手动JSON导出 作为事实来源，根据插件输出进行验证。

看 reports/2026-02-16/figma-mcp-limitations.md 为了进行全面分析。

未结项目

  • []修复 mmedium Figma中的拼写错误(gradients/severity/mmedium-primary-transparent)
  • []审查并弃用26个遗留令牌(semantic/old/*, data-viz/old/*)
  • []将阴影/仰角标记添加到Figma
  • []添加z索引和断点标记
  • []集成 theme.css 进入应用程序构建管道
  • []评估Figma Enterprise的REST API变量访问和自动同步
  • []重新审视组件质量（60%）和MVP页面一致性（65%）得分

相关 MCP