OpenPencilとは｜プロンプトからUIを描くAIネイティブのOSSベクターデザインツールを徹底解説

「Figmaで作った画面を、結局またエンジニアが手でコードに起こし直している」——デザインと実装のあいだに横たわるこの溝を、AIネイティブな発想でまるごと埋めにきたのが OpenPencil（オープンペンシル） です。OpenPencilはGitHubでスターを集めるTypeScript製のOSSで、ライセンスはMIT。自らを「世界初のオープンソースAIネイティブ・ベクターデザインツール」と位置づけています（これは公式READMEのキャッチコピーで、第三者が検証した事実ではなく、あくまでプロジェクト自身の主張です）。

この記事は、当サイトの読者がいつも知りたい3点——①結局このOSSは何ができるのか ②何を解決するのか ③何を代替できるのか——に絞って解説します。先に答えを言うと、OpenPencilは「①自然言語のプロンプトからUIをベクター画像として無限キャンバスに描き、そのままReactやVueのコードに書き出せる」「②デザインから実装への手起こし・バイナリ管理という従来の摩擦を解決する」「③Figmaのようなベクターデザインツールと、AIによるUIコード生成ツールの両方の役割を一部代替する」ツールです。

まずは公式のデモ動画を見てください。プロンプトを書くと、それがストリーミングで無限キャンバスにUIとして描かれていく——文字だけでは伝わらないOpenPencilの体験が、この30秒ほどで一目でわかります。

本稿ではこのREADMEに記載された機能だけを根拠に、Figmaや従来ツールとの違い、Design-as-Codeの考え方、そして目玉である「Concurrent Agent Teams（並行エージェントチーム）」までを、READMEより一段深く・分かりやすく整理していきます。

なお、GitHub上には同名の別プロジェクト「open-pencil/open-pencil」（Figma互換のリアルタイム共同編集にフォーカス）が存在します。本記事で扱うのはあくまで ZSeven-W/openpencil の「AIネイティブなデザイン→コード」プロジェクトの方です。混同しないよう注意してください。

OpenPencilとは何か：プロンプトからUIを生成するAIネイティブのデザインツール

まず「①結局何ができるのか」を、OpenPencilというデザインツールの中核から押さえます。OpenPencilの最大の特徴は、自然言語のプロンプトを書くと、それがリアルタイムで無限キャンバス上にUIとして描画される点です。READMEの「Prompt → Canvas」の説明では、作りたいUIを言葉で描写すると、SSEストリーミングのアニメーションでキャンバスに現れ、既存のデザインも要素を選択してチャットするだけで修正できる、とされています。

つまりOpenPencilは、ボタンや矩形をマウスでひとつずつ配置していく従来のベクター操作だけでなく、「ランディングページを作って」「このカードをもっと余白を広く」といった会話でデザインを生成・編集できるAIネイティブなツールなのです。これが「結局何ができるのか」への最初の答えになります。

READMEの「Why OpenPencil」セクションでは、このAIネイティブなデザインツールの柱が次のように整理されています。文字で読むと抽象的ですが、要は「言葉で描く→JSONで持つ→コードで出す」の3点を1つのアプリでつないだ、と理解すればほぼ間違いありません。

・Prompt → Canvas：自然言語でUIを描写すると、ストリーミングでキャンバスに生成される
・Concurrent Agent Teams：オーケストレーターが複雑なページを空間的なサブタスクに分解し、複数のAIエージェントが別々のセクションを同時に作る
・Multi-Model Intelligence：モデルの能力に合わせてプロンプトを自動調整（Claudeにはthinking付きのフルプロンプト、GPT-4o/Geminiはthinkingを無効化、小型モデルには簡略版）
・MCP Server：Claude Code・Codex・Geminiなどに1クリックでインストールでき、ターミナルから .op ファイルを読み書きできる
・Design-as-Code：.op ファイルはJSONで、人が読めてGitで差分が取れる
・Multi-Platform Code Export：1つの .op からReact + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Nativeへ書き出せる

