Figmaのデザイン、Claude Codeが“見て”そのままコードにする

Figmaで作ったデザインを、Claude Codeが“自分で見ながら”ピクセル一致までコーディングするスキルを作りました。正解画像を渡すだけ。あとはスクショを撮って重ねて、ズレを直して、を勝手にループします。実際に動かしたら本当にすごかったので共有します。 ────────── ＼ 相談 受付中 ／ SamoX では AI×DX 支援 / カスタマイズ対応を行っています。 「設定がわからない」「途中でつまずいた」などあれば、 お気軽にお問い合わせください！ https://www.samox.co.jp/ ────────── ▼ チャプター 0:00 Figma通りのコードが、勝手に出来上がる 1:04 仕組み：正解画像を渡して±0pxまで自走させる 1:39 デザイン通りの実装が大変だった理由 2:27 デザイナーの役割は消えない（余談） 3:13 スキルの中身：実装→スクショ→重ねて直すループ 4:17 違いは「Claude Codeに目を与える」こと 5:08 使っているツール 5:56 人が触るのは3箇所だけ 7:04 注意点と前提（判断は人） 8:54 まとめ：作る人の役割はどう変わるか 10:06 おわりに ▼ 動画で使ったツール ・Claude Code（実装の本体） ・Figma / Figma MCP（カラーコード・ロゴ・寸法を補助的に取得） ・Playwright（作ったサイトをブラウザで開いてスクショ） ・ImageMagick（正解画像と自分の出力を重ねて差分を評価） ▼ 話し手について ふく / SamoX 代表。 「脱人力」をテーマに、力仕事は AI・装置へ、判断は人へ。AI×DX で現場の仕事を組み替えています。 ▼ 関連リンク X：https://x.com/samox_inc note：https://note.com/samox_inc ▼ よかったら 役に立ったら、チャンネル登録・高評価・コメントもらえると次の動画の励みになります。