mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14: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

11 KiB

Raw Blame History

OpenPencil

全球首個開源 AI 原生向量設計工具。
_{並行智能體團隊 • 設計即程式碼 • 內建 MCP 伺服器 • 多模型智慧}

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

_{點擊圖片觀看示範影片}

為什麼選擇 OpenPencil

🎨 提示詞 → 畫布

用自然語言描述任何 UI。即時以串流動畫在無限畫布上生成。選取元素並透過對話修改現有設計。

🤖 並行智能體團隊

編排器將複雜頁面分解為空間子任務。多個 AI 智能體同時處理不同區塊 — 主視覺、功能區塊、頁尾 — 全部並行串流生成。

🧠 多模型智慧

自動適配每個模型的能力。Claude 獲得完整提示詞與思考模式；GPT-4o/Gemini 停用思考模式；較小模型（MiniMax、Qwen、Llama）獲得精簡提示詞，確保輸出可靠。

🔌 MCP 伺服器

一鍵安裝至 Claude Code、Codex、Gemini、OpenCode、Kiro 或 Copilot CLI。從終端機進行設計 — 透過任意 MCP 相容的智能體讀取、建立和修改 .op 檔案。

📦 設計即程式碼

.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	無需設定 — 使用 Claude Agent SDK 本地 OAuth
Codex CLI	在 Agent 設定中連接（`Cmd+,`）
OpenCode	在 Agent 設定中連接（`Cmd+,`）
GitHub Copilot	執行 `copilot login` 後在 Agent 設定中連接（`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）
自動版面配置 — 垂直/水平方向，支援間距、內邊距、主軸對齊、交叉軸對齊
多頁面文件，支援分頁導覽

設計系統

設計變數 — 顏色、數字、字串令牌，支援 $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 了解架構細節和程式碼風格。

Fork 並複製存放庫
建立分支：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 — 提問、分享設計、提出功能建議。

11 KiB

Raw Blame History

OpenPencil

為什麼選擇 OpenPencil

🎨 提示詞 → 畫布

🤖 並行智能體團隊

🧠 多模型智慧

🔌 MCP 伺服器

📦 設計即程式碼

🖥️ 隨處執行

快速開始

AI 原生設計

功能特色

技術堆疊

專案結構

鍵盤快捷鍵

指令碼命令

參與貢獻

路線圖

貢獻者

社群

Star History

授權條款

11 KiB Raw Blame History Unescape Escape

OpenPencil

為什麼選擇 OpenPencil

🎨 提示詞 → 畫布

🤖 並行智能體團隊

🧠 多模型智慧

🔌 MCP 伺服器

📦 設計即程式碼

🖥️ 隨處執行

快速開始

AI 原生設計

功能特色

技術堆疊

專案結構

鍵盤快捷鍵

指令碼命令

參與貢獻

路線圖

貢獻者

社群

Star History

授權條款

11 KiB

Raw Blame History