今天来跟大家分享一下我是如何用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为例，我会创建这些变量：

分享一段我最近最喜欢的用AI来学习的提示词，常常能在阅读AI给的知识中迸发出巨大的快乐。

「我常听人说第一性原理，但我觉得第一性原理更适合用来学习而非表达。我觉得那些最好的第一性原理藏在各个学科的基本教科书里。我是学经济学的，我觉得经济学中的供求关系会让我在看社会问题时有很不一样的视角。所以我想学习一下各个不同的学科门类的教科书中的基本知识，尤其是那些反常识的基本原理。我想和你一起共同学习和思考，我想请你告诉我在工学的基本教科书中存在的反常识的3条基本原理，能够让我耳目一新，给我带来启发，并给出详尽的解释、现实中的例子和权威的我可以继续学习的资料来源。如果能够类比到经济学和产品经理的工作中就最好了，但不强求，准确胜过牵强。」