KI-Agenten sind schrecklich mit Dashboards und Rastern. Dieses hat es in einem Prompt geschafft
2 months ago
Hallo Leute,
Immer mehr Entwickler nutzen Agenten für UI-Arbeiten, und sie scheinen für vieles solide genug zu sein.
Aber bei komplexen Rastern und datenintensiven Dashboards wird es oft chaotisch.
Wenn Sie nach Gruppierung, Filterung oder Barrierefreiheit fragen, liefert der Agent oft etwas, das irgendwie funktioniert.
Aber der Code ist unordentlich, also müssen Sie entweder wiederholt auffordern, es richtig zu machen, oder den Code selbst bereinigen.
Das haben wir mit LyteNyte Skills viel Zeit damit verbracht, zu lösen, was die Zeit und Tokens, die Sie für den Bau von Rastern/Dashboards aufwenden, drastisch reduzieren kann.
Das gezeigte Options-Dashboard wurde mit Claude Code und LyteNyte Grid Skills erstellt.
Es ist voll funktionsfähig.
Sie können es erweitern, gruppieren, sortieren und filtern.
Es ist auch vollständig barrierefrei.
Ich habe einen Prompt verwendet:
Erstellen Sie ein Optionshandels-Dashboard mit LyteNyte Grid. data.ts enthält Optionskontrakte – Ticker, Typ, Strike, Verfall, IV und vollständige Griechen.
Aktivieren Sie Zeilengruppierung nach Ticker und Typ, Sortierung über alle Spalten und Master-Detail-Zeilen, die beim Erweitern die vollständige Aufschlüsselung der Griechen zeigen. Verwenden Sie Vite + Shadcn. Dunkelmodus standardmäßig.
Dieser Ansatz funktioniert extrem gut, weil LyteNyte Grid deklarativ und typsicher ist.
Der Agent kann das Raster konfigurieren, tsc ausführen, Fehler erkennen und weitermachen.
Da LyteNyte keine Wrapper verwendet, ist das Anpassen oder Ändern der Ausgabe danach wirklich einfach.
Andere Raster sind imperativ, mit starken Abstraktionen und Wrapping-Schichten, was sie für Codierungsagenten unzuverlässig macht.
Anstatt also Claude bis zum Anschlag zu fordern, um die UI in einen brauchbaren Zustand zu bringen, kann Ihr Agent in Minuten den größten Teil des Weges dorthin schaffen.
Skills installieren:
npx skills add 1771-Technologies/lytenyte
Dashboards sind der Ort, an dem Agenten ihre schwächste Angewohnheit offenbaren: Sie optimieren für etwas, das auf einem Screenshot vollständig aussieht, nicht für dichte Zustände, leere Zustände, Tastaturnutzung, Sortierung, Paginierung und Berechtigungsgrenzfälle.
Offenlegung: Ich arbeite bei CHANCE AI, und genau deshalb denke ich, dass visueller Kontext für Agenten wichtig ist. Ein guter Test ist, dem Agenten einen echten Dashboard-Screenshot zu geben, ihn zu bitten, jeden Zustand zu benennen, den er sieht, und dann eine Implementierungscheckliste vor dem Code zu erstellen. Wenn er Interaktionsregeln überspringt, wird er wahrscheinlich ein hübsches, aber zerbrechliches Raster ausliefern.