Pencilの使い方——AIエージェントCLI × Git管理の新しいデザイン体験
個人開発でUIを作るとき、デザインはどうしてますか？
自分は今まで Claude Codeに丸投げ していました。形にはなるんですが、統一感がなかったり手戻りが発生したり。
かといってFigmaみたいな デザインツールを本格的に覚えるのは正直ハードル高い なぁと思ってました。
そんなときにXで見かけるようになったのがPencilでした。使ってみたらClaude Codeから指示するだけでデザインできて、デザインファイルがGit管理できて便利です。なので導入から使い方、使ってみて感じたメリットを紹介します。
※2026年2月26日のバージョン1.1.29で確認しました。
## Pencilとは
Pencilはデザインデータをローカルファイルとして保存できるデザインツールです。
AIエージェント（Claude Code、Codexなど）との連携が最初から前提で動くので、セットアップも楽です。
デザインツールに慣れてない人でも普段のCLIのAIエージェントから指示するだけでデザインが作れます 。つまり、 デザインツールの操作を学ばなくてもいい ので 圧倒的にハードルが低い です。もちろん手動での変更もできます。
### 料金
2026年2月25日現在は無料で使えます。AIはClaudeなりCodexなりそれぞれのサブスクで大丈夫です。
公式のPricingページによると、今後有料プランが用意される可能性もあるらしいです。
In the future, we may introduce paid features or plans. If we do, we’ll clearly describe the terms and pricing before you’re charged.
## インストールとセットアップ
公式ドキュメントの手順に沿って進めます。比較的楽です。
まずはダウンロードページからアプリをダウンロードしてください。
### セットアップ
開くとどのAIを使うか設定画面が出てきます。
「Agents on Canvas」がPencil上で直接使うAIのやつです。クリックしてログインします。
CLI側から使う場合は「MCP設定」の方をオンにしておきましょう。
### MCP
MCPは勝手にインストールされます（個人的には使うプロジェクトに個別に入れたかった）。
## チュートリアルやってみる
最初にPencilを開いた時はWelcome用のテンプレートです。チュートリアルにぴったりなので、ぜひ 自分で手を動かして ステップどおりにRunを実行してみてください。
こんな感じで、 今どこをAIが確認・編集しているのか が分かりやすいです。
口調とかはローカルの設定反映してくれてそう。
## 実際に使ってみる
ここからは実際に自分が使う時の流れを書いておきます。
### ファイルを作成・開く
まっさらな状態から作る場合は「+マークのNew File」を押します。
Shadcn UIやLunarisなどのコンポーネント入りのファイルから作るなら「Kits」を押します。
すでに作成済みのものを開く時は「フォルダ＋時計マークのRecent Files」から選択してください。
### CLIから指示してみる
指示出しの場所がデザインツールとCLIで 行ったり来たりすると「次何やるんだっけ？」 となってしまいます。でも使い慣れているCLIや仕様書駆動開発であれば AIエージェントのTask機能やtasks.mdなどで明確 にしておけます。
ペルソナについて書いておいたドキュメントの参照もしてもらえるので判断基準もバッチリです。
AIエージェントからはPencil MCPを使ってのようにMCPの呼び出しをするだけです。
Pencil MCPで読みたいリストの画面を作成してほしいPencil MCPで読みたいリストの画面を読み込んで、コードにしてほしいこれだけでガンガン進めてくれます。
## 筆者がやった流れ
AIにカラーパレットを作ってもらうとき、言葉でイメージを伝えるだけだと会話が長くなりがちです。
また「画像を添付しての作成」だと 視認性が気になる のと、primary・secondary・error・warningみたいな 使い分けまで考慮するのが面倒 です。
そこで筆者はCSSフレームワークのテーマジェネレータをAIと組み合わせて活用してます。
- テーマジェネレータで近いものを作る
- できたCSSをCLI経由でAIに渡し、Pencil上でカラーパレットと確認用のコンポーネントを作ってもらう
- フィードバックする
作成に使うジェネレータは何でもよいです。たとえば筆者は実装ではshadcn/uiを使いましたが、テーマジェネレータとしてはdaisyUI Theme Generatorを使いました。
こうするとAIに全任せよりも自分の思ったとおりになりやすいです。
カラーパレットを作り終わったらあとは作成済みのカラーパレットを変数参照して〇〇を作ってほしいのようにお願いすればOKです。
### Git管理する
Pencilのデザインデータの実体はファイルであるため、Gitで管理できます。
ただ 変更後にPencil上で保存（⌘+sなど）をしてからじゃないと差分が反映されない ので注意です。
AIにコミットまで自動でやらせている方はたぶん気づかないので要注意です。
以上、Pencilの使い方でした。思ったより記事の量が少ないですが、マジで普段どおりClaude Codeから指示するだけで出来ちゃうからです。
普通にコードだけで開発していると 1画面ずつしか見ない ことがほとんどですがデザインツールを挟むと 全画面を俯瞰的に見られる ため、「ここ共通化できるじゃん」といった発見が結構あって良かったです。
また、 Pencilの操作方法をほとんど知らなくても使える のが便利でした。Claude Codeから指示するだけでデザインができあがり、Pencilはほぼビュワーとして使ってます。
「これ自分用だからなぁ」と思っていても、それを言語化してすぐにブラッシュアップできるのはよい時代になったなと思いました。