Der CEO-Kommentar floss über Slack – die Geschichte von der Erstellung einer KI-gestützten Review-Web-App und der neuen Herausforderung, die danach kam | Aktuelles

~ Ein Designer und KI erstellen gemeinsam eine authentifizierte Web-App mit Cloudflare ~

Hallo. Ich bin hasshi, UI-Designer.

In letzter Zeit verwenden wir nicht mehr den Prozess, Wireframes zu zeichnen und diese vom Kunden zu bestätigen, sondern erstellen mit KI-Unterstützung Mockups für Landing Pages und Websites und lassen diese genehmigen. Das ist deutlich häufiger geworden.

Bis vor Kurzem war der Ablauf beim Besprechen von Designs über Slack:

"Bitte machen Sie hier mehr Leerraum!" "Bitte ersetzen Sie dieses Bild!" "Bitte ändern Sie hier den Text!"

– so erhielten wir Kommentare.

Auf den ersten Blick war das eine normale Vorgehensweise.

Tatsächlich gab es damit bislang keine großen Probleme.

Aber seitdem wir KI für die Prototypen-Erstellung einsetzen, ist ein bestimmtes Problem deutlicher geworden.

Kommentare fließen ständig herein.

Slack ist praktisch.

Es ist praktisch, aber es ist natürlich kein spezielles Tool für Design-Reviews.

Alltägliche Arbeitskommunikation, Plauderei und Anfragen zu anderen Projekten fließen alle an denselben Ort.

Dies führt dazu, dass

Änderungskommentare in anderen Unterhaltungen verschwinden
sich Threads vervielfachen
man sich fragt, wo diese Änderung war
das Thema unbewusst wechselt

und ähnliche Probleme entstehen.

Slack hat auch eine Listenfunktion.

Ich habe bereits einen Artikel über Prozessverbesserungen mit Slack-Vorlagen geschrieben.

Erste Schritte mit Slack-Vorlagen für einfachere DX | News | Liberogic

Allerdings sind Thread-Benachrichtigungen manchmal unklar, und wenn man Benachrichtigungen verbindet, wird die Nachrichtenzeile unübersichtlich …

Letztendlich

wird der Chat-Bereich immer voller.

Die Geschwindigkeit beim Erstellen von Landing Pages mit KI hat sich vervielfacht, aber die Review-Methode ist immer noch die alte.

Wenn nur die Generierung schneller wird, aber dann beim Review stockt, ist das irgendwie schade.

Also habe ich überlegt.

Warum nicht einfach Kommentare direkt in den HTML-Code schreiben?

Während ich an einer Landingpage arbeitete, kam mir plötzlich ein Gedanke.

Wäre es nicht praktisch, Kommentare direkt in HTML-Dateien zu schreiben, die mit KI erstellt wurden?Und noch besser: Kommentare und angehängte Bilder zusammen in eine ZIP-Datei packen und diese direkt an KI-Tools wie Claude Code oder Codex übergeben?

Screenshots mit roten Markierungen sind zwar verständlich, aber wenn man den HTML-Code selbst überprüfen könnte, wäre das besser.

Stelle, auf die geklickt wurde
CSS-Selektor des Zielelements
Text in der Nähe
Seitenname
Beigefügtes Referenzbild

und dergleichen mehr können ebenfalls erhalten bleiben.

Das heißt,

Nicht nur „beheben Sie das hier", sondern „beheben Sie dieses HTML-Element auf diese Weise".

Dies scheint auch gut mit KI-gestützten Korrekturen zu funktionieren.

"Das ist doch ziemlich praktisch, oder?"

Und so entstand die Idee,

Design Marker (LP-Korrektur-Checker)

ist.

Erst mal ausprobiert

Die erste Version war eine lokale Anwendung, die auf dem eigenen Computer lief.

Die Bedienung ist einfach.

HTML-Dateien in ZIP zusammenfassen
Drag & Drop in Design Marker
HTML aus dem ZIP im Browser anzeigen
Klicken Sie auf die betreffende Stelle
Kommentar schreiben
Review-ZIP mit Kommentarinformationen exportieren
An KI-Dienste wie Claude Code oder Codex übergeben und korrigieren lassen

