デザインが苦手なエンジニアにとって、新しいAIデザインツールの登場は心強い味方です。
v0やUizardなどUIを生成できるツールがいくつか登場していますが、そのような中でPencilが新たに登場しました。
PencilはこれまでのAIデザインツールとは異なり、エンジニアフレンドリーな設計となっていると聞きました。ぜひ使ってみたいと思い、今回試してみることにしました。
Pencilの特徴
MCPによるAI連携
PencilはMCPによってClaude CodeなどのAIコードアシスタントと連携します。
自然言語で指示を出せば、AIがデザインを形にしてくれます。これまでのVibe Codingをする感覚でUIを作れます。
Gitでバージョン管理
Pencilはデザインを.penというテキストベースのファイル形式で保存します。中身はJSONライクな構造になっており、ソースコードと同じリポジトリにコミットできます。
Figmaからの移行がスムーズ
既存のFigmaデータも活かせます。フレームやテキスト、スタイルをコピペでそのまま持ってくることができます。
モダンなデザインシステムを内蔵
shadcn/uiなどのデザインが最初から組み込まれています。ボタンやフォームといった基本的なコンポーネントは揃っているので、一から作る手間が省けます。
無料で利用可能
現時点では無料で使えます。今後有料化される可能性はありますが、試してみるには良いタイミングだと思います。
インストール方法
ダウンロード
公式サイト（pencil.dev）からアプリをダウンロードしてインストールします。
Claude Codeとの連携
Pencilアプリを起動したら、右上のボタンからclaude Codeと接続します。その後、Claude Codeで /mcp コマンドを実行して、pencil connected と表示されれば接続完了です。
Cursorとの連携
Cursorを使っている場合は、Pencilアプリの右上から「Add to Cursor」を選びます。Cursorの設定画面で「Tool & MCP」セクションを開いて、「pencil」が有効になっていれば準備完了です。
使ってみる
実際にPencilを使ってみます。アプリを起動すると以下のような画面が表示されます。見た目はFigmaに近く、キャンバス上で自由にデザインを配置できる構成です。
左上のメニューから「Design Kit & Style Guide」を選ぶと、デザインシステムやテンプレートの選択画面が表示されます。
今回は「Shadcn UI」を選んでみました。選択すると、Shadcn UIのコンポーネントがキャンバス上に展開されます。ボタンやカード、フォームといった基本的なパーツが並んでおり、ここからドラッグして配置したり、AIへの指示に組み込んだりして使います。
今回は簡単な問題集アプリのUIをデザインしてみました。Claude Codeから指示を出しながら、画面の構成を作り込んでいきます。1時間ほどトライ&エラーを繰り返した結果、以下のようなデザインになりました。
操作感はVibe Codingそのものでした。普段コードを書くときとまったく同じサイクルでデザインが進みます。FigmaやSketchのような専用ツールの操作を覚える必要がないので、デザイン経験のないエンジニアでも手が止まらずに済むのは大きいと感じました。
個人開発ではデザインが後回しになりがちですが、Pencilならコードを書くついでにUIも整えられるので、今後の開発でも積極的に使っていきたいと思います。