定番デザインツールのFigmaと注目のAIネイティブなデザインツールPencilのClaude Code連携を検証してみました

はじめに

エンジニアにとって、デザインツールは「見るもの」であって「操るもの」ではありませんでした。しかし、Claude Codeの登場でその境界が壊れようとしています。

今回は、AIネイティブなデザインツール**Pencil** と、定番の Figma をClaude Code経由で連携させ、実際のUIコンポーネントを移植・比較検証した記録をシェアします。

1. なぜ「Pencil」なのか？

Figmaは登場から安定な人気を誇っており、エンジニアやデザイナーに広く利用されています。
しかし、エンジニアがAI（LLM）を使ってデザインを自動生成・修正しようとしたり、デザインをHTMLなどのプログラムコードに変換しようとすると、Figmaの複雑なデータ構造が壁になることがあります。

そこで注目したのがPencilです。

JSONベース: デザインがコード（.penファイル）として管理できる。
Git親和性: デザインの差分がgit diffで見える。
Claude Code連携: CLIから「このボタンを赤くして」でデザインファイルが直接書き換わる。

今回は、Figmaで作成したUIをPencilに移植する検証と、FigmaとPencilそれぞれからHTML/CSSへの変換精度を比較してみました。

2. 【検証】FigmaからPencilへの「移植」実験

実際に、Figmaで作成した「かえるさん」の投稿リストUIを、Claude Codeを使ってPencilへ移植してみました。
今回は、デスクトップ版のFigmaを使用し、MCPサーバ経由でデータを取り込む方法を選択しました。
PencilはVisual Studio Codeの拡張機能版を利用しました。
詳しいインストール方法やセットアップは公式ドキュメントを参照してください。

Figmaでの事前準備

FigmaのMCPサーバでClaude Codeに情報を取り込む際は、Figmaデスクトップアプリを利用します。
このとき、Claude Codeに渡すリンクはDEV Mode用のリンクを使用してください。デザイン共有用のリンクよりも正確なCSSプロパティを取得できます。
また、移行したい画像は、Figma上でエクスポートの設定をしておくと、Pencilへの画像の移植がスムーズになります。

⭕️	❌
DEV Mode 用のリンク	デザイン共有用のリンク

比較結果

項目	元のFigma	移植後のPencil
レイアウト	オートレイアウトで緻密に構築	ほぼ完璧に構造を再現
画像	縦長のカスタムクロップ	アスペクト比が微妙に変化
パーツ	星評価、ハート、トグル	意図を汲み取って配置済み
余白感	デザイナーによる微調整	少し詰まった「AI翻訳」感
インタラクション	⭕️	❌
スクリーンショット

判明したClaude Codeの挙動

検証の結果、Claude Codeは単にAPIでデータをコピーしているのではないことが分かりました。

VS Code 上の Pencil

MCPで構造（Metadata）を取得: レイヤー名から「これはリスト」「これはボタン」と意味を理解。
Visionで詳細を補完: スクリーンショットを画像解析し、色や形状のディテールを「見たまま」再現。
ハイブリッド生成: 構造と見た目を統合して
1.pen
ファイルを書き出す。

3. FigmaとPencilのHTML/CSS変換精度比較

次に、FigmaとPencilそれぞれからHTML/CSSへの変換精度を比較してみました。

元のFigmaデザイン

Figmaからの変換結果

インタラクションなどの動きは再現できた反面、細かいレイアウトやスタイルの崩れが目立ちました。

Pencilからの変換結果

Figmaからの変換に比べてレイアウトの崩れが少なく、忠実度が高い結果となりました。ただし、細かいスタイルの再現にはまだ課題が残ります。

Pencilからの変換後、Figmaのデータも参照して仕上げた結果

Pencilで生成したHTML/CSSをベースに、Figmaのデータも参照しながら微調整しました。これにより、細かいスタイルの再現精度が向上しました。
さらに、Pencil単体では再現できなかったインタラクションも、Figmaのデータを補完的に参照することで、より忠実なHTML/CSSに仕上がりました。

4. Figmaに慣れている筆者が感じたリアルな所感

実際に使ってみて感じた、正直な感想です。

気になったところ：エディタとしての使いづらさ

Figmaに慣れすぎた体には、Pencilのエディタはまだ「手が縛られている」感覚があります。

画像のクロップ制限: 自由なトリミングが難しい。
絶対配置（Absolute）の不在: Flexbox的な制約が強く、自由な重ね合わせに苦労する。
操作感: Figmaほどの滑らかなキャンバス操作には及ばない。

いいと思ったところ：AIエージェントとの「共鳴」

驚いたのは、別スレッドで「階層を整理したFigmaデータ」を渡した際、Claude Codeがローカルにある既存のPencilファイルに自律的に気づき、それをベースに改修を始めたことです。

これは、AIが単なる「変換ツール」ではなく、コンテキストを共有する「開発パートナー」として機能していることを示唆しています。Figmaが「デザインの完成図」なら、Pencilは「AIが理解・編集しやすい中間設計図」として機能し、Claude Codeがその間を繋ぐハブになる。この体験は、これまでのデザインワークフローにはなかった新感覚のものです。

5. 考察: 「Figma → Pencil → HTML」がうまくいった理由

今回の検証で最も興味深かったのは、直接Figmaからコードを生成するよりも、一度Pencilを介した方が最終的なHTML/CSSの精度が高まったという点です。

その理由を考察します。

AIにとっての「解像度」の最適化: Figmaの生データはノードの詳細情報が多すぎて、AIがコード化する際に「どこを重視すべきか」の判断が難しくなります。一度Pencilに変換することで、デザインがAIにとって理解しやすいセマンティックな構造に整理（正規化）されます。
Dev Modeがもたらす「設計図」の精度: FigmaをDev Modeに設定することで、Claude Codeは単なる「見た目」だけでなく、CSSプロパティとしての数値を正確に把握します。これにより、Pencilへの移植精度が劇的に向上し、結果としてそこから出力されるコードも堅牢になります。
インタラクションのハイブリッド補完: Pencilが苦手とする「動的な挙動」については、Claude CodeがFigmaのコンテキストを再度参照することで補完できます。これは、Git管理可能なPencilの「堅実さ」と、Figmaの「表現力」のいいとこ取りです。