Sie können Kommentare direkt im HTML hinzufügen, ähnlich wie rote Linien auf einem Screenshot zu zeichnen.

Früher hätte so etwas Tage gedauert zu entwickeln.

Während der Entwicklung

Kommentarliste, Name des Bearbeiters, Sprung zur Kommentarposition, Bildanhänge, Zusammenführung mehrerer Reviews ...

wollten wir "auch das" und "das auch" – die Funktionen wuchsen nach und nach.

Von hier aus

Das ist... eigentlich praktisch als internes Tool, oder?

Und so fangen wir an, uns immer mehr hineinzusteigern.

Die Kompatibilität mit AI war besser als erwartet

Bei der Erstellung von Design Marker habe ich die beste Resonanz bei der AI-Integration gespürt.

Wenn man im normalen Chat um Änderungen bittet,

"Bitte machen Sie das Bild oben links ein wenig größer"

endet man oft bei solchen Anweisungen.

Menschen können sich das ansehen und verstehen es irgendwie, aber für AI ist unklar, wo "oben links" ist und welches Element das "Bild" ist.

Mit Design Marker können Sie aus einem angeklickten HTML-Element zum Beispiel einen solchen CSS-Selektor abrufen.

article.strength-item:nth-of-type(1)
 > div.strength-visual-wrap
 > div.illustration-slot

Dann kann man der AI mitteilen,

Bitte vergrößern Sie die Illustration in article.strength-item:nth-of-type(1) auf etwa 115 % der aktuellen Größe.

können Sie auf diese Weise Anweisungen erteilen.

Wenn sich die DOM-Struktur nicht wesentlich verändert hat, können wir das Ziel der Korrektur sehr konkret identifizieren.

Darüber hinaus können Sie auch Seitennamen, nahegelegene Zeichen, Kommentare und Referenzbilder zusammen übergeben.

Bisher,

Nein, nein, nicht da!

Korrektionen, die ich dem AI mehrmals erklären musste, werden nun beim ersten Versuch an der richtigen Stelle eingefügt.

"HTML überprüfen" – das passt eigentlich sehr gut zur KI-Ära, nicht wahr?

Hier habe ich wirklich eine gute Resonanz gespürt.

"Das ist ja praktisch!" – Das Ergebnis, nachdem ich es im Unternehmen weitergegeben habe

Gut.

Das ist praktisch.

Lass mich das mit allen teilen.

Ich teilte es begeistert im Unternehmen.

Aber dann...

Funktioniert nicht? Was ist denn mit meinen Einstellungen?

Ach...

Das ist richtig.

Es funktioniert auf meinem Computer.

Aber,

Es funktioniert nicht einfach so auf jedem Computer.

Ein klassisches Problem von lokalen Anwendungen – hier wurde es direkt angesprochen.

Ich kann es nutzen. Aber andere können es nicht.

Ich bin der Entwickler, daher funktioniert es natürlich.

Aber damit andere Personen es nutzen können, ist die Installation von Node.js und die Vorbereitung der Abhängigkeitspakete erforderlich.

Für Entwickler ist das keine große Herausforderung.

Aber wenn es um Designer und Projektmanager geht,

bitte installieren Sie zunächst Node.js

– das ist eine Review-Anwendung, die man erst erklären muss.

Das ist dann wirklich keine unkomplizierte Review-Anwendung mehr.

Dann dachte ich:

"Lass mich das einfach mit einem Klick starten!"

und erstellte auch eine Startdatei namens start-mac.command.

Bei einem Doppelklick würde die Datei:

das Terminal starten, die notwendigen Vorbereitungen durchführen, die Anwendung starten und den Browser öffnen.

Perfekt.

…oder so dachte ich jedenfalls.

Aber bei nüchterner Betrachtung:

"Bitte doppelklicken Sie auf diese unbekannte .command-Datei"

ist auch ziemlich beängstigend als Anleitung.

"Soll ich dem Chef wirklich „Bitte Doppelklick drauf!" schreiben……? Verdächtig. Obwohl ich es selbst gemacht habe — verdächtig."

Das funktioniert zwar, ist aber nicht zur internen Weitergabe geeignet.

Wenn man mit AI zusammen eine App entwickelt,

"Es funktioniert in meiner Umgebung, aber andere können es nicht nutzen"

