首个支持 Streamable HTTP 的 Figma MCP， @f2c/mcp 先导版预告

KenXu
393 阅读2分钟

F2C 项目介绍

Figma & AI相结合生成开发代码的一站式解决方案 github | 项目官网

低门槛高提效

  • 非入侵式接入到任意web前端、React Native等开发工作流
  • 灵活的架构组合，可以实现除 Figma外的更多数据接入的可能性如 PSD,Sketch 等

UI 智能转换 生产级代码

  • 支持 React 以及 (React-Native Vue) 等主流开发框架代码输出
  • 智能识别 Var、List、Slot、Bg、Tabs等标签生成相应代码，后续根据约定可以实现更多可能性

交付逻辑提效

  • 产品推进过程避免不了重复来回的修改，从F2C的角度是，设计上的布局、交互上的修改，可以基本一键完成，免除了来回沟通修复的过程
  • 设计的验收问题，从目前生成的效果来看，可以很大程度上1比1完成相关静态交互稿

简化开发难度

  • 布局自动化，css布局一键生产，高度还原，高速提效
  • 代码语义化，消除开发对代码的阅读难度
  • 划分合理化，生成代码与业务代码很好分离，每个需要定制的组件都会导出相应的可编辑项

F2C MCP

从设计稿到代码、使用介绍

Getting 快速开始

  1. 在.env文件中设置您的Figma API密钥：
FIGMA_API_KEY=your_api_key_here
  1. 安装依赖：
npm install
  1. 启动开发服务器：
npm run dev

添加MCP服务

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": ""
      }
    }
  }
}

添加MCP服务 (Windows)

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@f2c/mcp"],
      "env": {
        "personalToken": ""
      }
    }
  }
}

添加 Streamable HTTP

{
  "mcpServers": {
      "f2c_mcp": {
        "transport": "streamable_http",
        "url": "http://localhost:3000/mcp",
        "headers": {},
        "timeout": 50
      }
    }
}

通过MCP服务、接入 user rule，结合上下文、可以直接生成项目组件代码，具体使用流程和案例会持续更新、敬请期待！

avatar
文章
阅读
粉丝