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

12 KiB

Raw Blame History

OpenPencil

Công cụ thiết kế vector mã nguồn mở thuần AI đầu tiên trên thế giới.
_{Đội Tác nhân Đồng thời • Design-as-Code • Máy chủ MCP Tích hợp • Trí tuệ Đa mô hình}

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

_{Nhấp vào hình ảnh để xem video demo}

Tại sao chọn OpenPencil

🎨 Prompt → Canvas

Mô tả bất kỳ giao diện nào bằng ngôn ngữ tự nhiên. Xem nó xuất hiện trên canvas vô hạn theo thời gian thực với hiệu ứng streaming. Chỉnh sửa thiết kế hiện có bằng cách chọn các phần tử và trò chuyện.

🤖 Đội Tác nhân Đồng thời

Bộ điều phối phân rã các trang phức tạp thành các tác vụ con theo không gian. Nhiều tác nhân AI làm việc trên các phần khác nhau đồng thời — hero, features, footer — tất cả streaming song song.

🧠 Trí tuệ Đa mô hình

Tự động thích ứng với khả năng của từng mô hình. Claude nhận prompt đầy đủ với thinking; GPT-4o/Gemini tắt thinking; các mô hình nhỏ hơn (MiniMax, Qwen, Llama) nhận prompt đơn giản hóa cho đầu ra đáng tin cậy.

🔌 Máy chủ MCP

Cài đặt một cú nhấp vào Claude Code, Codex, Gemini, OpenCode, Kiro hoặc Copilot CLI. Thiết kế từ terminal — đọc, tạo và chỉnh sửa tệp .op thông qua bất kỳ tác nhân tương thích MCP nào.

📦 Design-as-Code

Tệp .op là JSON — dễ đọc, thân thiện Git, dễ so sánh khác biệt. Biến thiết kế tạo ra thuộc tính tùy chỉnh CSS. Xuất mã sang React + Tailwind hoặc HTML + CSS.

🖥️ Chạy Mọi nơi

Ứng dụng web + desktop gốc trên macOS, Windows và Linux qua Electron. Tự động cập nhật từ GitHub Releases. Liên kết tệp .op — nhấp đúp để mở.

Bắt đầu nhanh

# Cài đặt các phụ thuộc
bun install

# Khởi động máy chủ phát triển tại http://localhost:3000
bun --bun run dev

Hoặc chạy dưới dạng ứng dụng desktop:

bun run electron:dev

Yêu cầu: Bun >= 1.0 và Node.js >= 18

Thiết kế thuần AI

Từ Prompt đến Giao diện

Văn bản thành thiết kế — mô tả một trang, nhận kết quả được tạo ra trên canvas theo thời gian thực với hiệu ứng streaming
Orchestrator — phân rã các trang phức tạp thành các tác vụ con không gian để tạo song song
Chỉnh sửa thiết kế — chọn các phần tử, sau đó mô tả thay đổi bằng ngôn ngữ tự nhiên
Đầu vào hình ảnh — đính kèm ảnh chụp màn hình hoặc bản phác thảo để thiết kế dựa trên tham chiếu

Hỗ trợ Đa tác nhân

Tác nhân	Cài đặt
Claude Code	Không cần cấu hình — sử dụng Claude Agent SDK với OAuth cục bộ
Codex CLI	Kết nối trong Cài đặt tác nhân (`Cmd+,`)
OpenCode	Kết nối trong Cài đặt tác nhân (`Cmd+,`)
GitHub Copilot	`copilot login` rồi kết nối trong Cài đặt tác nhân (`Cmd+,`)

Hồ sơ Năng lực Mô hình — tự động thích ứng prompt, chế độ thinking và thời gian chờ theo từng cấp mô hình. Mô hình cấp đầy đủ (Claude) nhận prompt hoàn chỉnh; cấp tiêu chuẩn (GPT-4o, Gemini, DeepSeek) tắt thinking; cấp cơ bản (MiniMax, Qwen, Llama, Mistral) nhận prompt JSON lồng nhau đơn giản hóa để đảm bảo độ tin cậy tối đa.

Máy chủ MCP

Máy chủ MCP tích hợp sẵn — cài đặt một cú nhấp vào Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
Tự động hóa thiết kế từ terminal: đọc, tạo và chỉnh sửa các tệp .op qua bất kỳ tác nhân tương thích MCP nào
Quy trình thiết kế phân lớp — design_skeleton → design_content → design_refine cho thiết kế đa phần có độ trung thực cao hơn
Truy xuất prompt phân đoạn — chỉ tải kiến thức thiết kế cần thiết (schema, layout, roles, icons, planning, v.v.)
Hỗ trợ nhiều trang — tạo, đổi tên, sắp xếp lại và nhân bản trang qua các công cụ MCP

Tạo mã nguồn

React + Tailwind CSS
HTML + CSS
CSS Variables từ các token thiết kế

Tính năng

Canvas và Vẽ

Canvas vô hạn với pan, zoom, hướng dẫn căn chỉnh thông minh và snapping
Hình chữ nhật, Hình ellipse, Đường thẳng, Đa giác, Bút (Bezier), Frame, Văn bản
Phép toán Boolean — hợp nhất, trừ, giao nhau với thanh công cụ ngữ cảnh
Trình chọn icon (Iconify) và nhập hình ảnh (PNG/JPEG/SVG/WebP/GIF)
Auto-layout — dọc/ngang với gap, padding, justify, align
Tài liệu nhiều trang với điều hướng bằng tab

Hệ thống Thiết kế

