openpencil/README.ja.md
2026-07-15 21:17:21 +08:00

32 KiB
Raw Blame History

OpenPencil

OpenPencil

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

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

Stars License CI Discord


OpenPencil — click to watch demo

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


注: 同名の別のオープンソースプロジェクト — OpenPencil があります。そちらは Figma 互換のビジュアルデザインとリアルタイムコラボレーションに特化しています。本プロジェクトは AI ネイティブのデザインからコードへのワークフローに特化しています。

Why OpenPencil

🎨 プロンプト → キャンバス

自然言語で任意の UI を記述。ストリーミングアニメーションでリアルタイムに無限キャンバス上に表示。要素を選択してチャットすることで既存のデザインを修正。

🤖 並行エージェントチーム

オーケストレーターが複雑なページを空間的なサブタスクに分解。複数の AI エージェントがヒーロー、機能紹介、フッターなど異なるセクションを同時に処理し、すべてが並列でストリーミング。

🧠 マルチモデルインテリジェンス

各モデルの能力に自動適応。Claude にはシンキング付きフルプロンプト、GPT-4o/Gemini ではシンキングを無効化、小規模モデルMiniMax、Qwen、Llamaには信頼性の高い出力のために簡略化プロンプトを使用。

🔌 MCP サーバー

Claude Code、Codex、Gemini、OpenCode、Kiro、Copilot CLI にワンクリックでインストール。ターミナルからデザイン — MCP 対応エージェントを通じて .op ファイルの読み取り、作成、編集が可能。

📦 Design-as-Code

.op ファイルは JSON — 人間が読みやすく、Git フレンドリーで差分比較可能。デザイン変数は CSS カスタムプロパティを生成。React + Tailwind または HTML + CSS へのコードエクスポート。

🖥️ どこでも動作

Web アプリ + macOS・Windows・Linux ネイティブデスクトップ — 単一の Rust コア、単一の自己完結型バイナリ、ブラウザエンジン不要。.op ファイル関連付け — ダブルクリックで開く。

⌨️ CLI — op

ターミナルからデザインツールを操作。op designop insert — バッチデザインDSL、ード操作。ファイルやstdinからのパイプ入力に対応。デスクトップアプリまたはWebサーバーと連携。

🎯 マルチプラットフォームコードエクスポート

1つの.opファイルからReact + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Nativeへエクスポート。デザイン変数はCSSカスタムプロパティに変換。

クイックスタート

# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh

またはデスクトップアプリとして実行:

cargo run -p op-host-desktop

前提条件: 製品のビルドには Ruststableが必要です。Bun >= 1.0 および Node.js >= 18 は packages/ 配下の web SDK にのみ必要です。

Docker

タグ付きの Rust リリースでは、単一の web-host イメージを公開します。AI CLI を同梱していた引退済みの TypeScript イメージはもう公開されません。

イメージ 含まれるもの
ghcr.io/zseven-w/openpencil-web:vX.Y.Z Rust web host、wasm bundle、CanvasKit assets

Web UI は built-in agent profiles のみを公開します。Claude/Codex/OpenCode/Copilot/Gemini CLI ツールは Docker イメージに同梱されません。

実行:

VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"

その後 http://localhost:3100/ を開いてください。

ローカルビルド:

docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust

AI ネイティブデザイン

プロンプトから UI へ

  • テキストからデザインへ — ページを説明すると、ストリーミングアニメーションでリアルタイムにキャンバス上に生成
  • オーケストレーター — 複雑なページを空間サブタスクに分解し、並列生成をサポート
  • デザイン修正 — 要素を選択し、自然言語で変更内容を記述
  • ビジョン入力 — スクリーンショットやモックアップを参照として添付してデザイン

マルチエージェントサポート

