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