Kayshen-X bb0e85761b docs(readme): sync cli and skill guidance

2026-07-12 19:53:05 +08:00

32 KiB

Raw Blame History

OpenPencil

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

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

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

注：同名の別のオープンソースプロジェクト — 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 design、op 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

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

Docker

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

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

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

実行：

docker run -d -p 3100:3100 ghcr.io/zseven-w/openpencil-web:v0.8.0

その後 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_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`

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

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

プロジェクト	内容
Zode	ターミナル向けのオープンソース AI ネイティブコーディングアシスタント — コードを読み、コマンドを実行し、ファイルを検索し、git を管理する高速な Rust TUI（`ratatui`）。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 ワークスペースです。v0.8.0 の 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 ビューアー 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`	名前を付けて保存

スクリプト

# 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
cd packages && bun run bump <version>             # Sync SDK package.json versions

コントリビュート

コントリビューションを歓迎します！アーキテクチャの詳細とコードスタイルについては CLAUDE.md をご覧ください。

フォークしてクローン
バージョン同期を設定：git config core.hooksPath .githooks
ブランチを作成：git checkout -b feat/my-feature
チェックを実行：cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings
Conventional Commits 形式でコミット：feat(canvas): add rotation snapping
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）
共同編集
プラグインシステム

コントリビューター

スポンサー

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

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

コミュニティ

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

32 KiB

Raw Blame History

OpenPencil

Why OpenPencil

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

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

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

🔌 MCP サーバー

📦 Design-as-Code

🖥️ どこでも動作

⌨️ CLI — `op`

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

クイックスタート

Docker

AI ネイティブデザイン

CLI — `op`

機能

技術スタック

エコシステム

なぜ Rust か

プロジェクト構成

キーボードショートカット

スクリプト

コントリビュート

ロードマップ

コントリビューター

スポンサー

コミュニティ

Star History

セキュリティ評価

ライセンス

32 KiB Raw Blame History Unescape Escape

OpenPencil

Why OpenPencil

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

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

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

🔌 MCP サーバー

📦 Design-as-Code

🖥️ どこでも動作

⌨️ CLI — op

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

クイックスタート

Docker

AI ネイティブデザイン

CLI — op

機能

技術スタック

エコシステム

なぜ Rust か

プロジェクト構成

キーボードショートカット

スクリプト

コントリビュート

ロードマップ

コントリビューター

スポンサー

コミュニティ

Star History

セキュリティ評価

ライセンス

32 KiB

Raw Blame History

⌨️ CLI — `op`

CLI — `op`