Figma到Vue MCP服务器

这是一个模型上下文协议（MCP）服务器，它根据Hostinger的设计系统和HComponents的要求，从Figma设计生成Vue 3组件。

特性

• 将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

2. 安装依赖项：

npm install

3. 创建一个包含你的Figma访问令牌的.env文件：

FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # 可选，默认为3000

4. 启动服务器：

npm run dev  # 开发模式
# 或者
npm start    # 生产模式

使用方法

向/generate-component发送POST请求，请求体如下：

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

服务器将返回：

{
  "component": "// 生成的Vue组件代码"
}

示例

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. 分叉仓库
2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m '添加了惊人的功能')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开拉取请求

许可证

MIT