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.
⌨️ CLI — op Kontrol alat desain dari terminal Anda. op design, op insert, op export — batch design DSL, manipulasi node, ekspor kode. 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
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.

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 export react --out .      # Ekspor ke React + Tailwind
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.

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
CLI	op — kontrol terminal, batch design DSL, ekspor kode
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

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)
└── .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+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 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.

1. Fork dan clone
2. Atur sinkronisasi versi: git config core.hooksPath .githooks
3. Buat cabang: git checkout -b feat/my-feature
4. Jalankan pemeriksaan: npx tsc --noEmit && bun --bun run test
5. Commit dengan Conventional Commits: feat(canvas): add rotation snapping
6. 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
• 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