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

PIX 是 Working Reference 做的 skill。把它装进 Claude Code 或 Codex，再给一个 Figma 链接，AI 就会把界面写成代码，然后给做好的界面截图，逐个区块和原稿比对，一直改到相似度超过 98%。同一份设计稿，只说一句「帮我实现这个设计」让 AI 做，和用 PIX 做，结果我们并排放在了一起。

2026年10月6日·3 个案例

咖啡点单 App 首页的三张图：左边是 Figma 原稿；中间是用「帮我实现这个设计」做出的界面，图标、标签栏等六处标着绿色虚线；右边是用 PIX 做出的界面，和原稿一致 — 从左到右：Figma 原稿、用「帮我实现这个设计」做出的界面、用 PIX 做出的界面。绿色虚线标出的是和原稿不同的地方。来源：Working Reference

Working Reference：PIX skill 与亲自跑出的前后对比，2026-06-15

Working Reference Threads：用 Claude 把 Figma 设计 99% 原样复刻（韩文），2026-04-09（5 月 30 日浏览 34,049）

Saqoosha — Pencil × Claude Code でデザインを Pixel Perfect に再現させるまで粘った話（背景像素一致率 99.8%）

最上面这张图，是同一份咖啡点单 App 首页设计稿用两种方式实现的结果。左边是 Figma 原稿。中间是接上 Figma MCP、只说一句“이 디자인 구현해 줘”（帮我实现这个设计）做出来的界面：筛选图标和底部标签栏图标变了样，分类标签那一行也散了。右边是用 PIX 实现同一份设计稿的界面。

PIX 起源于 Working Reference 4 月在 Threads 上发的一次实验。那条写着“피그마 디자인을 99% 그대로..... 클로드 딸깍 복제...... 성공”（把 Figma 设计 99% 原样……用 Claude 一键复刻……成功）的帖子，到 5 月 30 日浏览了 3.4 万次。当时是看到日本开发者 Saqoosha 的文章后跟着做的：他把实现画面和设计稿之间的像素差异拿给 Claude Code 看，让它照着改，把背景像素一致率做到了 99.8%。 Working Reference 把这套方法打包成一个 skill，6 月 15 日以 PIX 的名字公开。

PIX 拿到 Figma 链接后，会先读懂界面结构，把图标和图片从代码里单独导出，再用代码搭出界面。接着给实现好的界面截图，逐个区块用 Pixelmatch 和原稿比对，一直改到一致率超过 98%。如果 Figma API 触发请求上限，它会直接在 Chrome 里打开 Figma 页面接着干。

Reference 01Working Reference · 咖啡点单 App 首页设计稿（移动端）

普通做法会把图标换掉的 App 界面，PIX 连图标都照原稿搬了过来

用「帮我实现这个设计」做出的界面，和原稿不同的地方有六处：筛选图标和底部标签栏图标变了样；横幅文案背后的黑色色带不见了；分类标签只剩下 'Coffee' 一个；评分徽章从照片右边挪到了左边；价格的字体也和原稿不同。用 PIX 实现的界面，这六处全都和原稿一致。

用「帮我实现这个设计」做出的界面上半部分：筛选图标变成三条线，横幅文案背后没有黑色色带，标签栏只剩 'Coffee' 一个 — 「帮我实现这个设计」：筛选图标变了，横幅的黑色色带和标签栏不见了

用 PIX 做出的界面上半部分：和原稿一样的筛选图标、横幅文案背后的黑色色带，以及 All Coffee、Machiato、Latte 标签栏 — PIX：筛选图标、横幅的黑色色带、标签栏都和原稿一样

PIX 把图标和图片从代码里单独导出，是有原因的。开发过程中，曾让它直接用 MCP 给出的代码，结果一致率达到 99.38%，图标却全坏了。光看数字发现不了图标出错，所以才加上了单独导出素材这一步。

Reference 02Working Reference · 招聘网站落地页设计稿（桌面端）

交出招聘网站首屏设计稿，人物照片和紫色搜索框都出现在和设计稿一样的位置

这是招聘网站 Brainwave.io 首屏的设计稿。绿色背景上的两行标题、紫色搜索框、右边的人物照片和圆点花纹，在 PIX 用代码实现的界面里，全都以同样的颜色出现在和原稿一样的位置。

Brainwave.io 招聘网站首屏的两张图：左边是 Figma 原稿，右边是 PIX 实现的页面。绿色背景、'Find a dream job that changes life.' 标题、紫色搜索框和右侧人物照片都一样 — 左边是 Figma 原稿，右边是用 PIX 实现的界面。

Reference 03Working Reference · 服务介绍页的流程区块（桌面端）

曲线和大号数字叠在一起的流程区块，连曲线上的圆点和说明文字都照设计稿还原

这个区块里，橙色曲线上排着三个步骤圆点，背后衬着灰色的大号数字 1、2、3 和浅色圆形。在 PIX 实现的界面里，曲线弯曲的形状、圆点的位置、每一步说明文字的位置，都和原稿一样。

'We have best team and best process' 区块的两张图：橙色曲线上的三个圆点、灰色大号数字 1、2、3 和步骤说明，在左边 Figma 原稿和右边 PIX 实现里位置相同 — 左边是 Figma 原稿，右边是用 PIX 实现的界面。

怎么开始

把 PIX 技能文件交给 Claude Code 或 Codex，再粘贴下面的请求就行。它适用于用 HTML、CSS 绘制界面的项目，第一次需要 Figma 个人访问令牌和 Chrome 连接。

起步提示词
我想用这篇文章里的 PIX，把 Figma 设计原样变成代码。 https://www.working-ref.com/zh/reference/pix-2026-10 把我给你的 PIX 文件装成技能，需要的设置一步一步带我做。设置完成后，把这个 Figma 画框［粘贴链接］实现到这个项目里，并指出像标志、图标这类需要我亲眼确认的地方。
下载 pix.SKILL.md ↗

分享此参考

每周一期 · 免费

这篇参考对你有帮助吗？

每周海量 AI 资讯里的 BEST
只挑 3 条，直接送到你的邮箱

Work Smarter with AI

订阅成功下一期起，我们在你的邮箱见。