エージェント 設定方法
ビルトイン9+ プロバイダー) プロバイダープリセットから選択し、リージョンを切り替え — Anthropic、OpenAI、Google、DeepSeek など
Claude Code 設定不要 — ローカル OAuth で Claude Agent SDK を使用
Codex CLI エージェント設定で接続(Cmd+,
OpenCode エージェント設定で接続(Cmd+,
GitHub Copilot copilot login 後、エージェント設定で接続(Cmd+,
Gemini CLI エージェント設定で接続(Cmd+,

モデル能力プロファイル — モデルの階層に応じてプロンプト、シンキングモード、タイムアウトを自動適応。フル階層モデルClaudeには完全なプロンプト、標準階層GPT-4o、Gemini、DeepSeekではシンキングを無効化、ベーシック階層MiniMax、Qwen、Llama、Mistralには最大限の信頼性のために簡略化されたネスト JSON プロンプトを使用。

i18n — 15言語での完全なインターフェースローカライゼーションEnglish、简体中文、繁體中文、日本語、한국어、Français、Español、Deutsch、Português、Русский、हिन्दी、Türkçe、ไทย、Tiếng Việt、Bahasa Indonesia。

MCP サーバー

  • 内蔵 MCP サーバー(op-mcp crate — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI にワンクリックでインストール
  • Node.js は不要 — デスクトップバイナリ経由の stdio トランスポート(--mcp <path>)に加え、実行中のアプリからライブ HTTP エンドポイント(127.0.0.1:<port>/mcp)を提供
  • ターミナルからのデザイン自動化MCP 対応エージェントを通じて .op ファイルの読み取り、作成、編集が可能
  • レイヤードデザインワークフローdesign_skeletondesign_contentdesign_refine による高忠実度マルチセクションデザイン
  • セグメント化プロンプト取得 — 必要なデザイン知識のみをロードschema、layout、roles、icons、planning など)
  • マルチページサポート — MCP ツールを通じてページの作成、名前変更、並べ替え、複製が可能

コード生成

  • React + Tailwind CSS、HTML + CSS、CSS Variables
  • Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native

CLI — op

グローバルインストールしてターミナルからデザインツールを操作:

brew install zseven-w/openpencil/op
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 コマンドリファレンス を参照してください。

LLM スキル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_skeletondesign_contentdesign_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、PDFCmd+Shift+P
  • コードエクスポート — React + Tailwind、HTML + CSS、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose、React Native
  • インクリメンタル MCP コード生成パイプライン — codegen_plancodegen_submit_chunkcodegen_assemblecodegen_clean

Figma インポート

  • レイアウト、フィル、ストローク、エフェクト、テキスト、画像、ベクターを保持して .fig ファイルをインポート

デスクトップアプリ

  • macOS・Windows・Linux ネイティブ対応 — 単一の自己完結型バイナリwinit + GPU Skia、Electron 不要)
  • .op ファイル関連付け — ダブルクリックで開く、シングルインスタンスロック
  • GitHub Releases に対するバックグラウンド更新チェック
  • 名前を付けて保存、最近使った項目を開く、および終了時の未保存変更ダイアログを備えたネイティブアプリケーションメニュー
  • 最近使ったファイルの永続化

技術スタック

コア Rust ワークスペース(crates/ — エディター状態、ウィジェット、ホスト、MCP、AI、codegen
レンダリング あらゆる場所で GPU Skia — ネイティブは skia-safeGL、ブラウザは CanvasKitWASM/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 · rustfmtRust · oxlint · oxfmtWeb SDK
ファイル形式 .op — JSON ベース、人間が読みやすく、Git フレンドリー

エコシステム

OpenPencil は ZSeven-W による純 Rust・AI ネイティブなツール群の一員です。これらは互いに組み合わさります:jian が OpenPencil をレンダリングし、agent-rs がそのエージェントを実行し、noema が記憶し、zode がターミナルからデザインします。

プロジェクト 内容
Zode ターミナル向けのオープンソース AI ネイティブコーディングアシスタント — コードを読み、コマンドを実行し、ファイルを検索し、git を管理する高速な Rust TUIratatui。MCP 経由で OpenPencil を駆動します。
agent-rs LLM エージェントを届けるための純 Rust 非同期ランタイム — マルチプロバイダー、エンドツーエンドでツール対応、構造化された権限、本物の MCP、unsafe ゼロ。OpenPencil のビルトインエージェントランタイム(vendor/agent)と Zode を支えます。
jian 純 Rust の GPU-Skia UI フレームワーク — ウィジェット、レイアウト、イベント、ホットリロードを一つのスタックに。宣言的な .op ドキュメントを、JS ランタイムも DOM も Electron もない、ネイティブで AI 制御可能なアプリへと変えます。OpenPencil の UI フレームワーク(vendor/jian)。
noema コーディングエージェント向けのローカルファースト・非ベクター記憶システム。検査可能なファイルとしての永続的な記憶、新規エントリのレビューキュー、そして語彙的(埋め込み不要)な想起 — Zode、Codex、Claude Code、MCP ランタイム間で機能します。

なぜ Rust か

OpenPencil は Rust で一から書き直されました (#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 製品は現在活発に開発中です(下記のロードマップを参照)。

プロジェクト構成

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 ビューアー SDKwasm バンドルをラップ)
│   ├── 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 名前を付けて保存

スクリプト

# 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 -- <args>        # 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 をご覧ください。

  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 形式でコミット:feat(canvas): add rotation snapping
  6. main ブランチに PR を作成

ロードマップ

  • CSS 同期付きデザイン変数とトークン
  • コンポーネントシステム(インスタンスとオーバーライド)
  • オーケストレーター付き AI デザイン生成
  • レイヤードデザインワークフロー付き MCP サーバー統合
  • マルチページサポート
  • Figma .fig インポート
  • ブーリアン演算(合体、型抜き、交差)
  • マルチモデル能力プロファイル
  • 再利用可能な Rust crate と Web SDK パッケージによる Cargo workspace
  • デスクトップおよび Web 向け Rust エディター
  • CLIツールop)ターミナル制御
  • ビルトイン Rust Agent Runtimeマルチプロバイダー対応
  • i18n — 15言語対応
  • JavaScript、React、Vue 向けの wasm ベース Viewer SDK
  • タグベースのマッチングと MCP ツールを備えた Style Guides
  • 委任とキャンバスインジケーターを備えた Concurrent Agent Teams
  • Git 統合(クローン、ブランチ、プッシュ/プル、フォルダーモード三方向マージ)
  • キャンバスエクスポートSVG / PNG / JPEG / WEBP / PDF
  • 共同編集
  • プラグインシステム

コントリビューター

Contributors

スポンサー

OpenPencil は無料でオープンソースです。開発は、これを便利だと感じてくださる皆さんの支援で成り立っています — キャンバスを開いたままにしてくれてありがとう。

MrQyun

MrQyun さん、ありがとうございます — あなたの名前もここに並べませんか?スポンサーになる →

コミュニティ

Discord Discord に参加する — 質問、デザインの共有、機能のリクエストはこちら。

Star History

Star History Chart

セキュリティ評価

MseeP.ai Security Assessment Badge

ライセンス

MIT — Copyright (c) 2026 ZSeven-W