vndangkhoa/openpencil
1
0
Fork 0
mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
openpencil/README.id.md
Kayshen Xu 4af8ef412b
V0.3.3 (#33) 
* 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

274 lines
11 KiB
Markdown
Raw Blame History

<p align="center">
<img src="./electron/icon.png" alt="OpenPencil" width="120" />
</p>
<h1 align="center">OpenPencil</h1>
<p align="center">
<strong>Alat desain vektor open-source berbasis AI pertama di dunia.</strong><br />
<sub>Tim Agen Konkuren &bull; Design-as-Code &bull; Server MCP Bawaan &bull; Kecerdasan Multi-model</sub>
</p>
<p align="center">
<a href="./README.md">English</a> · <a href="./README.zh.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.fr.md">Français</a> · <a href="./README.es.md">Español</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.pt.md">Português</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.hi.md">हिन्दी</a> · <a href="./README.tr.md">Türkçe</a> · <a href="./README.th.md">ไทย</a> · <a href="./README.vi.md">Tiếng Việt</a> · <a href="./README.id.md"><b>Bahasa Indonesia</b></a>
</p>
<p align="center">
<a href="https://github.com/ZSeven-W/openpencil/stargazers"><img src="https://img.shields.io/github/stars/ZSeven-W/openpencil?style=flat&color=cfb537" alt="Stars" /></a>
<a href="https://github.com/ZSeven-W/openpencil/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ZSeven-W/openpencil?color=64748b" alt="License" /></a>
<a href="https://github.com/ZSeven-W/openpencil/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/ZSeven-W/openpencil/ci.yml?branch=main&label=CI" alt="CI" /></a>
<a href="https://discord.gg/KwXp6BJD"><img src="https://img.shields.io/discord/1476517942949580952?label=Discord&logo=discord&logoColor=white&color=5865F2" alt="Discord" /></a>
</p>
<br />
<p align="center">
<a href="https://oss.ioa.tech/zseven/openpencil/a46e24733239ce24de36702342201033.mp4">
<img src="./screenshot/op-cover.png" alt="OpenPencil — klik untuk menonton demo" width="100%" />
</a>
</p>
<p align="center"><sub>Klik gambar untuk menonton video demo</sub></p>
<br />
## Mengapa OpenPencil
<table>
<tr>
<td width="50%">
### 🎨 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.
</td>
<td width="50%">
### 🤖 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.
</td>
</tr>
<tr>
<td width="50%">
### 🧠 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.
</td>
<td width="50%">
### 🔌 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.
</td>
</tr>
<tr>
<td width="50%">
### 📦 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.
</td>
<td width="50%">
### 🖥️ 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.
</td>
</tr>
</table>
## Mulai Cepat
```bash
# Instal dependensi
bun install
# Jalankan server pengembangan di http://localhost:3000
bun --bun run dev
```
Atau jalankan sebagai aplikasi desktop:
```bash
bun run electron:dev
```
> **Prasyarat:** [Bun](https://bun.sh/) >= 1.0 dan [Node.js](https://nodejs.org/) >= 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
```text
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
```bash
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](./CLAUDE.md) untuk detail arsitektur dan gaya kode.
1. Fork dan clone
2. Buat cabang: `git checkout -b feat/my-feature`
3. Jalankan pemeriksaan: `npx tsc --noEmit && bun --bun run test`
4. Commit dengan [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping`
5. Buka PR ke `main`
## Peta Jalan
- [x] Variabel & token desain dengan sinkronisasi CSS
- [x] Sistem komponen (instans & penggantian)
- [x] Pembuatan desain AI dengan orkestrator
- [x] Integrasi server MCP dengan alur kerja desain berlapis
- [x] Dukungan multi-halaman
- [x] Impor Figma `.fig`
- [x] Operasi boolean (gabung, kurangi, potong)
- [x] Profil kemampuan multi-model
- [ ] Pengeditan kolaboratif
- [ ] Sistem plugin
## Kontributor
<a href="https://github.com/ZSeven-W/openpencil/graphs/contributors">
<img src="https://contrib.rocks/image?repo=ZSeven-W/openpencil" alt="Contributors" />
</a>
## Komunitas
<a href="https://discord.gg/KwXp6BJD">
<img src="./public/logo-discord.svg" alt="Discord" width="16" />
<strong> Bergabung dengan Discord kami</strong>
</a>
— Ajukan pertanyaan, bagikan desain, sarankan fitur.
## Star History
<a href="https://star-history.com/#ZSeven-W/openpencil&Date">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=ZSeven-W/openpencil&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=ZSeven-W/openpencil&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=ZSeven-W/openpencil&type=Date" width="100%" />
</picture>
</a>
## Lisensi
[MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W
Reference in a new issue View git blame Copy permalink