ここで重要なのは、OpenPencilが「デザインツール＋AI生成＋コード書き出し」を1つのアプリの中で連続させている点です。プロンプトでベクターUIを作り、それをJSONとして保存し、ボタンひとつでフロントエンドコードに変換する——この一連の流れが分断されずにつながっていることが、後述するFigmaや従来ツールとの決定的な差になります。

インストールはOS別に用意されています。触ってみるだけなら、デスクトップ版を1コマンドで入れるのが最短です。

# macOS（Homebrew）でデスクトップ版をインストール
brew tap zseven-w/openpencil
brew install --cask openpencil

WindowsはScoop（scoop bucket add openpencil ... → scoop install openpencil）、LinuxはGitHub Releasesから .AppImage / .deb を直接ダウンロードできます。CLIツール（op コマンド）は npm install -g @zseven-w/openpencil でグローバルに導入できます。Webアプリとしてもデスクトップアプリとしても動き、後者はElectron 35でmacOS / Windows / Linuxに対応し、GitHub Releasesから自動更新されます。.op ファイルにはファイル関連付けが設定され、ダブルクリックで開けます。

なお、AI CLIを同梱したDockerイメージも公式に配布されています。用途に応じて次のように選べます。

Design-as-Codeとは：.opファイルでデザインをGit管理する仕組み

次に「②何を解決するのか」の核心、Design-as-Code（デザイン・アズ・コード） を見ていきます。これはOpenPencilが従来のデザインワークフローの何を変えるのかを最もよく表す概念です。

OpenPencilのファイル形式 .op は、JSONベースで人が読める（human-readable）テキストです。READMEは .op を「human-readable, Git-friendly, diffable」と表現しています。これが何を解決するのかをはっきりさせましょう。FigmaやSketchの保存ファイルはバイナリで、「誰がどこを変えたのか」をGitのdiffで追うことはできません。一方OpenPencilの .op はテキストなので、コードと同じようにプルリクでレビューし、コンフリクトを解決し、履歴を遡れるのです。

さらにOpenPencilには デザイン変数（Design variables） の仕組みがあります。色・数値・文字列をトークンとして定義し、$variable で参照する設計です。READMEによれば、このデザイン変数はコード書き出し時にCSSカスタムプロパティとして自動生成され、出力コード中で var(--name) として使われます。デザイン上の「ブランドカラー」を一箇所変えれば、書き出されたCSS変数も連動する——という、デザインシステム運用に直結した作りになっています。

.op がテキストであることのありがたみは、ターミナルやCLIから直接いじれる点にも表れます。READMEのCLIセクションでは、op コマンドで次のような操作ができると紹介されています。コードとして再掲するより、何をするコマンドかを一覧で押さえたほうが早いでしょう。

・op start：デスクトップアプリを起動する
・op design @landing.txt：ファイルからバッチでデザインを生成する
・op insert '{"type":"RECT"}'：ノード（矩形）を1つ挿入する
・op import:figma design.fig：Figmaファイルをインポートする
・cat design.dsl | op design -：標準入力からパイプで流し込む

入力方法はインライン文字列・@ファイルパス・標準入力（-）の3種類に対応し、デスクトップアプリでもWeb開発サーバーでも動きます。デザインを「手で描くもの」から「テキストとして書き、バージョン管理し、自動化できるもの」へと引き上げる——これがDesign-as-Codeが解決する本丸です。書き出し先はReact + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Nativeと幅広く、1つの .op から複数プラットフォームへ展開できます。

Concurrent Agent Teamsとは：複数AIが1画面を並行で作る仕組み

OpenPencilが自ら「世界初」と謳う目玉機能が Concurrent Agent Teams（並行エージェントチーム） です。ここでも「①何ができるのか」を具体的に掘り下げます。

仕組みはこうです。READMEの「Concurrent Agent Teams」の説明によれば、オーケストレーター（orchestrator）が複雑なページを空間的なサブタスクに分解します。たとえばランディングページなら「ヒーロー（上部）」「機能紹介（中央）」「フッター（下部）」のように領域を割り当て、複数のAIエージェントがそれぞれの領域を同時に生成します。すべてが並行してストリーミングされ、メンバーごとにキャンバス上のインジケーターが表示される、とされています。

