Weil der Kommentar des CEO in Slack untergeht, haben wir mit KI eine Web-App für Design-Reviews gebaut – und dabei stießen wir auf eine weitere Hürde | Topics

〜Ein Designer baut mit KI eine Web-App mit Authentifizierung auf Cloudflare〜

Hallo, ich bin Hasshi, UI-Designer.

In letzter Zeit gehen wir immer seltener den Weg, zuerst Wireframes zu zeichnen und sie vom Kunden prüfen zu lassen. Stattdessen erstellen wir mithilfe von KI Mockups für Landingpages und Websites und lassen diese dann freigeben – das ist inzwischen deutlich häufiger geworden.

Bisher haben wir Designs über Slack zur Prüfung geteilt, und dabei kamen Kommentare wie

"Hier bitte mehr Abstand!" "Dieses Bild bitte austauschen!" "Hier den Text ändern!"

Solche Rückmeldungen haben wir bekommen.

Auf den ersten Blick ist das eine ganz normale Vorgehensweise.

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

Seit wir jedoch mit KI laufend Prototypen erstellen, ist ein bestimmtes Problem zunehmend deutlich geworden.

Kommentare gehen unter.

Slack ist praktisch.

Das ist zwar praktisch, aber natürlich ist es kein Tool, das speziell für Design-Reviews gedacht ist.

Alltägliche Abstimmungen, Small Talk und Anfragen zu anderen Projekten landen alle am selben Ort.

Die Folge:

Korrekturkommentare rutschen in fremde Unterhaltungen
Threads wuchern
"Welche Korrektur war das noch gleich?"
Plötzlich geht es um ein ganz anderes Thema

So etwas passiert regelmäßig.

Slack bietet außerdem eine Listenfunktion.

Vor einiger Zeit habe ich auch einen Artikel über Prozessverbesserungen mit Slack-Vorlagen geschrieben.

Einfacher Einstieg in DX mit Slack-Vorlagen | Topics | Liberogic Inc.

Allerdings sind Benachrichtigungen zu Threads schwer nachzuvollziehen, und wenn man Benachrichtigungen verknüpft, wird das Nachrichtenfeld schnell unübersichtlich ...

Am Ende

wird nur der Chatverlauf immer voller.

Die Erstellung von Landingpages mit KI ist um ein Vielfaches schneller geworden, die Art der Überprüfung ist jedoch unverändert geblieben.

Auch wenn schon die Erstellung schneller wird, ist es schade, wenn die anschließende Überprüfung ins Stocken gerät.

Daraufhin kam mir eine Idee.

Könnte man Kommentare nicht einfach direkt in das HTML schreiben?

Beim Erstellen einer Landingpage kam mir plötzlich ein Gedanke.

Wäre es nicht praktisch, Kommentare direkt in den mit KI erstellten HTML-Prototyp schreiben zu können? Und wenn man Kommentare und angehängte Bilder gebündelt als ZIP-Datei an eine KI wie Claude Code oder Codex übergeben könnte, wäre das doch hilfreich, oder?

Das Markieren von Screenshots mit Rotstift ist zwar verständlich, aber wenn man das HTML selbst überprüfen könnte,

die angeklickte Stelle
CSS-Selektor des Zielelements
nahe gelegener Text
Seitenname
angehängtes Referenzbild

können ebenfalls mit übernommen werden.

Also:

Statt „Hier bitte korrigieren“ lässt sich präzise formulieren: „Dieses HTML-Element bitte so korrigieren.“

Das eignet sich auch gut, wenn man die KI um Korrekturen bittet.

"Das ist doch ziemlich praktisch, oder?"

So fing es an: Ich begann damit,

Design Marker (LP-Rotstift-Prüfer)

einfach etwas auszuprobieren

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

Die Bedienung ist einfach.

HTML-Dateien als ZIP packen
In Design Marker ziehen und ablegen
HTML aus der ZIP-Datei im Browser anzeigen
Klicken Sie auf eine Stelle, die Sie interessiert
Kommentar schreiben
Review-ZIP mit Kommentarinformationen exportieren
An KI-Tools wie Claude Code oder Codex übergeben, damit sie die Korrekturen vornehmen

Sie können direkt im HTML kommentieren, ganz so, als würden Sie einen Screenshot mit roten Linien markieren.

Früher hätte die Entwicklung eines solchen Tools mehrere Tage gedauert.

