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で実装した画面です。

始め方

Claude CodeかCodexにPIXのスキルファイルを渡し、下の依頼を貼り付けるだけです。HTML・CSSで画面を描くプロジェクトで動き、最初の1回だけFigmaの個人アクセストークンとChromeの接続が必要です。

  1. はじめの依頼

    この記事のPIXで、Figmaのデザインをそのままコードにしたい。 https://www.working-ref.com/ja/reference/pix-2026-10 渡したPIXファイルをスキルとして入れ、必要な設定を1つずつ案内して。設定が終わったら、このFigmaフレーム［リンクを貼る］をこのプロジェクトに実装して、ロゴやアイコンのように目で確かめるべきところを示して。

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

このリファレンスを共有

毎週1回・無料

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

毎週あふれるAIニュースから
BEST 3つだけ、受信箱へ

Work Smarter with AI

420人が毎週受け取っています

購読完了 次号から受信箱でお会いしましょう。