Kayshen-X 957316dcf2 docs(readme): add star history visualization

2026-07-30 23:06:47 +08:00

32 KiB

Raw Blame History

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}

_{The trend above is rendered with HyperWeave — an experimental SVG artifact layer for agents. Explore →}

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 → Canvas

Beschreiben 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 Agententeams

Der Orchestrierer zerlegt komplexe Seiten in räumliche Teilaufgaben. Mehrere KI-Agenten arbeiten gleichzeitig an verschiedenen Bereichen — Hero, Features, Footer — alle parallel streamend.

🧠 Multi-Modell-Intelligenz

Passt 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-Server

Ein-Klick-Installation in Claude Code, Codex, OpenCode, Kiro oder Copilot CLIs. Designen Sie aus Ihrem Terminal — .op-Dateien über jeden MCP-kompatiblen Agenten lesen, erstellen und bearbeiten.

📦 Design-as-Code

.op-Dateien sind JSON — menschenlesbar, Git-freundlich, diff-fähig. Designvariablen generieren CSS Custom Properties. Code-Export nach React + Tailwind oder HTML + CSS.

🖥️ Läuft überall

Web-App + native Desktop-Anwendung auf macOS, Windows und Linux — ein Rust-Kern, eine einzelne eigenständige Binärdatei, keine Browser-Engine. .op-Dateizuordnung — Doppelklick zum Öffnen.

⌨️ CLI — `op`

Steuern Sie das Design-Tool vom Terminal aus. op design, op insert — Batch-Design-DSL, Knotenmanipulation. Pipe-Eingabe von Dateien oder stdin. Funktioniert mit der Desktop-App oder dem Webserver.

🎯 Multiplattform-Code-Export

Export aus einer einzigen .op-Datei nach React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native. Design-Variablen werden zu CSS Custom Properties.

Installation

macOS (Homebrew):

brew tap zseven-w/openpencil
brew install --cask openpencil

Windows (Scoop):

scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil

Direkter Download für Linux / Windows: GitHub Releases — .exe (Windows), .AppImage / .deb (Linux)

Nix (Linux x86_64):

nix develop
nix run .                         # Desktop-App starten
nix build .#openpencil            # nativer Web-Host + CanvasKit-Web-Bundle
nix build .#op-cli                # die `op`-CLI
nix build .#prebuilt              # passendes Desktop-Archiv aus dem Upstream verwenden
nix build .#prebuilt-cli          # passendes CLI-Archiv aus dem Upstream verwenden
nix build .#web-server            # nativer GL-freier Webserver + Web-Bundle
nix build .#runtime-prebuilt      # vorgefertigte Desktop- + `op`-CLI-Laufzeit
nix build .#web-sdk-packages      # npm-Tarballs für die Web-SDKs
nix build .#appimage              # portable Desktop-AppImage

Der Flake verwendet die in rust-toolchain.toml fixierte Rust-Toolchain und wird derzeit für x86_64-linux veröffentlicht. Ein Debian-Paket wird vom Flake noch nicht erzeugt; verwenden Sie bei Bedarf eines .deb die Upstream-Release- Artefakte. Die prebuilt-Outputs verwenden die in nix/release-manifest.json fixierte Release-Version und die dort hinterlegten Hashes, unabhängig von der Workspace-Quellversion. Nach der Veröffentlichung eines Releases öffnet der Release-Workflow einen PR zur Aktualisierung dieses Manifests. Bis zu dessen Merge verwenden die vorgefertigten Outputs weiterhin das vorherige veröffentlichte Release; die aus Quellen gebauten Outputs verwenden immer den ausgecheckten Quellstand.

CLI (op):

brew install zseven-w/openpencil/op

Oder verwenden Sie das Installationsskript (macOS / Linux):

curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash

So erlauben Sie das neueste Pre-Release:

curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash

Windows PowerShell:

irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex

So erlauben Sie das neueste Pre-Release:

$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex

Klonen (mit Submodulen)

git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# Bereits geklont? Zuerst synchronisieren, damit veraltete Submodul-URLs Änderungen aus .gitmodules übernehmen:
git submodule sync --recursive && git submodule update --init --recursive

Unter vendor/ liegen drei Submodule. Sie sind alle öffentlich und werden über HTTPS abgerufen (kein SSH-Schlüssel erforderlich): jian (GPU-Skia-UI-Framework — Widgets/Rendering/Ereignisse), casement (winit-Fork) und agent (agent-rs — produktübergreifende Rust-Agent-Laufzeit, gemeinsam von OP und Zode genutzt). vendor/anthropic-agent-sdk wird direkt im Repository verwaltet und ist kein Submodul.

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-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+,`)

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 / 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_refine fü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_refine mit 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 und Google Gemini API
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-safe in 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.5 eingestellt 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

Unserem Discord beitreten — Fragen stellen, Designs teilen, Funktionen vorschlagen.

Anerkannte Community: LINUX DO

Geforkte Drittanbieterbibliotheken

Wir danken den Upstream-Maintainern, auf deren Arbeit OpenPencil aufbaut. Diese Kopien werden ausschließlich für OpenPencil-spezifische Integrationsanforderungen gepflegt:

casement — ein Fork von winit.
anthropic-agent-sdk — aus bartolli/anthropic-agent-sdk übernommen und als lokaler Fork gepflegt.

Für jedes Projekt gilt weiterhin die jeweilige Upstream-Lizenz.

32 KiB Raw Blame History Unescape Escape