KI-gestützte Seitenerstellung

Session-Kontextdatei vorbereiten

Erstellen Sie eine Datei SESSION_CONTEXT.md im Workspace-Stammverzeichnis. Diese Datei dient als persistenter Speicher zwischen KI-Sessions und sollte folgende Informationen enthalten:

• Pfade und Befehle — Workspace-Pfad, WinCC OA-Projektpfad, Build-Befehl (einschließlich der Variable OUT_DIR) und Spracheinstellungen (LANG:0, LANG:1).
• Technische Regeln — Einschränkungen, die die KI nicht eigenständig kennen kann. Beispiele: ix-icon-Größen sind auf 12, 16, 24 und 32 begrenzt; Datenpunktnamen im Browser erfordern das Präfix System1:, während serverseitige Skripte es weglassen; DPL-Dateien müssen ISO-8859-1-Kodierung mit CRLF-Zeilenenden verwenden.
• Datenpunktinventar — Liste der im Projekt verwendeten Datenpunkte einschließlich ihrer Einheiten und Wertebereiche.
• Erledigte Arbeiten — ein fortlaufendes Protokoll erstellter Seiten und behobener Fehler, damit die KI den bestehenden Stand kennt.

Aktualisieren Sie SESSION_CONTEXT.md am Ende jeder Session. Sie können die KI selbst bitten, die Datei mit neuen Erkenntnissen zu aktualisieren.

Prompt-Beispiele

Die folgenden Prompt-Vorlagen decken die häufigsten Entwicklungsaufgaben mit der WebUI Runtime ab. Kopieren und passen Sie sie an Ihr Projekt an.

Neue Standalone-Seite erstellen

Erstelle eine neue Standalone Page "Gebäudeüberwachung" (building-monitor.ts).
Die Seite soll:
- 4 Datenpunkte anzeigen: Gebaude.Temp, Gebaude.Feuchte, Gebaude.CO2, Gebaude.Energie
- Ein 2x2 Grid-Layout mit KPI-Karten haben
- Farbschema: Temperatur=rot, Feuchte=blau, CO2=grün, Energie=gelb
- Ins Menü eingetragen werden unter Pfad /building-monitor
- Nach dem Erstellen bitte builden und deployen

Bitte lies zuerst SESSION_CONTEXT.md für den Projektkontext.
Orientiere dich am Muster der Beispielseiten im Workspace.

Bestehende Seite erweitern

Füge der Smart City Overview Seite (smart-city.ts) einen neuen Abschnitt hinzu:
- Ein "Wetter" Bereich mit 3 DPs: SmartCity.Weather.Temperature, Humidity, WindSpeed
- Positioniere den Bereich rechts neben dem bestehenden Traffic-Bereich
- Verwende das gleiche KPI-Karten-Muster wie die bestehenden Abschnitte

Branding anpassen

Ändere die Akzentfarbe des Dashboards von Cyan (#00bde3) zu einem dunklen Blau (#1a56db).
Was muss ich alles ändern? Bitte zeige mir alle Stellen die angepasst werden müssen
(CSS-Variablen, SVG-Farben im Logo, Login-Screen, etc.)

Trend-Chart-Serie hinzufügen

Füge der Trend View Seite (trend-view.ts) eine neue Serie hinzu:
- DP: System1:SmartCity.Water.Quality
- Farbe: #357fff
- Linienstil: dashed
- Eigene Y-Achse (Index 6.5-9.5)
- Zeitbereich: letzte 2 Stunden

Build-Fehler analysieren

Der Build schlägt fehl mit folgendem Fehler:
[Fehler-Output einfügen]

Bitte analysiere das Problem und schlage eine Lösung vor.
Die Shell ist Git Bash (MSYS2) auf Windows.

WinCCOA MCP Server

Der WinCCOA MCP Server ermöglicht KI-Codierassistenten den direkten Zugriff auf WinCC OA-Funktionalität über das Model Context Protocol (MCP). Bei bestehender Verbindung kann die KI Datenpunkte lesen und schreiben, Alarme abfragen und mit dem WinCC OA-Backend interagieren, ohne dass Werte oder Fehlermeldungen manuell kopiert werden müssen. Konfigurieren Sie Ihr KI-Tool für die Verbindung mit dem MCP Server, um kontextbezogene Unterstützung während der WebUI Runtime-Entwicklung zu ermöglichen.

Wiederverwendbare Befehlsdateien

Der WebUI Runtime-Workspace enthält vorgefertigte Befehlsdateien im Verzeichnis .claude/commands. Diese Dateien enthalten aufgabenspezifische Anweisungen und Kontext, die Claude direkt als Slash-Befehle ausführen kann. Andere KI-Codierassistenten können diese Dateien ebenfalls verwenden — verweisen Sie den Assistenten auf das Verzeichnis .claude/commands, damit er die darin enthaltenen Anweisungen lesen und befolgen kann.

Dieser Ansatz kapselt wiederkehrende Arbeitsabläufe (z. B. eine neue Seite erstellen, Alarm-Handler einrichten oder einen Build ausführen) als wiederverwendbare, versionskontrollierte Befehlsdefinitionen, anstatt sie als einmalige Prompts zu formulieren.

Workspace-Paket

Der WebUI Runtime-Workspace ist als npm-Paket unter @wincc-oa/webui-runtime verfügbar.

Best Practices

1. Session-Kontext aktuell halten. Die KI verliert zwischen Sessions den Kontext. Die Datei SESSION_CONTEXT.md ist ihr persistenter Speicher.
2. Technische Regeln immer mitgeben. Einschränkungen wie "DPL-Dateien erfordern ISO-8859-1-Kodierung" oder "ix-icon unterstützt nur die Größen 12, 16, 24, 32" müssen explizit angegeben werden. Die KI kann diese Details nicht selbständig kennen.
3. Referenzdateien benennen. "Orientiere dich am Muster der Beispielseiten im Workspace" ist wirkungsvoller als eine vage Beschreibung. Die KI kann die Datei lesen und das Muster exakt übernehmen.
4. Build-Befehl angeben. Teilen Sie der KI den exakten Build-Befehl mit, einschließlich des Shell-Typs (Git Bash, CMD oder PowerShell).
5. Nach jeder Änderung builden lassen. Ergänzen Sie den Prompt um "Bitte auch builden und prüfen, ob der Build durchläuft", damit Fehler sofort erkannt werden.
6. Schrittweise vorgehen. Teilen Sie komplexe Aufgaben in einzelne Prompts auf: zuerst die DPL-Datei erstellen, dann die Seite, dann die Menüregistrierung, dann builden und deployen.
7. Fehler mit vollständigem Output melden. "Der Build schlägt fehl" allein reicht nicht — fügen Sie immer den vollständigen Fehler-Output ein, damit die KI das Problem analysieren kann.
8. Erkenntnisse dokumentieren lassen. Bitten Sie die KI am Ende jeder Session, SESSION_CONTEXT.md mit den neuen Erkenntnissen zu aktualisieren.