Loading...

Figma実装スキル · PIX

Figmaのデザインが、98%そのままコードになります

PIXはWorking Referenceが作ったスキルです。Claude CodeやCodexに入れてFigmaのリンクを渡すと、AIが画面をコードで作り、その画面を撮影して原本とセクションごとに比べ、98%以上一致するまで直します。同じデザインを「このデザインを実装して」で頼んだ場合とPIXで頼んだ場合の結果を、並べて比べました。

2026年10月6日·事例 3件

コーヒー注文アプリのホーム画面3枚。左はFigmaの原本、中央は「このデザインを実装して」でできた画面で、アイコンやチップの列など6か所に緑の点線の印、右はPIXでできた画面で原本と同じ
左からFigmaの原本、「このデザインを実装して」でできた画面、PIXでできた画面です。緑の点線は原本と違う箇所です。出典：Working Reference
Working Reference：PIXスキルと、実際に動かした導入前後の結果（2026-06-15）Working ReferenceのThreads：Figmaのデザインを99%そのままClaudeで複製（2026-04-09、5月30日時点で表示34,049回）Saqoosha — Pencil × Claude Code でデザインを Pixel Perfect に再現させるまで粘った話（背景ピクセルの一致率99.8%）

一番上の画像は、コーヒー注文アプリのホーム画面のデザイン1つを、2つのやり方で実装した結果です。左がFigmaの原本です。中央はFigma MCPをつないで「このデザインを実装して」とだけ頼んだ画面で、フィルターアイコンと下部タブのアイコンが別の形に変わり、カテゴリーのチップの列が崩れました。右は、同じデザインをPIXで実装した画面です。

PIXは、Working Referenceが4月にThreadsに投稿した実験から始まりました。"피그마 디자인을 99% 그대로..... 클로드 딸깍 복제...... 성공（Figmaのデザインを99%そのまま…Claudeでポチッと複製…成功）"という投稿は、5月30日までに3万4千回表示されました。 日本の開発者Saqoosha氏が、実装した画面とデザインのピクセルの差をClaude Codeに見せながら直させ、背景ピクセルの一致率を99.8%まで高めたという記事を読んで、真似してみた実験でした。 Working Referenceはこの方法を1つのスキルにまとめ、6月15日にPIXとして公開しました。

PIXはFigmaのリンクを受け取ると、画面の構造を読み、アイコンや画像をコードとは別に書き出してから、画面をコードで組み立てます。次に、実装した画面を撮影して原本とセクションごとにPixelmatchで比べ、一致率が98%を超えるまで違う箇所を直します。Figma APIがリクエストの上限に達したら、ChromeでFigmaの画面を直接開いて作業を続けます。

Reference 01Working Reference · コーヒー注文アプリのホーム画面のデザイン（モバイル）

普通のやり方ではアイコンが変わってしまったアプリ画面を、PIXはアイコンまで原本どおりに再現しました

「このデザインを実装して」でできた画面で、原本と違う箇所は6か所ありました。フィルターアイコンと下部タブのアイコンが別の形に変わり、バナーの文言の後ろにあった黒い帯が消えました。カテゴリーのチップの列は「Coffee」1つだけが残り、星の評価バッジは写真の右から左へ移っています。価格のフォントも原本と違いました。PIXで実装した画面では、6か所すべてが原本と同じでした。

「このデザインを実装して」でできた画面の上部。フィルターアイコンが3本線の形に変わり、バナーの文言の後ろの黒い帯がなく、チップの列に「Coffee」1つだけが残っている
「このデザインを実装して」 · フィルターアイコンが変わり、バナーの黒い帯とチップの列が消えました
PIXでできた画面の上部。原本と同じフィルターアイコン、バナーの文言の後ろの黒い帯、All Coffee・Machiato・Latteのチップの列
PIX · フィルターアイコン、バナーの黒い帯、チップの列が原本と同じです

PIXがアイコンや画像をコードと別に書き出すのには理由があります。開発中、MCPが出したコードをそのまま使わせたところ、一致率は99.38%だったのに、アイコンがすべて崩れていました。数字だけではアイコンの間違いを見抜けないため、素材を別に書き出す段階を加えたのです。

Reference 02Working Reference · 求人サイトのランディングページのデザイン（デスクトップ）

求人サイトのファーストビューのデザインを渡すと、人物写真と紫の検索バーまでデザインと同じ位置に再現されました

Brainwave.ioという求人サイトのファーストビューのデザインです。緑の背景に載った2行の見出し、紫の検索バー、右側の人物写真と水玉模様まで、PIXがコードで実装した画面では、すべて原本と同じ位置に同じ色で再現されました。

Brainwave.io求人サイトのファーストビュー2枚。左がFigmaの原本、右がPIXで実装した画面。緑の背景、「Find a dream job that changes life.」の見出し、紫の検索バー、右側の人物写真が同じ
左がFigmaの原本、右がPIXで実装した画面です。

Reference 03Working Reference · サービス紹介ページのプロセスセクション（デスクトップ）

曲線と大きな数字が重なるプロセスセクションも、曲線上の点や説明の段落までデザインどおりに再現されました

オレンジの曲線の上に3つのステップの点が置かれ、その後ろに大きなグレーの数字1・2・3と淡い円が敷かれたセクションです。PIXで実装した画面では、曲線の曲がり具合と点の位置、ステップごとの説明文の位置が原本と同じでした。

「We have best team and best process」セクション2枚。オレンジの曲線上の3つの点、大きなグレーの数字1・2・3、ステップの説明が、左のFigmaの原本と右のPIXの実装で同じ位置にある
左がFigmaの原本、右がPIXで実装した画面です。

始め方

PIXはClaude CodeとCodexで使えます。Working Referenceが実際に動かして確かめた環境はClaude Codeです。HTML・CSSで画面を描くプロジェクト（例：Next.jsとTailwind）で動作します。最後の2%は人が見る必要があるので、ロゴとアイコンは目で一度確認してください。

  1. 1

    PIXのスキルファイルをダウンロードします

    登録しなくてもダウンロードできます。

    pix.SKILL.mdをダウンロード ↗
  2. 2

    ダウンロードしたファイルをコーディングAIに渡し、インストールと設定の案内を頼みます

    初回だけ、Figmaの個人アクセストークンとブラウザの接続が必要です。Claude CodeはClaude in Chrome拡張機能を、CodexはComputer Useプラグインを使います。Figma APIはリクエストの上限が厳しいため、大きなファイルを扱うとほぼ毎回Chrome側に切り替わります。この設定も、AIが1つずつ案内します。

    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で画面を描くプロジェクト

このリファレンスを共有

このリファレンスは役に立ちましたか？

毎週厳選されたリファレンスをメールでお届けします