mcpField
F
Figma to Vue MCP Server

Figma to Vue MCP Server

本地服务
github.com/Tomas-Jankauskas媒体与设计1087 周前更新
代码仓库

关于 Figma to Vue MCP Server

Figma to Vue MCP Server 将 Figma 设计转换为 Vue 3 组件，面向采用 Hostinger 设计系统和 HComponents 的团队。它生成 TypeScript 组件，并支持响应式布局和 BEM 风格 CSS。

主要功能

  1. 01将 Figma 设计生成 Vue 3 组件
  2. 02适用时使用 HComponents
  3. 03生成 BEM 风格 CSS 类
  4. 04处理响应式布局
  5. 05支持 props 和动态内容

适用场景

  1. 01将 Figma 设计转为 Vue 组件
  2. 02使用 HComponents 构建界面
  3. 03生成适配响应式布局的组件

MCP 相关

这是一个根据 Figma 设计生成 Vue 组件的 MCP 服务。其文档接口通过 `/generate-component` 接收 Figma URL 和组件名称。

#figma#vue#component-generator

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

暂未收录安装方式

我们还没有获取到这个服务的安装包或远程地址，请按项目 README 中的说明安装。

代码仓库

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

Figma to Vue MCP Server

一个模型上下文协议（MCP）服务，可根据 Figma 设计生成 Vue 3 组件，并遵循 Hostinger 的设计系统和 HComponents 要求。

功能

  • 将 Figma 设计转换为使用 TypeScript 和 <script setup> 语法的 Vue 3 组件
  • 在适当的情况下自动导入并使用 HComponents
  • 生成 BEM 风格的 CSS 类
  • 保持设计系统的一致性
  • 处理响应式布局
  • 支持组件属性和动态内容

设置

  1. 克隆仓库：
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp
  1. 安装依赖项：
npm install
  1. 创建 .env 文件并填入 Figma 访问令牌：
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, defaults to 3000
  1. 启动服务：
npm run dev  # For development
# or
npm start    # For production

使用方法

向 /generate-component 发送 POST 请求，并附上以下请求体：

{
  "figmaUrl": "https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]",
  "componentName": "MyComponent"
}

服务将返回：

{
  "component": "// Generated Vue component code"
}

示例

curl -X POST http://localhost:3000/generate-component \
  -H "Content-Type: application/json" \
  -d '{
    "figmaUrl": "https://www.figma.com/file/abc123/MyDesign?node-id=1:1",
    "componentName": "YoutubeLinks"
  }'

开发

  • npm run dev：启动支持热重载的开发服务
  • npm run build：构建生产版本
  • npm test：运行测试

贡献

  1. Fork 此仓库
  2. 创建功能分支（git checkout -b feature/amazing-feature）
  3. 提交更改（git commit -m 'Add amazing feature'）
  4. 推送到分支（git push origin feature/amazing-feature）
  5. 发起 Pull Request

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。