今天来跟大家分享一下我是如何用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为例,我会创建这些变量:
1️⃣ 颜色变量:定义主色、辅助色、背景色、文字色等。
比如主色我设置为#FF6B35(活力橙),然后把所有需要用主色的地方(按钮、图标、强调文字等)都绑定这个变量。
以后如果要换主题色,只需要修改这一个变量,整个设计稿的颜色就会同步更新。
2️⃣ 数值变量:管理各种尺寸参数。
我一般会定义spacing-xs(4px)、spacing-sm(8px)、spacing-md(16px)、spacing-lg(24px)这样的间距变量,还有字号变量font-xs(12px)、font-sm(14px)、font-md(16px)等。
用了这些变量后,整个设计的间距和字号就会很规范,不会出现这里14px那里15px的混乱情况。
3️⃣ 文本变量:存储那些会重复出现的文案。
比如按钮上的"立即开始"、"查看详情"这些文字,定义成变量后,如果产品经理要改文案,你只需要改一次就行了。
这里要重点说一下变量的一个强大功能:模式切换。
比如我在做这个App的时候,希望同时设计深色和浅色两套主题。
传统做法需要复制一份设计稿,然后逐个修改颜色,工作量巨大,而且后期维护也很麻烦。
用变量系统就简单多了,我可以直接创建两个模式:"浅色模式"和"深色模式",然后给同一个颜色变量在不同模式下设置不同的值。
比如背景色变量,在浅色模式下设置为#FFFFFF,在深色模式下设置为#1A1A1A。
设置完成后,只需要在右侧面板切换模式,整个设计稿就会自动切换主题。
这个功能不仅可以节省时间,还能确保两套主题的设计一致性。
第四步:设计稿转代码
借助Pixso MCP,你可以直接把你的设计稿转成代码。
具体怎么操作呢?
首先确保你安装了最新版的Pixso客户端,然后在文件菜单里启用Pixso MCP。
启用后,画布底部会出现一个提示,说明MCP服务已经开启。
接下来需要把Pixso MCP集成到你的代码编辑器里。
我用的是Cursor,配置过程很简单。
打开Cursor的设置,找到Tools & MCP,添加一个自定义MCP,粘贴配置代码,保存后启动就可以了。
配置完成后,回到Pixso,选中你要转换的设计稿(一个容器或者组件),右键复制链接。
然后切换到Cursor,打开Agent模式,粘贴链接,告诉它"生成HTML代码"或者"生成React组件"。
几分钟后,Cursor就会自动生成对应的前端代码。
这个功能对前端工程师来说也很友好,可以直接在Cursor里获取设计稿数据,包括样式、间距、颜色等,不用再手动去量尺寸了。而且因为代码是AI生成的,命名规范、代码结构都比较标准。
特别是当你用了变量系统后,MCP在转换代码的时候也能识别这些变量,生成的CSS会使用CSS变量,这样前端后续维护起来也很方便。
当然,对于设计师来说,最终还是要看你能不能做出好的设计。
如果你现在正在寻找合适的UI设计工具,可以试试Pixso,个人版免费,上手成本低,功能也足够强大。
当然,工具会不断迭代,方法也会持续优化,保持学习的热情、享受设计的过程,才是最重要的。