代替 · Pencil.dev
デザインに最適な Pencil.dev の代替。
Open Design は Pencil の完全オープンソースでローカルファーストな代替です — すでに使っているコーディングエージェントで駆動する、エージェントネイティブなデザインワークスペース。あなたのキー、あなたのファイル、そしてリポジトリに保持する持ち運び可能なデザインシステムを備えます。
Pencil（pencil.dev）は a16z Speedrun 発のエージェント駆動型デザインツールで、Figma ライクなベクターキャンバスを IDE 内に置き、そのデザインを Git でバージョン管理された リポジトリ内の .pen JSON ファイル として保持します。ローカル MCP サーバーによってコーディングエージェントがそれらのファイルを読み書きできるため、プロンプトが編集可能な UI になり、それをコーディングエージェントに渡して本番コードを生成できます。2026年初頭に一般公開され、10万ユーザー を突破し、本当に良いものです — ただしアプリ本体は クローズドソース で、まず Claude 向けに調整されており、無料なのはアーリーアクセスの間だけ という落とし穴があります。
Open Design は 完全オープンソースでローカルファースト な代替です: 自分のコーディングエージェント（Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen）を BYOK で向けるエージェントネイティブなデザインワークスペースです。この2つは異例なほど近い — どちらもエージェント駆動で、どちらもデザインをファイルとしてリポジトリに保持します。違いは所有権と範囲です: Open Design では アプリ全体 が Apache-2.0 で（ドキュメント化された形式だけでなく）、BYOK は プロバイダー中立、そして出力は UI、デッキ、プロトタイプ、そして持ち運び可能な DESIGN.md に及びます。このページは Pencil が本当に優れている点について正直に述べます。
01
Pencil とは
Pencil（pencil.dev）は「キャンバスでデザインし、コードに着地する」 — IDE とコードベースの中に存在する無限のベクターデザインキャンバスで、Tom Krcha（以前は Miro に買収された Around を手がけた）によって作られ、a16z Speedrun の出資を受けています。そのデザインファイルはオープンでドキュメント化された .pen JSON 形式 を使い、Git 管理下のリポジトリに存在し、ローカル MCP サーバー によって AI エージェントがそれらを読み書きできます。キャンバス上でプロンプトを入力するか描画し、その後デザインをコーディングエージェント（Claude Code など）に渡して、あなたのスタックに合った本番コンポーネントを生成します。
デザイン領域として、Pencil は洗練されています: レイヤー、プロパティインスペクター、ドラッグ&ドロップのコンポーネント、キャンバス上に直接配置する プロンプトブロック、レイヤーとオートレイアウトを保持するネイティブの Figma コピー&ペースト、そして組み込み UI キット（Shadcn、Lunaris、Halo、Nitro）を備えた本物のベクターキャンバスです。手動のキャンバス編集はエージェントのトークンを消費しません。
導入前に知っておくべきこと: Pencil の アプリケーションはクローズドソース（ドキュメント化されているのは .pen 形式だけで、変更され得る）、Claude Code 向けに最適化 されており他のモデルでは体験が弱く、無料なのはアーリーアクセスだけ（創業者いわく「無料はビジネスモデルではない」）で、レビュアーは依然として 初期段階 であると指摘しています — 時折クラッシュし、自動保存はありません。
- ベンダー: Pencil（pencil.dev）、a16z Speedrun — クローズドソースのアプリ、約10万ユーザー、2026年初頭にローンチ
- ランタイム: ローカルデスクトップアプリ + IDE 拡張（Cursor / VS Code / Windsurf）+ ローカル MCP サーバー
- デザインファイル: リポジトリ内のオープンな .pen JSON 形式、Git バージョン管理
- モデル: 複数エージェントに MCP 対応、Claude Code 向けに最適化。エージェントのサブスクリプションは自分で用意
- 価格: アーリーアクセス中は無料、公表された上限はまだなし — 有料プランを示唆
02
Open Design vs Pencil、機能ごとの比較
| 機能 | Open Design | Pencil（pencil.dev） |
|---|---|---|
| ライセンス | Apache-2.0 — アプリ全体がオープンソース | クローズドソースのアプリ。ドキュメント化されているのは .pen 形式だけ |
| ランタイム | ローカルデーモン + デスクトップアプリ | ローカルデスクトップアプリ + IDE 拡張 + ローカル MCP サーバー |
| デザインファイル | リポジトリ内のファイル（Git）: DESIGN.md、アーティファクト | .pen JSON ファイルをリポジトリに（Git） |
| アカウント | 不要。ローカルで動作 | アカウント / サインイン（アーリーアクセス） |
| 価格 | 無料 & オープンソース。自分のモデル費用 | アーリーアクセス中は無料。有料プランを示唆 |
| モデル | BYOK、プロバイダー中立 — Claude、Codex、Cursor、Gemini、Qwen | 複数エージェントに MCP 対応、Claude Code 向けに最適化 |
| 主要な操作面 | エージェント駆動（プロンプト → アーティファクト）+ Web UI | 直接編集する Figma ライクなベクターキャンバス。エージェントは MCP 経由 |
| 出力 | UI、ランディングページ、デッキ、プロトタイプ、デザインシステム | UI 画面/コンポーネント → コード（リポジトリに合わせる） |
| デザインシステム | あらゆるスキルが強制する持ち運び可能な DESIGN.md | 変数/コンポーネント + 組み込み UI キット（Shadcn、Lunaris…） |
| Figma インポート | エージェント経由（貼り付け/スクリーンショット → DESIGN.md） | ネイティブのコピー&ペースト（レイヤー、オートレイアウトを保持） |
| コラボレーション | シングルユーザーのローカル。エージェント駆動 | 人間同士のマルチプレイヤーはなし。SWARM = 複数の AI エージェント |
| セルフホスト / フォーク | 可能（Apache-2.0） | 不可 — アプリはクローズドソース |
| 成熟度 | 安定版リリース | アーリーアクセス — クラッシュ、自動保存なしが報告 |
正直に読むと: Pencil は 手を動かすキャンバス で勝ります — IDE 内にあり、ネイティブの Figma 貼り付けと組み込み UI キットを備えた、直接編集する成熟した Figma ライクな操作面。Open Design は 所有権と範囲 で勝ります — アプリ全体がオープンソース（ファイル形式だけでなく）、BYOK は Claude ファーストではなくプロバイダー中立、あなたを収益化するベンダーがいないため「無料」は無料のまま、そして出力はあなたが保持するファイルとして UI、デッキ、プロトタイプ、持ち運び可能なデザインシステムに及びます。
03
チームが Pencil の代替を探す理由
Pencil は IDE 内でデザインするための強力な方法であり、多くの「デザインする開発者」にとって非常に適しています。それでも人々が代替を探す理由は、アーリーアクセスのハネムーンが終わった後に起こること — 所有権、プロバイダーのロックイン、そして範囲 — の周りに集まります。
- アプリはクローズド、オープンなのは形式だけ: Pencil の .pen 形式はドキュメント化されていますが、アプリケーションはクローズドソースの a16z 出資で、形式仕様は変更する権利を留保しています。Open Design は端から端まで Apache-2.0 です — フォークし、監査し、セルフホストし、生成されるすべてのアーティファクトを所有できます。
- 「無料」には有効期限がある: Pencil はアーリーアクセスの間は無料ですが、創業者は「無料はビジネスモデルではない」と明言しています。有料プランと制限が来ます。Open Design はオープンソースだから無料です。支払うのは自分自身のモデル費用だけです。
- Claude ファーストである: Pencil は MCP 経由で複数のエージェントに接続しますが、Claude Code 向けに調整されており、他では体験が弱いです。Open Design はプロバイダー中立の BYOK です — Claude、Codex、Cursor、Gemini、OpenCode、Qwen がすべて一級市民です。
- UI からコードへの変換以上が欲しい: Pencil は UI → コードに焦点を当てています。Open Design は同じブランドから UI、ランディングページ、デッキ、プロトタイプ、そして持ち運び可能な DESIGN.md デザインシステムをレンダリングします、すべてリポジトリ内のファイルとして。
04
オープンソース + BYOK の解説
どちらのツールもローカルファーストで、デザインをファイルとしてリポジトリに保持します — その部分は共通の土台です。Open Design が異なるのは、ドキュメント化されたファイル形式だけでなく アプリケーション全体 が Apache-2.0 なので、フォークし、監査し、セルフホストできる点です。あなたのブランドは、あらゆるスキルが尊重する 持ち運び可能な DESIGN.md としてリポジトリ内に存在します。
さらに 自分のエージェントキーを持ち込みます、プロバイダー中立に。認証情報はローカル設定または環境変数に留まり — Open Design がそれらをプロキシすることはありません — そして API 費用は、アーリーアクセス後のベンダー上限なしに、プロバイダーのレートで 直接あなたに請求されます。
この考え方が初めてですか？vibe デザインとは何か を読み、プラグインとデザインシステムのライブラリ を閲覧し、Open Design のすべての比較 — Figma や Google Stitch を含む — を見るか、Open Design をダウンロード して試してください。
05
Pencil が本当に優れている点 — そしてどちらを選ぶか
評価すべき点は評価すると: デザイン領域 として、Pencil は優秀です。手で編集する本物の Figma ライクなベクターキャンバス — レイヤー、プロパティインスペクター、ドラッグ&ドロップのコンポーネント、そしてキャンバス上に直接配置されたプロンプトブロック — に、レイヤーとオートレイアウトを保持するネイティブの Figma コピー&ペースト、加えて組み込み UI キット（Shadcn、Lunaris、Halo、Nitro）を備えます。そしてそのすべてが IDE 内に存在するので、デザインする開発者は Cursor や VS Code を離れる必要がありません。直接操作する洗練されたキャンバスが欲しいなら、Pencil の操作面は今日の Open Design のエージェントファーストなフローよりも成熟しています。トレードオフはその周りのすべての構造的なものです: クローズドソースのアプリ、Claude ファーストの調整、そして創業者が続かないと述べた「無料」です。
実際にやりたいことで手早く決める方法 — 両者は重なるので、正直な切り分けが重要です:
| やりたいこと… | 最適な選択 |
|---|---|
| フォーク/セルフホストできるオープンソースとしてツール全体を所有する | Open Design |
| アーリーアクセス後もベンダー上限なしに「無料」を無料のまま保つ | Open Design |
| プロバイダー中立の BYOK を使う（Claude ファーストではない） | Open Design |
| UI + デッキ + プロトタイプ + デザインシステムをレンダリングする | Open Design |
| 成熟した Figma ライクなベクターキャンバスを手で編集する | Pencil |
| レイヤーとオートレイアウトを保持したまま Figma から貼り付ける | Pencil |
| Cursor / VS Code 内でインラインにデザインする | Pencil |
06
デザインを Pencil から Open Design へ移す
どちらのツールもデザインをファイルとしてリポジトリに保持するため、格闘すべき損失を伴うクラウドエクスポートはありません — 移行はデザインファーストです。ブランドを一度抽出すれば、その後のあらゆるレンダリングがそれを継承します。
- ダウンロードページから Open Design をインストールし、自分のエージェントキーを持ち込みます（Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen）。
- エージェントを Pencil のエクスポート、Figma からの貼り付け、または見た目を維持したいスクリーンショットに向けます。
- エージェントにブランド — 色、タイポグラフィ、余白 — をリポジトリ内の DESIGN.md ファイルに抽出するよう依頼します。
- スキルを1つ選び、新しいブランドに対してレンダリングして、一致することを確認します。
それ以降、あらゆるスキルがあなたのブランドでレンダリングし — UI、コード、デザインシステムはリポジトリに留まります、バージョン管理下であなたが所有するファイルとして。
FAQ
FAQ
-
01 Pencil（pencil.dev）はオープンソースですか？
アプリはそうではありません。Pencil はクローズドソースの a16z 出資プロダクトです。「オープン」なのは .pen ファイル形式で、ドキュメント化されていますが変更され得ます（チームは破壊的変更を行う権利を留保しています）。Open Design は Apache-2.0 の下で完全オープンソースです — ファイル仕様だけでなくアプリケーション全体が — そしてセルフホスト可能です。
-
02 Pencil.dev は無料ですか？
現在は無料ですが、明確にアーリーアクセスです。創業者は「無料はビジネスモデルではない」と述べており、将来の有料プランと制限を示唆しています。Open Design はオープンソースだから無料です。自分のエージェントキーを持ち込むため、モデル費用はベンダーが設定する上限なしにあなたに請求されます。
-
03 Open Design と Pencil の違いは何ですか？
両者は近い — どちらもエージェント駆動で、デザインを Git 管理下のリポジトリにファイルとして保持します。違いは: Open Design は完全オープンソース（オープンな形式だけでなく Apache-2.0）、プロバイダー中立の BYOK（主に Claude 向けに調整されていない）、そしてより広範なアーティファクト（UI、デッキ、プロトタイプ、デザインシステム）をレンダリングします。Pencil はより成熟した手動のベクターキャンバスとネイティブの Figma 貼り付けを提供します。
-
04 Pencil は Claude 以外のエージェントで動作しますか？
はい — MCP 経由で複数のエージェント（Cursor、Windsurf、Codex など）に接続しますが、Claude Code 向けに最適化されており、レビュアーは他のモデルではより弱い体験を報告しています。Open Design は Claude、Codex、Cursor、Gemini、OpenCode、Qwen を一級市民として扱います。
-
05 Open Design は Pencil と提携していますか？
いいえ。Open Design は独立したオープンソースプロジェクトです（github.com/nexu-io/open-design、Apache-2.0）。Pencil は pencil.dev の別の a16z 出資プロダクトです。これは提携関係のない比較です。
ファイル形式だけでなく、ツール全体を所有する。
リポジトリにスターを付け、デスクトップビルドを入手するか、ターミナルでインストールを実行してください。Open Design は端から端までオープンソースです — あなたの UI、コード、DESIGN.md システムは最初のレンダリングからリポジトリに留まります。