OpenPencil

KI-natives Open-Source-Designwerkzeug. Design-as-Code.
Vom Prompt zur Canvas-UI. Multi-Agenten-Orchestrierung. Eingebauter MCP-Server. Codegenerierung.

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

Schnellstart · KI · Funktionen · Discord · Mitwirken

_{Auf das Bild klicken, um das Demo-Video anzusehen}

## Schnellstart ```bash # Abhängigkeiten installieren bun install # Entwicklungsserver auf http://localhost:3000 starten bun --bun run dev ``` Oder als Desktop-App ausführen: ```bash bun run electron:dev ``` > **Voraussetzungen:** [Bun](https://bun.sh/) >= 1.0 und [Node.js](https://nodejs.org/) >= 18 ## KI-natives Design OpenPencil wurde von Grund auf mit KI im Kern aufgebaut — nicht als Plugin, sondern als zentraler Arbeitsablauf. **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 | | --- | --- | | **Claude Code** | Keine Konfiguration — verwendet Claude Agent SDK mit lokalem OAuth | | **Codex CLI** | In den Agenteneinstellungen verbinden (`Cmd+,`) | | **OpenCode** | In den Agenteneinstellungen verbinden (`Cmd+,`) | **MCP-Server** - Eingebauter MCP-Server — Ein-Klick-Installation in Claude Code / Codex / Gemini / OpenCode / Kiro CLIs - Design-Automatisierung vom Terminal aus: `.op`-Dateien über jeden MCP-kompatiblen Agenten lesen, erstellen und bearbeiten **Codegenerierung** - React + Tailwind CSS - HTML + CSS - CSS Variables aus Design-Tokens ## 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 **Figma-Import** - `.fig`-Dateien importieren mit erhaltenem Layout, Füllungen, Konturen, Effekten, Text, Bildern und Vektoren **Desktop-App** - Natives macOS, Windows und Linux über Electron - Automatische Aktualisierung über GitHub Releases - Natives Anwendungsmenü und Dateidialoge ## Technologie-Stack | | | | --- | --- | | **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui | | **Canvas** | Fabric.js v7 | | **Zustand** | Zustand v5 | | **Server** | Nitro | | **Desktop** | Electron 35 | | **KI** | Anthropic SDK · Claude Agent SDK · OpenCode SDK | | **Laufzeit** | Bun · Vite 7 | | **Dateiformat** | `.op` — JSON-basiert, menschenlesbar, Git-freundlich | ## Projektstruktur ```text src/ canvas/ Fabric.js-Engine — Zeichnen, Synchronisierung, Layout, Hilfslinien, Stiftwerkzeug components/ React-UI — Editor, Panels, gemeinsame Dialoge, Icons services/ai/ KI-Chat, Orchestrierer, Designgenerierung, Streaming services/figma/ Figma-.fig-Binär-Importpipeline services/codegen React+Tailwind- und HTML+CSS-Codegeneratoren stores/ Zustand — Canvas, Dokument, Seiten, Verlauf, KI, Einstellungen variables/ Design-Token-Auflösung und Referenzverwaltung mcp/ MCP-Server-Tools für externe CLI-Integration uikit/ Wiederverwendbares Komponenten-Kit-System server/ api/ai/ Nitro-API — Streaming-Chat, Generierung, Validierung utils/ Claude CLI, OpenCode, Codex-Client-Wrapper electron/ main.ts Fenster, Nitro-Fork, natives Menü, Auto-Updater preload.ts IPC-Brücke ``` ## 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+E` | Exportieren | | `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 | | | | ## Skripte ```bash bun --bun run dev # Entwicklungsserver (Port 3000) bun --bun run build # Produktions-Build bun --bun run test # Tests ausführen (Vitest) npx tsc --noEmit # Typprüfung bun run electron:dev # Electron-Entwicklung bun run electron:build # Electron-Paketierung ``` ## Mitwirken Beiträge sind willkommen! Siehe [CLAUDE.md](./CLAUDE.md) für Architekturdetails und Code-Stil. 1. Forken und klonen 2. Branch erstellen: `git checkout -b feat/my-feature` 3. Prüfungen ausführen: `npx tsc --noEmit && bun --bun run test` 4. Mit [Conventional Commits](https://www.conventionalcommits.org/) committen: `feat(canvas): add rotation snapping` 5. Pull Request gegen `main` öffnen ## Roadmap - [x] Designvariablen & Tokens mit CSS-Synchronisierung - [x] Komponentensystem (Instanzen & Überschreibungen) - [x] KI-Designgenerierung mit Orchestrierer - [x] MCP-Server-Integration - [x] Mehrseitige Unterstützung - [x] Figma-`.fig`-Import - [x] Boolesche Operationen (Vereinigung, Subtraktion, Schnittmenge) - [ ] Kollaboratives Bearbeiten - [ ] Plugin-System ## Mitwirkende

## Community