mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-05-31 19:04:29 +07:00

* fix(ai): add icon name aliases and fix multi-path SVG concatenation

Add 55+ common icon name aliases (burger→hamburger, sushi→fish, etc.)
to both client icon-resolver and server icon API for robust AI-generated
icon resolution. Register Lucide's own aliases for broader coverage.

Fix SVG path concatenation bug where joining multiple <path> d-values
caused incorrect rendering — a standalone <path> treats initial lowercase
"m" as absolute, but after concatenation it becomes relative to the
previous sub-path endpoint. Now ensures each sub-path starts with
absolute "M".

Add tryAsyncIconFontResolution for icon_font nodes that miss local
lookup — fetches from server API, caches result, and triggers canvas
re-render.

* fix(canvas): preserve badge/overlay absolute positioning in auto-layout

Add isBadgeOverlayNode() detector for badge, indicator, notification-dot,
and overlay nodes. These nodes now retain their x/y coordinates instead
of being stripped by layout sanitization.

Update computeLayoutPositions to exclude badge nodes from the layout flow
— they keep absolute positioning and render on top (prepended for correct
z-order in reverse iteration).

* fix(ai): prevent duplicate canvas objects and fix emoji-to-icon pipeline

Streaming path: add ensureUniqueNodeIds before inserting nodes to prevent
ID collisions across multiple AI generations. Track newly inserted IDs
so subsequent streaming nodes don't collide either.

Canvas sync: deduplicate Fabric objects sharing the same penNodeId —
keep only the one tracked in objMap, remove stale duplicates.

Badge nodes: use shared isBadgeOverlayNode() for z-order insertion
and skip x/y stripping in layout parents.

Fix emoji-to-icon pipeline: re-run applyIconPathResolution after
applyNoEmojiIconHeuristic converts emoji text nodes to path nodes,
so the icon resolver can match by name (e.g. "Pizza Emoji Path" → pizza).

* fix(canvas): add async icon resolution fallback for icon_font nodes

When lookupIconByName fails locally, queue tryAsyncIconFontResolution
to fetch from server API. Cache result in ICON_PATH_MAP and trigger
canvas re-render via store update. Store iconFontName and iconStyle
on Fabric object for sync tracking.

* fix(ai): strengthen emoji ban in prompts and improve orchestrator defaults

Update all AI prompts to explicitly ban emoji characters with concrete
examples and redirect to icon_font nodes instead of the previously
incorrect "path nodes" guidance.

Add z-order rule to orchestrator prompt: overlay elements must come
before content they overlap.

Add padding support to OrchestratorPlan rootFrame type. Default mobile
root frame gap to 16 for consistent spacing.

* feat(electron): add publisher name to Windows build configuration

Updated the `electron-builder.yml` to include a publisher name for Windows builds, enhancing the identification of the application during installation. Additionally, revised the README files across multiple languages to reflect the new project description and features, emphasizing OpenPencil as the world's first AI-native open-source vector design tool with concurrent agent teams and design-as-code capabilities.

---------

Co-authored-by: Fini <fini.yang@gmail.com>

2026-03-11 21:18:49 +08:00

13 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

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

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 アプリ + Electron による macOS・Windows・Linux ネイティブデスクトップ。GitHub Releases からの自動アップデート。.op ファイル関連付け — ダブルクリックで開く。

クイックスタート

# 依存関係をインストール
bun install

# http://localhost:3000 で開発サーバーを起動
bun --bun run dev

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

bun run electron:dev

前提条件： Bun >= 1.0 および Node.js >= 18

AI ネイティブデザイン

プロンプトから UI へ

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

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

エージェント	設定方法
Claude Code	設定不要 — ローカル OAuth で Claude Agent SDK を使用
Codex CLI	エージェント設定で接続（`Cmd+,`）
OpenCode	エージェント設定で接続（`Cmd+,`）
GitHub Copilot	`copilot login` 後、エージェント設定で接続（`Cmd+,`）

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

MCP サーバー

内蔵 MCP サーバー — Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI にワンクリックでインストール
ターミナルからのデザイン自動化：MCP 対応エージェントを通じて .op ファイルの読み取り、作成、編集が可能
レイヤードデザインワークフロー — design_skeleton → design_content → design_refine による高忠実度マルチセクションデザイン
セグメント化プロンプト取得 — 必要なデザイン知識のみをロード（schema、layout、roles、icons、planning など）
マルチページサポート — MCP ツールを通じてページの作成、名前変更、並べ替え、複製が可能

コード生成

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 対応
.op ファイル関連付け — ダブルクリックで開く、シングルインスタンスロック
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 · Copilot SDK
ランタイム	Bun · Vite 7
ファイル形式	`.op` — JSON ベース、人間が読みやすく、Git フレンドリー

プロジェクト構成

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、Copilot クライアントラッパー
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`	ブーリアン交差

スクリプト

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

フォークしてクローン
ブランチを作成：git checkout -b feat/my-feature
チェックを実行：npx tsc --noEmit && bun --bun run test
Conventional Commits 形式でコミット：feat(canvas): add rotation snapping
main ブランチに PR を作成

ロードマップ

CSS 同期付きデザイン変数とトークン
コンポーネントシステム（インスタンスとオーバーライド）
オーケストレーター付き AI デザイン生成
レイヤードデザインワークフロー付き MCP サーバー統合
マルチページサポート
Figma .fig インポート
ブーリアン演算（合体、型抜き、交差）
マルチモデル能力プロファイル
共同編集
プラグインシステム

コントリビューター

コミュニティ

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

13 KiB

Raw Blame History

OpenPencil

Why OpenPencil

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

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

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

🔌 MCP サーバー

📦 Design-as-Code

🖥️ どこでも動作

クイックスタート

AI ネイティブデザイン

機能

技術スタック

プロジェクト構成

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

スクリプト

コントリビュート

ロードマップ

コントリビューター

コミュニティ

Star History

ライセンス

13 KiB Raw Blame History Unescape Escape

OpenPencil

Why OpenPencil

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

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

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

🔌 MCP サーバー

📦 Design-as-Code

🖥️ どこでも動作

クイックスタート

AI ネイティブデザイン

機能

技術スタック

プロジェクト構成

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

スクリプト

コントリビュート

ロードマップ

コントリビューター

コミュニティ

Star History

ライセンス

13 KiB

Raw Blame History