|
### 🖼️ Exakte Multi-Frame-Vorschauen
Der installierte Headless-Exporter von OpenPencil rendert designgetreue Vorschauen: den ersten Frame der obersten Ebene als großes, replaysicheres PNG sowie eine horizontal scrollbare Miniaturbildleiste mit Auswählen per Klick und Zurück-/Weiter-Navigation für Dokumente mit mehreren Frames.
|
### 🗺️ Interaktive Leinwand
„Interaktive Leinwand öffnen“ lädt die schreibgeschützte OpenPencil-Web-SDK bei Bedarf nach und bietet Schwenken, Zoomen und Einpassen – beliebige Seiten, verschachtelte Knoten oder inaktive Seiten lassen sich untersuchen, ohne die Unterhaltung zu verlassen.
|
|
### ✏️ Verwalteter Editor
Mit `editable: true` öffnet die Bearbeiten-Aktion den verwalteten OpenPencil-Editor – Auswahl, Ebenen, Eigenschaften, Zeichenwerkzeuge, Rückgängig/Wiederholen und explizite Speichersemantik – in einem in der Größe veränderbaren Arbeitsbereich auf der rechten Seite mit Vollbild-Option.
|
### 🤖 Agent-native Design-Tools
Fünf direkte Canvas-Tools plus sechs `openpencil_pipeline_*`-Tools ermöglichen es dem Agenten, über verwaltete OpenPencil-Laufzeiten eine echte Leinwand zu erstellen, zu prüfen, zu verfeinern, zu veröffentlichen, zu ändern und zu lesen.
|
|
### 🔐 Durch Capabilities geschützte Grants
Bild- und Dokument-Grants sind signierte, an Hashes gebundene Capabilities. Browser-Metadaten legen niemals einen beliebigen Host-Pfad offen, und signierte Vorschau-/Editor-Capabilities gelangen nie in das kanonische Tool-Ergebnis oder den Modellkontext.
|
### ⚡ Transaktionale Sicherheit
Ein Dokument der vollständigen Pipeline bleibt ein privater, unveröffentlichter Entwurf, bis alle nativen und DSH-Qualitäts-Gates bestanden sind. Die Veröffentlichung überschreibt keinen vorhandenen Pfad; Abbruch oder fehlerhafte Batches hinterlassen kein leeres Ziel.
|
|
### 🌍 Übernimmt das Look & Feel von DSH
Die Tool-Karte und der verwaltete Editor übernehmen das Chinesisch-/Englisch-Locale und das Hell-/Dunkel-Design von DSH, ohne die Bearbeitungssitzung neu zu laden.
|
### 🎯 Ein vollständiger Workflow
„Anforderung → privater Entwurf → semantische Batches → Live-Vorschauen für den Benutzer → deterministische Struktur-/Layout-/Qualitätsprüfung → atomare Veröffentlichung mit Integritätsnachweis des finalen PNGs“ – ein vollständiger Ablauf in DSH.
|
## Installation in DSH
DSH ist ein eigenes Paket. Installiere es einmalig, falls noch nicht vorhanden:
```sh
npm install -g @deepseek-ai/dsh@latest
```
Füge dann das Plugin einem Profil hinzu und starte die Web-App:
```sh
dsh plugin --profile web add @zseven-w/dsh-openpencil@next
dsh web
```
Für die lokale Entwicklung bauen Sie diesen Checkout, verlinken seinen absoluten Pfad mit dem Web-Profil und starten DSH anschließend vollständig neu:
```sh
pnpm run build
dsh plugin --profile web add link:/absolute/path/to/dsh-openpencil
dsh web
```
Die `link:`-Abhängigkeit macht spätere Neubauten direkt aus diesem Checkout sichtbar. Nach dem Ersetzen der Profilabhängigkeit muss DSH jedoch vollständig neu gestartet werden, da das mitgelieferte Web-Profil Host-Bundles standardmäßig nicht per Hot Reload aktualisiert.
Lieber ohne globale DSH-Installation? Führe dieselben zwei Schritte über `pnpm dlx` aus:
```sh
pnpm dlx --package=@deepseek-ai/dsh@latest dsh plugin --profile web add @zseven-w/dsh-openpencil@next
pnpm dlx --package=@deepseek-ai/dsh@latest dsh web
```
> Das OpenPencil-Plugin ist öffentlich und benötigt kein npm-Token. Wenn die DSH-Prerelease selbst eine Registry-Authentifizierung erfordert, bewahren Sie diese Anmeldedaten in einer npm-Konfiguration auf Benutzer- oder temporärer Ebene außerhalb des Checkouts auf. Dieses Repository enthält bewusst keine Registry-Anmeldedaten.
## Design-Tools
Die optionale Auswahl folgt `openpencil_style_plan` → `openpencil_style_confirm` → `openpencil_pipeline_begin` mit ursprünglichem Brief und `style_selection`. Katalog und exakte Auswahl benötigen keine Empfehlung; der Anbieter ist standardmäßig deaktiviert. Diese Übergabe unterstützt script, nicht app-agent oder Commerce. Normale app-agent-Generierung bleibt verfügbar.
| Tool | Funktion |
| --- | --- |
| `openpencil_new` | Kompatibler Schnellpfad für einfache Aufgaben: führt ein transaktionales QuickJS-`batch_design`-Skript aus, veröffentlicht nur bei noch nicht vorhandenem Ziel und gibt eine bearbeitbare Darstellung zurück. Für produktionsreife Designs ist die vollständige Pipeline vorzuziehen. |
| `openpencil_pipeline_begin` | Startet einen sitzungseigenen privaten Entwurf, legt intern dessen einzigen Root an, gibt den kompakten laufzeitgleichen Canvas-/Build-Vertrag zurück und öffnet denselben Live-Entwurf sofort in der Seitenleiste; die Ziel-`.op` bleibt unveröffentlicht. |
| `openpencil_pipeline_context` | Lädt nur ein gezieltes Detail zu Richtlinie, Stil, Theme oder UI-Kit, das im Begin-Vertrag tatsächlich fehlt; dies ist keine feste Startphase. |
| `openpencil_pipeline_batch` | Führt höchstens zwei direkte native `I(...)`-/`K(...)`-Generierungsskripte aus: zuerst den von `begin.next` begrenzten ersten sichtbaren Viewport, dann alle restlichen Bereiche in einem zweiten und letzten Batch. Jede erfolgreiche Transaktion versucht eine exakte PNG-Vorschau für den Benutzer. |
| `openpencil_pipeline_inspect` | Dient nur der manuellen Diagnose, wenn der Benutzer sie ausdrücklich verlangt; die normale Generierung verwendet es weder als Vorschau noch als visuelle Modellprüfung. |
| `openpencil_pipeline_finish` | Finalisiert und validiert den Entwurf in einem gesunden Aufruf, rendert automatisch die exakte finale Root-PNG-Vorschau und veröffentlicht atomar mit `createIfAbsent`. Genau eine reine `U(...)`-Reparatur und ein letzter Finish-Aufruf sind nur bei `needs_correction`, `canContinue: true`, einem vollständigen nicht leeren `repairTargets` und `omitted: 0` erlaubt; jedes andere nicht veröffentlichte Ergebnis ist terminal. |
| `openpencil_pipeline_abort` | Verwirft den unveröffentlichten Entwurf, ohne die Zieldatei anzulegen. |
| `openpencil_create` | Wendet ein transaktionales `batch_design`-Programm an, um Knoten auf einer vorhandenen Live-Leinwand zu erzeugen oder umzustrukturieren. |
| `openpencil_edit` | Modifiziert einen expliziten Knoten oder den einzelnen vom Benutzer ausgewählten Knoten. |
| `openpencil_render` | Erstellt einen unveränderlichen, inhaltsadressierten `.op`-Snapshot und rendert jeden Frame der obersten Ebene auf der aktiven Seite – optional mit `scale` und `editable`. |
| `openpencil_selection` | Liest die exakt auf der Leinwand des Live-Editors ausgewählten Knoten. |
## Agent-Design-Workflow
Rufen Sie für eine gewöhnliche kurze Anforderung sofort `openpencil_pipeline_begin` auf und folgen Sie dem festen Schnellpfad: der von `begin.next` begrenzte erste direkte JS-Batch → ein zweiter und letzter direkter JS-Batch mit allen verbleibenden Bereichen → ein `openpencil_pipeline_finish`. Begin legt den einzigen Root an und öffnet die private Live-Leinwand sofort in der Seitenleiste; der angeforderte Arbeitsbereichspfad bleibt bis zur atomaren Veröffentlichung abwesend. Nach jedem erfolgreichen Begin- oder Batch-Aufruf folgt der nächste erforderliche Aufruf sofort und ohne Erläuterung, Planung, Vergleich, Inspektion oder fremden Tool-Aufruf. Standardmäßig verwendet das gesamte Design genau ein Bild; jeder Hero-/Produkt-/Art-/Media-Frame hat genau ein primäres Visual, niemals zugleich ein Bild und einen Platzhalter-Icon.
Nach jedem erfolgreich eingespielten Batch versucht das Tool lediglich, dem Benutzer eine exakte PNG-Vorschau anzuzeigen. Sobald der Aufruf zurückkehrt, folgen Sie sofort seinem `next`; warten Sie nicht auf eine visuelle Selbstprüfung des Modells. Meldet `next` `previewUnavailable`, ist das Skript bereits auf der Live-Leinwand festgeschrieben: den Batch nicht erneut ausführen und weder `openpencil_pipeline_inspect` noch `read_image` aufrufen. `openpencil_pipeline_inspect` bleibt ausschließlich einer vom Benutzer ausdrücklich verlangten Diagnose vorbehalten.
Finish führt die deterministische native Finalisierung, Lint-, Kontrast- und Layoutprüfung sowie die harten DSH-Qualitäts-Gates aus. Ein gesunder Aufruf rendert das exakte finale Root-PNG und veröffentlicht im selben Schritt. Eine Reparatur ist nur erlaubt, wenn das Ergebnis zugleich `stage: "needs_correction"`, `canContinue: true`, ein vollständiges nicht leeres `repairTargets` mit `omitted: 0` und für jedes Ziel `operation: "U"`, eine exakte nicht leere `nodeId` sowie einen nicht leeren `patch` enthält. Alle Ziele werden zusammen in genau einem reinen `U(...)`-Batch angewendet; danach folgt ohne Erläuterung genau ein letzter Finish-Aufruf. Jeder andere nicht veröffentlichte Rückgabewert, ein Fehler oder `canContinue: false` ist terminal: einmal melden und nicht erneut versuchen, inspizieren, Bild/Kontext lesen, abbrechen oder einen Ersatzentwurf starten. Bei `published: true` sind finales PNG und Live-Editor bereits angehängt: Ergebnis zurückgeben und sofort beenden. Ein fehlgeschlagenes Gate oder `openpencil_pipeline_abort` lässt das Ziel abwesend. Die dokumentgebundene Bearbeitungsberechtigung öffnet die Seitenleiste nur im Leerlauf automatisch und behält **Leinwand bearbeiten** für einen ausdrücklichen Wechsel.
Innerhalb desselben laufenden DSH-Dienstes lässt sich nach einem Browserwechsel oder Neuladen eine strikt geparste dauerhafte Veröffentlichung von `openpencil_new` oder `openpencil_pipeline_finish` als exaktes PNG mit ausdrücklicher Aktion **Leinwand bearbeiten** wiederherstellen. Eine Verlaufskarte öffnet die Seitenleiste nie automatisch; der Benutzer muss diese Aktion anklicken. Ein gewöhnlicher historischer `openpencil_render` bleibt schreibgeschützt, und Nicht-Loopback-Verbindungen erhalten niemals einen Editor-Grant.
Der gebündelte `openpencil-design`-Skill bleibt eine optionale schlanke Referenz; normale Generierung beginnt direkt mit dem vollständigen kompakten Begin-Vertrag. Die aktuelle native Tool-Spezifikation ist maßgeblich, und die verwaltete Laufzeit benötigt keine Desktop-Binärdatei. `openpencil_new` bleibt ein kompatibler Einzel-Batch-Schnellpfad.
Verwenden Sie `openpencil_create` und `openpencil_edit` nur für eine vorhandene Live-Leinwand. Ihre Änderungen bleiben bis zur Aktion „Speichern“ im Editor ungespeichert.
## Web-Viewer-Assets
DSH liefert für ein Client-Plugin nur `client.js` aus; daher werden die OpenPencil-ESM-SDK, ihr WASM und CanvasKit als explizite Same-Origin-Assets bereitgestellt:
```sh
pnpm run sync:viewer-assets
```
Der Sync-Befehl bevorzugt ein benachbartes `../openpencil`-Checkout (lokale Entwicklung) und greift andernfalls auf das eingebundene `vendor/openpencil`-Submodul zurück (CI und frische Klone). Überschreiben Sie es mit `OPENPENCIL_ROOT` oder `--openpencil-root`. Ein vollständiges vorgefertigtes Asset-Verzeichnis kann mit `DSHPLUGIN_OPENPENCIL_VIEWER_SOURCE` ausgewählt werden. Die Suche zur Laufzeit kann mit `DSHPLUGIN_OPENPENCIL_VIEWER_ASSET_DIR` überschrieben werden.
Viewer-Assets werden erst nachgeladen, nachdem der Benutzer die Leinwand geöffnet hat. Sind sie nicht vorhanden oder ungültig, bleibt die PNG-Vorschau verfügbar und es wird kein Leinwand-Button angezeigt.
## Verwalteter Editor
Bearbeitbare Sitzungen nutzen den verwalteten Web-Host von OpenPencil – dieselbe Architektur wie bei `op-vscode`. Das Plugin startet den Host erst nach einer autorisierten Benutzeraktion, hält das Daemon-Token im Arbeitsspeicher, validiert iframe-Quelle und -Origin und beendet den Prozess, wenn die Editor-Sitzung endet. Die Editor-Oberfläche wird schrittweise ausgewählt: native Tool-Details, wenn der Host diese Schnittstelle deklariert, andernfalls der rechtsseitige Arbeitsbereich des Plugins mit Größenänderung und Vollbild-Steuerung.
Der Start verwendet einen für langsame Mounts sicheren listening handshake: Bereitschaftsprüfungen beginnen erst, nachdem der mitgelieferte Host seine gebundene Adresse gemeldet hat. Eine Desktop-Installation von OpenPencil ist nicht erforderlich.
Veröffentlichte Installationen unterstützen sechs native Ziele: `darwin-arm64`, `darwin-x64`, `linux-arm64`, `linux-x64`, `win32-arm64` und `win32-x64`; die Linux-Pakete setzen glibc voraus. Das Root-Paket wählt über exakt versionierte `optionalDependencies` anhand von Betriebssystem und CPU das passende Plattformpaket aus (zum Beispiel `@zseven-w/dsh-openpencil-darwin-arm64`). Dieses Paket stellt `op-host-web-server`, das Web-Bundle des Editors und CanvasKit als eine zusammengehörige Laufzeit bereit. Der verwaltete Editor hängt daher weder von `/Applications/OpenPencil.app` noch von `openpencil-desktop` im `PATH` oder einem OpenPencil-Quell-Checkout ab.
Wenn DSH das Plugin neu lädt oder entlädt, während die Leinwand ungespeicherte Änderungen enthält, bewahrt der Host bis zu sieben Tage lang einen undurchsichtigen lokalen Wiederherstellungsentwurf auf. Beim erneuten Öffnen derselben Quelle wird nachgefragt, bevor sie in die Live-Leinwand wiederhergestellt wird; die Wiederherstellung überschreibt die `.op`-Datei nie, bis der Benutzer explizit speichert.
Die offiziellen Pakete für alle sechs Plattformen erhalten ihre Bootstrap-Endpunkte für die Zusammenarbeit in China und weltweit während des geschützten Release-Builds; die injizierten Endpunkte werden vor der Veröffentlichung validiert. Bei einem lokalen Eigenbau ohne diese Injektion kann der Bootstrap vor dem Start von DSH mit `OPENPENCIL_COLLAB_BOOTSTRAP_URL=https://