引言近期在进行移动端界面设计的课程实训本次作业核心要求是完成一套完整的移动端高保真原型图。考虑到手动从零搭建原型耗时费力、效率极低我对比测试了目前国内外主流的UI/原型设计工具涵盖国外的Figma、Axure以及国内常用的墨刀、MasterGO等主流平台逐一适配本次作业需求。经过实测对比发现这些工具均存在明显短板无法同时适配我的使用需求。多数工具的高阶设计、原型交互功能需要付费开通会员使用成本较高最关键的问题是绝大多数主流工具不支持客户端MCP服务器无法满足课程作业的核心使用要求最终全部排除。经过多轮筛选测试最终找到适配度最高的设计工具——Pixso。这款工具精准解决了上述所有痛点同时满足两大核心刚需基础设计功能永久免费无高额会员门槛且原生支持客户端MCP服务器完全契合课程原型设计作业、日常UI设计练习的使用场景是性价比极高的原型设计工具。Pixso官网 - AI原生UI设计工具_一键生成设计稿与代码_国产Figma替代注一定要下载客户端到电脑上网页版用不了MCP。配置MCP首先下载好pixso,新建一个设计文件原型设计是没有办法使用MCP服务器的暂不支持页面的跳转和交互不要创建错了。按照下图选择一个容器选择自己要的界面类型。接下来按照下图点击打开本地MCP服务器这个时候下面会弹出URL,复制一下后面配置需要使用。看了pixso的文档目前是只支持Cursor,VScodeWindsurf如果其他编译器能实现也可以尝试这里以VScode为例。同时选中你的容器右键复制链接这个也是后面和大模型交互的关键大模型会在链接中进行创作。打开 VS Code →CtrlShiftP→ 输入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 / HTMLTailwind] 2. 输出生成可直接运行的代码包含结构、样式、基础交互 3. 要求 - 严格还原布局、颜色、字体、间距 - 语义化标签代码规范注释清晰 - 适配桌面端尽量做响应式 - 不要省略关键样式不要用占位图 请先简要分析设计结构再给出完整代码。附上我的记录等他完工之后效果还是很能打的更好的效果肯定需要更精准的提示词一个小时可以完成之前近两三个小时的工作还是很棒的。放大来看部分标签组件的位置还是有瑕疵可能有部分遮挡或者是不齐手动微调一下即可。