Mit der Zeit kamen immer mehr Funktionen hinzu:

Kommentarliste, Zuständigkeiten, Sprung zur Kommentarposition, Bildanhänge, Zusammenführung mehrerer Reviews ...

„Das wäre auch nützlich“ und „Das bräuchten wir noch“ – so wuchs der Funktionsumfang Schritt für Schritt.

Ab diesem Punkt

Das ist eigentlich ein praktisches internes Tool, oder?

Und dann wird man nach und nach übermütig.

Die Zusammenarbeit mit KI hat besser funktioniert, als ich erwartet hatte.

Beim Entwickeln von Design Marker war die Zusammenarbeit mit KI der Teil, der sich am vielversprechendsten angefühlt hat.

Wenn man in einem normalen Chat um Änderungen bittet,

"Bitte mach das Bild oben links etwas größer"

ist die Anweisung oft ungefähr so formuliert.

Unter Menschen ist das meist klar, wenn man den Bildschirm gemeinsam ansieht. Für eine KI sind "oben links" und "das Bild" dagegen mehrdeutig, denn es ist unklar, wo genau das gemeint ist und welches Element gemeint ist.

Mit Design Marker lässt sich aus dem angeklickten HTML-Element zum Beispiel ein CSS-Selektor wie dieser ermitteln:

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

Damit wird an die KI übergeben:

Vergrößern Sie die Illustration innerhalb von article.strength-item:nth-of-type(1) auf etwa 115 %.

Sie können Anweisungen in dieser Form geben.

Solange sich die DOM-Struktur nicht grundlegend verändert, lässt sich das zu ändernde Element sehr präzise bestimmen.

Außerdem lassen sich Seitenname, benachbarte Texte, Kommentare und Referenzbilder gemeinsam übergeben.

Bisher

Nein, nein, nicht dort!

Korrekturen, für die ich der KI früher mehrmals erneut erklären musste, landen inzwischen häufiger auf Anhieb genau an der richtigen Stelle.

Ein Review im HTML-Format passt doch recht gut zur KI-Ära, oder?

Hier habe ich deutlich gemerkt, dass dieser Ansatz funktioniert.

Nachdem ich dachte „Das ist praktisch!“ und es im Team geteilt hatte,

Gut.

Das ist praktisch.

Das sollten wir auch den anderen zeigen.

Voller Begeisterung habe ich es im Team geteilt.

Doch dann ...

Funktioniert nicht? Was, liegt es an meiner Einstellung?

Oh ...

Ja, genau.

Auf meinem Rechner läuft es.

Aber,

Auf den Computern anderer Leute funktioniert es so nicht.

Wie bei typischen lokalen Apps habe ich es einfach direkt eingebaut.

Ich kann es benutzen. Andere aber nicht.

Da ich selbst derjenige bin, der es entwickelt, funktioniert es bei mir natürlich.

Damit andere Personen es nutzen können, müssen allerdings Node.js installiert und die abhängigen Pakete vorbereitet werden.

Für Menschen, die mit Entwicklung vertraut sind, ist das nicht besonders schwierig.

Aber für Designer und Projektleiter ...

Bitte installieren Sie zuerst Node.js

– eine Review-App, die damit beginnt.

... Das ist nicht mehr einfach nur eine simple Review-App.

Also,

"Dann sollte es sich doch einfach mit einem Klick starten lassen!"

Ich dachte mir das und habe deshalb auch eine Startdatei namens start-mac.command erstellt.

Ein Doppelklick startet das Terminal, nimmt die nötigen Vorbereitungen vor, startet die Anwendung und öffnet anschließend den Browser.

Perfekt. Alles klar.

... dachte ich zumindest.

Wenn ich es mir genauer überlege,

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

ist eine Anleitung, die ich auch ziemlich unheimlich finde.

Soll ich dem Chef etwa schreiben: "Doppelklicken Sie bitte mal hierauf!"? ......Verdächtig. Obwohl ich es selbst gebaut habe, wirkt es verdächtig.

Es funktioniert zwar irgendwie, aber als Lösung für die interne Zusammenarbeit hat es sich nicht durchgesetzt.

Wenn man zusammen mit einer KI eine App entwickelt,

"Auf meinem Rechner läuft es, aber andere können es nicht nutzen"

