コードは書ける。だが、オシャレなボタン一つデザインできない。
それが私というフロントエンドエンジニアだ！
今回は技術記事になります。
最近、画面レイアウトから担当する機会が増えてきたのですが、正直なところデザインツールはほとんど扱えません。
画像の書き出しや、既存デザインの文言・位置修正などはやろうと思えばできますが、「一からデザインを起こして」と言われるといつも困った顔をしてしまいます。むしろコードで直接画面を起こしてデザインを組む方が得意なくらいです。
よくあるデザインツール（Figma、Adobe XD、Photoshop、Illustrator）はどれもそれなりにしか触れず、いざ作成しようとすると手が止まってしまいます。その学習コストを支払うべきか悩み、過去にはExcelで画面デザインを作成したことすらあります。
しかし、もう無理してデザイナーの真似事をする必要はありません。IDEから一歩も出たくない怠惰なエンジニアに向けた検証備忘録をお届けします。
検討したAIデザインツール
検証記事はこちらを確認ください。
検証からPencilの魅力について
現在無料で利用可能。以下公式サイトです。
Pencilの最大の特徴は、「デザインをIDE（エディタ）と同じ文脈で扱う」ことに特化している点です。今回はVS Codeの拡張機能を使用して実際に試してみました。
導入手順
-
VS Code のサイドバーから拡張機能（Extensions）を開く
-
検索欄に「Pencil」と入力
-
Install をクリック
-
メールアドレスとアカウント登録を行う
-
登録が完了すると
VS Codeの中に、Figmaのようなデザインツールの画面が爆誕しました。
キャンバスの基本構成は、左にレイヤー、中央に無限キャンバス、右にプロパティと、Figma経験者ならすぐ馴染める構成です。
ここからAIにプロンプトを投げてデザイン作成を依頼します。具体的なイメージを伝えると、よりイメージに近いものを作成してくれます。
ここまでは他のAIツールでも似たようなことができますが、Pencilがエンジニアにとって革命的なのはここからです。
Pencilのここが魅力！エンジニア向けな3つの理由
1. デザインが「JSON」としてGit管理できる
Pencilのデザインデータは .pen という拡張子の JSONベースのテキストファイル として保存されます。
つまり、通常のコードファイルと同様に Gitで差分管理（バージョン管理）が可能 です。「前のデザインに戻して」と言われても、Gitのコミット履歴から容易に復元できます。
2. ツールの行き来が不要（VS Code内で完結）
作成したデザインをもとに、そのままAIにコードの作成まで依頼できます。ブラウザのデザインツールとエディタをいったりきたりする必要がありません。
CursorやClaude Codeとの組み合わせも可能です。
3. デザインとコードの「双方向同期」
通常のフローでは、コード化された後に一部変更が生じると、デザインデータは古くなり放置（陳腐化）されがちです。
しかしPencilでは、デザイン変数の値とCSSカスタムプロパティ（--color-primaryなど）が双方向で同期されます。キャンバスで色を変えればコードが更新され、逆にコード側のCSS変数を書き換えればデザインに反映されるという、容易な同期が可能です。
※リアルタイム同期ではないため、変更は手動となりますが、その点もAIに依頼することで解決します。
あらかじめ「ルール文書（.md）」を作成してAIに読み込ませることで、プロジェクトの品質ルールに従ったデザイン生成も可能です。
また、Figmaで作成したデザインデータをインポートすることも可能です。
セキュリティとフレームワーク対応
AI連携ツールで気になるセキュリティや、対応技術についてもまとめました。
- ローカル専用MCPサーバー : PencilのMCPサーバーはローカルマシン上で動作し、デザインデータ自体がリモートサーバーに送信されることはありません（※AI機能を使用する際の「プロンプト」のみがClaude等に送信されます）
- 対応フレームワーク : React（JS/TS）, Next.js, Vue, Svelte, プレーンなHTML/CSS 等
- 対応スタイリング・UIライブラリ : Tailwind CSS, CSSモジュール, shadcn/ui, Radix UI, Material UI 等
現時点での課題・注意点
デザインツールとして現段階では「高い可能性はあるが、プロダクトの成熟度はこれから」といった印象のようです。使用する上で以下の点には注意が必要です。
- 自動保存（Auto-save）がない: 現状は Cmd/Ctrl + S でのこまめな保存が必須
- Undo/Redoが限定的: バージョン履歴にはGitコミットを使用する前提の設計になっている
- リアルタイムの共同編集機能はない: あくまで「Gitベースの協業」が前提
- その他バグ: Figmaからのコピペ時に画像が欠落する、Linux（Wayland/Hyprland）でUIの不具合が報告されている等
- セキュリティ説明は明確だが、MCPサーバー実装のリポジトリ自体は現時点で非公開
まとめ：Pencilはこんな人におすすめ
エンジニアあがりの私にとって、「一つのツール（エディタ）で全て完結し、Gitでログを管理できる」というPencilの仕組みは非常に魅力的でした。
もちろん、本格的なWEBデザインや写真・イラストを多用する「魅せるデザイン」を作成する場合は、専用のデザインツール（Figmaなど）のほうが圧倒的に使い勝手が良いでしょう。
しかし、以下のようなケースでは絶大な威力を発揮します。
- デザイナー不在のプロジェクトでのプロトタイプ作成
- 社内向け管理画面・システムのUI設計
- デザインツールを行き来せず、キーボードから手を離したくないエンジニア
- デザインからコードへ、そしてコードからデザインへ
自分一人でUIを組み上げるスピードと生産性を爆上げする手段として、ぜひ一度「Pencil」をVS Codeに入れて遊んでみてください！
参考資料