Loading...

Figma 实现 skill · PIX

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-15Working 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 里用，Working Reference 亲自跑过的环境是 Claude Code。它适用于用 HTML、CSS 绘制界面的项目（比如 Next.js 加 Tailwind）。最后那 2% 还得靠人看，Logo 和图标请亲眼检查一遍。

  1. 1

    下载 PIX skill 文件

    不用注册就能下载。

    下载 pix.SKILL.md ↗
  2. 2

    把下载的文件交给编程 AI，请它指导安装和设置

    第一次用需要 Figma 个人访问令牌（personal access token）和浏览器连接。Claude Code 用 Claude in Chrome 扩展，Codex 用 Computer Use 插件。Figma API 的请求上限很紧，处理大文件时几乎总会切换到 Chrome 那边。这些设置，AI 也会一步步带你完成。

    PIX 页面上给的安装请求

    이 파일을 스킬로 설치해줘. 그리고 이 스킬을 쓰는 데 필요한 세팅이 있으면 하나씩 안내해줘.

  3. 3

    在 Figma 里复制要实现的画框链接，接在 /pix 后面发出去

    在 Figma 里右键点击画框，选 'Copy link to selection'，就能复制链接。

    调用 PIX

    /pix [복사한 피그마 링크]

    把方括号那里换成复制的链接。在 Codex 里，用 $pix 代替 /pix 调用。

需要准备

  • Claude Code 或 Codex
  • Figma 个人访问令牌
  • Chrome（Claude Code 需要 Claude in Chrome 扩展，Codex 需要 Computer Use 插件）
  • 用 HTML、CSS 绘制界面的项目

分享此参考

这个参考对您有帮助吗？

每周精选参考直达您的邮箱