mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

Kayshen-X 29e0bdaeeb docs: move MseeP badge to bottom of all README versions

2026-04-29 22:00:00 +08:00

21 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}

Catatan: Ada proyek open-source lain dengan nama yang sama — OpenPencil, yang berfokus pada desain visual kompatibel Figma dengan kolaborasi real-time. Proyek ini berfokus pada alur kerja AI-native dari desain ke kode.

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.

⌨️ CLI — `op`

Kontrol alat desain dari terminal Anda. op design, op insert — batch design DSL, manipulasi node. Pipe dari file atau stdin. Bekerja dengan aplikasi desktop atau web server.

🎯 Ekspor Kode Multi-Platform

Ekspor dari satu file .op ke React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native. Variabel desain menjadi CSS custom properties.

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

Docker

Tersedia beberapa varian image — pilih yang sesuai kebutuhan Anda:

Image	Ukuran	Termasuk
`openpencil:latest`	~226 MB	Hanya aplikasi web
`openpencil-claude:latest`	—	+ Claude Code CLI
`openpencil-codex:latest`	—	+ Codex CLI
`openpencil-opencode:latest`	—	+ OpenCode CLI
`openpencil-copilot:latest`	—	+ GitHub Copilot CLI
`openpencil-gemini:latest`	—	+ Gemini CLI
`openpencil-full:latest`	~1 GB	Semua alat CLI

Jalankan (hanya web):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

Jalankan dengan AI CLI (misal Claude Code):

Chat AI bergantung pada login OAuth Claude CLI. Gunakan volume Docker untuk menyimpan sesi login:

# Langkah 1 — Login (satu kali)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# Langkah 2 — Mulai
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

Build secara lokal:

# Dasar (hanya web)
docker build --target base -t openpencil .

# Dengan CLI tertentu
docker build --target with-claude -t openpencil-claude .

