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

Alat desain vektor open-source berbasis AI pertama di dunia.
_{Tim Agen Konkuren • Design-as-Code • Server MCP Bawaan • Kecerdasan Multi-model}

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

_{Klik gambar untuk menonton video demo}

Mengapa OpenPencil

🎨 Prompt → Kanvas

Deskripsikan UI apa pun dalam bahasa alami. Saksikan hasilnya muncul di kanvas tak terbatas secara real-time dengan animasi streaming. Modifikasi desain yang ada dengan memilih elemen dan berdialog.

🤖 Tim Agen Konkuren

Orkestrator menguraikan halaman kompleks menjadi sub-tugas spasial. Beberapa agen AI bekerja pada bagian yang berbeda secara bersamaan — hero, fitur, footer — semuanya streaming secara paralel.

🧠 Kecerdasan Multi-Model

Secara otomatis menyesuaikan dengan kemampuan setiap model. Claude mendapat prompt lengkap dengan thinking; GPT-4o/Gemini menonaktifkan thinking; model yang lebih kecil (MiniMax, Qwen, Llama) mendapat prompt yang disederhanakan untuk keluaran yang andal.

🔌 Server MCP

Instal satu klik ke Claude Code, Codex, Gemini, OpenCode, Kiro, atau Copilot CLI. Desain dari terminal Anda — baca, buat, dan modifikasi file .op melalui agen yang kompatibel dengan MCP.

📦 Design-as-Code

File .op adalah JSON — mudah dibaca manusia, ramah Git, mudah dibandingkan. Variabel desain menghasilkan CSS custom properties. Ekspor kode ke React + Tailwind atau HTML + CSS.

🖥️ Berjalan di Mana Saja

Aplikasi web + desktop native di macOS, Windows, dan Linux melalui Electron. Pembaruan otomatis dari GitHub Releases. Asosiasi file .op — klik dua kali untuk membuka.

Mulai Cepat

# Instal dependensi
bun install

# Jalankan server pengembangan di http://localhost:3000
bun --bun run dev

Atau jalankan sebagai aplikasi desktop:

bun run electron:dev

Prasyarat: Bun >= 1.0 dan Node.js >= 18

Desain Berbasis AI

Dari Prompt ke UI

Teks ke desain — deskripsikan halaman, dan hasilkan di kanvas secara real-time dengan animasi streaming
Orkestrator — menguraikan halaman kompleks menjadi sub-tugas spasial untuk pembuatan secara paralel
Modifikasi desain — pilih elemen, lalu deskripsikan perubahan dalam bahasa alami
Masukan visual — lampirkan tangkapan layar atau mockup sebagai referensi desain

Dukungan Multi-Agen

Agen	Pengaturan
Claude Code	Tanpa konfigurasi — menggunakan Claude Agent SDK dengan OAuth lokal
Codex CLI	Hubungkan di Pengaturan Agen (`Cmd+,`)
OpenCode	Hubungkan di Pengaturan Agen (`Cmd+,`)
GitHub Copilot	`copilot login` lalu hubungkan di Pengaturan Agen (`Cmd+,`)

Profil Kemampuan Model — secara otomatis menyesuaikan prompt, mode thinking, dan timeout per tingkatan model. Model tingkat penuh (Claude) mendapat prompt lengkap; tingkat standar (GPT-4o, Gemini, DeepSeek) menonaktifkan thinking; tingkat dasar (MiniMax, Qwen, Llama, Mistral) mendapat prompt JSON bertingkat yang disederhanakan untuk keandalan maksimum.

Server MCP

Server MCP bawaan — instal satu klik ke Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
Otomasi desain dari terminal: baca, buat, dan modifikasi file .op melalui agen yang kompatibel dengan MCP
Alur kerja desain berlapis — design_skeleton → design_content → design_refine untuk desain multi-bagian dengan fidelitas lebih tinggi
Pengambilan prompt tersegmentasi — muat hanya pengetahuan desain yang Anda butuhkan (schema, layout, roles, icons, planning, dll.)
Dukungan multi-halaman — buat, ganti nama, urutkan ulang, dan duplikasi halaman melalui alat MCP

Pembuatan Kode

React + Tailwind CSS
HTML + CSS
CSS Variables dari token desain

Fitur

Kanvas & Menggambar

Kanvas tak terbatas dengan pan, zoom, panduan perataan cerdas, dan snapping
Persegi panjang, Elips, Garis, Poligon, Pen (Bezier), Frame, Teks
Operasi Boolean — gabungan, kurangi, irisan dengan toolbar kontekstual
Pemilih ikon (Iconify) dan impor gambar (PNG/JPEG/SVG/WebP/GIF)
Auto-layout — vertikal/horizontal dengan gap, padding, justify, align
Dokumen multi-halaman dengan navigasi tab

Sistem Desain

Variabel desain — token warna, angka, string dengan referensi $variable
Dukungan multi-tema — beberapa sumbu, masing-masing dengan varian (Terang/Gelap, Ringkas/Nyaman)
Sistem komponen — komponen yang dapat digunakan ulang dengan instans dan penggantian
Sinkronisasi CSS — properti kustom yang dibuat otomatis, var(--name) dalam keluaran kode

