ZSeven-W/openpencil

これは何？

主な機能

• 01ストリーミング出力に対応し、無限キャンバス上でテキストプロンプトからUIを直接生成。
• 02複数のエージェントが連携し、ページの各セクションを並行してデザイン。
• 03組み込みのMCPサーバーはClaude Code、Codex、OpenCode、Kiro、Copilot CLIに対応。
• 04Gitで扱いやすい、人が読めるJSON形式の`.op`ファイルでデザインを保存。
• 05React、Vue、Svelte、Flutter、SwiftUI、Jetpack Composeなどのコードとして出力。
• 06`op` CLIと、埋め込み可能な読み取り専用WebビューアーSDKを提供。

ユースケース

• AIアシスタントに説明してUI画面のプロトタイプを作成する。
• MCP経由でコーディングエージェントにデザインファイルを読み書きさせる。
• デザインを手作業で実装し直すことなく、フレームワークのコードに変換する。
• 自作のWebアプリに、デザインファイルの読み取り専用ビューアーを埋め込む。

クイックスタート

1. 1

   サブモジュールを含めてリポジトリをクローンする

   git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
2. 2

   ビルドの前提条件として Rust（stable）をインストールする

3. 3

   Web 開発サーバーを起動する

   bash scripts/start-web-rust.sh
4. 4

   または、代わりにデスクトップアプリを実行する

   cargo run -p op-host-desktop

使う前に知っておきたいこと

• !まだ初期段階のプロジェクトで、README も更新中のため、粗削りな部分があることをご了承ください。
• !CLI と ACP エージェントはネイティブのデスクトップアプリでのみ動作し、Web ホストでは動作しません。
• !ソースからのビルドには Rust とサブモジュールのセットアップが必要です。また、Windows では別途ビルドガイドが必要です。

トピック

よくある質問

openpencil とは？

無限キャンバスでのプロンプトからの生成、並列エージェント、MCPサーバー、コード出力に対応したオープンソースのAIネイティブなベクターデザインツール。 OpenPencilは、無限キャンバス上でUIを作成するためのベクターデザインツールです。ページの内容を自然言語で説明すると、AIがキャンバス上に直接生成します。また、既存の要素を選択してチャットで変更を依頼することもできます。デザインはJSON形式の`.op`ファイルとして保存されるため、内容の確認や差分の比較ができ、Gitでバージョン管理できます。

openpencil は無料で使えますか？ライセンスは？

openpencil は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

openpencil は今もメンテナンスされていますか？

活発にメンテナンス中。openpencil の最終コミットは 2026年10月19日 です。

openpencil は何に使えますか？

AIアシスタントに説明してUI画面のプロトタイプを作成する。 MCP経由でコーディングエージェントにデザインファイルを読み書きさせる。 デザインを手作業で実装し直すことなく、フレームワークのコードに変換する。 自作のWebアプリに、デザインファイルの読み取り専用ビューアーを埋め込む。

openpencil のインストール方法は？

サブモジュールを含めてリポジトリをクローンする: git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git ビルドの前提条件として Rust（stable）をインストールする Web 開発サーバーを起動する: bash scripts/start-web-rust.sh または、代わりにデスクトップアプリを実行する: cargo run -p op-host-desktop

openpencil はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/ZSeven-W/openpencil