# Lengkap (semua CLI)
docker build --target full -t openpencil-full .

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
Bawaan (9+ penyedia)	Pilih dari preset penyedia dengan pemilih wilayah — Anthropic, OpenAI, Google, DeepSeek dan lainnya
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+,`)
Gemini CLI	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.

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

Server MCP

Server MCP bawaan — instal satu klik ke Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLI
Deteksi otomatis Node.js — jika tidak terinstal, otomatis beralih ke transport HTTP dan memulai server MCP HTTP
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
Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

CLI — `op`

Instal secara global dan kontrol alat desain dari terminal Anda:

npm install -g @zseven-w/openpencil

op start                     # Jalankan aplikasi desktop
op design @landing.txt       # Desain batch dari file
op insert '{"type":"RECT"}'  # Sisipkan sebuah node
op import:figma design.fig   # Impor file Figma
cat design.dsl | op design - # Pipe dari stdin

Mendukung tiga metode input: string inline, @filepath (baca dari file), atau - (baca dari stdin). Bekerja dengan aplikasi desktop atau web dev server. Lihat CLI README untuk referensi perintah lengkap.

LLM Skill — instal plugin OpenPencil Skill untuk mengajarkan agen AI (Claude Code, Cursor, Codex, Gemini CLI, dll.) mendesain dengan op.

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
UIKit yang dapat digunakan ulang — impor/ekspor kit komponen dari file .pen

AI & Agen

Prompt-ke-kanvas dengan pembuatan streaming dan dekomposisi spasial yang digerakkan orkestrator
Tim Agen Bersamaan — beberapa desainer mengerjakan bagian yang berbeda secara paralel dengan indikator kanvas per anggota
Alur kerja berlapis — design_skeleton → design_content → design_refine dengan prompt yang terfokus per fase
Panduan Gaya — 50+ gaya bawaan (glassmorphism, brutalist, retro, dll.) dengan pencocokan fuzzy berbasis tag, terintegrasi ke perencanaan dan pembuatan
Profil kemampuan multi-model — secara otomatis menyesuaikan mode berpikir, upaya, dan bentuk prompt berdasarkan tingkat model
Runtime agen bawaan (agent-native, Zig NAPI) + penyedia Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini
Passthrough format Anthropic untuk penyedia LLM Tiongkok — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Integrasi Git

Wizard clone dengan autentikasi SSH / HTTPS dan manajemen kunci SSH
Pemilih branch — buat, beralih, hapus, merge, semua dari panel Git
Kaskade pull / push dengan percobaan ulang autentikasi dan penanganan non-fast-forward
Merge tiga arah mode folder dengan pelacakan status MERGE_HEAD di disk
Panel konflik dengan kartu tiga arah per node / field, editor JSON inline, aksi massal, dan blok diff inline
UI pengaturan remote dan kunci SSH; i18n 15 bahasa di seluruh permukaan Git

Ekspor

Ekspor kanvas — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
Ekspor kode — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
Pipeline codegen MCP inkremental — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

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 dengan Simpan sebagai, Buka Terbaru, dan dialog perubahan belum tersimpan saat ditutup
Persistensi file terbaru

Tumpukan Teknologi


Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
Kanvas	CanvasKit/Skia (WASM, akselerasi GPU)
State	Zustand v5
Server	Nitro
Desktop	Electron 35
CLI	`op` — kontrol terminal, batch design DSL
AI	Vercel AI SDK v6 · 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

openpencil/
├── apps/
│   ├── web/                 Aplikasi web TanStack Start
│   │   ├── src/
│   │   │   ├── canvas/      Mesin CanvasKit/Skia — menggambar, sinkronisasi, tata letak
│   │   │   ├── components/  UI React — editor, panel, dialog bersama, ikon
│   │   │   ├── services/ai/ Chat AI, orkestrator, pembuatan desain, streaming
│   │   │   ├── stores/      Zustand — kanvas, dokumen, halaman, riwayat, AI
│   │   │   ├── mcp/         Alat server MCP untuk integrasi CLI eksternal
│   │   │   ├── hooks/       Pintasan keyboard, seret file, tempel Figma
│   │   │   └── uikit/       Sistem kit komponen yang dapat digunakan ulang
│   │   └── server/
│   │       ├── api/ai/      Nitro API — chat streaming, pembuatan, validasi
│   │       └── utils/       Pembungkus Claude CLI, OpenCode, Codex, Copilot
│   ├── desktop/             Aplikasi desktop Electron
│   │   ├── main.ts          Jendela, fork Nitro, menu native, pembaruan otomatis
│   │   ├── ipc-handlers.ts  Dialog file native, sinkronisasi tema, preferensi IPC
│   │   └── preload.ts       Jembatan IPC
│   └── cli/                 Alat CLI — perintah `op`
│       ├── src/commands/    Perintah design, document, export, import, node, page, variable
│       ├── connection.ts    Koneksi WebSocket ke aplikasi yang berjalan
│       └── launcher.ts      Deteksi otomatis dan jalankan aplikasi desktop atau web server
├── packages/
│   ├── pen-types/           Definisi tipe untuk model PenDocument
│   ├── pen-core/            Operasi pohon dokumen, mesin tata letak, variabel
│   ├── pen-codegen/         Generator kode (React, HTML, Vue, Flutter, ...)
│   ├── pen-figma/           Parser dan konverter file Figma .fig
│   ├── pen-renderer/        Renderer CanvasKit/Skia mandiri
│   ├── pen-sdk/             SDK payung (re-ekspor semua paket)
│   ├── pen-ai-skills/       Engine skill AI prompt (pemuatan prompt bertahap)
│   └── agent/               SDK agen AI (Vercel AI SDK, multi-penyedia, tim agen)
└── .githooks/               Pre-commit sinkronisasi versi dari nama branch

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+P`	Ekspor (PNG/JPG/WEBP/PDF)
`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	`Cmd+Shift+S`	Simpan sebagai

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 bump <version>     # Sinkronisasi versi di semua package.json
bun run electron:dev       # Pengembangan Electron
bun run electron:build     # Paket Electron
bun run cli:dev            # Jalankan CLI dari sumber
bun run cli:compile        # Kompilasi CLI ke dist

Berkontribusi

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

Fork dan clone
Atur sinkronisasi versi: git config core.hooksPath .githooks
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
Restrukturisasi monorepo dengan paket yang dapat digunakan ulang
Alat CLI (op) kontrol terminal
SDK agen AI bawaan dengan dukungan multi-penyedia
i18n — 15 bahasa
Integrasi Git (clone, branch, push/pull, merge tiga arah mode folder)
Ekspor raster kanvas (PNG / JPEG / WEBP / PDF)
Pengeditan kolaboratif
Sistem plugin

Kontributor

OpenPencil gratis dan open source. Pengembangan didanai oleh orang-orang yang merasa terbantu — terima kasih telah menjaga kanvas tetap terbuka.

Terima kasih kepada MrQyun — ingin nama Anda muncul di sini? Jadi sponsor →

Komunitas

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

21 KiB

Raw Blame History

OpenPencil

Mengapa OpenPencil

🎨 Prompt → Kanvas

🤖 Tim Agen Konkuren

🧠 Kecerdasan Multi-Model

🔌 Server MCP

📦 Design-as-Code

🖥️ Berjalan di Mana Saja

⌨️ CLI — `op`

🎯 Ekspor Kode Multi-Platform

Mulai Cepat

Docker

Desain Berbasis AI

CLI — `op`

Fitur

Tumpukan Teknologi

Struktur Proyek

Pintasan Keyboard

Skrip

Berkontribusi

Peta Jalan

Kontributor

Komunitas

Star History

Lisensi

21 KiB Raw Blame History

OpenPencil

Mengapa OpenPencil

🎨 Prompt → Kanvas

🤖 Tim Agen Konkuren

🧠 Kecerdasan Multi-Model

🔌 Server MCP

📦 Design-as-Code

🖥️ Berjalan di Mana Saja

⌨️ CLI — op

🎯 Ekspor Kode Multi-Platform

Mulai Cepat

Docker

Desain Berbasis AI

CLI — op

Fitur

Tumpukan Teknologi

Struktur Proyek

Pintasan Keyboard

Skrip

Berkontribusi

Peta Jalan

Kontributor

Sponsor

Komunitas

Star History

Lisensi

21 KiB

Raw Blame History

⌨️ CLI — `op`

CLI — `op`