OpenPencil

AI ネイティブのオープンソースデザインツール。デザイン・アズ・コード。
プロンプトからキャンバス UI へ。マルチエージェントオーケストレーション。内蔵 MCP サーバー。コード生成。

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

クイックスタート · AI · 機能 · Discord · コントリビュート

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

## クイックスタート ```bash # 依存関係をインストール bun install # http://localhost:3000 で開発サーバーを起動 bun --bun run dev ``` またはデスクトップアプリとして実行： ```bash bun run electron:dev ``` > **前提条件：** [Bun](https://bun.sh/) >= 1.0 および [Node.js](https://nodejs.org/) >= 18 ## AI ネイティブデザイン OpenPencil はプラグインとしてではなく、コアワークフローとして AI を中心に構築されています。 **プロンプトから UI へ** - **テキストからデザインへ** — ページを説明すると、ストリーミングアニメーションでリアルタイムにキャンバス上に生成 - **オーケストレーター** — 複雑なページを空間サブタスクに分解し、並列生成をサポート - **デザイン修正** — 要素を選択し、自然言語で変更内容を記述 - **ビジョン入力** — スクリーンショットやモックアップを参照として添付してデザイン **マルチエージェントサポート** | エージェント | 設定方法 | | --- | --- | | **Claude Code** | 設定不要 — ローカル OAuth で Claude Agent SDK を使用 | | **Codex CLI** | エージェント設定で接続（`Cmd+,`） | | **OpenCode** | エージェント設定で接続（`Cmd+,`） | **MCP サーバー** - 内蔵 MCP サーバー — Claude Code / Codex / Gemini / OpenCode / Kiro CLI にワンクリックでインストール - ターミナルからのデザイン自動化：MCP 対応エージェントを通じて `.op` ファイルの読み取り、作成、編集が可能 **コード生成** - React + Tailwind CSS - HTML + CSS - デザイントークンから CSS Variables を生成 ## 機能 **キャンバスと描画** - パン、ズーム、スマートアライメントガイド、スナッピング対応の無限キャンバス - 矩形、楕円、直線、多角形、ペン（ベジェ）、Frame、テキスト - ブーリアン演算 — 合体、型抜き、交差（コンテキストツールバー付き） - アイコンピッカー（Iconify）と画像インポート（PNG/JPEG/SVG/WebP/GIF） - オートレイアウト — 垂直/水平方向、ギャップ・パディング・justify・align 対応 - タブナビゲーション付きマルチページドキュメント **デザインシステム** - デザイン変数 — カラー・数値・文字列トークン、`$variable` 参照付き - マルチテーマサポート — 複数のテーマ軸、各軸に複数バリアント（ライト/ダーク、コンパクト/コンフォータブル） - コンポーネントシステム — インスタンスとオーバーライドを持つ再利用可能なコンポーネント - CSS 同期 — カスタムプロパティの自動生成、コード出力に `var(--name)` を使用 **Figma インポート** - レイアウト、フィル、ストローク、エフェクト、テキスト、画像、ベクターを保持して `.fig` ファイルをインポート **デスクトップアプリ** - Electron によるネイティブ macOS・Windows・Linux 対応 - GitHub Releases からの自動アップデート - ネイティブアプリケーションメニューとファイルダイアログ ## 技術スタック | | | | --- | --- | | **フロントエンド** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui | | **キャンバス** | Fabric.js v7 | | **状態管理** | Zustand v5 | | **サーバー** | Nitro | | **デスクトップ** | Electron 35 | | **AI** | Anthropic SDK · Claude Agent SDK · OpenCode SDK | | **ランタイム** | Bun · Vite 7 | | **ファイル形式** | `.op` — JSON ベース、人間が読みやすく、Git フレンドリー | ## プロジェクト構成 ```text src/ canvas/ Fabric.js エンジン — 描画、同期、レイアウト、ガイド、ペンツール components/ React UI — エディター、パネル、共有ダイアログ、アイコン services/ai/ AI チャット、オーケストレーター、デザイン生成、ストリーミング services/figma/ Figma .fig バイナリインポートパイプライン services/codegen React+Tailwind および HTML+CSS コードジェネレーター stores/ Zustand — キャンバス、ドキュメント、ページ、履歴、AI、設定 variables/ デザイントークンの解決とリファレンス管理 mcp/ 外部 CLI 統合用 MCP サーバーツール uikit/ 再利用可能なコンポーネントキットシステム server/ api/ai/ Nitro API — ストリーミングチャット、生成、バリデーション utils/ Claude CLI、OpenCode、Codex クライアントラッパー electron/ main.ts ウィンドウ、Nitro フォーク、ネイティブメニュー、自動アップデーター preload.ts IPC ブリッジ ``` ## キーボードショートカット | キー | 操作 | | キー | 操作 | | --- | --- | --- | --- | --- | | `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+E` | エクスポート | | `H` | ハンド（パン） | | `Cmd+Shift+C` | コードパネル | | `Del` | 削除 | | `Cmd+Shift+V` | 変数パネル | | `[ / ]` | 重ね順の変更 | | `Cmd+J` | AI チャット | | 矢印キー | 1px 微調整 | | `Cmd+,` | エージェント設定 | | `Cmd+Alt+U` | ブーリアン合体 | | `Cmd+Alt+S` | ブーリアン型抜き | | `Cmd+Alt+I` | ブーリアン交差 | | | | ## スクリプト ```bash bun --bun run dev # 開発サーバー（ポート 3000） bun --bun run build # 本番ビルド bun --bun run test # テストの実行（Vitest） npx tsc --noEmit # 型チェック bun run electron:dev # Electron 開発モード bun run electron:build # Electron パッケージング ``` ## コントリビュートコントリビューションを歓迎します！アーキテクチャの詳細とコードスタイルについては [CLAUDE.md](./CLAUDE.md) をご覧ください。 1. フォークしてクローン 2. ブランチを作成：`git checkout -b feat/my-feature` 3. チェックを実行：`npx tsc --noEmit && bun --bun run test` 4. [Conventional Commits](https://www.conventionalcommits.org/) 形式でコミット：`feat(canvas): add rotation snapping` 5. `main` ブランチに PR を作成 ## ロードマップ - [x] CSS 同期付きデザイン変数とトークン - [x] コンポーネントシステム（インスタンスとオーバーライド） - [x] オーケストレーター付き AI デザイン生成 - [x] MCP サーバー統合 - [x] マルチページサポート - [x] Figma `.fig` インポート - [x] ブール演算（結合、減算、交差） - [ ] 共同編集 - [ ] プラグインシステム ## コントリビューター

## コミュニティ