openpencil/README.id.md

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

Deployment 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-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
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
• 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

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	CanvasKit/Skia (WASM, akselerasi GPU)
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 CanvasKit/Skia — 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.

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: feat(canvas): add rotation snapping
5. 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.

Star History

Lisensi

MIT — Copyright (c) 2026 ZSeven-W