Wir stoßen also auch auf eine Hürde, die in der Entwicklung offenbar allzu vertraut ist.

Ein Wort von einem erfahrenen Ingenieur

In diesem Moment sagte ein erfahrener Ingenieur zu mir.

Erstelle eine README-Datei und sag einfach „Laden Sie den Ordner in CloudCode, und richten Sie ihn wie in der README beschrieben ein". Das sollte doch reichen, oder?

……

Wir hatten zwar viel implementiert, um es einfacher zu machen, aber wenn es für Menschen gedacht ist, die AI nutzen können, war dieser Ansatz deutlich schlanker.

Anstatt zu versuchen, alles auf Anwendungsseite zu lösen,

Den einfachsten Weg zu finden – mit den Nutzern und unter Einbeziehung von KI.

Das war auch eine lehrreiche Erkenntnis.

Aber der Chef schreibt keine Kommentare.

Ich habe auch eine README erstellt.

Den Start habe ich auch vereinfacht.

Das müsste funktionieren.

…oder so dachte ich.

Aber dann…

Keine Reaktion.

Der Chef ist beschäftigt und kümmert sich nicht um mich……

Hier wurde mir etwas noch Wichtigeres bewusst.

Eine Review-App zu erstellen ist weniger schwierig als

sie tatsächlich nutzen zu lassen

, was um ein Vielfaches schwieriger ist.

Egal wie benutzerfreundlich die App lokal ist –

die App starten

ist dieser erste notwendige Schritt.

Für beschäftigte Menschen wird bereits dieser erste Schritt zur Hürde.

Dann also …

Lass uns das Web nutzen.

Würde es nicht funktionieren, wenn die Benutzer nur auf eine URL klicken müssen?

Mit diesem Gedanken entschied ich mich, eine Web-Version von Design Marker zu erstellen.

Zunächst werde ich eine Seite vor der Anmeldung erstellen, um die Motivation zu steigern.

Ich möchte viel bauen, aber es gibt viel zu überlegen, also ist dies vorerst eine von AI erstellte Landingpage.

Ich überlegte, wie ich die Rückseite gestalten sollte. Meine Wahl fiel auf Cloudflare.

Aber ehrlich gesagt bin ich ein Designer.

Cloudflare Pages、Pages Functions、Cloudflare Access、D1、R2……。

Auch wenn ich den Namen gehört habe, war dies mein erstes Mal, tatsächlich selbst die Struktur zu überdenken und dies als Web-App zusammenzusetzen.

Ab hier ist mein AI-Lehrer an der Reihe.

Ich möchte ein Admin-Panel für interne Zwecke und einen Review-Bildschirm zum Teilen mit Kunden erstellen.

Es gibt eine Methode, Cloudflare Access für das Admin-Panel zu nutzen.

Und Kommentare sowie Projektinformationen?

Diese können in D1 gespeichert werden.

Und ZIP-Dateien?

Es gibt eine Möglichkeit, R2 zu nutzen.

Ah, ich glaube, ich habe alles verstanden!

...aber das ist nur ein Gefühl.

KI ist wirklich sehr leistungsfähig.

Wenn man nachfragt, kann sie sehr spezifische Strukturvorschläge geben.

Aber bei dieser Entwicklung bin ich mir stark bewusst geworden, dass

es etwas anderes ist, wenn die KI einem die Methode zeigt, und wenn man ein sicheres System entwickelt

Das war die Situation.

Von „Bitte erklären Sie mir" zu „Ist mein Verständnis korrekt?"

Ich traue mich nicht, gerade bei sicherheitsrelevanten Aspekten, nur auf die Antworten der KI zu verlassen.

Daher beschlossen wir, dass ein erfahrener Ingenieur die unklaren und wichtigen Teile überprüfen sollte.

Früher hätte ich gesagt,

Ich möchte in Cloudflare folgendes erreichen – wie kann ich das tun?

Das habe ich glaube ich von dort gehört.

Aber dann müsste der Kollege wieder alles von vorne erklären.

„Ich weiß, Sie sind gerade beschäftigt,"

Senpai! Erklär mir bitte alles von Anfang an!

und sie frontal angehen wie etwas.

