はじめに
この記事ではまず Pencil検証フェーズで得られた知見をまとめます。
良かった点・つまずいた点・実際に使って気づいたtipsを包み隠さず書いていきます。
今の運用
弊社ではデザインからコードに落とし込む上で以下のステップで進めています。
- デザイナーがデザインをFigmaで生成
- エンジニアがデザインを見つつコードに置き換える（PJによってはFigmaMCPを利用してコードの土台を作成することもある）
よくある運用だと思っています。
Figma運用面での不満
デザイントークンを整備していないPJだとFigmaMCPを利用したコード生成がかなり荒れます（プロンプトに厳しく注意書きしない限り！）
カラーコードを直接書きまくりで、後で整備するのが大変です。
Figmaの深い階層をFigmaMCPが無駄に再現しちゃう
Figmaの細かいグルーピングを愚直に再現してしまうので以下のように入れ子地獄、relative大量発生のコードばかりで嫌気がさしたこともありました。
コードとデザインでデザイントークンの同期ができていない
エンジニアがよしなにカラーコードを追加してもそれがFigmaのvariablesに同期されていないことも度々発生していました（なぜデザイナーに同期を依頼していない...!?）
※ 去年Figmaを運用し出したばかりなのでFigmaをうまく運用に組み込めていないのもあると思います。
Pencil.dev
そこで目をつけたのが Pencil です。
- ローカルファースト — クラウド同期ではなくローカルのファイルとして管理
- AIエージェント連携 — ClaudeやMCPと組み合わせてデザインの生成・修正をAIに任せられる
- コード変換前提の設計 — .pen ファイルからReactコードへの変換精度が高く、開発との統合を意識した作りになっている
| Figma | Pencil | |
|---|---|---|
| データ管理 | クラウド | ローカルファイル（.pen） |
| バージョン管理 | Figma内部 | git管理可能 |
| AI連携 | MCP経由 | ClaudeやMCPと統合 |
| ライセンス | 有償 | 今だけ無料 |
デザインファイルがGit管理できるというのが最も革新的だと筆者は感じました。
コードとしてデザインを管理できるので、
- コードの構造を読み取り、Pencil内にデザインを描画できるのでは？
- デザイナーはPencilを編集し、エンジニアはPencilを元にコーディングを行うので常に変数が同期するのでは？
- 自然言語の指示でデザインを生成できるので、エンジニアでもデザインの提案が簡単にできるのでは？
- 「こんなUIなら開発工数減ります」とか「インタラクション時はこんな見た目でいいですか」など
- 自然言語で命令できるのでFigmaを使ったことのないエンジニアでも簡単なモックアップを作成できる
と夢が広がりました。
良かったこと
仕様書・スクショからUIをAIが自動生成できる
アプリケーションの仕様書を渡してAIに指示するだけで、オートレイアウトを使ったUIを生成してくれます。また、スクリーンショットを貼り付けるだけで再現度の高いデザインが生成できたのは想像以上の体験でした。
デザインの初期コスト削減に大きく貢献しそうな期待感を持たせてくれます。
.pen → Reactコード変換の精度が高い
Figma-MCPを利用してコードを生成していましたが、以下の点が気になっていました。
- 異常なまでに深いネスト構造と
relativeクラスの多用 - 色コードの直接指定（変数管理されない）
Pencilではこれらが自動的に解決されました。
- 色は
global.cssで変数管理される - ファイル・コンポーネントの階層が妥当な深さで生成される
Figma-MCPで発生していた問題を強制するためのルールをプロンプトに書き連ねていましたが、Pencilではそういった苦労がほとんど不要でした。
JSONなのでgitによるバージョン管理が容易
.pen ファイルの実体はJSONなので、gitでのバージョン管理と相性がいいです。Figmaのようにクラウドに閉じ込められることなく、コードと同じリポジトリで管理できるのはチーム開発において大きなメリットです。
つまずいたこと
既存コード → デザイン逆生成はpage単位だと精度が低い
既存のコードベースから .pen ファイルとしてデザインを逆生成しようと試みました。
（元々はFigmaを利用していたので）
Button などの小さい単位ではそれなりの精度が出ますが、page単位になると全然ダメでした。
カンプのないプロジェクトでゼロからデザインを起こしたり、パターンを網羅する案だしには結構向いているのではと感じました。
仮にページ単位で生成するなら主要なUIコンポーネントをpenの中でコンポーネント化して、それを使ってpageを作る方針が良さそうに感じました。
variant網羅は楽
複数のvariantを持っているようなコンポーネントなら一つパターンを生成して、残りのデザインはコードをベースにして量産してもらうような楽はできました。
以下のように複数のvariantを持っているようなコンポーネントなら、primaryはスクショなり駆使して真面目に作ります。そのあとは「利用可能な variant や size のパターンを確認できるようにデザインに起こして欲しい」など指示してデザインを作るなどしていました。
import { cva, type VariantProps } from "class-variance-authority";
const button = cva("rounded px-4 py-2 font-medium transition-colors", {
variants: {
variant: {
primary: "bg-blue-600 text-white hover:bg-blue-700",
secondary: "bg-gray-100 text-gray-800 hover:bg-gray-200",
danger: "bg-red-600 text-white hover:bg-red-700",
},
size: {
sm: "text-sm px-3 py-1",
md: "text-base px-4 py-2",
lg: "text-lg px-6 py-3",
},
},
defaultVariants: {
variant: "primary",
size: "md",
},
});
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
VariantProps<typeof button>;
export function Button({ variant, size, className, ...props }: ButtonProps) {
return <button className={button({ variant, size, className })} {...props} />;
}
外部ライブラリのデザイン再現が壊滅的
外部UIライブラリ（MUIなど）を使ったコンポーネントのデザイン再現は苦手です。
原因は明確で、ライブラリの実装詳細までAIが追っていないため、スタイルを解析できないからです。回避策としては、スクリーンショットで土台を作り人力で修正するなどの対応になりました。
根本的な解決策としては「AIリーダブルなコード」を意識して実装の詳細をAIが追いきれる形で管理することが重要になると感じました。外部ライブラリへの依存を最小化し、スタイルをコードベース内に持つ設計が望ましいです。（shadcn + tailwind の組み合わせなど）
色変数の一括置換で全体が崩壊した
後からデザインシステムを定義して色変数を一括置換しようとしたところ、変換に失敗してレイアウト全体が崩壊しました。さらに「うまくいかない → 全体スキャン」のループに入り、トークンだけ消費し続けて修復されないまま終わるという事態も発生しました。
デザイントークンは最初に定義してから作り始めること
同時編集・リモートでのデザイン確認ができない
Figmaのようにブラウザで最新版をすぐに確認したり、複数人で同時編集することができません。ローカルファーストゆえの制約です。「とりあえずFigmaを開いてデザイン確認」という習慣があるチームには、慣れるまで多少の不便を感じるかもしれません。
画像の扱いが直感的でない
Figmaのようにファイルをドラッグ＆ドロップして画像を挿入することができません。画像を表示するには以下のいずれかの方法を取る必要があります。
- 外部の画像URLを直接指定する
- ローカルに画像ファイルを設置し、その相対パスを参照する
後者の場合、以下のようなディレクトリ構成にしておくと管理しやすいです。
docs/
└── pencil/
├── project.pen # Pencilのデザインファイル
└── images/ # .penから参照する画像を設置
├── hero.png
└── icon.svg
トークン消費が激しい
筆者はClaudeで色々実験しましたが、1.5時間もかからないうちに5時間で消費できるトークン数の上限まで到達してしまいました。
自動保存されない
少しの区切りで毎回セーブをしないといけません。
ただ、直近のアップデートでデスクトップ版なら未保存内容のバックアップを取る機能が追加されたようですね。
Backup unsaved changes in desktop app
Tips
CursorのターミナルとPencil GUIは同時使用に注意
ターミナルでPencilを操作するパターンと、Pencilのアプリ上（GUI）で指示するパターンがあります。両者を同時に使うと同期に失敗する時があるので、命令はどちらか一方だけにした方がいいです。
デザイントークンとコンポーネントは最初に定義する
ある程度ページを作ってから後でコンポーネント化・一括置換しようとすると、CPU負荷が高くなりトークンも大量消費します。先にデザイントークンの整理とコンポーネントの定義を完了させてから、ページの作成に入る方が効率的です。
Figmaからの移行ではまず整理フェイズを挟む
FIgmaのグルーピングで階層が深いと、コード変換時の精度を損なう原因になります。なのでFigmaから移動をした直後で「Figmaから移行したnodeId=xxxの要素の階層をシンプルな階層に整理して、フレームにセマンティックな命名をつけてください」など指示しています。
まとめ
ここまで見ていただきありがとうございました。🙇♂️
PencilはのUI上でAIがゴリゴリとデザインを作っていく様はかなりの衝撃で、感動を覚えました。
既存PJでの試用運用が決まったので、次回は以上の知見を踏まえてチームとしてどう運用設計したかを書いていきます。