「Figmaで作った画面を、結局またエンジニアが手でコードに起こし直している」——デザインと実装のあいだに横たわるこの溝を、AIネイティブな発想でまるごと埋めにきたのが OpenPencil（オープンペンシル） です。OpenPencilはGitHubで約3,679スターを集めるTypeScript製のOSSで、ライセンスはMIT。自らを「世界初のオープンソースAIネイティブ・ベクターデザインツール」と位置づけています（これは公式READMEのキャッチコピーで、第三者が検証した事実ではなく、あくまでプロジェクト自身の主張です）。
この記事は、当サイトの読者がいつも知りたい3点——①結局このOSSは何ができるのか ②何を解決するのか ③何を代替できるのか——に絞って解説します。先に答えを言うと、OpenPencilは「①自然言語のプロンプトからUIをベクター画像として無限キャンバスに描き、そのままReactやVueのコードに書き出せる」「②デザインから実装への手起こし・バイナリ管理という従来の摩擦を解決する」「③Figmaのようなベクターデザインツールと、AIによるUIコード生成ツールの両方の役割を一部代替する」ツールです。
公式のデモ動画はOpenPencilのGitHubリポジトリのトップ（カバー画像のリンク）から視聴できます。本稿ではその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を言葉で描写すると、ストリーミングアニメーションでキャンバスに現れ、既存のデザインも要素を選択してチャットするだけで修正できる、とされています。
つまりOpenPencilは、ボタンや矩形をマウスでひとつずつ配置していく従来のベクター操作だけでなく、「ランディングページを作って」「このカードをもっと余白を広く」といった会話でデザインを生成・編集できるAIネイティブなツールなのです。これが「結局何ができるのか」への最初の答えになります。
READMEの「Why OpenPencil」セクションでは、このAIネイティブなデザインツールの柱が次のように整理されています。
・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や従来ツールとの決定的な差になります。
# macOS（Homebrew）でデスクトップ版をインストール
brew tap zseven-w/openpencil
brew install --cask openpencil
# CLIツール（op コマンド）をグローバルに導入
npm install -g @zseven-w/openpencil
Windowsの場合はScoop（scoop bucket add openpencil ... → scoop install openpencil）、LinuxはGitHub Releasesから .AppImage / .deb を直接ダウンロードできます。Webアプリとしてもデスクトップアプリとしても動き、後者はElectronでmacOS / Windows / Linuxに対応し、GitHub Releasesから自動更新されます。
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経由でもこのフェーズ分けされたツール群を呼び出せます。
# MCPサーバー（pen-mcp）を開発モードで起動
bun run mcp:dev
並行生成は「速さ」だけのメリットではありません。各エージェントが担当領域に集中することで、ページ全体を1モデルに丸投げするより各セクションの密度と一貫性が上がりやすくなります。READMEには Anti-slop（アンチ・スロップ） という機能も挙がっており、世代をまたいだ多様性追跡で「AIにありがちな似たり寄ったりの出力」を避ける仕組みも入っています。「結局何ができるのか」の答えとして、OpenPencilは単なる1ショット生成ではなく、チームで分担し、段階的に磨き、反復を避ける生成エンジンを備えている、と言えます。
「LPを作って」"] --> O["Orchestrator
ページを空間分解"] O --> A["Hero担当
エージェント"] O --> B["Features担当
エージェント"] O --> C["Footer担当
エージェント"] A --> M["1枚のキャンバスに統合
メンバー別インジケータ"] B --> M C --> M M --> E["op JSON として保存
コード書き出し"]
Figmaや従来ベクターツールとの違い：何を代替できるのか
ここで「③何を代替できるのか」に正面から答えます。OpenPencilはFigmaやSketchのような既存のベクターデザインツールを、そして部分的にはAIコード生成ツールをも代替しうる立ち位置にあります。
違いを整理すると次のようになります。なお、これはOpenPencilのREADMEに記載された機能を基準にした比較であり、Figma側の機能を網羅的に評価したものではない点に注意してください。
| 観点 | Figma / 従来ベクターツール | OpenPencil |
|---|---|---|
| 作図の主操作 | GUIでマウス操作 | プロンプトで生成・編集（GUI操作も可） |
| デザイン→実装 | 人がコードに手起こし | React/Vue/Flutter等へ直接書き出し |
| ファイル形式 | バイナリ中心（diff困難） | .op＝JSON（human-readable / diff可） |
| バージョン管理 | 専用クラウド履歴 | Gitでブランチ・マージ・コンフリクト解決 |
| AI連携 | 主に外付けプラグイン | AIネイティブ・MCPサーバー内蔵 |
| 動作環境 | クラウド/専用アプリ | Web＋デスクトップ（Electron）＋CLI |
| ライセンス | 商用SaaS | MIT（オープンソース） |
| Figma資産 | ネイティブ | .fig インポートで取り込み可 |
注目すべきは、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の画像取り込み、縦横のオートレイアウト、マルチページドキュメントに対応します。デザインシステム側でも、デザイン変数、複数軸のマルチテーマ（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エージェントの作業フローに組み込めない」という従来の制約です。
もう一つの柱が Multi-Model Intelligence（マルチモデル対応） です。OpenPencilはモデルの能力ティアに応じてプロンプト・thinkingモード・タイムアウトを自動で切り替えます。READMEの記述を整理すると次のとおりです。
| モデルのティア | 代表例 | OpenPencilの挙動 |
|---|---|---|
| フルティア | Claude | thinking付きの完全なプロンプトを送る |
| 標準ティア | GPT-4o / Gemini / DeepSeek | thinkingを無効化して送る |
| ベーシックティア | MiniMax / Qwen / Llama / Mistral | 簡略化したネストJSONプロンプトで信頼性を確保 |
エージェントの選択肢も幅広く、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形式パススルーにも対応しています。
# 開発用：依存をインストールして dev サーバーを起動
bun install
bun --bun run dev # http://localhost:3000
# デスクトップアプリとして起動
bun run electron:dev
スタイル面では Style Guides が用意され、グラスモーフィズム・ブルータリスト・レトロなど50以上のビルトインスタイルをタグベースのあいまい一致で適用できます。これらはプランニングと生成の両方に組み込まれており、MCPツールからも呼び出せます。デザインの「見た目の方向性」までAIの生成プロセスに織り込める点が、単なる作図ツールとの違いです。
技術スタックとアーキテクチャ：何でできているのか
最後に、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 --bun run build # 本番ビルド
bun --bun run test # テスト（Vitest）
npx tsc --noEmit # 型チェック
bun run lint # Lint（oxlint）
bun run cli:dev # CLIをソースから実行
描画に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 から触ってみてください。
よくある質問（FAQ）
Q1. OpenPencilは無料で使えますか？ A. はい。OpenPencilはMITライセンスのオープンソースで、ソフトウェア自体は無料です。Web版・デスクトップ版・CLIすべてを自分で動かせます。ただしAI生成にはモデル側のAPIキーやログイン（例：Claude CodeのOAuth）が必要で、その利用料は各モデルプロバイダーの料金に従います。
Q2. .op ファイルとは何ですか？Figmaファイルと何が違いますか？
A. .op はOpenPencil独自のJSONベースのデザインファイルです。READMEでは「human-readable / Git-friendly / diffable」とされ、テキストなのでGitで差分・履歴管理・マージができます。バイナリ中心で差分が取りにくいFigmaの保存形式と異なり、コードと同じレビュー・バージョン管理の流儀に乗せられるのが最大の違いです。
Q3. Figmaから移行できますか？
A. 一部可能です。OpenPencilはFigmaの .fig ファイルをインポートでき、レイアウト・塗り・線・エフェクト・テキスト・画像・ベクターを保持して取り込めます（READMEの「Figma Import」）。ただしリアルタイム共同編集はまだRoadmap上の未完了項目のため、共同編集が業務の中心なら現時点では完全な置き換えにはなりません。
Q4. Concurrent Agent Teamsとは何ですか？ A. 1つのページを複数のAIエージェントが分担して同時に作る仕組みです。オーケストレーターがページを空間的なサブタスク（ヒーロー・機能・フッターなど）に分解し、各エージェントが担当領域を並行でストリーミング生成します。委譲（delegate）ツールやメンバー別のキャンバスインジケーター、フォールバック戦略を備えるとREADMEに記載されています。
Q5. どんなコードに書き出せますか？
A. 1つの .op から、React + Tailwind CSS、HTML + CSS、CSS Variables、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Nativeへ書き出せます。デザイン変数（$variable）はCSSカスタムプロパティとして生成され、出力コード中で var(--name) として参照されます。
Q6. AIエージェントやMCPと連携できますか？
A. はい。OpenPencilは pen-mcp としてMCPサーバーを内蔵しており、Claude Code・Codex・Gemini・OpenCode・Kiro・Copilotなどに1クリックで導入できます。MCP互換エージェントからターミナル経由で .op ファイルを読み書きでき、op CLIからもバッチでデザインを生成・操作できます。
参照ソース
・ZSeven-W/openpencil — GitHub（README）：本記事の機能・仕様・技術スタック・ロードマップの一次ソース
・OpenPencil 公式サイト（op.zseven.tech）：プロジェクトの公式ホームページ
