Loading...

Working Referenceオリジナル

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

「カンプはもう完璧なのに、実装すると別の画面になる」——そのもどかしさで、自分たちで作ったスキルです。同じカンプをいつものやり方とpix、ふた通りで実装した結果を、そのままお見せします。

Figma原案

デザイナーが渡したカンプ

Figma原案 — コーヒー注文アプリのホーム画面
MCPにお願いしたら

「このデザイン実装して」

MCPで実装した画面 — アイコン欠け、フォントとバナーのズレが緑で示されている
pixにお願いしたら

同じお願い、スキルだけ追加

pixで実装した画面 — 原案と見分けるのが難しいほど同じ
自分たちで回した結果です。真ん中がいつものやり方(Figma MCP接続)——アイコンが消えて、フォントがズレて、バナーのデザインが飛んでいます。緑の印は、全部ズレたところです。pixはコードを書いたあと、原案とピクセル単位で照合(Pixelmatch)して、98%以上同じになるまで自分で直します。
Figma原案

デスクトップ用ランディングのカンプ

デスクトップ用ランディングのFigma原案
pixにお願いしたら

コードから出てきた画面

pixがコードで実装したデスクトップ用ランディング — 原案と同じ
デスクトップも同じです。どちらがカンプで、どちらがコードか、見分けるのが難しいくらいです。
購読者限定

← AIスキル