Erstellung einer Landingpage mit Claude Design und Claude Code: Lektionen über das Machen vs. Beurteilen

Ich habe eine Landing Page gebaut, ohne Figma auch nur einmal zu öffnen. Die Tools, die ich verwendet habe, waren hauptsächlich Claude Design und Claude Code. Die Produktionszeit betrug eine Woche, mit insgesamt über 300 Hin-und-Her-Interaktionen mit der KI.

Was ich aus diesen 300 Interaktionen gelernt habe, ist, dass das "Machen" zwar durch KI deutlich einfacher geworden ist, die Obergrenze der endgültigen Qualität jedoch immer noch durch das menschliche Urteilsvermögen bestimmt wird. Die KI übernimmt alles bis zur Bereitstellung von Kandidaten. Von dort aus war es die Aufgabe desjenigen, der die Qualität beurteilt und zur Überarbeitung zurückschickt, sie auf den gewünschten Ton zu bringen.

Ich habe die Dokumentationsseite für Design Harness erstellt, ein Framework, das Design auf vier Ebenen behandelt: Einschränkungen, Kontext, Verifikation und Evaluation. Da es eine Seite über Design ist, hatte ich auch ein Unterthema: herauszufinden, wie weit ich mit den oberflächlichen Details und Interaktionen gehen kann.

https://x.com/kgsi/status/2072829167285207077

Ich werde auf die Schritte, die ich unternommen habe, und wo ich diese 300 Interaktionen verbracht habe, zurückblicken, inklusive tatsächlicher Screenshots.

Wie ich Claude Design und Claude Code unterschiedlich eingesetzt habe

Ich habe diese LP gebaut, indem ich die Rollen zwischen zwei Haupttools aufgeteilt habe. Claude Design ist ein conversational Design-Generierungstool, bei dem Sie Anweisungen per Chat geben und sofort ein Live-HTML-Prototyp erscheint. Claude Code ist ein Coding-Agent, der im Terminal läuft und die Codebasis direkt implementiert.

Die Arbeitsteilung war klar: Claude Design eignet sich hervorragend, um frühzeitig Prototypen zu formen. Dieses Mal habe ich ein Dokument mit der Designstrategie und Wireframes bereitgestellt, ein paar Fragen beantwortet, und die erste LP wurde ausgegeben. Diese Methode ist in der Phase effektiv, in der man Richtungen ausprobiert und Dinge kaputt macht.

Für die Arbeit, es auf Produktionsqualität zu bringen – wie responsives Verhalten und Zugänglichkeitsdetails – muss man es hingegen mit Claude Code verfeinern.

Das Design mit Design entscheiden und es mit Code fertigstellen. Ich habe sie in dieser Reihenfolge verwendet.

Alles vor dem Machen verbalisieren

Als ich mich entschied, diese Seite zu bauen, stand die Richtung bereits fest. Was mir vorschwebte, war: "Was passiert, wenn man moderne Schriftarten und Effekte zu einem klassischen, internationalen Stil hinzufügt." Das Konzept selbst stammt aus der Design-Harness-Dokumentation.

Beachten Sie, dass Claude keine Bilder selbst generieren kann, daher habe ich das ChatGPT Images 2.0 überlassen. Ich habe aus Beispielseiten-Bildern alternative Ideen abgeleitet, ein Moodboard für die Seite erstellt, die ich erstellen wollte, und Hintergrundbilder generiert. Ich habe alles vorab in Worte und Bilder gefasst, um die 'gute' Richtung zu definieren. Alle nachfolgenden Interaktionen waren im Wesentlichen ein Abgleich damit.

Erkundung visueller Töne mit Codex (ChatGPT Image 2.0), Suche durch verschiedene Bilder und Moodboards.

Verfeinerung braucht hunderte von Interaktionen (mindestens)

Nachdem die Vorbereitung abgeschlossen war, begann der Austausch mit Claude Design. Wenn ich auf die Screenshots zurückblicke, gab es insgesamt über 200 Interaktionen (etwa eine Woche in Bezug auf die gesamte Produktionszeit). Hier ist die Aufschlüsselung der Sitzungen:

