AI导哈

电商演示应用

一个与Figma MCP服务器集成的电商演示应用程序，用于验证Figma设计信息与代码信息的结合效果。

  • by ktroima
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 ktroima/figma_mcp_test

使用说明

EC网站演示-Figma MCP协作

这是与Figma MCP服务器合作的EC网站（电子商务网站）的演示应用程序。

🎨 特徴

  • 电子商务网站功能

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

  • Figma MCP连携

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

🔍 调查目的

此存储库是一个验证存储库，用于在使用Figma的Dev seat/Dev Mode和MCP协作将Figma上的设计信息和代码信息结合起来时，调查对前端实施的工时削减和设计系统遵守有多大效果。

详细背景、假设、调查观点、成功条件 doc/research-purpose.md 来修改标记元素的显示属性。

📦 所需环境

  • 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设定

如果要在MCP客户端（如Claude Desktop或Cursor）上使用，请在配置文件中添加以下内容：

{
  "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

📝 许可证

国际协调委员会

🤝 貢献

欢迎拉式点播！

相关 MCP