设计令牌同步工具

ForgeKit Figma MCP

Figma和你的代码库之间的桥梁。

ForgeKit是一个功能强大的CLI工具和MCP服务器，可以将Figma变量（设计令牌）直接同步到您的项目中。它支持多种框架，处理复杂的别名解析，并自动管理亮/暗模式。

🚀 为什么是ForgeKit？

• 全面支持：与合作 Chakra用户界面 （v2和v3）， 遮阳/顺风，并生成 文档.
• 智能登机：只需粘贴您的Figma URL。ForgeKit会检测您的框架并设置所有内容。
• 入门套件：没有设计系统？ForgeKit为Chakra和Shadcn提供启动文件。
• 语义令牌：自动将Figma模式（亮/暗）映射到CSS变量或主题对象。
• 安全：自动管理您的 FIGMA_ACCESS_TOKEN 在 .env 并将其添加到 .gitignore.

📦 安装

npm install forgekit-figma-mcp

⚡ 快速开始

最简单的开始方式是交互式 init 命令。

1.初始化

npx forgekit init

接下来会发生什么？

1. 粘贴您的Figma URL：您不需要找到文件ID。只需粘贴整个链接即可。
   • 提示：如果您提供了URL，ForgeKit将对其进行分析，并自动为您选择正确的框架。
2. 输入您的令牌如果你没有，我们会指导你。它被安全地保存到 .env.
3. 选择输出：选择一个或多个：
   • Chakra UI v3 新 createSystem 格式）
   • Chakra UI v2 （经典 extendTheme)
   • Shadcn/Tailwind （生成 globals.css 变量和配置）
   • Documentation （Markdown和JSON）

2.同步

配置后，每当您的设计团队更新Figma时，请运行此命令：

npx forgekit sync

您的主题文件、CSS变量和文档现在都是最新的！

🎨 支持的框架

Shadcn用户界面/顺风CSS

ForgeKit生成Shadcn主题化系统所需的CSS变量。

输出：

• globals.css：包含 :root 和 .dark 变量（例如。， --primary, --muted-foreground).
• tailwind.theme.json：可以导入的配置片段 tailwind.config.ts.

配置：

{
  "format": "shadcn",
  "dir": "./src/theme",
  "cssPath": "./src/app/globals.css"
}

Chakra UI v3

生成现代 createSystem 配置。

输出：

• tokens.ts：原始标记（颜色、间距）。
• semanticTokens.ts：模式感知令牌。
• index.ts：出口 system 对象。

Chakra UI v2

生成经典 extendTheme 对象。

输出：

• colors.ts, space.ts等等。
• index.ts：出口 theme 对象。

文档

非常适合故事书或内部文档网站。

输出：

• tokens.md：颜色、间距和半径的可视化Markdown表示。
• tokens.json：用于构建自定义视图的原始标记数据。

⚙️ 配置(forgekit.json)

您可以使用配置文件处理复杂的设置（例如从不同文件中获取不同的令牌）。

{
  // Global source file (optional if overridden below)
  "figmaFileId": "12345abcdef...", 
  
  "outputs": [
    { 
      "format": "chakra-v3", 
      "dir": "./src/theme" 
    },
    { 
      "format": "shadcn", 
      "dir": "./src/theme",
      "cssPath": "./src/app/globals.css",
      // Optional: Source Shadcn tokens from a specific file
      "figmaFileId": "98765zyxw..." 
    },
    { 
      "format": "docs", 
      "dir": "./docs/design-system" 
    }
  ]
}

🤖 MCP服务器使用情况

ForgeKit也是 模型上下文协议（MCP） 服务器。这允许AI助手（如Cursor或Claude Desktop）直接与您的设计系统交互。

将此添加到MCP客户端配置中：

{
  "mcpServers": {
    "forgekit": {
      "command": "npx",
      "args": ["forgekit-figma-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_access_token"
      }
    }
  }
}

AI能做什么？

• “同步我的设计令牌。”
• “检查代码是否与Figma设计匹配。”
• “使用最新令牌生成新组件。”

🛠 CLI参考

同步参数（覆盖配置）：

🤝 贡献

1. 克隆仓库
2. 安装依赖项： npm install
3. 构建： npm run build
4. 在本地运行： node dist/cli.js init

许可证

麻省理工学院