Diesmal habe ich mich zunächst mehrfach mit der KI ausgetauscht und alles aus meiner Perspektive geordnet.

Und dann

Das Admin-Dashboard wird mit Cloudflare Access auf interne Mitglieder beschränkt. Das gemeinsame Dashboard wird für jedes Projekt mit URL, ID und Passwort zugänglich gemacht. Projektinformationen und Kommentare werden in D1 gespeichert, die LP-Dateien als ZIP in R2. Stimmt meine Vorstellung darin überein?

bis zu diesem Punkt vorangetrieben und dann konsultiert.

Das heißt,

"Bitte erklären Sie mir"

sondern

"Stimmt meine Vorstellung darin überein?"

gewechselt.

Das war für mich eine ziemlich große Veränderung.

Der Austausch mit Kolleginnen und Kollegen wird minimiert, sodass mehr Zeit für wirklich wichtige Überprüfungen bleibt.

Ich kopiere die AI-Antwort nicht einfach ab und bin damit fertig.

"Warum macht man es so?"

Ich konnte damit beginnen, dies Stück für Stück zu verstehen, während ich vorankomme.

Als ich zur Web-Version überging, wartete eine völlig neue Herausforderung

So wurde die Web-Version nach und nach funktionsfähig.

Man kann sie einfach durch Senden einer URL öffnen.

Sie ist deutlich benutzerfreundlicher als die lokale Anwendung.

"Ist das nicht die Lösung?"

…oder so dachte ich jedenfalls.

In dem Moment, in dem ich zur Web-Version überging, kamen Probleme ans Licht, die ich bei der lokalen Version kaum wahrgenommen hatte.

Zum Beispiel

Darf man die kundenspezifische Landing-Page vor der Veröffentlichung in der Cloud speichern?
Wer kann auf welche Projekte zugreifen?
Wie werden Passwörter geschützt?
Wie werden unbefugte Anmeldeversuche verhindert?
Können hochgeladene HTML-Dateien sicher angezeigt werden?
Wann werden Daten nach Projektabschluss gelöscht?

usw.

Das Hinzufügen eines Authentifizierungsbildschirms bedeutet nicht automatisch, dass die Sicherheit vollständig umgesetzt ist.

Es ist eigentlich offensichtlich, aber erst beim selbst Umsetzen habe ich die Komplexität wirklich verstanden.

Aktuell implementiere ich grundlegende Mechanismen wie Cloudflare Access, projektspezifische Anmeldungen und Speicherung in D1 und R2.

Andererseits

Verbesserte Passwortschutzmaßnahmen, Beschränkung der Anmeldeversuche, HTML-Vorschau-Isolation, Datenaufbewahrungs- und Löschrichtlinien und weitere Aspekte erfordern noch Verbesserungen vor dem offiziellen öffentlichen Launch.

Design Marker verfügt auch über einen Modus, bei dem Sie die Datei lokal im Browser überprüfen können, ohne die ZIP-Datei in der Cloud zu speichern.

Wir speichern die notwendigen Projektinformationen und ZIP-Dateien nur dann in der Cloud, wenn Projekte geteilt werden.

Design Marker ist derzeit noch kein offizieller Service.

Wir befinden uns in einer Testphase, die derzeit auf interne Nutzung ausgerichtet ist.

Mit anderen Worten: Das, was wir dieses Mal erstellt haben, ist

„Wir haben einen vollständig sicheren Service fertiggestellt!"

Das ist nicht der Fall.

Vielmehr,

Eine App, die gerade dabei ist, eine nach der anderen die notwendigen Maßnahmen umzusetzen, nachdem geklärt wurde, was geschützt werden muss

ist.

Das Web zu nutzen bedeutet nicht nur, dass die Dinge bequemer werden.

Mit der Verantwortung, Nutzerdaten zu verwalten, kommt auch eine große Verantwortung.

Dies war dieses Mal eine sehr wertvolle Lernerfahrung.

Hier ist die Verwaltungsoberfläche des fertigen Design Makers.

Mitarbeiter können über das Dashboard alle Korrekturen überprüfen.

Wenn Sie auf die Detailseite gehen, können Sie Schnelllinks zu Strukturierungsvorschlägen öffnen, um die LP direkt anzusehen oder Kommentare zu hinterlassen.