Diese Hürde kennt man in der Entwicklung offenbar gut, und man stößt ganz selbstverständlich darauf.

Der Rat eines erfahrenen Entwicklers

Da kam von einem erfahrenen Entwickler ein Tipp.

Schreib eine README und sag einfach: "Lade den Ordner in Claude Code und richte alles nach der README ein." Das reicht doch, oder?

……

Ich hatte versucht, alles bequemer zu machen und viel in die App eingebaut, aber für Leute, die mit KI arbeiten, war der einfache Weg deutlich übersichtlicher.

Statt alles in der App lösen zu wollen,

Die einfachste Lösung finden – sowohl für die Nutzer als auch für die KI.

Auch das war eine lehrreiche Erfahrung.

Aber der Chef schreibt keinen Kommentar.

Außerdem habe ich eine README erstellt.

Die Startmethode habe ich ebenfalls vereinfacht.

Damit sollte es funktionieren.

... dachte ich.

Doch dann ...

Keine Reaktion.

Chef, du bist bestimmt zu beschäftigt, um dich um mich zu kümmern ...

Dabei ist mir außerdem etwas Wichtiges aufgefallen.

Schwieriger als eine Review-App zu bauen ist es,

dafür zu sorgen, dass sie tatsächlich genutzt wird

.Das ist um ein Vielfaches schwerer.

Egal, wie praktisch man sie lokal macht,

"die App starten"

bleibt als erster Schritt nötig.

Für vielbeschäftigte Menschen ist schon dieser eine Schritt eine Hürde.

Dann eben ...

Dann lieber im Web

Könnte es nicht schon ausreichen, wenn man es einfach über eine URL nutzen kann?

Mit diesem Gedanken habe ich beschlossen, eine Web-Version von Design Marker zu entwickeln.

Fürs Erste baue ich eine Seite vor dem Login, um mir selbst Motivation zu geben.

Ich würde gerne vieles detailliert ausarbeiten, aber es gibt noch so viel zu bedenken, deshalb ist die Landingpage vorerst mit KI erstellt.

Ich habe überlegt, wie die Infrastruktur im Hintergrund aussehen soll. Dabei habe ich mich für Cloudflare entschieden.

Allerdings bin ich Designer.

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

Ich hatte schon von diesen Diensten gehört, aber es war das erste Mal, dass ich selbst die Struktur durchdacht und eine Web-App aufgebaut habe.

Jetzt ist der Einsatz meines KI-Lehrers gefragt.

Ich möchte eine Verwaltungsoberfläche für den internen Gebrauch sowie eine Review-Oberfläche entwickeln, die ich mit Kunden teilen kann.

Für die Verwaltungsoberfläche gibt es die Möglichkeit, Cloudflare Access zu verwenden.

Wie sieht es mit Kommentaren und Projektinformationen aus?

Die Speicherung in D1 ist möglich.

Und wie sieht es mit ZIP-Dateien aus?

Es gibt eine Möglichkeit, R2 zu nutzen.

Aha. Ich glaube, jetzt habe ich alles verstanden!

... Das glaube ich nur.

KI ist wirklich hervorragend.

Wenn man fragt, erhält man sogar recht konkrete Vorschläge für den Aufbau.

Bei dieser Entwicklung ist mir jedoch besonders aufgefallen, dass

es ein Unterschied ist, ob eine KI den Weg erklären kann, oder ob sich ein sicheres System bauen lässt

So war es also.

Von "Bitte bringen Sie es mir bei" zu "Liege ich mit dieser Annahme richtig?"

Besonders bei sicherheitsrelevanten Teilen wäre es mir unheimlich, die Entscheidung allein der KI-Antwort zu überlassen.

Deshalb habe ich mich entschieden, unklare und wichtige Punkte von einem erfahrenen Kollegen aus dem Engineering-Team überprüfen zu lassen.

Früher hätte ich wohl gedacht:

Ich möchte mit Cloudflare Folgendes umsetzen. Wie gehe ich am besten vor?

So hätte ich wahrscheinlich angefangen.

Doch dann müsste mein Kollege alles von Grund auf erklären.

Und das, obwohl er ohnehin beschäftigt ist.

"Kollege! Bitte erklär mir alles von Anfang an!"

wie ein Frontalangriff.

Diesmal habe ich zunächst in mehreren Durchgängen mit der KI hin und her geschrieben und meine Gedanken auf meine eigene Weise geordnet.

