言葉で説明した画面をキャンバスに描くOSS「OpenPencil」をREADMEから整理する

画面をひとつ形にしたいだけなのに、まずデザインツールの操作から覚える必要がある。デザインと実装が別のファイルに分かれていて、変更点を追いにくい。こうした悩みに対して、自然言語で説明したUIをベクターキャンバスに描き、そのデザインをJSONのファイルとして扱い、コードとして書き出すところまでを一つのツールで扱おうとしているのが、OSSの「OpenPencil」です。READMEでは自らを「open-source AI-native vector design tool」と位置付けています。

公式READMEに記載されている情報をもとに、どのような機能があり、どのような場面で検討対象になり得るかを整理します。

39秒の概要動画も作りました(音声あり)。

自然言語からキャンバスへ

READMEによると、作りたいUIを自然言語で説明すると、無限キャンバス上にストリーミングのアニメーションで描かれていくとされています。生成後も、要素を選択して会話で修正を指示できます。スクリーンショットやモックアップを添付して参考にする入力や、グラスモーフィズムやブルータリズムなどのスタイルガイドを適用する機能も挙げられています。

複雑なページについては、オーケストレーターがページを空間的なサブタスク(ヒーロー、機能紹介、フッターなど)に分け、複数のエージェントが並行して生成する構成になっています。キャンバス上には、どのメンバーがどこを担当しているかの表示が出るとされています。

使えるモデルとエージェント

組み込みのプロバイダ設定(Anthropic、OpenAI、Google、DeepSeekなど9以上)から選ぶ方法のほか、Claude Code、Codex CLI、OpenCode、GitHub Copilotを接続して使う方法が表にまとめられています。Claude CodeはローカルのOAuthを使うため追加設定不要、そのほかはアプリのAgent Settingsから接続する、という記載です。

逆方向の連携として、OpenPencilはMCPサーバーを内蔵しています。Claude CodeやCodexなどMCP対応のエージェントから、ターミナル経由で .op ファイルを読み書きできるとされています。

デザインファイルがJSONであること

デザインは .op という形式で保存され、READMEでは「human-readable, Git-friendly, diffable」と説明されています。中身がJSONなので、Gitで差分を確認しながら管理できます。デザイン変数はCSSカスタムプロパティとして出力されます。

たとえばボタンの色を変えた場合、レビューで見えるのはデザインツールのスクリーンショットではなく、次のような差分になるイメージです(説明用の簡略例で、実際の .op の構造とは異なります)。

 { "type": "button",
-  "fill": "#2B5FDB",
+  "fill": "#FF984D",
   "radius": 12 }

コードとしての書き出し

一つの .op ファイルから、React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Nativeへの書き出しに対応しているとされています。

導入方法

デスクトップアプリはmacOS、Windows、Linuxで動作し、Rustのコア一つで、ブラウザエンジンを含まない単一のバイナリとされています。READMEに記載されている導入方法は次のとおりです。

# macOS (Homebrew)
brew tap zseven-w/openpencil
brew install --cask openpencil

Windows(Scoop)やLinux向けのパッケージ、GitHub Releasesからの直接ダウンロード、Webホストとして動かすDockerイメージも用意されています。CLIの op は別途インストールできます。

どのような場面で検討するか

こうした機能から見て、画面の叩き台を短時間で複数作りたい場合や、デザインをコードと同じようにGitでレビューしたい場合、Claude Codeなどのエージェントからデザインファイルを直接扱いたい場合に、検討候補として挙がりそうです。

READMEだけでは判断できない点

READMEは機能の一覧であり、生成されるデザインの品質がモデルによってどの程度変わるか、既存のFigmaなどのデザイン資産からの移行のしやすさ、書き出したコードをそのまま本番で使えるか、大規模なデザインでの動作については書かれていません。AI機能の利用には、接続するモデルのAPI料金や各エージェントの契約が別途必要になる場合があります。また、READMEにはWindowsのインストーラーがウイルス対策ソフトに誤検知されることがあるという注記もあります。導入を検討する場合は、公式ドキュメントを確認し、自分たちの環境で試す必要があります。

出典: https://github.com/ZSeven-W/openpencil/blob/main/README.md
公式READMEをもとに、AIを執筆・推敲支援に使用しています。実機検証の報告ではありません。概要動画はREADMEをもとに作成した説明用のモーショングラフィックで、実際の画面を録画したものではありません。