Loading...

Working Reference原创

Figma设计,98%原样变成代码

“稿已经完美了,怎么一做出来就成了另一张页面?”——就是这股憋屈,我们自己做了这个技能。同一份稿,用普通方法和pix各做一遍的结果,原样给你看。

Figma原稿

设计师给的稿

Figma原稿 — 咖啡点单App首页
让MCP做

“把这个设计做出来”

用MCP做出来的页面 — 图标缺失,字体和banner错位用绿色标出
让pix做

同一句话,只多了技能

用pix做出来的页面 — 和原稿几乎分不出来
我们自己跑出来的。中间是普通做法(接上Figma MCP)——图标没了,字体跑了,banner设计也散了。绿色标记全是对不上的地方。pix写完代码,会按像素跟原稿对照(Pixelmatch),一直改到一致率超过98%。
Figma原稿

桌面落地页稿

桌面落地页的Figma原稿
让pix做

代码跑出来的页面

pix用代码做出来的桌面落地页 — 和原稿一样
桌面也一样。哪边是稿、哪边是代码,很难一眼分出来。
订阅专属

← AI技能