通常のAIによるUI生成は、1つのモデルが上から順に1コンポーネントずつ吐き出していくため、ページ全体が完成するまで待たされます。OpenPencilのアプローチは、これを人間のデザインチームが分担作業するように並列化するものです。READMEの「AI-Native Design」セクションでは、エージェントチームには「delegate（委譲）ツール」「メンバーごとのキャンバスインジケーター」「フォールバック戦略」が備わると明記されています。1人のエージェントが詰まっても、別の戦略に切り替えて続行できるわけです。この並行生成の流れを図にすると次のようになります。

加えてOpenPencilは Layered workflow（階層型ワークフロー） を持ちます。design_skeleton（骨格）→ design_content（中身）→ design_refine（仕上げ）という段階を踏むことで、いきなり完成形を狙うのではなく、多セクションのデザインを高い忠実度で組み上げます。MCP経由でもこのフェーズ分けされたツール群を呼び出せます。3つのフェーズの役割を整理すると次のとおりです。

並行生成は「速さ」だけのメリットではありません。各エージェントが担当領域に集中することで、ページ全体を1モデルに丸投げするより各セクションの密度と一貫性が上がりやすくなります。READMEには Anti-slop（アンチ・スロップ） という機能も挙がっており、世代をまたいだ多様性追跡で「AIにありがちな似たり寄ったりの出力」を避ける仕組みも入っています。「結局何ができるのか」の答えとして、OpenPencilは単なる1ショット生成ではなく、チームで分担し、段階的に磨き、反復を避ける生成エンジンを備えている、と言えます。デザイン修正時は要素を選んで自然言語で指示でき、スクリーンショットやモックアップを添付する「Vision input（画像参照）」にも対応します。

Figmaや従来ベクターツールとの違い：何を代替できるのか

ここで「③何を代替できるのか」に正面から答えます。OpenPencilはFigmaやSketchのような既存のベクターデザインツールを、そして部分的にはAIコード生成ツールをも代替しうる立ち位置にあります。

違いを整理すると次のようになります。なお、これはOpenPencilのREADMEに記載された機能を基準にした比較であり、Figma側の機能を網羅的に評価したものではない点に注意してください。

注目すべきは、OpenPencilが Figmaの .fig ファイルをインポートできる点です。READMEの「Figma Import」では、レイアウト・塗り・線・エフェクト・テキスト・画像・ベクターを保持したまま .fig を読み込めるとされています。つまり既存のFigma資産を捨てずに移行を試せます。「何を代替できるのか」の現実的な答えは、「Figmaを今すぐ全置換」ではなく、「プロンプト生成・コード書き出し・Git管理を前提とした新しいデザイン工程に、Figma資産ごと移行できる」という形です。

では誰に向くのか。READMEから読み取れる相性は次のとおりです。

・フロントエンド開発者：デザインから実装の手起こしを省き、.op をGit管理して var(--name) 込みでコードを書き出せる
・AIエージェントを使う開発者：MCP・CLI経由でClaude CodeやCodexからデザインを自動化したい人
・デザインシステムを運用するチーム：デザイン変数・コンポーネント・UIKitをコードのように差分管理したいチーム
・OSS志向の組織：商用SaaSのロックインを避け、MITライセンスで自前運用したい組織

逆に、リアルタイム共同編集が業務の中心ならば現時点では不向きかもしれません。READMEのRoadmapでは「Collaborative editing（共同編集）」と「Plugin system（プラグイン機構）」が未完了（未チェック）のままです。代替を検討するなら、この2点が自分の用途に必須かどうかを最初に確認するのが賢明です。

なお、AIに頼らない「素のベクターツール」としての基本機能もひととおり揃っています。READMEの「Canvas & Drawing」「Design System」によれば、次の機能に対応します。

・キャンバス：無限キャンバスでのパン・ズーム・スマートアラインメントガイド・スナップ
・描画：矩形・楕円・線・多角形・ペン（ベジェ）・フレーム・テキスト、ブール演算（合体・型抜き・交差）
・素材：Iconify連携のアイコンピッカー、PNG/JPEG/SVG/WebP/GIFの画像取り込み
・レイアウト：縦横のオートレイアウト（gap・padding・justify・align）、マルチページドキュメント
・デザインシステム：デザイン変数、複数軸のマルチテーマ（Light/Dark・Compact/Comfortableなど）、インスタンスとオーバーライドを持つコンポーネント、.pen ファイルで入出力できる再利用可能なUIKit