Und dann:

Der Admin-Bereich wird über Cloudflare Access auf interne Teammitglieder beschränkt. Der Share-Bereich wird pro Projekt über eine URL sowie ID und Passwort aufgerufen. Projektinformationen und Kommentare werden in D1 gespeichert, das komplette ZIP der Landingpage in R2. Ist dieses Verständnis korrekt?

Erst dann habe ich das Gespräch gesucht.

Also:

"Bitte erklären Sie es mir"

statt

"Ist dieses Verständnis korrekt?"

ist daraus geworden.

Für mich war das eine ziemlich große Veränderung.

Dadurch sind weniger Rückfragen bei meinen Vorgesetzten nötig, und die Zeit kann für die Punkte aufgewendet werden, die wirklich eine Prüfung brauchen.

Auch ich kopiere die Antworten der KI nicht mehr einfach nur, sondern

"Warum macht man das so?"

Schritt für Schritt nachvollziehen kann ich es inzwischen ebenfalls.

Als Web-Version kam die nächste Hürde

So funktioniert die Web-Version inzwischen Schritt für Schritt.

Einfach die URL senden, und schon lässt sich alles öffnen.

Deutlich bequemer zu bedienen als die lokale App.

"Ist damit nicht alles gelöst?"

... dachte ich zumindest.

Sobald es eine Web-Version gab, traten auf einmal Probleme zutage, die in der lokalen Version kaum aufgefallen waren.

Zum Beispiel:

Dürfen wir Landingpages vor der Veröffentlichung in der Cloud speichern?
Wer darf welches Projekt einsehen?
Wie werden Passwörter geschützt?
Wie werden unbefugte Anmeldeversuche verhindert?
Lässt sich hochgeladenes HTML sicher darstellen?
Wann werden Projektdaten nach Projektabschluss gelöscht?

usw.

Ein Anmeldebildschirm allein bedeutet noch nicht, dass die Sicherheit vollständig umgesetzt ist.

Das klingt selbstverständlich, aber erst beim eigenen Umsetzen wird einem der Aufwand wirklich bewusst.

Derzeit implementieren wir die Grundlagen, darunter Cloudflare Access, projektbezogene Anmeldungen sowie die Speicherung in D1 und R2.

Andererseits,

Es gibt noch Bereiche, die wir vor einer offiziellen allgemeinen Veröffentlichung verbessern möchten, darunter die Stärkung des Passwortschutzes, die Begrenzung der Anmeldeversuche, die Trennung der HTML-Vorschau sowie Regeln für das Speichern und Löschen von Daten.

Design Marker bietet außerdem einen Modus, in dem ZIP-Dateien nicht in der Cloud gespeichert werden und die Überprüfung ausschließlich im Browser stattfindet.

Notwendige Projektinformationen und ZIP-Dateien werden nur dann gespeichert, wenn Projekte in der Cloud geteilt werden.

Design Marker ist derzeit noch kein offizieller Dienst.

Wir testen das Tool derzeit hauptsächlich intern.

Mit diesem Projekt haben wir also nicht

einen vollständig sicheren Dienst fertiggestellt

Vielmehr

befinden wir uns mitten in der Arbeit an einer App, in der wir herausfinden, was geschützt werden muss, und die notwendigen Maßnahmen Schritt für Schritt umsetzen.

Mit dem Schritt ins Web kommen nicht nur Vorteile.

Gleichzeitig entsteht die Verantwortung, die Daten der Nutzer sicher zu verwahren.

Dieses Projekt hat mich dabei wirklich viel gelehrt.

Das fertige Admin-Dashboard des Design-Makers.

Über das Dashboard können Mitarbeitende alle Korrekturprüfungen einsehen.

Auf der Detailseite lassen sich über Schnellverknüpfungen zur Struktur direkt die Landingpage ansehen und Kommentare hinterlassen.

So lassen sich die Kommentare zur Landingpage direkt einsehen. Frühere Kommentare können ebenfalls nachgeschlagen werden, wodurch Änderungen an der Struktur deutlich reibungsloser verlaufen.

Auch mit KI war Lernen notwendig

Im Verlauf dieser Entwicklung wurde mir noch etwas anderes deutlich bewusst.

Dank KI fällt es Designerinnen und Designern heute deutlich leichter, sich selbst an Entwicklung zu wagen.