• "Anforderungen an die LP-Seitengenerierung": ca. 80 Runden
• "Design Harness-Animation": ca. 80 Runden
• "KV-Text-Hintergrund-Animation": ca. 50 Runden
• "Verbesserung der Design-Harness-Erklärung": ca. 10 Runden

Die Lade-Animation zu Beginn und die Key-Visual (KV)-Effekte erforderten besonders viele Interaktionen. Die Effekte wurden nicht auf einmal erledigt; ich habe Anweisungen geschichtet, um sie aufzupolieren (z. B. ein Effekt, der von unten kommt, überlagernde Unschärfeeffekte usw.).

Screenshots von Claude Design. Da die Genauigkeit mit zunehmendem Kontext abnimmt, habe ich für jede wichtige Aufgabe neue Sitzungen erstellt, um zu experimentieren.

Separat habe ich mit Claude Code das responsive Verhalten und die Zugänglichkeit verfeinert, also summiert es sich auf etwa 300 Interaktionen. Vom Gefühl her denke ich, dass der Hero-Bereich am meisten Zeit in Anspruch genommen hat.

Beim Übergang von Claude Design zu Claude Code habe ich die Share-Funktion verwendet, aber ich empfehle, die gesamte ZIP-Datei per "Export" zu übergeben. "Senden an" ist zwar einfacher, hat aber Einschränkungen bei der Bildübertragung und die Reproduktionsgenauigkeit ist nicht so hoch.

Betrachtet man die Zahlen, mag es wie eine lästige Pflicht erscheinen, aber das Geben von Anweisungen ist einfacher geworden. Man muss HTML und CSS nicht mehr vollständig verstehen. Claude Design hat eine Annotationsfunktion, mit der Sie direkt zu Elementen auf dem Bildschirm Kommentare hinzufügen können. Wenn Sie auf den Teil zeigen, den Sie reparieren möchten, wird fast jede detaillierte Anweisung umgesetzt. Daher fielen die Anweisungen, die ich gab, meist in drei Kategorien:

Auf Elemente mit Annotationen zeigen, um Details zu korrigieren. Bewegungsabläufe in Worte fassen, wie die KV-Text-Hintergrund-Anzeige. Den Ton wieder auf "klassischen internationalen Stil" ausrichten... Die einzige verbleibende notwendige Fähigkeit ist die Fähigkeit, Bewegung und Ton zu verbalisieren.

Nehmen wir die Navigation als Beispiel für den Austausch.

Anfangs war es ein Effekt, bei dem beim Hovern eine Unterstreichung gleitet. Das war schwer zu verstehen, also habe ich eine Referenz-Implementierungs-URL bereitgestellt und es auf einen Character-Shuffling-Effekt umstellen lassen. Dann änderte sich die Zeichenbreite beim Shuffling, was zu Verschiebungen der Menüpositionen führte. Als ich die Breite fixierte, wurde der Abstand ungleichmäßig. Selbst nachdem ich es mit "es ist immer noch nicht gleichmäßig" zurückgeschickt hatte, wurde es nicht behoben. Schließlich hörte ich auf, die Breite anzupassen, und löste es, indem ich die Navigationsschriftart auf eine feste Monospace-Schriftart umstellte. Wenn die Zeichenbreite konstant ist, bewegt sich nichts, selbst beim Shuffling. Das dauerte 5 Interaktionen.

Die 300 Interaktionen waren größtenteils eine Wiederholung dieses Kreislaufs. Bereitstellung von URLs von Seiten oder Implementierungen, die ich als Referenz für die Richtung haben wollte. Kurzes Verbalisieren des Unbehagens mit dem, was herauskam, wie "der Abstand ist nicht mehr gleichmäßig", und zurückschicken. Wenn dieselbe Korrektur zweimal fehlschlug, hörte ich auf zu verfeinern und änderte die Prämisse. Am Ende habe ich nie ein langes Pflichtenheft geschrieben.

