这是一个模型上下文协议 (MCP) 服务器,其核心价值在于能够将 Figma 设计高效转换为符合 Hostinger 设计系统和 HComponents 要求的 Vue 3 组件,为前端开发提供了极大的便利。
本服务器可将 Figma 设计无缝转换为 Vue 3 组件。以下是启动服务器的步骤:
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp
npm install
.env 文件并添加你的 Figma 访问令牌:FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000 # 可选,默认为 3000
npm run dev # 开发模式
# 或者
npm start # 生产模式
语法的 Vue 3 组件向 /generate-component 发送 POST 请求,请求体如下:
{
"figmaUrl": "https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]",
"componentName": "MyComponent"
}
服务器将返回:
{
"component": "// 生成的 Vue 组件代码"
}
使用 curl 工具发送请求的示例:
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: 运行测试git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)本项目采用 MIT 许可证。