「AIで一気に生成した後、細部を手で詰める」という現実的なワークフローがツール内で完結するわけです。

そしてOpenPencilを「Design-as-Code」たらしめるもう一つの要素が、Git連携をアプリ内に組み込んでいる点です。READMEの「Git Integration」では、SSH/HTTPS認証とSSH鍵管理を備えたクローンウィザード、作成・切替・削除・マージができるブランチピッカー、認証リトライと非fast-forward対応のpull/pushが挙げられています。さらにフォルダモードの三方向マージ（on-diskの MERGE_HEAD 状態を追跡）、ノード単位・フィールド単位の三方向カードとインラインJSONエディタを備えるコンフリクトパネルまで用意されています。.op がテキストだからこそ、デザインのコンフリクトを「どちらの変更を採用するか」のレベルで解決できる——これは従来のデザインツールにはなかった発想です。

MCPサーバーとマルチモデル対応：AI CLIから設計を操作する

OpenPencilのAIネイティブ性をさらに際立たせるのが、MCPサーバー内蔵とマルチモデル対応です。ここは「①何ができるのか」と「②何を解決するのか」の両方に関わります。

OpenPencilは pen-mcp というパッケージとしてMCPサーバーを内蔵しています。READMEによれば、Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot といったCLIに1クリックでインストールでき、任意のMCP互換エージェントから .op ファイルを読み・作り・修正できます。Node.jsを自動検出し、未インストールならHTTPトランスポートにフォールバックしてMCP HTTPサーバーを自動起動する、という配慮もあります。

MCP経由で使えるツールには、前述の design_skeleton → design_content → design_refine の階層型ワークフローのほか、必要なデザイン知識（スキーマ・レイアウト・ロール・アイコン・プランニング等）だけを部分的に読み込む「Segmented prompt retrieval」、スタイルを適用する get_style_guide_tags / get_style_guide、そしてマルチページの作成・改名・並べ替え・複製などがあります。これが解決するのは、「デザインツールをGUIから切り離し、AIエージェントの作業フローに組み込めない」という従来の制約です。加えて、AIエージェント（Claude Code・Cursor・Codex・Gemini CLIなど）に op での設計手順を教えるOpenPencil Skill プラグインも公式に配布されています。

もう一つの柱が Multi-Model Intelligence（マルチモデル対応） です。OpenPencilはモデルの能力ティアに応じてプロンプト・thinkingモード・タイムアウトを自動で切り替えます。READMEの記述を整理すると次のとおりです。

エージェントの選択肢も幅広く、9以上のプロバイダー（Anthropic、OpenAI、Google、DeepSeekほか）のプリセットから選べるビルトイン方式に加え、Claude Code（Claude Agent SDK + ローカルOAuth、設定不要）、Codex CLI、OpenCode、GitHub Copilot、Gemini CLIを「Agent Settings（Cmd+,）」から接続できます。中国系LLM（Kimi、Zhipu/GLM、DouBao/Ark、Bailian/DashScope、ModelScopeなど）へのAnthropic形式パススルーにも対応しています。

スタイル面では Style Guides が用意され、グラスモーフィズム・ブルータリスト・レトロなど50以上のビルトインスタイルをタグベースのあいまい一致で適用できます。これらはプランニングと生成の両方に組み込まれており、MCPツールからも呼び出せます。デザインの「見た目の方向性」までAIの生成プロセスに織り込める点が、単なる作図ツールとの違いです。インターフェースは日本語を含む15言語にローカライズされており、Git連携画面までフル対応しています。

技術スタックとアーキテクチャ：何でできているのか

最後に、OpenPencilが何で構築され、どんな構造を持つのかを押さえます。中身を知ることは「②何を解決するのか（＝なぜ高速・高品質に描けるのか）」の理解にもつながります。