Impor Figma

Impor file .fig dengan tata letak, fill, stroke, efek, teks, gambar, dan vektor tetap terjaga

Aplikasi Desktop

macOS, Windows, dan Linux native melalui Electron
Asosiasi file .op — klik dua kali untuk membuka, kunci instans tunggal
Pembaruan otomatis dari GitHub Releases
Menu aplikasi native dan dialog file

Tumpukan Teknologi


Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui
Kanvas	Fabric.js v7
State	Zustand v5
Server	Nitro
Desktop	Electron 35
AI	Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Runtime	Bun · Vite 7
Format file	`.op` — berbasis JSON, mudah dibaca manusia, ramah Git

Struktur Proyek

src/
  canvas/          Mesin Fabric.js — menggambar, sinkronisasi, tata letak, panduan, alat pen
  components/      UI React — editor, panel, dialog bersama, ikon
  services/ai/     Chat AI, orkestrator, pembuatan desain, streaming
  services/figma/  Pipeline impor biner Figma .fig
  services/codegen Generator kode React+Tailwind dan HTML+CSS
  stores/          Zustand — kanvas, dokumen, halaman, riwayat, AI, pengaturan
  variables/       Resolusi token desain dan manajemen referensi
  mcp/             Alat server MCP untuk integrasi CLI eksternal
  uikit/           Sistem kit komponen yang dapat digunakan ulang
server/
  api/ai/          Nitro API — chat streaming, pembuatan, validasi
  utils/           Pembungkus klien Claude CLI, OpenCode, Codex, Copilot
electron/
  main.ts          Jendela, fork Nitro, menu native, pembaruan otomatis
  preload.ts       Jembatan IPC

Pintasan Keyboard

Tombol	Aksi	Tombol	Aksi
`V`	Pilih	`Cmd+S`	Simpan
`R`	Persegi panjang	`Cmd+Z`	Batalkan
`O`	Elips	`Cmd+Shift+Z`	Ulangi
`L`	Garis	`Cmd+C/X/V/D`	Salin/Potong/Tempel/Duplikat
`T`	Teks	`Cmd+G`	Grup
`F`	Frame	`Cmd+Shift+G`	Pisahkan grup
`P`	Alat pen	`Cmd+Shift+E`	Ekspor
`H`	Hand (pan)	`Cmd+Shift+C`	Panel kode
`Del`	Hapus	`Cmd+Shift+V`	Panel variabel
`[ / ]`	Ubah urutan	`Cmd+J`	Chat AI
Panah	Geser 1px	`Cmd+,`	Pengaturan agen
`Cmd+Alt+U`	Union Boolean	`Cmd+Alt+S`	Subtract Boolean
`Cmd+Alt+I`	Intersect Boolean

Skrip

bun --bun run dev          # Server pengembangan (port 3000)
bun --bun run build        # Build produksi
bun --bun run test         # Jalankan pengujian (Vitest)
npx tsc --noEmit           # Pemeriksaan tipe
bun run electron:dev       # Pengembangan Electron
bun run electron:build     # Paket Electron

Berkontribusi

Kontribusi sangat disambut! Lihat CLAUDE.md untuk detail arsitektur dan gaya kode.

Fork dan clone
Buat cabang: git checkout -b feat/my-feature
Jalankan pemeriksaan: npx tsc --noEmit && bun --bun run test
Commit dengan Conventional Commits: feat(canvas): add rotation snapping
Buka PR ke main

Peta Jalan

Variabel & token desain dengan sinkronisasi CSS
Sistem komponen (instans & penggantian)
Pembuatan desain AI dengan orkestrator
Integrasi server MCP dengan alur kerja desain berlapis
Dukungan multi-halaman
Impor Figma .fig
Operasi boolean (gabung, kurangi, potong)
Profil kemampuan multi-model
Pengeditan kolaboratif
Sistem plugin

Kontributor

Komunitas

Bergabung dengan Discord kami — Ajukan pertanyaan, bagikan desain, sarankan fitur.

11 KiB

Raw Blame History

OpenPencil

Mengapa OpenPencil

🎨 Prompt → Kanvas

🤖 Tim Agen Konkuren

🧠 Kecerdasan Multi-Model

🔌 Server MCP

📦 Design-as-Code

🖥️ Berjalan di Mana Saja

Mulai Cepat

Desain Berbasis AI

Fitur

Tumpukan Teknologi

Struktur Proyek

Pintasan Keyboard

Skrip

Berkontribusi

Peta Jalan

Kontributor

Komunitas

Star History

Lisensi

11 KiB Raw Blame History

OpenPencil

Mengapa OpenPencil

🎨 Prompt → Kanvas

🤖 Tim Agen Konkuren

🧠 Kecerdasan Multi-Model

🔌 Server MCP

📦 Design-as-Code

🖥️ Berjalan di Mana Saja

Mulai Cepat

Desain Berbasis AI

Fitur

Tumpukan Teknologi

Struktur Proyek

Pintasan Keyboard

Skrip

Berkontribusi

Peta Jalan

Kontributor

Komunitas

Star History

Lisensi

11 KiB

Raw Blame History