引言

近期在进行移动端界面设计的课程实训，本次作业核心要求是完成一套完整的移动端高保真原型图。考虑到手动从零搭建原型耗时费力、效率极低，我对比测试了目前国内外主流的UI/原型设计工具，涵盖国外的Figma、Axure，以及国内常用的墨刀、MasterGO等主流平台，逐一适配本次作业需求。

经过实测对比，发现这些工具均存在明显短板，无法同时适配我的使用需求。多数工具的高阶设计、原型交互功能需要付费开通会员，使用成本较高；最关键的问题是，绝大多数主流工具不支持客户端MCP服务器，无法满足课程作业的核心使用要求，最终全部排除。

经过多轮筛选测试，最终找到适配度最高的设计工具——Pixso。这款工具精准解决了上述所有痛点，同时满足两大核心刚需：基础设计功能永久免费，无高额会员门槛，且原生支持客户端MCP服务器，完全契合课程原型设计作业、日常UI设计练习的使用场景，是性价比极高的原型设计工具。

Pixso官网 - AI原生UI设计工具_一键生成设计稿与代码_国产Figma替代

注：一定要下载客户端到电脑上，网页版用不了MCP。

配置MCP

首先下载好pixso,新建一个设计文件，原型设计是没有办法使用MCP服务器的，暂不支持页面的跳转和交互，不要创建错了。按照下图选择一个容器，选择自己要的界面类型。

接下来按照下图点击打开本地MCP服务器，这个时候下面会弹出URL,复制一下，后面配置需要使用。看了pixso的文档，目前是只支持Cursor,VScode，Windsurf（如果其他编译器能实现也可以尝试），这里以VScode为例。

同时选中你的容器，右键复制链接，这个也是后面和大模型交互的关键，大模型会在链接中进行创作。

打开 VS Code → Ctrl+Shift+P → 输入：

MCP: Open User Configuration

会自动打开全局 mcp.json，写入同上的 servers 配置即可。

{
    "servers": {
        "pixso": {
            "url": "http://127.0.0.1:3668/mcp",
            "type": "http"
        }
    },
    "inputs": []
}

官方文档是这样的格式，网址建议按照自己实际出现的为准。保存后即配置成功。

用GCMP插件添加国产大模型

想同时管理智谱、MiniMax、Moonshot、DeepSeek、百度千帆等国产大模型API的强烈推荐去安装插件GCMP，安装完成后重启 VS Code。VicBilibily/GCMP: 通过集成国内主流原生大模型提供商，为开发者提供更加丰富、更适合本土需求的 AI 编程助手选择。 目前已内置支持 智谱AI、MiniMax、MoonshotAI、DeepSeek、阿里云百炼、快手万擎、火山方舟、腾讯云、Xiaomi MiMo 等原生大模型提供商。 此外，扩展插件已适配支持 OpenAI 与 Anthropic 的 API 接口兼容模型，支持自定义接入任何提供兼容接口的第三方云服务模型。

接下来就是配置大模型，正好前几天用上了小米mimo的token plan，刚好找到一个有小米的服务商的，正常添加即可，选择模型中点击这个设置。

点击添加模型，发现基本上覆盖了国产所有的服务商，当然这里很细心列出不同订阅的不同密钥选择，粘贴自己的key即可完成，然后选择上自己添加的模型。

测试正常使用

接下来和大模型对话，记得粘贴上我们第一步的链接，提示词可以为这样。

我现在使用 Pixso MCP，链接：【粘贴你的 Pixso 容器链接】
请你作为资深前端工程师，基于这个 Pixso 设计稿，完成以下任务：

1. 技术栈：使用 [Vue3 / React / HTML+Tailwind]
2. 输出：生成可直接运行的代码，包含结构、样式、基础交互
3. 要求：
- 严格还原布局、颜色、字体、间距
- 语义化标签，代码规范，注释清晰
- 适配桌面端，尽量做响应式
- 不要省略关键样式，不要用占位图

请先简要分析设计结构，再给出完整代码。

附上我的记录：

等他完工之后，效果还是很能打的，更好的效果肯定需要更精准的提示词，一个小时可以完成之前近两三个小时的工作，还是很棒的。

放大来看，部分标签，组件的位置还是有瑕疵，可能有部分遮挡或者是不齐，手动微调一下即可。