28 KiB
OpenPencil
Das weltweit erste KI-native Open-Source-Vektordesign-Werkzeug.
Parallele Agententeams • Design-as-Code • Eingebauter MCP-Server • Multi-Modell-Intelligenz
English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia
Auf das Bild klicken, um das Demo-Video anzusehen
Hinweis: Es gibt ein weiteres Open-Source-Projekt mit demselben Namen — OpenPencil, das sich auf Figma-kompatibles visuelles Design mit Echtzeit-Zusammenarbeit konzentriert. Dieses Projekt konzentriert sich auf AI-native Design-to-Code-Workflows.
Warum OpenPencil
🎨 Prompt → CanvasBeschreiben Sie jede UI in natürlicher Sprache. Beobachten Sie, wie sie in Echtzeit mit Streaming-Animation auf der unendlichen Canvas erscheint. Ändern Sie bestehende Designs, indem Sie Elemente auswählen und chatten. |
🤖 Parallele AgententeamsDer Orchestrierer zerlegt komplexe Seiten in räumliche Teilaufgaben. Mehrere KI-Agenten arbeiten gleichzeitig an verschiedenen Bereichen — Hero, Features, Footer — alle parallel streamend. |
🧠 Multi-Modell-IntelligenzPasst sich automatisch an die Fähigkeiten jedes Modells an. Claude erhält vollständige Prompts mit Thinking; GPT-4o/Gemini deaktivieren Thinking; kleinere Modelle (MiniMax, Qwen, Llama) erhalten vereinfachte Prompts für zuverlässige Ausgabe. |
🔌 MCP-ServerEin-Klick-Installation in Claude Code, Codex, Gemini, OpenCode, Kiro oder Copilot CLIs. Designen Sie aus Ihrem Terminal — |
📦 Design-as-Code
|
🖥️ Läuft überallWeb-App + native Desktop-Anwendung auf macOS, Windows und Linux — ein Rust-Kern, eine einzelne eigenständige Binärdatei, keine Browser-Engine. |
⌨️ CLI —
|
🎯 Multiplattform-Code-ExportExport aus einer einzigen |
Schnellstart
# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh
Oder als Desktop-App ausführen:
cargo run -p op-host-desktop
Voraussetzungen: Rust (stable) zum Bauen des Produkts. Bun >= 1.0 und Node.js >= 18 werden nur für das Web-SDK unter
packages/benötigt.
Docker
Getaggte Rust-Releases veröffentlichen ein einzelnes Web-Host-Image. Die früheren TypeScript-Images mit gebündelten KI-CLIs werden nicht mehr veröffentlicht.
| Image | Enthält |
|---|---|
ghcr.io/zseven-w/openpencil-web:vX.Y.Z |
Rust-Web-Host, wasm bundle und CanvasKit-Assets |
Die Web-UI zeigt nur integrierte Agent-Profile; Claude/Codex/OpenCode/Copilot/Gemini-CLI-Tools sind nicht in Docker-Images enthalten.
Ausführen:
VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"
Öffnen Sie dann http://localhost:3100/.
Lokal bauen:
docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust
KI-natives Design
Vom Prompt zur UI
- Text-zu-Design — eine Seite beschreiben und sie wird in Echtzeit mit Streaming-Animation auf der Canvas generiert
- Orchestrierer — zerlegt komplexe Seiten in räumliche Teilaufgaben zur parallelen Generierung
- Design-Modifikation — Elemente auswählen und Änderungen in natürlicher Sprache beschreiben
- Bildeingabe — Screenshots oder Mockups als Referenz für referenzbasiertes Design anhängen
Multi-Agenten-Unterstützung
| Agent | Einrichtung |
|---|---|
| Integriert (9+ Anbieter) | Auswahl aus Anbieter-Presets mit Region-Switcher — Anthropic, OpenAI, Google, DeepSeek und mehr |
| Claude Code | Keine Konfiguration — verwendet Claude Agent SDK mit lokalem OAuth |
| Codex CLI | In den Agenteneinstellungen verbinden (Cmd+,) |
| OpenCode | In den Agenteneinstellungen verbinden (Cmd+,) |
| GitHub Copilot | copilot login dann in den Agenteneinstellungen verbinden (Cmd+,) |
| Gemini CLI | In den Agenteneinstellungen verbinden (Cmd+,) |
Modell-Fähigkeitsprofile — passt Prompts, Thinking-Modus und Timeouts automatisch pro Modellstufe an. Modelle der Vollstufe (Claude) erhalten vollständige Prompts; Standardstufe (GPT-4o, Gemini, DeepSeek) deaktiviert Thinking; Basisstufe (MiniMax, Qwen, Llama, Mistral) erhält vereinfachte verschachtelte JSON-Prompts für maximale Zuverlässigkeit.
i18n — Vollständige Interface-Lokalisierung in 15 Sprachen: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.
MCP-Server
- Eingebauter MCP-Server (
op-mcp-Crate) — Ein-Klick-Installation in Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs - Kein Node.js erforderlich — stdio-Transport über die Desktop-Binärdatei (
--mcp <path>), plus ein Live-HTTP-Endpunkt (127.0.0.1:<port>/mcp) der laufenden App - Design-Automatisierung vom Terminal aus:
.op-Dateien über jeden MCP-kompatiblen Agenten lesen, erstellen und bearbeiten - Mehrstufiger Design-Workflow —
design_skeleton→design_content→design_refinefür hochwertigere mehrteilige Designs - Segmentierter Prompt-Abruf — laden Sie nur das benötigte Design-Wissen (Schema, Layout, Rollen, Icons, Planung usw.)
- Mehrseitige Unterstützung — Seiten erstellen, umbenennen, neu ordnen und duplizieren über MCP-Tools
Codegenerierung
- React + Tailwind CSS, HTML + CSS, CSS Variables
- Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
CLI — op
Global installieren und das Design-Tool vom Terminal aus steuern:
brew install zseven-w/openpencil/op
op start # Desktop-App starten
op start --headless --file design.op # Headless-Server starten
op design @landing.txt # Batch-Design aus Datei
op design @ui.js # Sandbox-JavaScript mit Schleifen
op insert '{"type":"rectangle"}' # Knoten einfügen
op import:figma design.fig # Figma-Datei importieren
cat design.dsl | op design - # Pipe von stdin
Unterstützt Inline-Strings, @filepath und stdin (-). Funktioniert mit Desktop-App, Webserver oder dateibasiertem Headless-Server. Alle Befehle stehen in der CLI-Befehlsreferenz.
LLM-Skill — Installieren Sie das OpenPencil Skill-Plugin, um KI-Agenten das Designen mit op beizubringen. Verwenden Sie op install für erkannte Agenten oder op install --target codex für ein bestimmtes Ziel.
Funktionen
Canvas und Zeichnen
- Unendliche Canvas mit Pan, Zoom, intelligenten Ausrichtungshilfslinien und Einrasten
- Rechteck, Ellipse, Linie, Polygon, Stift (Bezier), Frame, Text
- Boolesche Operationen — Vereinigung, Subtraktion, Schnittmenge mit kontextbezogener Werkzeugleiste
- Icon-Auswahl (Iconify) und Bildimport (PNG/JPEG/SVG/WebP/GIF)
- Auto-Layout — vertikal/horizontal mit Gap, Padding, Justify, Align
- Mehrseitige Dokumente mit Tab-Navigation
Designsystem
- Designvariablen — Farb-, Zahl- und Text-Tokens mit
$variable-Referenzen - Multi-Theme-Unterstützung — mehrere Achsen, jeweils mit Varianten (Hell/Dunkel, Kompakt/Komfortabel)
- Komponentensystem — wiederverwendbare Komponenten mit Instanzen und Überschreibungen
- CSS-Synchronisierung — automatisch generierte benutzerdefinierte Eigenschaften,
var(--name)in der Code-Ausgabe - Wiederverwendbare UIKits — Import/Export von Komponenten-Kits aus
.pen-Dateien
KI & Agenten
- Prompt-zu-Canvas mit Streaming-Generierung und orchestrator-gesteuerter räumlicher Zerlegung
- Parallele Agententeams — mehrere Designer arbeiten parallel an verschiedenen Abschnitten, mit Canvas-Indikatoren pro Mitglied
- Mehrstufiger Workflow —
design_skeleton→design_content→design_refinemit fokussierten Prompts pro Phase - Style Guides — 50+ eingebaute Stile (glassmorphism, brutalist, retro usw.) mit tag-basiertem Fuzzy-Matching, eingebunden in Planung und Generierung
- Multi-Modell-Fähigkeitsprofile — passt Denkmodus, Aufwand und Promptform automatisch an die Modellstufe an
- Integrierte Agent-Laufzeit (Rust) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini-Anbieter
- Anthropic-Format-Passthrough für chinesische LLM-Anbieter — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans
Git-Integration
- Clone-Assistent mit SSH-/HTTPS-Authentifizierung und SSH-Schlüsselverwaltung
- Branch-Auswahl — Erstellen, Wechseln, Löschen, Mergen, alles im Git-Panel
- Pull-/Push-Kaskaden mit Auth-Wiederholung und Non-Fast-Forward-Handhabung
- Ordnermodus-Dreiwege-Merge mit Disk-basierter
MERGE_HEAD-Statusverfolgung - Konfliktpanel mit Dreiwege-Karten pro Knoten/Feld, Inline-JSON-Editor, Bulk-Aktionen und Inline-Diff-Block
- Remote-Einstellungen und SSH-Schlüssel-UI; 15-Sprachen-i18n für die gesamte Git-Oberfläche
Export
- Canvas-Export — PNG, JPEG, WEBP, PDF (
Cmd+Shift+P) - Code-Export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
- Inkrementelle MCP-Codegen-Pipeline —
codegen_plan,codegen_submit_chunk,codegen_assemble,codegen_clean
Figma-Import
.fig-Dateien importieren mit erhaltenem Layout, Füllungen, Konturen, Effekten, Text, Bildern und Vektoren
Desktop-App
- Natives macOS, Windows und Linux — eine einzelne eigenständige Binärdatei (winit + GPU Skia, kein Electron)
.op-Dateizuordnung — Doppelklick zum Öffnen, Einzelinstanzsperre- Update-Prüfung im Hintergrund über GitHub Releases
- Natives Anwendungsmenü mit „Speichern unter“, „Zuletzt verwendete öffnen“ und einem Dialog zu ungespeicherten Änderungen beim Schließen
- Persistenz der zuletzt verwendeten Dateien
Technologie-Stack
| Kern | Rust-Workspace (crates/) — Editor-Zustand, Widgets, Hosts, MCP, KI, Codegen |
| Rendering | GPU Skia überall — skia-safe (GL) nativ, CanvasKit (WASM/WebGL2) im Browser |
| UI-Framework | jian — vendorisiertes reines Rust-GPU-Skia-UI-Framework: Widgets, Layout, Events, Hot Reload (vendor/jian) |
| Fenstersystem | winit (vendorisierter casement-Fork) |
| Desktop | Native Binärdatei openpencil-desktop — keine Browser-Engine |
| Web-SDK | op-web-sdk + React-19-/Vue-3-Adapter — schreibgeschützter .op-Viewer (TypeScript) |
| CLI | op — Terminal-Steuerung, Batch-Design-DSL |
| KI | Integrierte Rust-Agentenlaufzeit · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| Lint | clippy · rustfmt (Rust) · oxlint · oxfmt (Web-SDK) |
| Dateiformat | .op — JSON-basiert, menschenlesbar, Git-freundlich |
Ökosystem
OpenPencil ist Teil einer Familie von reinen Rust-, KI-nativen Werkzeugen von ZSeven-W. Sie greifen ineinander: jian rendert OpenPencil, agent-rs betreibt seine Agenten, noema erinnert sich, und zode designt vom Terminal aus.
| Projekt | Was es ist |
|---|---|
| Zode | Open-Source-, KI-nativer Coding-Assistent für Ihr Terminal — eine schnelle Rust-TUI (ratatui), die Ihren Code liest, Befehle ausführt, Dateien durchsucht und Git verwaltet. Steuert OpenPencil über MCP. |
| agent-rs | Eine reine Rust-Async-Laufzeit zum Ausliefern von LLM-Agenten — Multi-Anbieter, durchgängig werkzeugfähig, strukturierte Berechtigungen, echtes MCP, null unsafe. Treibt OpenPencils integrierte Agentenlaufzeit (vendor/agent) und Zode an. |
| jian | Reines Rust-, GPU-Skia-UI-Framework — Widgets, Layout, Events und Hot Reload in einem Stack. Verwandelt ein deklaratives .op-Dokument in eine native, KI-steuerbare App ohne JS-Laufzeit, ohne DOM, ohne Electron. OpenPencils UI-Framework (vendor/jian). |
| noema | Local-first-, nicht-vektorbasiertes Speichersystem für Coding-Agenten. Dauerhafter Speicher als inspizierbare Dateien, eine Prüfungswarteschlange für neue Einträge und lexikalischer (einbettungsfreier) Abruf — funktioniert über Zode, Codex, Claude Code und MCP-Laufzeiten hinweg. |
Warum Rust
OpenPencil wurde von Grund auf in Rust neu geschrieben (#129). Die Neufassung ist abgeschlossen — der TypeScript + Electron-Editor wurde mit v0.7.5 eingestellt, und der Rust-Workspace in diesem Repository ist das Produkt: ein einzelner nativer Kern, der dramatisch kleiner und schneller ist und aus einer einzigen Codebasis auf mehr Plattformen läuft.
TypeScript + Electron (eingestellt, v0.7.5) |
Rust (heute) | |
|---|---|---|
| Desktop-Laufzeit | Electron — bündelt Chromium + Node.js | Natives Fenster (winit + GPU Skia), keine Browser-Engine |
| Desktop-Größe | Vollständige Chromium-Laufzeit pro Installation | Einzelne eigenständige Binärdatei — 55.5 MB |
| Web-Nutzlast | JS + WASM-Bundle | 8.2 MB wasm / 2.18 MB gzip über die Leitung |
| Rendering | CanvasKit/Skia im Web | Ein GPU-beschleunigtes Skia-Backend auf jedem Ziel |
| Speicher | JavaScript GC-Pausen | Kein GC — Rust-Ownership, vorhersagbare Latenz |
| Codebasis | Web-Stack + Electron | Ein Rust-Workspace: Editor · CLI · MCP · AI · Codegen · Figma · Git |
| Zielplattformen | Web + Desktop, zwei separate Stacks | Desktop (macOS/Win/Linux) · Mobile (iOS/Android) · Browser — ein Kern |
Gemessene Verbesserungen
- Geringer Speicherbedarf — die gesamte Desktop-App ist eine einzelne native Binärdatei von 55.5 MB anstelle einer gebündelten Browser-Engine plus einer Node-Laufzeit. Der Web-Build ist 8.2 MB roh / 2.18 MB gzip nach dem Aufteilen des Icon-Katalogs (−48% über die Leitung).
- Skaliert auf große Dokumente — eine Live-Canvas mit 10,000-node (verschachteltes Auto-Layout, vier Ebenen tief) schreibt, liest und erstellt Layout-Snapshots ohne Panics und mit ~0% CPU-Leerlast; ein vollständiger Layout-Snapshot aller 10k Knoten wird in ~0.68 s zurückgegeben.
- Schnelle Interaktion — Pan/Zoom serialisiert das Dokument nicht mehr bei jedem Frame neu (ein einziger Hot-Path-Fix senkte den CPU-Verbrauch beim Rollen von ~69% auf ~0%); Drags aktualisieren die Szene inkrementell, die Textmessung wird gecacht, und Neuzeichnungen werden auf einen pro Frame zusammengeführt.
- Ein Kern, jeder Bildschirm — derselbe Editor-Zustand und dasselbe Render-Backend werden zu nativem Desktop, Mobile und dem Browser via WASM kompiliert — keine parallelen Neuimplementierungen, die synchron gehalten werden müssen.
- GPU Skia überall — native Ausgabe über
skia-safein einem GL-Kontext; der Browser rendert über CanvasKit auf WebGL2 — derselbe Zeichencode, dieselbe Ausgabe. - Native Barrierefreiheit — AccessKit auf macOS, Windows und Linux sowie ein DOM-Spiegel im Web, anstatt sich auf den a11y-Baum eines Browsers zu stützen.
- Ein typgeprüfter Workspace — der MCP-Host, CLI, AI-Anbieter, Codegenerierung, Figma-Import und Git-Integration leben alle in einem einzigen Rust-Workspace, mit
cargo-deny-Supply-Chain-Kontrolle in der CI.
Status: der TypeScript-Editor wurde mit
v0.7.5eingestellt und existiert nur noch in der Git-Historie; dieses Repository ist der Rust-Workspace. Das Rust-Produkt wird aktiv weiterentwickelt (siehe Roadmap unten).
Projektstruktur
openpencil/
├── crates/ Rust-Workspace — das Produkt
│ ├── op-editor-core/ Kanonischer `.op`-Zustand (PenDocument) + EditorCommand + Designvariablen
│ ├── op-editor-ui/ Plattformfreie Widgets + RenderBackend-Fassade (wasm32-clean)
│ ├── op-editor-host-core/ Transportfreie Host-Zustandsmaschinen, gemeinsam für alle Hosts
│ ├── op-host-native/ Native Host-Bibliothek — winit + skia-safe GL (Desktop + Mobile)
│ ├── op-host-web/ Browser-Bundle — wasm32-cdylib, CanvasKit-Renderer
│ ├── op-host-desktop/ Desktop-Binärdatei `openpencil-desktop`; auch der `--serve-web`-Daemon
│ ├── op-host-services/ Headless serve-web-/MCP-Daemon-Bibliothek
│ ├── op-host-web-server/ Schlanke GL-freie Webserver-Binärdatei
│ ├── op-cli/ CLI-Tool — `op`-Befehl
│ ├── op-mcp/ MCP-Server — Tools, Batch-Design, mehrstufiger Workflow
│ ├── op-ai/ KI-Anbieter, Chat-Laufzeit, Streaming
│ ├── op-ai-skills/ KI-Prompt-Skill-Engine (phasengesteuertes Prompt-Laden)
│ ├── op-orchestrator/ Orchestrierung paralleler Agententeams
│ ├── op-codegen/ Codegeneratoren (React, HTML, Vue, Flutter, ...)
│ ├── op-figma/ Figma-.fig-Datei-Parser und -Konverter
│ ├── op-git/ Git-Integration — Klonen, Branches, Push/Pull, Merge
│ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│ op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/ Web-SDK-Workspace (Bun)
│ ├── op-web-sdk/ Schreibgeschützte `.op`-Web-Viewer-SDK (umschließt das wasm-Bundle)
│ ├── op-web-sdk-react/ React-19-Adapter
│ └── op-web-sdk-vue/ Vue-3-Adapter
├── vendor/ Vendorisierte Subsysteme (Git-Submodule)
│ ├── jian/ GPU-Skia UI-Framework — Widgets/Render/Events
│ ├── casement/ winit-Fork
│ └── agent/ Produktübergreifende Rust-Agentenlaufzeit (agent-rs)
└── .githooks/ Pre-Commit-Prüfung auf Versionsabweichungen
Tastaturkürzel
| Taste | Aktion | Taste | Aktion | |
|---|---|---|---|---|
V |
Auswählen | Cmd+S |
Speichern | |
R |
Rechteck | Cmd+Z |
Rückgängig | |
O |
Ellipse | Cmd+Shift+Z |
Wiederholen | |
L |
Linie | Cmd+C/X/V/D |
Kopieren/Ausschneiden/Einfügen/Duplizieren | |
T |
Text | Cmd+G |
Gruppieren | |
F |
Frame | Cmd+Shift+G |
Gruppierung aufheben | |
P |
Stiftwerkzeug | Cmd+Shift+P |
Export (PNG/JPG/WEBP/PDF) | |
H |
Hand (Pan) | Cmd+Shift+C |
Code-Panel | |
Del |
Löschen | Cmd+Shift+V |
Variablen-Panel | |
[ / ] |
Reihenfolge ändern | Cmd+J |
KI-Chat | |
| Pfeiltasten | 1px verschieben | Cmd+, |
Agenteneinstellungen | |
Cmd+Alt+U |
Boolesche Vereinigung | Cmd+Alt+S |
Boolesche Subtraktion | |
Cmd+Alt+I |
Boolesche Schnittmenge | Cmd+Shift+S |
Speichern unter |
Skripte
# Product (Rust — run from the repo root)
cargo build --workspace # Build all crates (add --release for prod)
cargo test --workspace # Run all tests
cargo check --workspace # Type check
cargo clippy --workspace --all-targets -- -D warnings # Lint
cargo fmt --all # Format
bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host)
cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop)
cargo run -p op-cli -- <args> # CLI (binary: op)
# Web SDK / JS tooling (run from packages/)
cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format
cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets
# Versionssynchronisierung (im Repository-Stammverzeichnis ausführen)
scripts/sync-version.sh # Sync all managed versions from root Cargo.toml
tools/check-version-sync.sh # Verify all managed versions match root Cargo.toml
Mitwirken
Beiträge sind willkommen! Siehe CLAUDE.md für Architekturdetails und Code-Stil.
- Forken und klonen
- Versionsabweichungsprüfung aktivieren:
git config core.hooksPath .githooks - Branch erstellen:
git checkout -b feat/my-feature - Prüfungen ausführen:
cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings - Mit Conventional Commits committen:
feat(canvas): add rotation snapping - Pull Request gegen
mainöffnen
Roadmap
- Designvariablen & Tokens mit CSS-Synchronisierung
- Komponentensystem (Instanzen & Überschreibungen)
- KI-Designgenerierung mit Orchestrierer
- MCP-Server-Integration mit mehrstufigem Design-Workflow
- Mehrseitige Unterstützung
- Figma-
.fig-Import - Boolesche Operationen (Vereinigung, Subtraktion, Schnittmenge)
- Multi-Modell-Fähigkeitsprofile
- Cargo-Workspace mit wiederverwendbaren Rust-Crates und Web-SDK-Paketen
- Rust-Editor für Desktop und Web
- CLI-Tool (
op) für Terminal-Steuerung - Integrierte Rust-Agenten-Laufzeit mit Multi-Anbieter-Unterstützung
- i18n — 15 Sprachen
- Wasm-gestützte Viewer-SDKs für JavaScript, React und Vue
- Style Guides mit tag-basierter Zuordnung und MCP-Tools
- Gleichzeitige Agent Teams mit Delegation und Canvas-Indikatoren
- Git-Integration (Klonen, Branches, Push/Pull, Ordnermodus-Dreiwege-Merge)
- Canvas-Export (SVG / PNG / JPEG / WEBP / PDF)
- Kollaboratives Bearbeiten
- Plugin-System
Mitwirkende
Sponsoren
OpenPencil ist kostenlos und Open Source. Die Entwicklung wird von Menschen finanziert, die es nützlich finden — danke, dass ihr die Leinwand offen haltet.
Danke an MrQyun — soll dein Name auch hier stehen? Sponsor werden →
Community
Star History
Bewertungen
Lizenz
MIT — Copyright (c) 2026 ZSeven-W
