figma MCP test

EC站点演示-Figma MCP协作

Figma MCP与服务器协作EC站点（电子商务站点）的演示应用程序。

🎨 特徴

• EC站点功能

- 商品一覧表示 - 购物车 - 商品的追加·删除 - 购入机能

• Figma MCP连携

- 获取和应用设计标记 - 同步购物车数据 - 记录事件日志 - MCP与服务器的双向通信

📦 所需环境

• Node.js (v14以上)
• npm 或yarn

🚀 安装

# リポジトリをクローン
git clone https://github.com/ktroima/figma_mcp_test.git
cd figma_mcp_test

# 依存関係をインストール
npm install

💻 用法

Web以服务器模式启动

npm start

在浏览器中 http://localhost:3000 中所述修改相应参数的值。

MCP以服务器模式启动

npm run mcp

在该模式下MCP客户端（Claude Desktop或Cursor等）进行连接。

🔧 MCP设定

Claude Desktop啊Cursor等的MCP在客户端使用时，请在配置文件中添加以下内容：

{
  "mcpServers": {
    "figma-ec-demo": {
      "command": "node",
      "args": [
        "/path/to/figma_mcp_test/src/server.js",
        "--mcp"
      ]
    }
  }
}

🛠️ 可用的MCP工具

1. get_design_tokes - Figma获得设计标记
2. update_design_tokes -更新设计标记
3. get_cart_data -获取当前购物车数据
4. get_event_logs -获取事件日志

📁 项目结构

figma_mcp_test/
├── public/              # フロントエンドファイル
│   ├── index.html      # メインHTML
│   ├── styles.css      # スタイルシート
│   └── app.js          # フロントエンドJavaScript
├── src/
│   └── server.js       # ExpressサーバーとMCPサーバー
├── mcp-config.json     # MCP設定ファイル
├── package.json        # プロジェクト設定
└── README.md           # このファイル

🎯 API 端点

• GET /api/figma/status - Figma MCP获取连接状态
• GET /api/figma/design-tokens -获取设计标记
• POST /api/figma/design-tokens -更新设计标记
• POST /api/figma/sync -同步购物车数据
• POST /api/figma/log -记录事件日志
• GET /api/figma/logs -获取事件日志
• GET /api/figma/cart -获取购物车数据

🧪 开発

# 開発サーバーを起動
npm run dev

📝 许可证

ISC

🤝 貢献

欢迎拉式点播！