{"id":47707336,"url":"https://github.com/zseven-w/openpencil","last_synced_at":"2026-04-26T13:01:22.522Z","repository":{"id":339198246,"uuid":"1159938129","full_name":"ZSeven-W/openpencil","owner":"ZSeven-W","description":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.","archived":false,"fork":false,"pushed_at":"2026-04-24T16:42:04.000Z","size":23517,"stargazers_count":2409,"open_issues_count":8,"forks_count":231,"subscribers_count":30,"default_branch":"main","last_synced_at":"2026-04-24T18:27:46.293Z","etag":null,"topics":["agent","agent-team","ai","claude","claude-code","codex","fimga","flutter","html","mcp","opencode","openpencil","pencil","react","react-native","svelte","ui","vibecoding","vibedesign","vue"],"latest_commit_sha":null,"homepage":"https://op.zseven.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZSeven-W.png","metadata":{"files":{"readme":"README.de.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["ZSeven-W"]}},"created_at":"2026-02-17T10:51:46.000Z","updated_at":"2026-04-24T16:04:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ZSeven-W/openpencil","commit_stats":null,"previous_names":["zseven-w/openpencil"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/ZSeven-W/openpencil","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZSeven-W%2Fopenpencil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZSeven-W%2Fopenpencil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZSeven-W%2Fopenpencil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZSeven-W%2Fopenpencil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZSeven-W","download_url":"https://codeload.github.com/ZSeven-W/openpencil/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZSeven-W%2Fopenpencil/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32297900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T09:34:17.070Z","status":"ssl_error","status_checked_at":"2026-04-26T09:34:00.993Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","agent-team","ai","claude","claude-code","codex","fimga","flutter","html","mcp","opencode","openpencil","pencil","react","react-native","svelte","ui","vibecoding","vibedesign","vue"],"created_at":"2026-04-02T18:01:52.918Z","updated_at":"2026-04-26T13:01:22.514Z","avatar_url":"https://github.com/ZSeven-W.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ZSeven-W"],"categories":["Prompts"],"sub_categories":["Usage"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./apps/desktop/build/icon.png\" alt=\"OpenPencil\" width=\"120\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eOpenPencil\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eDas weltweit erste KI-native Open-Source-Vektordesign-Werkzeug.\u003c/strong\u003e\u003cbr /\u003e\n  \u003csub\u003eParallele Agententeams \u0026bull; Design-as-Code \u0026bull; Eingebauter MCP-Server \u0026bull; Multi-Modell-Intelligenz\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./README.md\"\u003e\u003cb\u003eEnglish\u003c/b\u003e\u003c/a\u003e · \u003ca href=\"./README.zh.md\"\u003e简体中文\u003c/a\u003e · \u003ca href=\"./README.zh-TW.md\"\u003e繁體中文\u003c/a\u003e · \u003ca href=\"./README.ja.md\"\u003e日本語\u003c/a\u003e · \u003ca href=\"./README.ko.md\"\u003e한국어\u003c/a\u003e · \u003ca href=\"./README.fr.md\"\u003eFrançais\u003c/a\u003e · \u003ca href=\"./README.es.md\"\u003eEspañol\u003c/a\u003e · \u003ca href=\"./README.de.md\"\u003eDeutsch\u003c/a\u003e · \u003ca href=\"./README.pt.md\"\u003ePortuguês\u003c/a\u003e · \u003ca href=\"./README.ru.md\"\u003eРусский\u003c/a\u003e · \u003ca href=\"./README.hi.md\"\u003eहिन्दी\u003c/a\u003e · \u003ca href=\"./README.tr.md\"\u003eTürkçe\u003c/a\u003e · \u003ca href=\"./README.th.md\"\u003eไทย\u003c/a\u003e · \u003ca href=\"./README.vi.md\"\u003eTiếng Việt\u003c/a\u003e · \u003ca href=\"./README.id.md\"\u003eBahasa Indonesia\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/ZSeven-W/openpencil/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/ZSeven-W/openpencil?style=flat\u0026color=cfb537\" alt=\"Stars\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ZSeven-W/openpencil/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/ZSeven-W/openpencil?color=64748b\" alt=\"License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ZSeven-W/openpencil/actions/workflows/ci.yml\"\u003e\u003cimg src=\"https://img.shields.io/github/actions/workflow/status/ZSeven-W/openpencil/ci.yml?branch=main\u0026label=CI\" alt=\"CI\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://discord.gg/h9Fmyy6pVh\"\u003e\u003cimg src=\"https://img.shields.io/discord/1476517942949580952?label=Discord\u0026logo=discord\u0026logoColor=white\u0026color=5865F2\" alt=\"Discord\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://oss.ioa.tech/zseven/openpencil/a46e24733239ce24de36702342201033.mp4\"\u003e\n    \u003cimg src=\"./screenshot/op-cover.png\" alt=\"OpenPencil — Klicken, um das Demo-Video anzusehen\" width=\"100%\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003csub\u003eAuf das Bild klicken, um das Demo-Video anzusehen\u003c/sub\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003e **Hinweis:** Es gibt ein weiteres Open-Source-Projekt mit demselben Namen — [OpenPencil](https://github.com/open-pencil/open-pencil), das sich auf Figma-kompatibles visuelles Design mit Echtzeit-Zusammenarbeit konzentriert. Dieses Projekt konzentriert sich auf AI-native Design-to-Code-Workflows.\n\n## Warum OpenPencil\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 🎨 Prompt → Canvas\n\nBeschreiben 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.\n\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 🤖 Parallele Agententeams\n\nDer Orchestrierer zerlegt komplexe Seiten in räumliche Teilaufgaben. Mehrere KI-Agenten arbeiten gleichzeitig an verschiedenen Bereichen — Hero, Features, Footer — alle parallel streamend.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 🧠 Multi-Modell-Intelligenz\n\nPasst 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.\n\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 🔌 MCP-Server\n\nEin-Klick-Installation in Claude Code, Codex, Gemini, OpenCode, Kiro oder Copilot CLIs. Designen Sie aus Ihrem Terminal — `.op`-Dateien über jeden MCP-kompatiblen Agenten lesen, erstellen und bearbeiten.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 📦 Design-as-Code\n\n`.op`-Dateien sind JSON — menschenlesbar, Git-freundlich, diff-fähig. Designvariablen generieren CSS Custom Properties. Code-Export nach React + Tailwind oder HTML + CSS.\n\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 🖥️ Läuft überall\n\nWeb-App + native Desktop-Anwendung auf macOS, Windows und Linux über Electron. Auto-Updates über GitHub Releases. `.op`-Dateizuordnung — Doppelklick zum Öffnen.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd width=\"50%\"\u003e\n\n### ⌨️ CLI — `op`\n\nSteuern 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.\n\n\u003c/td\u003e\n\u003ctd width=\"50%\"\u003e\n\n### 🎯 Multiplattform-Code-Export\n\nExport 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.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Schnellstart\n\n```bash\n# Abhängigkeiten installieren\nbun install\n\n# Entwicklungsserver auf http://localhost:3000 starten\nbun --bun run dev\n```\n\nOder als Desktop-App ausführen:\n\n```bash\nbun run electron:dev\n```\n\n\u003e **Voraussetzungen:** [Bun](https://bun.sh/) \u003e= 1.0 und [Node.js](https://nodejs.org/) \u003e= 18\n\n### Docker\n\nMehrere Image-Varianten sind verfügbar — wählen Sie die passende für Ihre Anforderungen:\n\n| Image                        | Größe   | Enthält              |\n| ---------------------------- | ------- | -------------------- |\n| `openpencil:latest`          | ~226 MB | Nur Web-App          |\n| `openpencil-claude:latest`   | —       | + Claude Code CLI    |\n| `openpencil-codex:latest`    | —       | + Codex CLI          |\n| `openpencil-opencode:latest` | —       | + OpenCode CLI       |\n| `openpencil-copilot:latest`  | —       | + GitHub Copilot CLI |\n| `openpencil-gemini:latest`   | —       | + Gemini CLI         |\n| `openpencil-full:latest`     | ~1 GB   | Alle CLI-Tools       |\n\n**Ausführen (nur Web):**\n\n```bash\ndocker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest\n```\n\n**Mit KI-CLI ausführen (z.B. Claude Code):**\n\nDer KI-Chat basiert auf Claude CLI OAuth-Login. Verwenden Sie ein Docker-Volume, um die Login-Sitzung beizubehalten:\n\n```bash\n# Schritt 1 — Login (einmalig)\ndocker volume create openpencil-claude-auth\ndocker run -it --rm \\\n  -v openpencil-claude-auth:/root/.claude \\\n  ghcr.io/zseven-w/openpencil-claude:latest claude login\n\n# Schritt 2 — Starten\ndocker run -d -p 3000:3000 \\\n  -v openpencil-claude-auth:/root/.claude \\\n  ghcr.io/zseven-w/openpencil-claude:latest\n```\n\n**Lokal bauen:**\n\n```bash\n# Basis (nur Web)\ndocker build --target base -t openpencil .\n\n# Mit einem bestimmten CLI\ndocker build --target with-claude -t openpencil-claude .\n\n# Vollständig (alle CLIs)\ndocker build --target full -t openpencil-full .\n```\n\n## KI-natives Design\n\n**Vom Prompt zur UI**\n\n- **Text-zu-Design** — eine Seite beschreiben und sie wird in Echtzeit mit Streaming-Animation auf der Canvas generiert\n- **Orchestrierer** — zerlegt komplexe Seiten in räumliche Teilaufgaben zur parallelen Generierung\n- **Design-Modifikation** — Elemente auswählen und Änderungen in natürlicher Sprache beschreiben\n- **Bildeingabe** — Screenshots oder Mockups als Referenz für referenzbasiertes Design anhängen\n\n**Multi-Agenten-Unterstützung**\n\n| Agent                        | Einrichtung                                                                                     |\n| ---------------------------- | ----------------------------------------------------------------------------------------------- |\n| **Integriert (9+ Anbieter)** | Auswahl aus Anbieter-Presets mit Region-Switcher — Anthropic, OpenAI, Google, DeepSeek und mehr |\n| **Claude Code**              | Keine Konfiguration — verwendet Claude Agent SDK mit lokalem OAuth                              |\n| **Codex CLI**                | In den Agenteneinstellungen verbinden (`Cmd+,`)                                                 |\n| **OpenCode**                 | In den Agenteneinstellungen verbinden (`Cmd+,`)                                                 |\n| **GitHub Copilot**           | `copilot login` dann in den Agenteneinstellungen verbinden (`Cmd+,`)                            |\n| **Gemini CLI**               | In den Agenteneinstellungen verbinden (`Cmd+,`)                                                 |\n\n**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.\n\n**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.\n\n**MCP-Server**\n\n- Eingebauter MCP-Server — Ein-Klick-Installation in Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs\n- Automatische Node.js-Erkennung — falls nicht installiert, automatischer Fallback auf HTTP-Transport und automatischer Start des MCP-HTTP-Servers\n- Design-Automatisierung vom Terminal aus: `.op`-Dateien über jeden MCP-kompatiblen Agenten lesen, erstellen und bearbeiten\n- **Mehrstufiger Design-Workflow** — `design_skeleton` → `design_content` → `design_refine` für hochwertigere mehrteilige Designs\n- **Segmentierter Prompt-Abruf** — laden Sie nur das benötigte Design-Wissen (Schema, Layout, Rollen, Icons, Planung usw.)\n- Mehrseitige Unterstützung — Seiten erstellen, umbenennen, neu ordnen und duplizieren über MCP-Tools\n\n**Codegenerierung**\n\n- React + Tailwind CSS, HTML + CSS, CSS Variables\n- Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native\n\n## CLI — `op`\n\nGlobal installieren und das Design-Tool vom Terminal aus steuern:\n\n```bash\nnpm install -g @zseven-w/openpencil\n```\n\n```bash\nop start                     # Desktop-App starten\nop design @landing.txt       # Batch-Design aus Datei\nop insert '{\"type\":\"RECT\"}'  # Knoten einfügen\nop import:figma design.fig   # Figma-Datei importieren\ncat design.dsl | op design - # Pipe von stdin\n```\n\nUnterstützt drei Eingabemethoden: Inline-String, `@filepath` (aus Datei lesen) oder `-` (von stdin lesen). Funktioniert mit der Desktop-App oder dem Web-Entwicklungsserver. Siehe [CLI README](./apps/cli/README.md) für die vollständige Befehlsreferenz.\n\n**LLM-Skill** — Installieren Sie das [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill)-Plugin, um KI-Agenten (Claude Code, Cursor, Codex, Gemini CLI usw.) das Designen mit `op` beizubringen.\n\n## Funktionen\n\n**Canvas und Zeichnen**\n\n- Unendliche Canvas mit Pan, Zoom, intelligenten Ausrichtungshilfslinien und Einrasten\n- Rechteck, Ellipse, Linie, Polygon, Stift (Bezier), Frame, Text\n- Boolesche Operationen — Vereinigung, Subtraktion, Schnittmenge mit kontextbezogener Werkzeugleiste\n- Icon-Auswahl (Iconify) und Bildimport (PNG/JPEG/SVG/WebP/GIF)\n- Auto-Layout — vertikal/horizontal mit Gap, Padding, Justify, Align\n- Mehrseitige Dokumente mit Tab-Navigation\n\n**Designsystem**\n\n- Designvariablen — Farb-, Zahl- und Text-Tokens mit `$variable`-Referenzen\n- Multi-Theme-Unterstützung — mehrere Achsen, jeweils mit Varianten (Hell/Dunkel, Kompakt/Komfortabel)\n- Komponentensystem — wiederverwendbare Komponenten mit Instanzen und Überschreibungen\n- CSS-Synchronisierung — automatisch generierte benutzerdefinierte Eigenschaften, `var(--name)` in der Code-Ausgabe\n- Wiederverwendbare UIKits — Import/Export von Komponenten-Kits aus `.pen`-Dateien\n\n**KI \u0026 Agenten**\n\n- Prompt-zu-Canvas mit Streaming-Generierung und orchestrator-gesteuerter räumlicher Zerlegung\n- Parallele Agententeams — mehrere Designer arbeiten parallel an verschiedenen Abschnitten, mit Canvas-Indikatoren pro Mitglied\n- Mehrstufiger Workflow — `design_skeleton` → `design_content` → `design_refine` mit fokussierten Prompts pro Phase\n- Style Guides — 50+ eingebaute Stile (glassmorphism, brutalist, retro usw.) mit tag-basiertem Fuzzy-Matching, eingebunden in Planung und Generierung\n- Multi-Modell-Fähigkeitsprofile — passt Denkmodus, Aufwand und Promptform automatisch an die Modellstufe an\n- Integrierte Agent-Laufzeit (`agent-native`, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini-Anbieter\n- Anthropic-Format-Passthrough für chinesische LLM-Anbieter — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans\n\n**Git-Integration**\n\n- Clone-Assistent mit SSH-/HTTPS-Authentifizierung und SSH-Schlüsselverwaltung\n- Branch-Auswahl — Erstellen, Wechseln, Löschen, Mergen, alles im Git-Panel\n- Pull-/Push-Kaskaden mit Auth-Wiederholung und Non-Fast-Forward-Handhabung\n- Ordnermodus-Dreiwege-Merge mit Disk-basierter `MERGE_HEAD`-Statusverfolgung\n- Konfliktpanel mit Dreiwege-Karten pro Knoten/Feld, Inline-JSON-Editor, Bulk-Aktionen und Inline-Diff-Block\n- Remote-Einstellungen und SSH-Schlüssel-UI; 15-Sprachen-i18n für die gesamte Git-Oberfläche\n\n**Export**\n\n- Canvas-Export — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`)\n- Code-Export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native\n- Inkrementelle MCP-Codegen-Pipeline — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean`\n\n**Figma-Import**\n\n- `.fig`-Dateien importieren mit erhaltenem Layout, Füllungen, Konturen, Effekten, Text, Bildern und Vektoren\n\n**Desktop-App**\n\n- Natives macOS, Windows und Linux über Electron\n- `.op`-Dateizuordnung — Doppelklick zum Öffnen, Einzelinstanzsperre\n- Automatische Aktualisierung über GitHub Releases\n- Natives Anwendungsmenü mit „Speichern unter“, „Zuletzt verwendete öffnen“ und einem Dialog zu ungespeicherten Änderungen beim Schließen\n- Persistenz der zuletzt verwendeten Dateien\n\n## Technologie-Stack\n\n|                 |                                                                                  |\n| --------------- | -------------------------------------------------------------------------------- |\n| **Frontend**    | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next                |\n| **Canvas**      | CanvasKit/Skia (WASM, GPU-beschleunigt)                                          |\n| **State**       | Zustand v5                                                                       |\n| **Server**      | Nitro                                                                            |\n| **Desktop**     | Electron 35                                                                      |\n| **CLI**         | `op` — Terminal-Steuerung, Batch-Design-DSL                                      |\n| **KI**          | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |\n| **Laufzeit**    | Bun · Vite 7                                                                     |\n| **Dateiformat** | `.op` — JSON-basiert, menschenlesbar, Git-freundlich                             |\n\n## Projektstruktur\n\n```text\nopenpencil/\n├── apps/\n│   ├── web/                 TanStack Start Web-App\n│   │   ├── src/\n│   │   │   ├── canvas/      CanvasKit/Skia-Engine — Zeichnen, Sync, Layout\n│   │   │   ├── components/  React-UI — Editor, Panels, gemeinsame Dialoge, Icons\n│   │   │   ├── services/ai/ KI-Chat, Orchestrierer, Designgenerierung, Streaming\n│   │   │   ├── stores/      Zustand — Canvas, Dokument, Seiten, Verlauf, KI\n│   │   │   ├── mcp/         MCP-Server-Tools für externe CLI-Integration\n│   │   │   ├── hooks/       Tastaturkürzel, Datei-Drop, Figma-Paste\n│   │   │   └── uikit/       Wiederverwendbares Komponenten-Kit-System\n│   │   └── server/\n│   │       ├── api/ai/      Nitro-API — Streaming-Chat, Generierung, Validierung\n│   │       └── utils/       Claude CLI, OpenCode, Codex, Copilot-Wrapper\n│   ├── desktop/             Electron-Desktop-App\n│   │   ├── main.ts          Fenster, Nitro-Fork, natives Menü, Auto-Updater\n│   │   ├── ipc-handlers.ts  Native Dateidialoge, Theme-Sync, Einstellungen-IPC\n│   │   └── preload.ts       IPC-Brücke\n│   └── cli/                 CLI-Tool — `op`-Befehl\n│       ├── src/commands/    Design-, Dokument-, Export-, Import-, Knoten-, Seiten-, Variablen-Befehle\n│       ├── connection.ts    WebSocket-Verbindung zur laufenden App\n│       └── launcher.ts      Automatische Erkennung und Start der Desktop-App oder des Webservers\n├── packages/\n│   ├── pen-types/           Typdefinitionen für das PenDocument-Modell\n│   ├── pen-core/            Dokumentbaum-Operationen, Layout-Engine, Variablen\n│   ├── pen-codegen/         Codegeneratoren (React, HTML, Vue, Flutter, ...)\n│   ├── pen-figma/           Figma-.fig-Datei-Parser und -Konverter\n│   ├── pen-renderer/        Eigenständiger CanvasKit/Skia-Renderer\n│   ├── pen-sdk/             Umbrella-SDK (re-exportiert alle Pakete)\n│   ├── pen-ai-skills/       KI-Prompt-Skill-Engine (phasengesteuertes Prompt-Laden)\n│   └── agent/               KI-Agenten-SDK (Vercel AI SDK, Multi-Anbieter, Agententeams)\n└── .githooks/               Pre-Commit-Versionssynchronisierung vom Branch-Namen\n```\n\n## Tastaturkürzel\n\n| Taste       | Aktion                 |     | Taste         | Aktion                                     |\n| ----------- | ---------------------- | --- | ------------- | ------------------------------------------ |\n| `V`         | Auswählen              |     | `Cmd+S`       | Speichern                                  |\n| `R`         | Rechteck               |     | `Cmd+Z`       | Rückgängig                                 |\n| `O`         | Ellipse                |     | `Cmd+Shift+Z` | Wiederholen                                |\n| `L`         | Linie                  |     | `Cmd+C/X/V/D` | Kopieren/Ausschneiden/Einfügen/Duplizieren |\n| `T`         | Text                   |     | `Cmd+G`       | Gruppieren                                 |\n| `F`         | Frame                  |     | `Cmd+Shift+G` | Gruppierung aufheben                       |\n| `P`         | Stiftwerkzeug          |     | `Cmd+Shift+P` | Export (PNG/JPG/WEBP/PDF)                  |\n| `H`         | Hand (Pan)             |     | `Cmd+Shift+C` | Code-Panel                                 |\n| `Del`       | Löschen                |     | `Cmd+Shift+V` | Variablen-Panel                            |\n| `[ / ]`     | Reihenfolge ändern     |     | `Cmd+J`       | KI-Chat                                    |\n| Pfeiltasten | 1px verschieben        |     | `Cmd+,`       | Agenteneinstellungen                       |\n| `Cmd+Alt+U` | Boolesche Vereinigung  |     | `Cmd+Alt+S`   | Boolesche Subtraktion                      |\n| `Cmd+Alt+I` | Boolesche Schnittmenge |     | `Cmd+Shift+S` | Speichern unter                            |\n\n## Skripte\n\n```bash\nbun --bun run dev          # Entwicklungsserver (Port 3000)\nbun --bun run build        # Produktions-Build\nbun --bun run test         # Tests ausführen (Vitest)\nnpx tsc --noEmit           # Typprüfung\nbun run bump \u003cversion\u003e     # Version über alle package.json synchronisieren\nbun run electron:dev       # Electron-Entwicklung\nbun run electron:build     # Electron-Paketierung\nbun run cli:dev            # CLI aus Quellcode ausführen\nbun run cli:compile        # CLI nach dist kompilieren\n```\n\n## Mitwirken\n\nBeiträge sind willkommen! Siehe [CLAUDE.md](./CLAUDE.md) für Architekturdetails und Code-Stil.\n\n1. Forken und klonen\n2. Versionssynchronisierung einrichten: `git config core.hooksPath .githooks`\n3. Branch erstellen: `git checkout -b feat/my-feature`\n4. Prüfungen ausführen: `npx tsc --noEmit \u0026\u0026 bun --bun run test`\n5. Mit [Conventional Commits](https://www.conventionalcommits.org/) committen: `feat(canvas): add rotation snapping`\n6. Pull Request gegen `main` öffnen\n\n## Roadmap\n\n- [x] Designvariablen \u0026 Tokens mit CSS-Synchronisierung\n- [x] Komponentensystem (Instanzen \u0026 Überschreibungen)\n- [x] KI-Designgenerierung mit Orchestrierer\n- [x] MCP-Server-Integration mit mehrstufigem Design-Workflow\n- [x] Mehrseitige Unterstützung\n- [x] Figma-`.fig`-Import\n- [x] Boolesche Operationen (Vereinigung, Subtraktion, Schnittmenge)\n- [x] Multi-Modell-Fähigkeitsprofile\n- [x] Monorepo-Umstrukturierung mit wiederverwendbaren Paketen\n- [x] CLI-Tool (`op`) für Terminal-Steuerung\n- [x] Integriertes KI-Agenten-SDK mit Multi-Anbieter-Unterstützung\n- [x] i18n — 15 Sprachen\n- [x] Git-Integration (Klonen, Branches, Push/Pull, Ordnermodus-Dreiwege-Merge)\n- [x] Canvas-Rasterexport (PNG / JPEG / WEBP / PDF)\n- [ ] Kollaboratives Bearbeiten\n- [ ] Plugin-System\n\n## Mitwirkende\n\n\u003ca href=\"https://github.com/ZSeven-W/openpencil/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=ZSeven-W/openpencil\" alt=\"Contributors\" /\u003e\n\u003c/a\u003e\n\n## Sponsoren\n\nOpenPencil ist kostenlos und Open Source. Die Entwicklung wird von Menschen finanziert, die es nützlich finden — danke, dass ihr die Leinwand offen haltet.\n\n\u003ca href=\"https://github.com/mrqyun\" title=\"MrQyun\"\u003e\n  \u003cimg src=\"https://wsrv.nl/?url=github.com/mrqyun.png\u0026w=128\u0026h=128\u0026mask=circle\u0026maxage=7d\" width=\"64\" height=\"64\" alt=\"MrQyun\" /\u003e\n\u003c/a\u003e\n\nDanke an **[MrQyun](https://github.com/mrqyun)** — soll dein Name auch hier stehen? **[Sponsor werden →](https://github.com/sponsors/ZSeven-W)**\n\n## Community\n\n\u003ca href=\"https://discord.gg/h9Fmyy6pVh\"\u003e\n  \u003cimg src=\"./apps/web/public/logo-discord.svg\" alt=\"Discord\" width=\"16\" /\u003e\n  \u003cstrong\u003e Unserem Discord beitreten\u003c/strong\u003e\n\u003c/a\u003e\n— Fragen stellen, Designs teilen, Funktionen vorschlagen.\n\n## Star History\n\n\u003ca href=\"https://star-history.com/#ZSeven-W/openpencil\u0026Date\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=ZSeven-W/openpencil\u0026type=Date\u0026theme=dark\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=ZSeven-W/openpencil\u0026type=Date\" /\u003e\n   \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=ZSeven-W/openpencil\u0026type=Date\" width=\"100%\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n## Lizenz\n\n[MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzseven-w%2Fopenpencil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzseven-w%2Fopenpencil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzseven-w%2Fopenpencil/lists"}