Ich selbst,

"Ich möchte das bauen"

Der Bereich, den man von einer Idee bis zu einem funktionierenden Produkt selbst begleiten kann, ist eindeutig größer geworden.

Aber das bedeutet,

"Man muss nicht mehr lernen"

nicht, dass es nicht mehr nötig ist.

Das Gegenteil war der Fall.

Diese Struktur wird empfohlen

Verstanden!

Allein reicht das nicht. Das ist riskant.

Was wirklich nötig ist,

"Warum?" "Ist das diesmal auch wieder so in Ordnung?" "Fehlt irgendetwas?" "Sollte dieser Teil nicht besser von einem Fachmann geprüft werden?"

, war die Erkenntnis.

Man braucht das Wissen, um beurteilen zu können, ob der Vorschlag der KI zu den Anforderungen dieses Projekts passt und was ihm fehlt.

KI ist ein wirklich verlässlicher Partner.

Die letzte Entscheidung und die Verantwortung liegen aber bei Menschen.

Die Umsetzung von Design Marker als Webseite hat uns auch dazu gebracht, unseren Umgang mit KI noch einmal grundsätzlich zu überdenken.

In der Zeit der KI wird sich vielleicht vor allem die Überprüfung von Arbeitsergebnissen verändern.

KI erstellt eine Landingpage in wenigen Minuten.

Entwürfe, für die man früher Stunden gebraucht hat, liegen jetzt erstaunlich schnell vor.

Doch danach folgt,

"Hier bitte so ändern" "Diesen Abstand etwas vergrößern" "Nur dieses Bild austauschen"

Diese Art des Austauschs hat sich erstaunlicherweise seit Langem kaum verändert.

Nur die Geschwindigkeit der Erstellung ist gestiegen,

Ein Mensch prüft das Ergebnis, teilt die gewünschten Korrekturen mit und lässt es erneut erstellen.

Dieser Teil ist noch immer sehr menschlich geprägt.

Deshalb denke ich, dass in letzter Zeit

nicht nur die KI selbst,

wie KI und Mensch miteinander kommunizieren

zunehmend wichtig wird.

Design Marker ist einer dieser Versuche.

Aktuell werden die Eingaben in

Wir testen Funktionen wie Kommentare zu HTML, Bildanhänge, die Zusammenführung mehrerer Reviews und die projektbezogene Versionsverwaltung.

Es gibt noch unzählige weitere Ideen, die wir umsetzen möchten.

Direktes Markieren auf Screenshots.

Korrekturanfragen an die KI direkt aus Kommentaren heraus.

Verbesserter Vergleich zwischen Versionen.

Mehr Komfort bei Reviews durch mehrere Personen.

Und natürlich mehr Sicherheit, etwa durch Authentifizierung, HTML-Vorschau und verbesserte Datenverwaltung.

Zunächst nutzen wir das Tool intern im Alltag und verbessern es Schritt für Schritt.

Zu Beginn

„Die Slack-Kommentare laufen mir ständig durch, ich muss das irgendwie in den Griff bekommen.“

war das Gefühl, mit dem ich ein kleines Werkzeug zu bauen begann.

Doch dann, ehe ich es merkte,

entwickelte ich eine lokale Anwendung,

die der Geschäftsführer nicht nutzen konnte.

Ich machte sie per Web verfügbar,

arbeitete mich in Cloudflare ein,

rang mit Sicherheitsfragen,

holte mir Rat bei erfahrenen Entwicklerkollegen

und musste schließlich auch den Umgang mit KI durchdenken.

……Eigentlich wollte ich nur eine kleine Review-App bauen. Dabei hat sich gezeigt, dass viel mehr zu bedenken ist, als ich gedacht hatte.

Trotzdem finde ich es spannend, dass man heute kleine Unannehmlichkeiten aus dem eigenen Arbeitsalltag gemeinsam mit einer KI in konkrete Lösungen verwandeln kann.

Sobald Design Marker so weit ausgereift ist, dass wir es ohne Bedenken öffentlich zugänglich machen können, stelle ich es gerne offiziell vor.

Vorab noch:

Zuerst werde ich unseren Geschäftsführer dazu bringen, einen richtigen Kommentar zu schreiben (lacht). Aber heute kann ich mir jedenfalls schon mal ein leckeres Feierabendbier vorstellen.