Vextra是一个功能强大的开源在线协作设计软件，支持Figma(.fig)和Sketch(.sketch)文件格式。它提供了完整的在线设计工具链，包括编辑器、实时协作功能等核心特性。这个项目由KCai Technology开发，并已上线在Vextra.cn运营。采用AGPL-3.0开源许可证，完全免费可商业使用。

快速开始

下载快速开始代码并运行

git clone https://github.com/kcaitech/vextra-quickstart.git
# 在windows中使用git-bash执行
./docker-run.sh up

看到输出如下内容即是成功部署啦

亦可通过docker-desktop查看运行情况

访问首页

在浏览器中访问http://localhost显示如下内容就是部署成功啦

点击「免费使用」后进行注册登陆即可进行文档管理界面了

在这可以快速打开本的figma、sketch进行分享协作。

即刻开始你的团队协同设计之旅吧。

MCP使用步骤

在浏览器中访问http://localhost:82查看mcp配置说明

根据上面介绍，我们需要先创建创建access_key跟access_secret
步骤是：

1. 在文档管理页右上角进行「个人中心」
   

2. 进入个人中心新建access_key跟access_secret
   

需要注意保存好access_secret，下次再打开这个页面是不可见的。当然遗失了只需要再新建一个就好了。

3. 根据mcp页（http://localhost:82）的配置，将新建的access_key跟access_secret替换掉默认配置。同时需要注意下上面配置的http://localhost没带端口号，需要改成http://localhost:82，如下

{
  "mcpServers": {
    "Vextra MCP": {
      "url": "http://localhost:82/sse?access_key=76fe38c3-319f-423d-96e6-069bd53e4f47&access_secret=********-****-****-****-************",
      "messageUrl": "http://localhost:82/messages",
      "type": "sse",
      "headers": {
        "Accept": "text/event-stream",
        "Cache-Control": "no-cache"
      }
    }
  }
}

4. 将这个配置写入到cursor的mcp配置文件里，配置成功后可以看到亮起的小绿点
   

生成设计稿工程及代码

1. 接下来打开设计稿，复制选区链接
   

2. 将链接给cursor就可以开始生成代码啦
   

这里给cursor的指令为：
使用vue+ts实现此页面
http://localhost/document/32110bf1-e86b-49f0-878c-0ab47ce8d485/1459CE9A-B502-4C72-8EF0-CFDBB4DAA819/F2ACA917-F944-441E-A984-CAC3D51D95FB
需要的图片资源请从文档中获取

3. 经过cursor一步步交互执行后，生成代码如下
   

4. 对比设计稿跟生成效果
   
   

效果还是很不错了！
至此cursor已经搭建好基础的工程配置及基本的界面布局，代码不用从零开始啦.

最后你觉得Vextra怎么样？欢迎在评论区分享你的想法和使用体验！ 🚀

​