Biến thiết kế — token màu sắc, số, chuỗi với tham chiếu $variable
Hỗ trợ đa chủ đề — nhiều trục, mỗi trục có các biến thể (Sáng/Tối, Thu gọn/Thoải mái)
Hệ thống component — các component có thể tái sử dụng với instances và overrides
Đồng bộ CSS — thuộc tính tùy chỉnh tự động tạo, var(--name) trong đầu ra mã

Nhập từ Figma

Nhập tệp .fig với layout, fills, strokes, effects, văn bản, hình ảnh và vector được bảo toàn

Ứng dụng Desktop

macOS, Windows và Linux gốc qua Electron
Liên kết tệp .op — nhấp đúp để mở, khóa phiên bản đơn
Tự động cập nhật từ GitHub Releases
Menu ứng dụng gốc và hộp thoại tệp

Công nghệ


Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui
Canvas	Fabric.js v7
Trạng thái	Zustand v5
Máy chủ	Nitro
Desktop	Electron 35
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Runtime	Bun · Vite 7
Định dạng tệp	`.op` — dựa trên JSON, dễ đọc, thân thiện với Git

Cấu trúc dự án

src/
  canvas/          Fabric.js engine — vẽ, đồng bộ, layout, hướng dẫn, công cụ bút
  components/      React UI — editor, panels, hộp thoại dùng chung, icons
  services/ai/     AI chat, orchestrator, tạo thiết kế, streaming
  services/figma/  Pipeline nhập binary Figma .fig
  services/codegen Bộ tạo mã React+Tailwind và HTML+CSS
  stores/          Zustand — canvas, document, pages, history, AI, settings
  variables/       Giải quyết token thiết kế và quản lý tham chiếu
  mcp/             Công cụ máy chủ MCP để tích hợp CLI bên ngoài
  uikit/           Hệ thống kit component có thể tái sử dụng
server/
  api/ai/          Nitro API — streaming chat, generation, validation
  utils/           Claude CLI, OpenCode, Codex, Copilot client wrappers
electron/
  main.ts          Cửa sổ, Nitro fork, menu gốc, auto-updater
  preload.ts       IPC bridge

Phím tắt

Phím	Hành động	Phím	Hành động
`V`	Chọn	`Cmd+S`	Lưu
`R`	Hình chữ nhật	`Cmd+Z`	Hoàn tác
`O`	Hình ellipse	`Cmd+Shift+Z`	Làm lại
`L`	Đường thẳng	`Cmd+C/X/V/D`	Sao chép/Cắt/Dán/Nhân bản
`T`	Văn bản	`Cmd+G`	Nhóm
`F`	Frame	`Cmd+Shift+G`	Bỏ nhóm
`P`	Công cụ bút	`Cmd+Shift+E`	Xuất
`H`	Tay (pan)	`Cmd+Shift+C`	Bảng mã
`Del`	Xóa	`Cmd+Shift+V`	Bảng biến
`[ / ]`	Sắp xếp lại	`Cmd+J`	AI chat
Mũi tên	Dịch chuyển 1px	`Cmd+,`	Cài đặt tác nhân
`Cmd+Alt+U`	Hợp nhất Boolean	`Cmd+Alt+S`	Trừ Boolean
`Cmd+Alt+I`	Giao nhau Boolean

Scripts

bun --bun run dev          # Máy chủ phát triển (cổng 3000)
bun --bun run build        # Build production
bun --bun run test         # Chạy kiểm thử (Vitest)
npx tsc --noEmit           # Kiểm tra kiểu
bun run electron:dev       # Electron dev
bun run electron:build     # Đóng gói Electron

Đóng góp

Chào mừng đóng góp! Xem CLAUDE.md để biết chi tiết về kiến trúc và phong cách mã.

Fork và clone
Tạo branch: git checkout -b feat/my-feature
Chạy kiểm tra: npx tsc --noEmit && bun --bun run test
Commit theo Conventional Commits: feat(canvas): add rotation snapping
Mở PR vào nhánh main

Lộ trình

Biến thiết kế & token với đồng bộ CSS
Hệ thống component (instances & overrides)
Tạo thiết kế AI với orchestrator
Tích hợp máy chủ MCP với quy trình thiết kế phân lớp
Hỗ trợ nhiều trang
Nhập Figma .fig
Phép toán Boolean (hợp nhất, trừ, giao)
Hồ sơ năng lực đa mô hình
Chỉnh sửa cộng tác
Hệ thống plugin

Người đóng góp

Cộng đồng

Tham gia Discord của chúng tôi — Đặt câu hỏi, chia sẻ thiết kế, đề xuất tính năng.

12 KiB

Raw Blame History

OpenPencil

Tại sao chọn OpenPencil

🎨 Prompt → Canvas

🤖 Đội Tác nhân Đồng thời

🧠 Trí tuệ Đa mô hình

🔌 Máy chủ MCP

📦 Design-as-Code

🖥️ Chạy Mọi nơi

Bắt đầu nhanh

Thiết kế thuần AI

Tính năng

Công nghệ

Cấu trúc dự án

Phím tắt

Scripts

Đóng góp

Lộ trình

Người đóng góp

Cộng đồng

Star History

Giấy phép

12 KiB Raw Blame History

OpenPencil

Tại sao chọn OpenPencil

🎨 Prompt → Canvas

🤖 Đội Tác nhân Đồng thời

🧠 Trí tuệ Đa mô hình

🔌 Máy chủ MCP

📦 Design-as-Code

🖥️ Chạy Mọi nơi

Bắt đầu nhanh

Thiết kế thuần AI

Tính năng

Công nghệ

Cấu trúc dự án

Phím tắt

Scripts

Đóng góp

Lộ trình

Người đóng góp

Cộng đồng

Star History

Giấy phép

12 KiB

Raw Blame History