OpenPencilの使い方——文章からUIを描くOSSデザインツール、.opはJSONでGit差分が読める
「このLPの上半分、ヒーローと3つの特徴で」と文章で頼んだら、画面に線が引かれていく。
そういうデザインツールが、オープンソースで出ています。名前はOpenPencil。READMEの自称は「The world's first open-source AI-native vector design tool」。
で、僕がこのツールで面白いと思ったのは、AIが描くところではありません。それは、
デザインのファイルがJSONで、Gitで差分が読める
です。
デザインを「コードと同じ扱い」にできる。今日はOpenPencilの使い方を、READMEとリリースノートだけを根拠に、入れるところから書き出すところまで手順で書きます。確認日は2026年9月11日。うちは未導入なので、「うちならこう試す」は提案として書きます。
OpenPencilとは——文章からUIを描き、.opファイルをGitで管理するデザインツール
先に全体像です。READMEの記述を3つに絞ります。
1つ目、文章からデザインを生成して、キャンバスへリアルタイムにストリーミングする。
2つ目、オーケストレータが複雑なページを空間ごとの小さなタスクに分けて、複数のAIエージェントが別々のセクションを同時に描く。READMEはこれを「Agent Teams」と呼び、「Multiple AI agents work on different sections simultaneously」と書いています。
3つ目、保存形式の .op はJSON。原文は「human-readable, Git-friendly, and diffable」。人が読めて、Gitに向いていて、差分が取れる。
対抗として名指ししているのが古いデザインツールのPencilで、「A modern alternative to Pencil」。本体はRustで書かれていて、Electronを使わない単体バイナリです。TypeScript版のエディタはv0.7.5で引退し、Gitの履歴にだけ残っている、とREADMEにあります。
ライセンスはMIT。GitHubのスターは5.9k。今月の伸びは月間トレンドの表示値で1,274（2026年9月2日取得）です。
ステップ1: 入れる——macOSはbrew、WindowsはScoop、LinuxはReleases
インストールはOSごとに1行です。READMEのコマンドをそのまま書きます。
macOSは brew tap zseven-w/openpencil のあと brew install --cask openpencil。
Windowsは scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil のあと scoop install openpencil。
LinuxはGitHub Releasesから .AppImage か .deb を取る。
ブラウザで動かしたいなら、Dockerのイメージ ghcr.io/zseven-w/openpencil-web を3100番ポートで立てる方法も書かれています。
Windowsで1つ注意。READMEに「Antivirus flagged the Windows installer? That's a known heuristic false positive on new, low-release prevalence」とあります。新しくて配布数が少ないので、ウイルス対策が誤検知することがある既知の件です。怖ければ、ソースから自分でビルドする道もある。
ステップ2: AIをつなぐ——鍵を入れるか、手元のCLIエージェントを使うか
描かせるには、AIをつなぎます。道は2つ。
1つは、AnthropicやOpenAI、Google、DeepSeekなどのAPIキーを入れる方法。READMEには中国系のプロバイダも並んでいます。
もう1つは、手元にあるCLIエージェントを使う方法。Claude Code、Codex、OpenCode、GitHub Copilotが挙げられています。すでに契約しているなら、新しい鍵を作らなくていい。
ここで知っておく制限が2つ。
CLIエージェントを使えるのはデスクトップ版だけ。Docker／Web版は内蔵プロバイダのみ、と書かれています。
そして鍵の置き場所。「Browser-entered built-in provider, image-generation, and Openverse credentials are kept in same-origin localStorage」。ブラウザ版で入れた鍵は、そのオリジンのlocalStorageに置かれる。共用のPCでWeb版を使うなら、ここは気にしたほうがいい。
うちなら、デスクトップ版にClaude Codeをつなぐ道を選びます。鍵を増やさなくて済むので。
ステップ3: 描かせる——1画面を文章で頼み、Agent Teamsで区画ごとに並走させる
つないだら、キャンバスで文章を打ちます。
最初は1画面がいいです。「ヒーロー、特徴3つ、フッター」のように区画を言葉で切ると、オーケストレータがそれぞれを別のタスクに分けて、複数のエージェントが同時に描き始める。キャンバスにはメンバーごとの目印が出る、とREADMEにあります。
さらにREADMEは、段階を分けた流れも書いています。design_skeleton で骨組み、design_content で中身、design_refine で仕上げ。一気に完成を頼まず、骨組みから段階を踏む。
スタイルは、50を超える内蔵のスタイルガイド（グラスモーフィズム、ブルータリスト、レトロなど）から指定できます。
いや、AIが描いたものって、結局直すんでしょ？
直します。でも、ここからがこのツールの本領です。
ステップ4: 直して、差分を読む——.opはJSONなので「何が変わったか」がGitに残る
直した結果は .op ファイルに保存されます。JSONです。
ということは、Gitでコミットすれば「ボタンの色が変わった」「余白が8から16になった」が、テキストの差分として残る。READMEはGit連携としてブランチ管理と三方向マージにも触れています。
うちがこれを面白いと思ったのは、AIに直させたときです。「ボタンを大きくして」と頼んで、差分を見れば、AIが本当にボタンだけを触ったかが分かる。画像のデザインツールだと、ここが目視になる。
デザインの変数（色や数値のトークン）は $variable で参照でき、CSSのカスタムプロパティとして自動で書き出される、とも書かれています。
Figmaからの移行は、.fig ファイルの取り込みが用意されています。2026年7月25日のv0.8.2で、コンポーネントや図形、テキスト、ページの情報を「substantially more」保持するようになった、とリリースノートにあります。
ステップ5: 書き出す——React・Vue・Flutter・SwiftUIまで、1つの.opから
最後に、コードへ書き出します。
READMEの書き出し先は、React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native。1つの .op から複数を出せる、と書かれています。
画像で出したいなら PNG・JPEG・WEBP・PDF。プレゼン用のデッキとして PowerPoint やHTMLのスライドショーにも出せます。これは2026年8月10日のv0.8.3で入った機能です。
ターミナル派には op というCLIがあって、brew install zseven-w/openpencil/op で入ります。MCPサーバーも内蔵しているので、Claude CodeやCodexから「このデザインを開いてボタンの色を変えて」のように操作できる。うちで試すなら、まずここです。
気をつけること: v0.8.3の公開リレーは翌日のv0.8.4で直っている
共同編集について1つ。
v0.8.3（2026年8月10日）でリアルタイムの共同編集が入りました。認証つきのP2Pに、公開リレーへの切り替え、10文字のペアリングコードで参加。
ただ、翌日のv0.8.4（2026年8月11日）のリリースノートに、公開リレーが「unusable in all published v0.8.3 builds」だった、と書かれています。v0.8.3の全ビルドで公開リレーが使えなかった。v0.8.4で直っている。
なので、共同編集を試すなら v0.8.4 以降を入れてください。バージョンはReleasesで確認できます。
新しいツールは、こういう「翌日に直った」がよくあります。悪いことではなくて、リリースノートを1つ前まで読む癖があれば避けられる。
OpenPencilの使い方は、1画面を描かせて差分を読むところから
まとめます。
brewかScoopで入れる。デスクトップ版に手元のCLIエージェントをつなぐ。1画面を文章で頼み、骨組みから段階を踏む。直したら .op の差分をGitで読む。Reactなり Flutter なりに書き出す。共同編集は v0.8.4 以降で。
「AIが描く」より「デザインの差分が読める」の方が、実務では効くと僕は思っています。直したのがAIでも人でも、何が変わったかが残るので。
うちで試すなら、まず既存のLPの1画面を.opで作り直して、Claude Codeから1か所直させて、差分を読む。そこまでで1時間。ここまでの手順で、その1時間は迷わないはずです。
▶ 関連記事: swarm-forgeの使い方【Uncle Bobの6役構成】——AIエージェントを部屋で分け、引き継ぎで繋ぐ
▶ 関連記事: firstmateの使い方——話しかけるのは1体だけ、作るのは別々の作業場にいる船員たち
OSSを実務で活用するための6大特典
デザインをGitで管理する流れや、MCPからツールを動かす組み方を整理したい方へ。活用を進めるための6大特典をご案内しています。
