Pencilリポジトリ内の.penファイルriviera.penベクターキャンバスファイル、Gitでバージョン管理UIキット組み込みコンポーネント編集: より穏やかな見出しキャンバスまたはプロンプトブロックで編集
Pencil 
OpenDesign 完全なオープンソースのPencil.dev代替ツール: OpenDesign
OpenDesignとPencilは非常に似ています。どちらもエージェント主導で、デザインをGit管理下のファイルとしてリポジトリに保存します。OpenDesignは無料で完全なオープンソースの、プロバイダーに依存しない代替ツールです。アプリケーション全体がApache-2.0で、主要なコーディングエージェントでBYOKを利用でき、出力はUI、プレゼン資料、プロトタイプ、デザインシステムに及びます。このページでは、両者の共通点、Pencilのキャンバスが純粋に優れている点、そして移行方法について説明します。
タスク別の判定12 / Pencil
OpenDesign vs Pencil、3つの異なるニーズ
適切な場所から始める
このページ · 選択
OpenDesignかPencilか？
状況別の判定、両ツールでの簡単な実行、日付入りの機能比較、そして答えを覆す条件。
判定を読む すでにPencilを使用中.penのデザインをOpenDesignに移行する
どちらもファイルをリポジトリに保存するため、クラウドへのエクスポートで失われるものはありません。何が移行され、何がキャンバスに残るのか、そして4つのステップ。
移行されるものを見る 別の質問PencilではなくFigmaから移行する？
移行元のキャンバスがFigmaの場合、その比較ではコラボレーションやDev Modeについてもカバーしています。
OpenDesign vs Figmaを読むそれぞれのツールの概要
Pencil vs OpenDesign: 各ツールの概要
PencilとOpenDesignは、エージェント主導のデザインをリポジトリ内のファイルとして保存するという大きなアイデアを共有していますが、何がオープンか、どのエージェントがファーストクラスか、出力の幅がどの程度かという点で異なります。OpenDesignは自社製品についてこの比較を書いており、Pencilとは提携していません。
短い回答。 OpenDesignは、無料で完全なオープンソース（Apache-2.0）の、ローカルファーストなPencilの代替ツールです。エージェント主導でリポジトリにファイルを保存するという同じアイデアを持ち、ファイル形式だけでなくアプリケーション全体がオープンで、Claude、Codex、Cursor、Gemini、OpenCode、Qwenにわたるプロバイダーに依存しないBYOKをサポートし、UI、ランディングページ、プレゼン資料、プロトタイプ、DESIGN.mdデザインシステムに及ぶ出力を提供します。ベクターキャンバスはありません。IDE内でネイティブなFigmaの貼り付けを使用してFigmaのようなキャンバスを手動で編集することを重視する場合は、Pencilを使い続けてください。
Pencil
Pencil (pencil.dev) は「キャンバスでデザインし、コードに落とし込む」ツールです。a16z Speedrunが支援する、IDEとコードベース内に存在する無限のベクターデザインキャンバスです。デザインファイルは、Git管理下のリポジトリに保存されるオープンで文書化された.pen JSON形式を使用し、ローカルのMCPサーバーによりAIエージェントがそれらを読み書きできます。組み込みのUIキットとネイティブなFigmaのコピー＆ペースト機能が搭載されており、早期アクセス中は無料です。
- 実行環境ローカルデスクトップアプリ、IDE拡張機能、ローカルMCPサーバー
- モデル複数のエージェントを備えたMCP、Claude Code向けに最適化
- 出力リポジトリ内の.pen JSONファイル。コード化されるUI画面とコンポーネント
- コスト早期アクセス中は無料。有料プランの予定あり公開された制限なし
OpenDesign
OpenDesignは、独自のコーディングエージェントを向ける、ローカルファーストのオープンソースデザインエージェントです。スキルとポータブルなブランドはリポジトリ内のファイルとして存在し、デスクトップアプリが結果をレンダリングしてレビューします。
- 実行環境デスクトップアプリとマシンのローカルデーモン
- エージェントあなたのもの: Claude Code、Codex、Cursor、Gemini、OpenCode、Qwenなど
- 出力プロジェクトディレクトリ内のファイル
- コストApache-2.0。API使用料は自身のプロバイダーに支払う
共通点
Git管理下のリポジトリにあるエージェント主導のデザインファイルと、コードになるUI。これが両ツールの機能の大部分であり、このページの残りの部分で比較するすべてです。
このページで主張していないこと
OpenDesignにベクターキャンバス、レイヤーパネル、組み込みのUIキット、またはネイティブなFigmaの貼り付け機能があること、あるいは.penファイルが自動的に変換されること。キャンバスが目的である場合、以下の判定ではPencilを使い続けることを推奨しています。
判定
PencilかOpenDesignか？状況別の判定
次の場合にPencilを選択…
- CursorやVS Code内で、成熟したFigmaのようなベクターキャンバスを手動で編集したい場合。
- Figmaから頻繁に貼り付けを行い、レイヤーとオートレイアウトをそのまま維持する必要がある場合。
- 組み込みのUIキットとClaudeファーストのエージェント体験を最も重視する場合。
OpenDesignを選ぶべき場合…
- フォーマットのドキュメント化だけでなく、ツール全体がオープンソースであることを望む場合（フォーク、監査、セルフホストが可能）。
- 早期アクセス終了後もベンダーの制限なく「無料」であり続けることを望む場合。支払うのは自身のモデル利用料のみです。
- プロバイダーに依存しないBYOKを望む場合。Claude、Codex、Cursor、Gemini、OpenCode、Qwenのすべてがファーストクラスでサポートされます。
- 1つのDESIGN.mdからUI、プレゼン資料、プロトタイプ、デザインシステムをレンダリングしたい場合。
両方を実行すべき場合…
- デザイナーはPencilのキャンバスで描画し、残りの成果物はOpenDesignで同じブランドからレンダリングする場合。
- 早期アクセスの価格設定やClaude優先のチューニングが合わなくなった場合に備えて、オープンな代替手段を確保したい場合。
- どちらもリポジトリにファイルを保存するため、並行して実行してもコストはほとんどかかりません。
同じ要件、2つの結果
PencilとOpenDesignでの同じ要件の比較
比較の誠実さは入力内容に依存します。同じ要件と同じブランドをPencilとOpenDesignに入力し、何が返ってくるか、どのように編集されるか、他に何を出力できるかを比較します。以下のパネルはイラストであり、スクリーンショットではありません。20分間のテストで、ご自身で要件を実行できます。
要件 · 両ツールで同一
スロートラベルの宿泊施設を予約する小規模スタジオのランディングページをデザインしてください。強力な見出しを持つ1つのヒーローセクション、3つのおすすめの場所、予約方法に関する短い説明、そして最後のアクション呼びかけ（CTA）を含めます。デスクトップとモバイル対応。
- ブランド
- 紙の背景、Albert Sans、緑のアクセント1つ、角丸8px
- ブレイクポイント
- デスクトップ1440、モバイル390、横スクロールなし
- 編集テスト
- 最初の結果の後：「見出しをより落ち着いたものにし、2番目の場所を入れ替える」
- 記録
- モデル、日付、最初の結果までの時間、必要な編集回数、エクスポート形式
Pencilリポジトリ内の.penファイルOpenDesign + あなたのエージェントリポジトリ内のファイルriviera-landing.html新規 · v2DESIGN.mdバインド済み編集: より穏やかな見出し要素を指し示すと、エージェントが修正
例示両方のパネルはこのページのために描かれたイラストであり、どちらのツールのスクリーンショットでもありません。また、結論はこれらに依存するものではありません。以下の20分間のテストでご自身で要件を実行し、2つの結果を公平に比較できるように、ここに記載されているポイントに注意してください。
注目すべき点 · 両ツール
モデルとバージョン、実行日、最初の使用可能な結果までの時間、「完了」に達するまでの編集回数、エクスポートに含まれる内容。
注目すべき点 · Pencil
MCP経由で実行されたエージェントとClaude以外での動作、.penファイルがコードとクリーンにラウンドトリップしたか、Figmaの貼り付けで何が保持されたか。
注目すべき点 · OpenDesign
使用したエージェントとキー、再プロンプトなしでDESIGN.mdが尊重されたか、両方のブレイクポイントが確認されたか、バージョンがファイルとして保持されたか。
機能ごとの比較
OpenDesign vs Pencil、機能ごとの比較
OpenDesignとPencilが実際に異なる9つの側面：ライセンス、ランタイム、デザインファイル、アカウント、コスト、モデル、主要なサーフェス、出力範囲、成熟度。Pencilの事実は2026年9月6日に公開情報と照合して確認されました。早期アクセスの条件は変更される可能性があります。
| 側面 | OpenDesign | Pencil |
|---|---|---|
| ライセンス | Apache-2.0。アプリ全体がオープンソース | クローズドソースのアプリ。.penフォーマットのみドキュメント化 |
| ランタイム | ローカルデーモンとデスクトップアプリ | ローカルデスクトップアプリ、IDE拡張機能、ローカルMCPサーバー |
| デザインファイル | リポジトリ内のファイル：DESIGN.mdと成果物 | リポジトリ内の.pen JSONファイル |
| アカウント | 不要 | サインイン、早期アクセス |
| コスト | 無料でオープンソース。自身のモデル利用料のみ | 早期アクセス中は無料。有料プランの示唆あり条件は変更される可能性があります |
| モデル | プロバイダーに依存しないBYOK：Claude、Codex、Cursor、Gemini、OpenCode、Qwen | 複数のエージェントを持つMCP、Claude Codeに最適化 |
| 主要なサーフェス | エージェント主導：要件から成果物まで、およびレビューUI | 直接編集できるFigmaのようなベクターキャンバス。MCP経由のエージェント |
| 出力範囲 | UI、ランディングページ、プレゼン資料、プロトタイプ、デザインシステム | UI画面とコンポーネントからコードへ |
| セルフホスト / フォーク | はい | いいえ。アプリはクローズドソース |
Pencilが優れている点
実践的なキャンバス：直接編集できる成熟したFigmaのようなサーフェス、レイヤーとオートレイアウトを保持するネイティブなFigmaの貼り付け、組み込みのUIキット、そしてこれらすべてがIDE内にあります。デザインを行う開発者はエディターから離れる必要がありません。
OpenDesignが優れている点
所有権と範囲：アプリ全体がオープンソースであり、BYOKはClaude優先ではなくプロバイダーに依存しません。マネタイズするベンダーが存在しないため、無料は無料のままです。また、出力はUIからコードへの変換をはるかに超えます。
決定
OpenDesignがPencilの適切な代替となる場合
IDEでデザインする開発者
Claude Codeを使用して、コードの隣で画面を手動で描画する
PencilCursorやVS Code内のキャンバス、Figmaからのネイティブな貼り付け、Claudeファーストのチューニングがまさにこの人のワークフローです。OpenDesignには提供できるキャンバスがありません。
適さないケース チームがClaudeではなくCodex、Gemini、またはQwenを実行している場合。
オープンソースポリシーを持つチーム
ツール全体が監査可能でフォーク可能である必要がある
OpenDesignエージェント、スキルライブラリ、レンダラーはApache-2.0です。.penフォーマットが文書化されていることとは異なります。
適さないケース オープンなファイルフォーマットだけでポリシーが満たされる場合。
多くの成果物タイプにわたるブランド
1つのブランドからのデッキ、ランディングページ、プロトタイプ、UI
OpenDesign1つのDESIGN.mdが、プロンプトを再入力することなくそれらすべてをレンダリングします。Pencilの範囲はUIからコードまでです。デザインシステムソリューションをご覧ください。
適さないケース UI画面が唯一の成果物である場合。
早期アクセスをヘッジするPencilユーザー
現在は無料、有料プランが示唆されている
両方を実行するPencilで描画を続け、ブランドをDESIGN.mdに抽出し、残りをOpenDesignでレンダリングすることで、1つのベンダーの価格設定に依存しないようにします。どちらもリポジトリにファイルを保持します。
適さないケース .penファイルとDESIGN.mdが自動的に同期することを期待している場合。同期はしません。
デザインを移行するか、両方を実行する
PencilからOpenDesignへデザインを移行する方法
どちらのツールもデザインをリポジトリ内のファイルとして保持するため、戦うべき不可逆的なクラウドエクスポートはありません。移行するのは、Pencilのエクスポートからの1回限りの抽出によるブランドとブリーフです。.penキャンバスファイルはPencilで編集可能なままです。
| 移行するもの | |
|---|---|
| ブランド | エージェントにPencilのエクスポート、Figmaの貼り付け、またはスクリーンショットを指示します。色、タイポグラフィ、間隔、トーンをDESIGN.mdに抽出します。 |
| プロンプト | プレーンテキスト。キャンバスからのプロンプトブロックは、そのままOpenDesignのブリーフに貼り付けられます。 |
| 生成されたコード | Pencilが.penファイルから生成したコードは、構造的なリファレンスとして機能します。エージェントはパッチを当てるのではなく、DESIGN.mdの下で再レンダリングします。 |
| Pencilに残るもの | |
| .penキャンバスファイル | ベクターレイヤーは変換されません。ブリーフとDESIGN.mdから再レンダリングしてください。 |
| 組み込みのUIキット | Shadcnスタイルのキットは、DESIGN.mdと独自のコンポーネントを通じて再表現されます。 |
| ネイティブなFigmaの貼り付け | チームメイトがFigmaから貼り付け続ける場合、そのステップはPencilに残ります。 |
-
OpenDesignをインストールし、同じリポジトリを開く
デスクトップアプリをダウンロードし、すでに.penファイルを保持しているリポジトリをプロジェクトとして開きます。クイックスタートでは、ソースビルドパスについて個別に説明しています。
-
リファレンスとしてPencilの画面を1つエクスポートする
外観を維持したい画面のPNG（または生成されたコード）をエクスポートし、プロジェクトに追加します。
-
エージェントにブランドをDESIGN.mdに抽出するよう依頼する
ファイルを手動で確認します。1つのアクセント、適切なフォント、適切な半径。これは判断が必要な唯一の移行ステップです。
-
新しいブランドに対して元のブリーフをレンダリングする
スキルを選択してレンダリングします。ここから、UI、デッキ、プロトタイプなど、すべてのスキルがプロンプトを再入力することなくブランドでレンダリングされ、各バージョンはファイルになります。
両方を実行する
キャンバス上でUIを手動編集するためにPencilを保持し、ブランドからレンダリングされるすべてのものにOpenDesignを使用します。どちらも同じリポジトリに存在します。キャンバスが変更されたらDESIGN.mdを更新してください。自動的に同期するものはありません。
フォールバックと損失
試しても失うものはほとんどありません。どちらにしても.penファイルはリポジトリに残ります。OpenDesignのレンダリングが失敗した場合、最後のバージョンはディスクに残り、ブリーフは変更されません。同じエージェントまたは別のエージェントで再試行してください。
20分間のテスト
Pencilですでに描画した画面でOpenDesignを試す
Pencilで描画した画面を取り、好きなエージェントを使用してOpenDesignで再構築します。20分以内に結果が使用できない場合、この比較は知る価値のある何かを教えてくれたことになります。
1タスク
これは私がPencilでデザインした画面のPNGエクスポートです。そのブランドをDESIGN.mdに抽出し、私のデザインルールを使用してこのブリーフから同じ画面を再構築し、同じブランドの1スライドのデッキカバーを追加してください。デスクトップとモバイルの幅で画面を確認してください。
- 01Pencil画面の入力外観を維持したい.pen画面のPNGエクスポート。
- 02DESIGN.mdの出力.penファイルの隣のファイルに抽出されたブランド。手動で確認してください。
- 03レンダリングされた画面とデッキカバーデスクトップとスマートフォンの画面、および同じブランドのデッキカバー。その後、要素を指して1回編集します。
2成功した場合…
- DESIGN.mdは.penファイルの隣にコミットされ、そのトークンを承認できる。
- 画面は1440と390で水平スクロールなしでレンダリングされ、デッキカバーはブランドを共有している。
- 要素を指すことで1回の編集（「より穏やかな見出し」）が適用される。必要に応じてClaude以外のエージェントを使用できる。
- 2つのバージョンがファイルとして並んで配置される。暗黙のうちに上書きされたものはない。
機能しなかった場合：エージェントが接続され、選択したモードで認証されていることを確認してから、ツールを判断する前により小さなブリーフで再試行してください。
その他のオプション
その他のPencil.devの代替手段
よくある質問
Pencil.devの代替: FAQ
Pencil (pencil.dev) はオープンソースですか？
アプリは違います。Pencilはクローズドソースのa16zが支援する製品です。オープンなのは.penファイルフォーマットであり、ドキュメント化されていますが変更される可能性があります。OpenDesignはApache-2.0の下で完全にオープンソースです。フォーマットだけでなく、アプリケーション全体が対象です。
Pencil.devは無料ですか？
現在は早期アクセスとして明示的に無料ですが、創業者は有料プランと制限を示唆しています。OpenDesignはオープンソースであるため無料です。独自のエージェントキー（BYOK）を使用するため、モデルの費用はベンダーの制限なしに直接請求されます。
OpenDesignとPencilの違いは何ですか？
似ています。どちらもエージェント主導であり、デザインをGit下のローカルリポジトリにファイルとして保持します。OpenDesignは完全にオープンソースであり、Claude優先ではなくプロバイダー中立のBYOKで、UI、プレゼン資料、プロトタイプ、デザインシステムをレンダリングします。PencilはIDE内のベクターキャンバスであり、UIからコードへの変換に焦点を当てています。結論にそれぞれの条件を記載しています。
PencilはClaude以外のエージェントでも機能しますか？
はい、MCPを介して複数のエージェントに接続しますが、Claude Codeに最適化されており、レビュアーは他のエージェントでは体験が劣ると報告しています。OpenDesignはClaude、Codex、Cursor、Gemini、OpenCode、Qwenをファーストクラスとして扱います。
OpenDesignと並行してPencilを使い続けることはできますか？
はい。どちらも同じリポジトリにファイルを保持するため、並行して実行してもコストはほとんどかかりません。Pencilで描画し、他のすべてをOpenDesignのDESIGN.mdからレンダリングします。移行するものと残るものをご覧ください。
OpenDesignは本当にオープンソースですか？
はい。github.com/nexu-io/open-designにてApache-2.0の下で公開されており、セルフホスト可能です。
OpenDesignはPencilと提携していますか？
いいえ。OpenDesignは独立したオープンソースプロジェクトです。Pencilはpencil.devにあるa16zが支援する別の製品です。これはOpenDesignチームによって書かれた非提携の比較です。
1つの実際の画面でOpenDesignを試す
Pencilで描いた画面を任意のコーディングエージェントで再構築し、ラウンドトリップを評価してから決定してください。自分に合った状況を選択してください。このページはあなたのセットアップを検出しません。