So können Sie Kommentare zu der LP überprüfen. Sie können auch auf frühere Kommentare verweisen, was die Überarbeitungen der Struktur vereinfacht hat.

Auch mit KI war Lernen notwendig

Durch diese Entwicklung bin ich zu einer weiteren starken Erkenntnis gekommen.

Dank KI ist es für Designer jetzt viel einfacher geworden, sich der Entwicklung zu stellen.

Ich selbst,

"Ich möchte das bauen"

bis hin zu etwas Funktionierendem hat sich der Bereich deutlich erweitert.

Aber das bedeutete nicht,

"ich muss nicht mehr lernen"

im Sinne von.

Es war vielmehr das Gegenteil.

Diese Struktur wird empfohlen

Verstanden!

allein ist gefährlich.

Was wirklich notwendig ist:

"Warum?" "Reicht das auch dieses Mal?" "Fehlt da nicht etwas?" "Sollte dieser Teil nicht von einem Experten überprüft werden?"

Das war das Ergebnis.

Um zu beurteilen, ob der Vorschlag von AI den diesmaligen Anforderungen entspricht und was fehlt, ist Wissen erforderlich.

AI ist wirklich ein verlässlicher Partner.

Aber letztlich sind es Menschen, die entscheiden und Verantwortung tragen.

Die Web-Umsetzung von Design Marker dieses Mal war auch ein Anlass, über den Umgang mit AI neu nachzudenken.

In der AI-Ära könnte sich Review am meisten verändern

AI erstellt eine Landing Page für Sie in wenigen Minuten.

Ein Rohkonzept, das früher viele Stunden dauerte, entsteht jetzt überraschend schnell.

Aber danach kommt noch,

«Hier sollte es so aussehen» «Diesen Abstand etwas vergrößern» «Nur dieses Bild ändern»

Dieser Austausch hat sich überraschenderweise seit langem nicht großartig verändert.

Nur die Herstellungsgeschwindigkeit ist gestiegen,

Der Mensch überprüft, teilt die Änderungen mit und erstellt alles erneut.

Dieser Teil ist immer noch ziemlich menschlich geprägt.

Deshalb ist es in letzter Zeit wichtig,

nicht nur die KI selbst zu betrachten,

sondern auch wie Mensch und KI miteinander kommunizieren

Ich glaube, dass auch dieser Mechanismus zunehmend an Bedeutung gewinnt.

Design Marker ist eines unserer Experimente dafür.

Jetzt speichere ich

Wir testen HTML-Kommentare, Bildanhänge, die Integration mehrerer Reviews und Versionsverwaltung pro Projekt.

Es gibt noch viele weitere Dinge, die wir in Zukunft umsetzen möchten.

Direktes Markup auf Screenshots.

Anforderungen zur KI-gestützten Korrektur aus Kommentaren.

Verbesserung des Vergleichs zwischen Versionen.

Verbesserte Benutzerfreundlichkeit für Reviews mehrerer Personen.

Und natürlich verbesserte Sicherheit bei Authentifizierung, HTML-Vorschau und Datenverwaltung.

Zunächst werden wir das Tool intern nutzen und es schrittweise verbessern.

Anfangs,

"„Slack-Kommentare gehen unter und ich möchte das irgendwie beheben""

Es war ein kleines Tool, das ich mit einer gewissen Leichtigkeit zu entwickeln begann.

Und bevor man es merkt,

Ein lokales Programm erstellen,

Der CEO nutzt es nicht,

Im Web,

Cloudflare studieren,

Sicherheitsbedenken haben,

Den erfahrenen Ingenieur um Rat fragen,

Es führt dazu, dass ich auch überlegen muss, wie ich mit KI umgehe.

……Eigentlich wollte ich nur eine Review-App erstellen. Aber es gab überraschend viel zu bedenken.

Aber es ist eine interessante Veränderung, dass ich kleine Unannehmlichkeiten in meiner täglichen Arbeit jetzt zusammen mit KI umsetzen kann.

Wenn wir es bis zu einem Punkt entwickelt haben, an dem wir es vertrauensvoll öffentlich machen können, möchte ich Design Marker offiziell vorstellen.

Aber vorher.