Übrigens, obwohl ich es dieses Mal kaum verwendet habe, gibt es ein Dokument namens Animation Vocabulary and Skills, das Anweisungen effizienter machen sollte, wenn es verwendet wird. https://animations.dev/vocabulary

Der Akt des Machens und der Akt des Urteilens

Wenn ich auf den Inhalt der Interaktionen zurückblicke, war es ein Prozess des Beurteilens der Qualität des Hervorgebrachten und des wiederholten Zurückschickens. Der Akt des Machens selbst kann heute fast vollständig von der KI übernommen werden. Wenn man Anweisungen gibt, erscheinen sofort Kandidaten. Aber ist das Animation-Timing richtig? Ist genug Weißraum vorhanden? Was ist gut und was ist schlecht? Das kann die KI nicht beurteilen. Es ist immer noch unmöglich, die KI in einem Durchgang den beabsichtigten Ton ausgeben zu lassen. Wenn man die Qualität steigern will, bleibt einem nichts anderes übrig, als zu beurteilen und zurückzuschicken.

Das ist wahrscheinlich der Grund, warum einfache Outputs nicht dieses Qualitätsniveau erreichen. Eine Studie der UC Berkeley School of Information, die 13 Sitzungen von Designern beobachtete, die generative KI-Tools verwendeten, nennt das Phänomen, dass der Output zu einem Stil tendiert, der "hochwertig" und dennoch vertraut aussieht, die "Konvergenzfalle".

https://x.com/kgsi/status/2074250174986362999

Ohne das Urteilsvermögen, Dinge zurückzuschicken, verharrt der Output in einer generischen, niemandem gehörenden Ordentlichkeit. Der Großteil der 300 Interaktionen wurde dafür verwendet, ihn von dort zurück zum beabsichtigten Ton zu ziehen.

Was passiert mit Menschen, die urteilen können?

Es gibt die Ansicht, dass KI irgendwann in der Lage sein wird, diese ästhetischen und qualitativen Urteile vollständig zu übernehmen. Ich denke, das wird in einigen Bereichen passieren.

Allerdings war ich in jeder der über 300 Interaktionen derjenige, der das Unbehagen aufgriff und zurückschickte, und es gab in diesem Prozess keine Anzeichen dafür, dass dies automatisiert wurde. Das ist natürlich nur n=1 aus dem Bau einer einzigen LP. Ich weiß noch nicht, ob das Gleiche für andere Designarbeiten gilt.

Nach Abschluss dieses Prozesses ist meine Vorhersage, dass die "Plätze" für Menschen, die Dinge herstellen, abnehmen werden. Ein Job, der eine Woche braucht, um eine LP zu designen, wird durch einen Job ersetzt, der einen halben Tag Austausch mit einer KI umfasst. Zu diesem Zeitpunkt werden die Menschen, die auf ihren Plätzen bleiben, diejenigen sein, die das Wissen und die Beurteilungskriterien haben, um in Sekundenschnelle vor den aufgereihten Kandidaten zu sagen: "Nimm den rechten Vorschlag, aber mach die Bewegung neu." Ich denke, die Nachfrage nach Menschen, die urteilen können, während sie KI beherrschen, wird tatsächlich steigen.

Was Designer schärfen sollten, wird sich von ihren Händen zu ihren Augen verlagern. Die Urteile, die ich in diesen 300 Interaktionen gefällt habe, stützten sich letztlich auf meine Erfahrung, Dinge mit meinen eigenen Händen zu machen. Wenn dem so ist, gibt es in einer Welt, in der die Anzahl der Male, die wir Dinge herstellen, abnimmt, einen Weg, nur die Augen zu entwickeln?

Als Randnotiz: Die Curation-Seite "Parascope", auf der man "Design"-Fähigkeiten erwerben kann, ist derzeit erfolgreich 👉 http://parascope.design/