AI导哈

设计系统代码转换工具

通过集成Figma MCP和Claude Code，将设计系统的变量和组件自动转换为生产就绪的代码。

  • by acttechie55
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 acttechie55/MCP-Test

使用说明

Figma MCP+Claude代码实验

探索整合的实验项目 Figma MCP （模型上下文协议） 克劳德代码 将设计系统变量和组件自动转换为生产就绪代码。

教程

在YouTube上观看完整的演练：

目的

本项目演示了如何：

  1. 将Claude Code连接到Figma 通过MCP协议
  2. 提取设计令牌 （颜色、排版、间距、效果）直接来自Figma
  3. 将设计标记转换为CSS变量 用于实际代码库
  4. 生成HTML/CSS组件 使用提取的变量与Figma设计相匹配

运作原理

Figma Design System → MCP Server → Claude Code → CSS Variables + HTML Components
  1. Figma桌面 在上运行MCP服务器 localhost:3845
  2. 克劳德代码 通过中的配置连接到此服务器 .claude/settings.json
  3. 然后，Claude可以使用Figma工具：
    • 读取设计标记(get_variable_defs)
    • 获取组件代码(get_design_context)
    • 截图(get_screenshot)
    • 分析结构(get_metadata)

设置

先决条件

  • Figma桌面应用已安装并正在运行
  • 克劳德代码CLI

配置

创建 .claude/settings.json 在您的项目中：

{
  "mcpServers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

创建此文件后重新启动Claude Code。

项目文件

文件 描述
flowbite-variables.css 从Figma中提取的CSS自定义属性
colors.html 使用CSS变量构建的调色板组件
context.md 用于恢复工作的会话上下文
.claude/settings.json MCP服务器配置

设计系统来源

本实验使用 Flowbite顺风CSS设计系统（免费版） 作为源Figma文件。

示例用法

要求Claude Code：

  • “从该Figma URL获取变量定义”
  • “将这些设计标记转换为CSS变量”
  • “使用我们的CSS变量为此Figma组件创建一个HTML页面”

许可证

这是一个用于学习目的的实验项目。

Figma MCP AI测试

使用Claude Code+Figma MCP将Figma设计系统自动转换为生产就绪的CSS变量和组件。

相关 MCP