READMEの「Tech Stack」によれば、フロントエンドは React 19・TanStack Start・Tailwind CSS v4・shadcn/ui・i18next。キャンバスの描画には CanvasKit/Skia（WASM、GPUアクセラレーション） を採用しており、これが無限キャンバス上での滑らかなストリーミング描画を支えています。状態管理は Zustand v5、サーバーは Nitro、デスクトップは Electron 35、ランタイムは Bun・Vite 7、Lintは oxlint・oxfmt です。AI側は agent-native（Zig NAPIで書かれたネイティブエージェントランタイム） に加え、Anthropic SDK・Claude Agent SDK・OpenCode SDK・Copilot SDKが組み込まれています。

OpenPencilはモノレポ構成で、再利用可能なパッケージ群に分かれています。主なパッケージは次のとおりです。

・pen-types：PenDocumentモデルの型定義
・pen-core：ドキュメントツリー操作・レイアウトエンジン・変数
・pen-engine：ヘッドレスのデザインエンジン（ドキュメント・選択・履歴・ビューポート）
・pen-react：React UI SDK（DesignProvider・DesignCanvas・hooks・panels・toolbar）
・pen-codegen：コードジェネレーター（React・HTML・Vue・Flutterほか）
・pen-figma：Figma .fig ファイルのパーサー／コンバーター
・pen-mcp：MCPサーバー（ツール・ルート・ドキュメントマネージャー）
・agent-native：Zig NAPI製のネイティブAIエージェントランタイム（マルチプロバイダー・チーム対応）

特筆すべきは pen-engine（ヘッドレスエンジン） と pen-react（React UI SDK） が独立パッケージとして切り出されている点です。READMEの「Embeddable SDK」によれば、これらを使って自分のアプリにデザインエンジンを組み込める——DesignProvider、DesignCanvas、各種hooks、パネル、ツールバーがそのまま使えます。OpenPencilは「単体アプリ」であると同時に「デザイン機能を他アプリへ埋め込むための部品群」でもあるわけです。

開発環境で試すのも簡単です。BunとNode.jsさえあれば、リポジトリをクローンして次のコマンドで開発サーバーが立ち上がります（Zigは任意。未インストールでも agent-native のビルド済みバイナリが自動ダウンロードされます）。

# 依存をインストールして dev サーバーを起動（http://localhost:3000）
bun install
bun --bun run dev

描画にGPU対応のSkiaを使い、AIランタイムをZigでネイティブ実装し、エンジンをヘッドレス化してSDKとして配る——この設計が、「プロンプトからリアルタイムで滑らかにUIを描き、それを安定してコードへ落とす」というOpenPencilの体験を技術的に裏打ちしています。

まとめ

OpenPencilは、プロンプトからUIを直接描くAIネイティブのOSSベクターデザインツールです。読者の3つの問いに対する答えを最後に整理します。

・①結局何ができる：自然言語でUIを無限キャンバスにストリーミング生成・編集し、.op（JSON）として保存して、React/Vue/Flutterなど9種のコードに書き出せる。複数AIが1画面を並行で作るConcurrent Agent Teamsが目玉
・②何を解決する：デザインから実装への手起こし、バイナリファイルゆえのバージョン管理の難しさ、デザインツールをAIエージェントの作業フローに組み込めない制約を解決する
・③何を代替できる：Figmaや従来ベクターツールの一部役割、およびAIによるUIコード生成の役割。Figma .fig インポートで既存資産ごと移行を試せる

注意点として、「世界初」はプロジェクト自身のキャッチコピーであること、共同編集とプラグイン機構はまだRoadmap上の未完了項目であること、GitHubに同名の別プロジェクトがあることは押さえておきましょう。とはいえ、デザインを「描くもの」から「コードのように書き・差分し・自動化するもの」へ引き上げるという方向性は明快で、フロントエンド開発者やAIエージェントを日常的に使う人にとっては試す価値が十分にあるOSSです。まずは brew install --cask openpencil、あるいは bun --bun run dev から触ってみてください。

参照ソース

・ZSeven-W/openpencil — GitHub（README）：本記事の機能・仕様・技術スタック・ロードマップの一次ソース
・OpenPencil 公式サイト（op.zseven.tech）：プロジェクトの公式ホームページ