OpenPencil

世界初のオープンソース AI ネイティブベクターデザインツール。
_{並行エージェントチーム • Design-as-Code • 内蔵 MCP サーバー • マルチモデルインテリジェンス}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{画像をクリックしてデモ動画を視聴}

`）に加え、実行中のアプリからライブ HTTP エンドポイント（`127.0.0.1:/mcp`）を提供 - ターミナルからのデザイン自動化：MCP 対応エージェントを通じて `.op` ファイルの読み取り、作成、編集が可能 - **レイヤードデザインワークフロー** — `design_skeleton` → `design_content` → `design_refine` による高忠実度マルチセクションデザイン - **セグメント化プロンプト取得** — 必要なデザイン知識のみをロード（schema、layout、roles、icons、planning など） - マルチページサポート — MCP ツールを通じてページの作成、名前変更、並べ替え、複製が可能 **コード生成** - React + Tailwind CSS、HTML + CSS、CSS Variables - Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native ## CLI — `op` グローバルインストールしてターミナルからデザインツールを操作： ```bash brew install zseven-w/openpencil/op ``` ```bash op start # デスクトップアプリを起動 op start --headless --file design.op # ヘッドレスサーバーを起動 op design @landing.txt # ファイルからバッチデザイン op design @ui.js # ループ対応のサンドボックス JavaScript op insert '{"type":"rectangle"}' # ノードを挿入 op import:figma design.fig # Figma ファイルをインポート cat design.dsl | op design - # stdin からパイプ入力 ``` インライン文字列、`@filepath`、stdin（`-`）に対応し、デスクトップアプリ、Web サーバー、ファイルベースのヘッドレスサーバーと連携します。全コマンドは [CLI コマンドリファレンス](./crates/op-cli/src/usage.txt) を参照してください。 **LLM スキル** — [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) をインストールして、AIエージェントに `op` を使ったデザインを教えます。検出済みのエージェントには `op install`、対象を指定する場合は `op install --target codex` を実行します。 ## 機能 **キャンバスと描画** - パン、ズーム、スマートアライメントガイド、スナッピング対応の無限キャンバス - 矩形、楕円、直線、多角形、ペン（ベジェ）、Frame、テキスト - ブーリアン演算 — 合体、型抜き、交差（コンテキストツールバー付き） - アイコンピッカー（Iconify）と画像インポート（PNG/JPEG/SVG/WebP/GIF） - オートレイアウト — 垂直/水平方向、ギャップ・パディング・justify・align 対応 - タブナビゲーション付きマルチページドキュメント **デザインシステム** - デザイン変数 — カラー・数値・文字列トークン、`$variable` 参照付き - マルチテーマサポート — 複数のテーマ軸、各軸に複数バリアント（Light/Dark、Compact/Comfortable） - コンポーネントシステム — インスタンスとオーバーライドを持つ再利用可能なコンポーネント - CSS 同期 — カスタムプロパティの自動生成、コード出力に `var(--name)` を使用 - 再利用可能な UIKit — `.pen` ファイルからコンポーネントキットをインポート/エクスポート **AI とエージェント** - ストリーミング生成とオーケストレーター駆動の空間分解によるプロンプトからキャンバスへの変換 - 並行エージェントチーム — 複数のデザイナーが異なるセクションを並列で処理し、各メンバーにキャンバスインジケーター - レイヤードワークフロー — `design_skeleton` → `design_content` → `design_refine`、各フェーズごとに焦点を絞ったプロンプト - スタイルガイド — 50+ のビルトインスタイル（glassmorphism、brutalist、retro など）、タグベースのファジーマッチング対応、プランニングと生成に統合 - マルチモデル能力プロファイル — モデル階層に応じてシンキングモード、エフォート、プロンプト形状を自動適応 - ビルトインエージェントランタイム（Rust）+ Anthropic、Claude Agent SDK、OpenCode、Codex、Copilot、Gemini プロバイダー - 中国系 LLM プロバイダー向け Anthropic フォーマットパススルー — Kimi、Zhipu、GLM、DouBao、Ark、Bailian/DashScope、ModelScope、Coding Plans **Git 統合** - SSH / HTTPS 認証と SSH キー管理を備えたクローンウィザード - ブランチピッカー — 作成、切り替え、削除、マージをすべて Git パネルから - プル / プッシュカスケード — 認証リトライとノンファストフォワード処理対応 - フォルダーモード三方向マージ — ディスク上の `MERGE_HEAD` 状態追跡付き - コンフリクトパネル — ノード/フィールド単位の三方向カード、インライン JSON エディター、一括操作、インライン diff ブロック - リモート設定と SSH キー UI、Git サーフェス全体にわたる 15 ロケール i18n **エクスポート** - キャンバスエクスポート — PNG、JPEG、WEBP、PDF（`Cmd+Shift+P`） - コードエクスポート — React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native - インクリメンタル MCP コード生成パイプライン — `codegen_plan`、`codegen_submit_chunk`、`codegen_assemble`、`codegen_clean` **Figma インポート** - レイアウト、フィル、ストローク、エフェクト、テキスト、画像、ベクターを保持して `.fig` ファイルをインポート **デスクトップアプリ** - macOS・Windows・Linux ネイティブ対応 — 単一の自己完結型バイナリ（winit + GPU Skia、Electron 不要） - `.op` ファイル関連付け — ダブルクリックで開く、シングルインスタンスロック - GitHub Releases に対するバックグラウンド更新チェック - 名前を付けて保存、最近使った項目を開く、および終了時の未保存変更ダイアログを備えたネイティブアプリケーションメニュー - 最近使ったファイルの永続化 ## 技術スタック | | | | ------------------ | -------------------------------------------------------------------------------- | | **コア** | Rust ワークスペース（`crates/`） — エディター状態、ウィジェット、ホスト、MCP、AI、codegen | | **レンダリング** | あらゆる場所で GPU Skia — ネイティブは `skia-safe`（GL）、ブラウザは CanvasKit（WASM/WebGL2） | | **UI フレームワーク** | jian — ベンダー化された純 Rust の GPU-Skia UI フレームワーク：ウィジェット、レイアウト、イベント、ホットリロード（`vendor/jian`） | | **ウィンドウイング** | winit（ベンダー化された `casement` フォーク） | | **デスクトップ** | ネイティブバイナリ `openpencil-desktop` — ブラウザエンジン不要 | | **Web SDK** | `op-web-sdk` + React 19 / Vue 3 アダプター — 読み取り専用 `.op` ビューアー（TypeScript） | | **CLI** | `op` — ターミナル制御、バッチデザインDSL | | **AI** | ビルトイン Rust エージェントランタイム · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **リント** | clippy · rustfmt（Rust） · oxlint · oxfmt（Web SDK） | | **ファイル形式** | `.op` — JSON ベース、人間が読みやすく、Git フレンドリー | ## エコシステム OpenPencil は **[ZSeven-W](https://github.com/ZSeven-W)** による純 Rust・AI ネイティブなツール群の一員です。これらは互いに組み合わさります：`jian` が OpenPencil をレンダリングし、`agent-rs` がそのエージェントを実行し、`noema` が記憶し、`zode` がターミナルからデザインします。 | プロジェクト | 内容 | | ------- | ---------- | | **[Zode](https://github.com/ZSeven-W/zode)** | ターミナル向けのオープンソース AI ネイティブコーディングアシスタント — コードを読み、コマンドを実行し、ファイルを検索し、git を管理する高速な Rust TUI（`ratatui`）。MCP 経由で OpenPencil を駆動します。 | | **[agent-rs](https://github.com/ZSeven-W/agent-rs)** | LLM エージェントを届けるための純 Rust 非同期ランタイム — マルチプロバイダー、エンドツーエンドでツール対応、構造化された権限、本物の MCP、`unsafe` ゼロ。OpenPencil のビルトインエージェントランタイム（`vendor/agent`）と Zode を支えます。 | | **[jian](https://github.com/ZSeven-W/jian)** | 純 Rust の GPU-Skia UI フレームワーク — ウィジェット、レイアウト、イベント、ホットリロードを一つのスタックに。宣言的な `.op` ドキュメントを、JS ランタイムも DOM も Electron もない、ネイティブで AI 制御可能なアプリへと変えます。OpenPencil の UI フレームワーク（`vendor/jian`）。 | | **[noema](https://github.com/ZSeven-W/noema)** | コーディングエージェント向けのローカルファースト・非ベクター記憶システム。検査可能なファイルとしての永続的な記憶、新規エントリのレビューキュー、そして語彙的（埋め込み不要）な想起 — Zode、Codex、Claude Code、MCP ランタイム間で機能します。 | ## なぜ Rust か OpenPencil は **Rust** で一から書き直されました ([#129](https://github.com/ZSeven-W/openpencil/issues/129))。書き直しは完了しています — TypeScript + Electron エディターは `v0.7.5` で廃止され、このリポジトリの Rust ワークスペースが製品そのものです：ひとつのネイティブコアで劇的に軽量かつ高速になり、単一のコードベースからより多くのプラットフォームで動作します。 | | TypeScript + Electron（廃止済み、`v0.7.5`） | Rust（現在） | | --------------------- | ---------------------------------------------- | ------------------------------------------------------------------- | | **デスクトップランタイム** | Electron — Chromium + Node.js をバンドル | ネイティブウィンドウ（`winit` + GPU Skia）、ブラウザエンジン不要 | | **デスクトップフットプリント** | インストールごとに Chromium ランタイム全体 | 単一の自己完結型バイナリ — **55.5 MB** | | **Web ペイロード** | JS + WASM バンドル | **8.2 MB** wasm / **2.18 MB** gzip（転送時） | | **レンダリング** | Web 上の CanvasKit/Skia | **すべての**ターゲットで単一の GPU アクセラレーション Skia バックエンド | | **メモリ** | JavaScript GC によるポーズ | GC なし — Rust 所有権モデル、予測可能なレイテンシ | | **コードベース** | Web スタック + Electron | 単一 Rust ワークスペース：エディター・CLI・MCP・AI・codegen・Figma・Git | | **ターゲット** | Web + デスクトップ、別々のスタック | デスクトップ（macOS/Win/Linux）・モバイル（iOS/Android）・ブラウザ — 単一コア | **実測改善値** - **極小フットプリント** — デスクトップアプリ全体が、ブラウザエンジンと Node ランタイムのバンドルではなく、**55.5 MB** のネイティブバイナリ 1 つ。Web ビルドはアイコンカタログを分割した後、**8.2 MB** 生 / **2.18 MB** gzip（転送量 −48%）。 - **大規模ドキュメントへのスケール** — **10,000-node** のライブキャンバス（ネスト 4 段のオートレイアウト）で、書き込み・読み込み・レイアウトスナップショットを**パニックなし、アイドル CPU ~0%** で実行。全 10k ノードのレイアウトスナップショットは **~0.68 s** で返却。 - **高速インタラクション** — パン/ズームがフレームごとにドキュメントを再シリアライズしなくなった（ホットパスの修正 1 点でホイールズーム CPU を **~69% から ~0%** に削減）。ドラッグはシーンをインクリメンタルにパッチし、テキスト計測はキャッシュされ、再描画は 1 フレームあたり 1 回にまとめられる。 - **単一コア、あらゆる画面** — 同じエディターステートと同じレンダリングバックエンドが、WASM 経由でネイティブデスクトップ、モバイル、ブラウザにコンパイル — 同期を保つための並列再実装は不要。 - **GPU Skia everywhere** — ネイティブは GL コンテキスト上の `skia-safe` でレンダリング。ブラウザは WebGL2 上の CanvasKit でレンダリング — 同じ描画コード、同じ出力。 - **ネイティブアクセシビリティ** — macOS・Windows・Linux では AccessKit を使用し、Web ではブラウザの a11y ツリーに依存する代わりに DOM ミラーを提供。 - **型チェック済みの単一ワークスペース** — MCP ホスト、CLI、AI プロバイダー、コード生成、Figma インポート、Git 統合がすべて単一の Rust ワークスペースに収まり、CI では `cargo-deny` によるサプライチェーンのゲーティングを実施。 > **ステータス：** TypeScript エディターは `v0.7.5` で廃止され、現在は Git 履歴にのみ残っています。このリポジトリは Rust ワークスペースです。Rust 製品は現在活発に開発中です（下記のロードマップを参照）。 ## プロジェクト構成 ```text openpencil/ ├── crates/ Rust ワークスペース — 製品本体 │ ├── op-editor-core/ 正規の `.op`（PenDocument）エディター状態 + EditorCommand + デザイン変数 │ ├── op-editor-ui/ プラットフォーム非依存ウィジェット + RenderBackend ファサード（wasm32 対応） │ ├── op-editor-host-core/ 全ホスト共有のトランスポート非依存ホストステートマシン │ ├── op-host-native/ ネイティブホストライブラリ — winit + skia-safe GL（デスクトップ + モバイル） │ ├── op-host-web/ ブラウザバンドル — wasm32 cdylib、CanvasKit レンダラー │ ├── op-host-desktop/ デスクトップバイナリ `openpencil-desktop`；`--serve-web` デーモンも兼ねる │ ├── op-host-services/ ヘッドレス serve-web / MCP デーモンライブラリ │ ├── op-host-web-server/ 軽量な GL 非依存 Web サーバーバイナリ │ ├── op-cli/ CLI ツール — `op` コマンド │ ├── op-mcp/ MCP サーバー — ツール、バッチデザイン、レイヤードワークフロー │ ├── op-ai/ AI プロバイダー、チャットランタイム、ストリーミング │ ├── op-ai-skills/ AI プロンプトスキルエンジン（フェーズ駆動プロンプト読込） │ ├── op-orchestrator/ 並行エージェントチームのオーケストレーション │ ├── op-codegen/ コードジェネレーター（React、HTML、Vue、Flutter、...） │ ├── op-figma/ Figma .fig ファイルパーサーとコンバーター │ ├── op-git/ Git 統合 — クローン、ブランチ、プッシュ/プル、マージ │ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n / │ op-config-store / op-process-io / op-acp / op-smoke / ... ├── packages/ Web SDK ワークスペース（Bun） │ ├── op-web-sdk/ 読み取り専用 `.op` Web ビューアー SDK（wasm バンドルをラップ） │ ├── op-web-sdk-react/ React 19 アダプター │ └── op-web-sdk-vue/ Vue 3 アダプター ├── vendor/ ベンダー化されたサブシステム（git サブモジュール） │ ├── jian/ GPU-Skia UI フレームワーク — ウィジェット/レンダー/イベント │ ├── casement/ winit フォーク │ └── agent/ 製品横断 Rust エージェントランタイム（agent-rs） └── .githooks/ プレコミットのバージョンドリフト検査 ``` ## キーボードショートカット | キー | 操作 | | キー | 操作 | | ----------- | -------------- | --- | ------------- | ------------------------------- | | `V` | 選択 | | `Cmd+S` | 保存 | | `R` | 矩形 | | `Cmd+Z` | 元に戻す | | `O` | 楕円 | | `Cmd+Shift+Z` | やり直す | | `L` | 直線 | | `Cmd+C/X/V/D` | コピー/カット/ペースト/複製 | | `T` | テキスト | | `Cmd+G` | グループ化 | | `F` | Frame | | `Cmd+Shift+G` | グループ解除 | | `P` | ペンツール | | `Cmd+Shift+P` | エクスポート (PNG/JPG/WEBP/PDF) | | `H` | ハンド（パン） | | `Cmd+Shift+C` | コードパネル | | `Del` | 削除 | | `Cmd+Shift+V` | 変数パネル | | `[ / ]` | 重ね順の変更 | | `Cmd+J` | AI チャット | | 矢印キー | 1px 微調整 | | `Cmd+,` | エージェント設定 | | `Cmd+Alt+U` | ブーリアン合体 | | `Cmd+Alt+S` | ブーリアン型抜き | | `Cmd+Alt+I` | ブーリアン交差 | | `Cmd+Shift+S` | 名前を付けて保存 | ## スクリプト ```bash # Product (Rust — run from the repo root) cargo build --workspace # Build all crates (add --release for prod) cargo test --workspace # Run all tests cargo check --workspace # Type check cargo clippy --workspace --all-targets -- -D warnings # Lint cargo fmt --all # Format bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host) cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop) cargo run -p op-cli -- # CLI (binary: op) # Web SDK / JS tooling (run from packages/) cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets # バージョン同期（リポジトリルートから実行） scripts/sync-version.sh # Sync all managed versions from root Cargo.toml tools/check-version-sync.sh # Verify all managed versions match root Cargo.toml ``` ## コントリビュート コントリビューションを歓迎します！アーキテクチャの詳細とコードスタイルについては [CLAUDE.md](./CLAUDE.md) をご覧ください。 1. フォークしてクローン 2. バージョンドリフト検査を有効化：`git config core.hooksPath .githooks` 3. ブランチを作成：`git checkout -b feat/my-feature` 4. チェックを実行：`cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings` 5. [Conventional Commits](https://www.conventionalcommits.org/) 形式でコミット：`feat(canvas): add rotation snapping` 6. `main` ブランチに PR を作成 ## ロードマップ - [x] CSS 同期付きデザイン変数とトークン - [x] コンポーネントシステム（インスタンスとオーバーライド） - [x] オーケストレーター付き AI デザイン生成 - [x] レイヤードデザインワークフロー付き MCP サーバー統合 - [x] マルチページサポート - [x] Figma `.fig` インポート - [x] ブーリアン演算（合体、型抜き、交差） - [x] マルチモデル能力プロファイル - [x] 再利用可能な Rust crate と Web SDK パッケージによる Cargo workspace - [x] デスクトップおよび Web 向け Rust エディター - [x] CLIツール（`op`）ターミナル制御 - [x] ビルトイン Rust Agent Runtime（マルチプロバイダー対応） - [x] i18n — 15言語対応 - [x] JavaScript、React、Vue 向けの wasm ベース Viewer SDK - [x] タグベースのマッチングと MCP ツールを備えた Style Guides - [x] 委任とキャンバスインジケーターを備えた Concurrent Agent Teams - [x] Git 統合（クローン、ブランチ、プッシュ/プル、フォルダーモード三方向マージ） - [x] キャンバスエクスポート（SVG / PNG / JPEG / WEBP / PDF） - [ ] 共同編集 - [ ] プラグインシステム ## コントリビューター ## スポンサー OpenPencil は無料でオープンソースです。開発は、これを便利だと感じてくださる皆さんの支援で成り立っています — キャンバスを開いたままにしてくれてありがとう。 **[MrQyun](https://github.com/mrqyun)** さん、ありがとうございます — あなたの名前もここに並べませんか？**[スポンサーになる →](https://github.com/sponsors/ZSeven-W)** ## コミュニティ Discord に参加する — 質問、デザインの共有、機能のリクエストはこちら。 **認定コミュニティ：[LINUX DO](https://linux.do/)** ## Star History ## セキュリティ評価 [](https://mseep.ai/app/zseven-w-openpencil) ## ライセンス [MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W