今天来跟大家分享一下我是如何用Pixso做UI设计的，从零上手到最后输出前端代码的完整流程。

分以下三部分给大家介绍：为什么我从Figma切换到了Pixso，如何快速生成UI设计稿，以及怎么把效率拉满。

Pixso这个工具其实是我一个设计师朋友前段时间推我的，我体验下来觉得这个工具完全可以作为Figma国产平替。

它基本上把Figma的核心功能都覆盖了，而且个人版完全免费，功能使用不受限制，对于个人设计师或者小团队来说性价比真的很香。

更重要的是，Pixso今年上线了AI生成设计稿的功能，还有最近刚推出的MCP协议支持，可以直接把设计稿转成代码。

下面进入正题，说说具体怎么操作👇

第一步：用AI生成初始设计稿

这是我现在最常用的起手方式，具体操作很简单，打开Pixso，在画布上找到AI助手，直接用自然语言描述你要做什么。

比如我想做一个外卖类App的设计，我可以这么输入：
"Create a vibrant food delivery app with 3 pages: Home, Search and Product Detail, using a white base with orange and yellow accents."

等几分钟，AI就会给你生成一个完整的页面设计。

第二步：优化和调整设计稿
AI生成的初稿肯定不是完美的，接下来需要手动调整优化，你可以直接点击右上角edit按钮编辑。

这个阶段我主要关注三个方面：
首先是视觉层级，检查页面上的信息是否有清晰的主次关系，重要的内容是否足够突出。比如我加大标题的字号，调整元素之间的间距，确保用户浏览的时候能快速抓住重点。

其次是交互细节，补充一些AI可能遗漏的状态，比如按钮的悬停状态、点击反馈、加载状态等。
以这个页面为例，页面逻辑有些问题，我可以直接框住需要调整的元素，提出修改建议。

调整检查好没问题，就可以点击右上角，一键导入到pixso了。

稍等几分钟即可～

第三步：建立变量系统
这一步是重点，也是我觉得Pixso最强大的地方。
通过变量系统，你可以让设计稿变得非常灵活，后期修改的时候能节省大量时间。

变量系统听起来有点复杂，但其实很简单，你可以把它想象成Excel里的公式，定义一次，多处引用，修改一个地方就能全局更新。

点击设计-本地变量-创建变量。

以我做的这个外卖App为例，我会创建这些变量：