3 Wege, das Webdesign-Problem Nr. 1 von Claude Code zu beheben
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00Ich zeige dir, wie du das Monster namens AI-Slop in drei einfachen Schritten besiegst.
00:00:05AI-Slop hat im Laufe der Jahre viele Formen angenommen,
00:00:08und vor nicht allzu langer Zeit sah es noch so aus:
00:00:10Ein generisches SaaS-Template mit Inter-Schrift überall und blau-violetten Farbverläufen.
00:00:16Heute sieht AI-Slop jedoch eher so aus.
00:00:19Das ist definitiv besser, schreit aber immer noch nach KI.
00:00:22Es hat eine bestimmte Farbpalette, eine bestimmte Schrift, einfach einen Stil,
00:00:25bei dem man sofort merkt, dass er in ein, zwei Prompts generiert wurde.
00:00:30Heute zeige ich dir, wie du aus diesem Schema ausbrichst.
00:00:32Ich zeige dir, wie du deinen eigenen Geschmack entwickelst und ins Webdesign einbringst.
00:00:36Ich zeige dir, welche Skills und MCPs du nutzen solltest, um dich dabei zu unterstützen.
00:00:42Und schließlich zeige ich dir den genauen Build-Ablauf, den du dafür anwenden solltest.
00:00:47Welche Prompts sollten wir nutzen?
00:00:49Wie sollten wir Prototypen bauen?
00:00:50Was bedeutet es, das Webdesign zu iterieren und anzupassen, bis es uns wirklich gefällt?
00:00:54Am Ende hast du eine flexible Roadmap, die du auf all deine KI-Designprojekte anwenden kannst.
00:00:59Fangen wir also an.
00:01:00KI hat keinen Geschmack.
00:01:01Diesen Satz hast du sicher schon gehört, aber er ist wichtig.
00:01:04Genau darum geht es in Schritt eins: Wie entwickeln wir Geschmack?
00:01:08Wie kuratieren wir ihn?
00:01:09Wie bringen wir ihn in den Webdesign-Prozess ein?
00:01:12Denn das Problem mit dieser und jener Website ist kein technisches.
00:01:15Sie sind einfach generisch.
00:01:17Egal wie gut die Modelle werden, selbst wenn sie morgen zehnmal besser sind:
00:01:20Es verschiebt nur, was wir als generisch empfinden.
00:01:23Wenn wir aber unseren Geschmack einbringen, schaffen wir etwas Einzigartiges, Subjektives und Spezifisches – aber eben auch etwas, das im besten Sinne "gut" ist.
00:01:34Für Schritt eins kuratieren wir daher eine Bibliothek voller Design-Inspirationen.
00:01:41Das hilft uns auch dabei, unseren eigenen Geschmack zu schärfen.
00:01:43Wir setzen uns intensiv mit hochklassigem Webdesign auseinander.
00:01:48Sobald wir diese Bibliothek mit Inhalten haben, die uns gefallen, spiegelt sie unseren Geschmack wider.
00:01:53Das können wir der KI als Grundlage übergeben, anstatt uns auf nichts zu stützen und am Ende nur ein mittelmäßiges Standardergebnis zu bekommen.
00:02:04Wo findest du also Inspiration?
00:02:06Es gibt einige Websites, die sich dafür hervorragend eignen.
00:02:08Ich bin hier gerade auf Dribbble.
00:02:10Das ist Dribbble mit drei b.
00:02:11Ich habe "Webdesign" eingegeben, nach Beliebtheit gefiltert und sehe viele verschiedene Landingpages.
00:02:16Genauso gut ist Pinterest.
00:02:18Auch hier habe ich nur "Webdesign" eingegeben, und was sehe ich?
00:02:20Hero-Sections, die sich stark von dem unterscheiden, was Claude mir bei "Baue eine Landingpage" generiert.
00:02:27Und schließlich Twitter – mein Favorit, weil dort viele fantastische Creator wirklich cooles Design und UI-Zeug machen, das man sonst nirgends sieht.
00:02:37Deine erste Aufgabe ist es also, diese Seiten zu durchsuchen, Gefallenes per Screenshot zu sichern und zu speichern.
00:02:44Du kannst auch Links speichern, wenn du die echten Websites hast.
00:02:46Danach kannst du die Screenshots einfach in einem Ordner lassen oder wie ich eine einfache Web-App mit Claude Code erstellen, die als Inspirationsbibliothek dient.
00:02:55Sie bündelt alles an einem Ort, gruppiert die Bildelemente nach Designtyp und lässt die KI erklären, was das Design ausmacht und welches Fachvokabular dazu gehört.
00:03:09Klicke ich auf einen Screenshot, erhalte ich passende Schlüsselbegriffe zum Design.
00:03:13Das hier ist etwa eine voxel-gerenderte Landschaft.
00:03:15Hier unten kann ich direkt den Bild-Prompt kopieren.
00:03:18Wenn ich also ein Hintergrundbild für meine Hero-Section wie dieses erstellen will, liefert mir das die Basis.
00:03:24Und dann gibt es noch diesen Button "Briefing kopieren".
00:03:26Damit lässt sich dann die komplette Website erstellen.
00:03:30Auf das Prompting gehen wir in Schritt drei genauer ein.
00:03:34Im Großen und Ganzen geht es in Schritt eins darum, Geschmack zu kultivieren.
00:03:37Es geht darum, diese Inspirationsbibliothek aufzubauen,
00:03:40damit du nicht vor einem leeren Blatt sitzt und dir alles ausdenken musst.
00:03:43Greif nicht einfach auf das zurück, was dir spontan im Kopf herumgeistert.
00:03:46Am Anfang reicht die eigene Erfahrung dafür meist noch nicht aus.
00:03:49Wir müssen funktionierende Ansätze finden, die uns gefallen, und sie als Basis nutzen.
00:03:55Schritt zwei dreht sich komplett um externe Tools.
00:03:57Wir rüsten Claude Code aus, damit wir in Schritt drei beim Erstellen der Website direkt bessere Ergebnisse bekommen.
00:04:05Zuerst möchte ich über Impeccable sprechen – für mich aktuell der beste Frontend-Design-Skill überhaupt.
00:04:10Impeccable ist ein Open-Source-Tool
00:04:12mit fast 50.000 Sternen auf GitHub.
00:04:15Apropos GitHub: Es wurde dort sogar zu einem offiziellen Bestandteil der KI-Tools gemacht.
00:04:21Es ist ein einzelner Skill, der 23 verschiedene Befehle enthält, die dein Webdesign oder deine Komponenten auf vielfältige Weise verbessern.
00:04:30Es kann Schwachstellen analysieren und kritisieren,
00:04:33Feinschliff hinzufügen, Stile mutiger oder dezenter gestalten und vieles mehr.
00:04:37Es gibt 23 verschiedene Funktionen.
00:04:38Man muss diese 23 Funktionen in Aktion sehen, um sie wirklich zu verstehen.
00:04:42Auf der Website impeccable.style sehen wir alle 23 Befehle links aufgelistet.
00:04:49Schauen wir uns zum Beispiel "Bolder" an, wird genau erklärt, was es macht:
00:04:53Es verleiht vorsichtigen Designs mehr Wirkung, ohne im Chaos zu enden.
00:04:57Hier links sieht man die Standardausgabe von Claude Code.
00:05:01Führe ich "impeccable Bolder" aus, erhalte ich ein solches Ergebnis.
00:05:04Oder bei "Overdrive": Hier ist der Claude-Standard und hier die Impeccable-Version.
00:05:11Oder bei "Clarify": Hier die gewohnten Warnmeldungen und hier eine kompaktere, verständlichere Variante.
00:05:19Im Kern erkennt und beseitigt Impeccable minderwertigen KI-Slop.
00:05:23Das passiert in sieben Bereichen: Typografie, Farbe, Layout, Responsivität, Interaktion, Animation und UX-Texting.
00:05:32Ein ganzer Bereich der Website widmet sich Slop und gliedert ihn in 46 Muster auf.
00:05:38Du kannst das Impeccable CLI direkt ausführen,
00:05:40um zu prüfen, ob es sich um typischen "KI-Slop" handelt.
00:05:45Es zeigt dir das Ergebnis direkt auf einem Dev-Server an.
00:05:48Apropos Dev-Server: Es gibt auch einen Live-Modus.
00:05:50Du kannst deine Website aufrufen, dich durch die Komponenten klicken und direkt vor Ort Anpassungen vornehmen.
00:05:57Das erinnert an Claude Design, bietet aber eine visuelle Komponente, die im reinen Terminal fehlt.
00:06:06Die Installation ist denkbar einfach.
00:06:07Es enthält ein CLI und bietet drei verschiedene Installationswege.
00:06:11Kopiere im Zweifel einfach die URL in Claude Code, damit es die Installation für dich übernimmt.
00:06:17Falls dir Impeccable nicht zusagt, empfehle ich den Taste-Skill.
00:06:20Davon wurde gerade Version 2 veröffentlicht, allerdings noch als experimentelle Phase.
00:06:24Auch das findest du auf GitHub.
00:06:26Es hat knapp 66.000 Sterne und funktioniert nach einem ähnlichen Prinzip.
00:06:30Es sucht nach typischen KI-Slop-Merkmalen
00:06:34und liefert stattdessen ein stabileres Layout.
00:06:36Es optimiert Typografie, Animationen sowie Abstände.
00:06:39Am Ende entsteht eine einzigartige Benutzeroberfläche statt eines Standard-Templates.
00:06:43Für mich sind der Taste-Skill und Impeccable aktuell die besten Werkzeuge am Markt.
00:06:46Sie sind dem Standard-Frontend-Design von Anthropic und bekannten Repos wie UI UX Pro Max deutlich überlegen.
00:06:55Bei den MCPs nutze ich am häufigsten den Higgsfield MCP,
00:06:58weil er Claude Code Funktionen hinzufügt,
00:07:00die von Haus aus fehlen – vor allem die Bild- und Videogenerierung.
00:07:06Der Higgsfield MCP gibt dir Zugriff auf fast alle gängigen KI-Bild- und Videogeneratoren.
00:07:12Für Bilder nutze ich meist GPT Images 2. Bei Video wechselt der Favorit alle paar Wochen,
00:07:19aktuell schneidet Seedance am besten ab.
00:07:22Du kannst das auch als CLI installieren.
00:07:25Geh dafür einfach auf higgsfield.ai zu MCP & CLI, kopiere den Befehl in Claude Code und durchlaufe die Authentifizierung.
00:07:36Dort stehen auch erweiterte Skills zur Verfügung.
00:07:39Nach der Installation ruft Claude Code bei der Website-Erstellung einfach den MCP auf, um etwa Hintergrundbilder für die Hero-Section zu generieren.
00:07:49Auch individuelle Grafikelemente lassen sich so problemlos erstellen.
00:07:52Ein letzter Punkt, der weder Skill noch MCP ist: 21st.dev.
00:07:58Das passt thematisch auch zu Schritt eins und der Geschmacksfindung, konzentriert sich aber voll auf Komponenten.
00:08:06Angenommen, ich suche nach bestimmten Buttons:
00:08:10Klicke ich links auf "Buttons", erscheint eine Vielfalt an Varianten.
00:08:17Wähle ich einen Button aus, kann ich direkt den passenden Prompt kopieren.
00:08:22Unten steht "Prompt kopieren".
00:08:23Füge ich diesen in Claude Code ein, entsteht genau so ein Button.
00:08:27Das gibt es nicht nur für Buttons,
00:08:29sondern auch für Cards
00:08:31oder Preistabellen.
00:08:33Während Schritt eins das große Ganze bei Design und Ästhetik abdeckt, ist das hier perfekt für spezifische Einzelkomponenten.
00:08:43Wir gehen also eine Ebene tiefer ins Detail.
00:08:47Auch hier gibt es zahlreiche Optionen:
00:08:50Rahmen, Hintergründe oder Call-to-Action-Elemente.
00:08:56Es hilft uns, Ideen zu entdecken, an die wir sonst gar nicht gedacht hätten.
00:09:01Denn wie oft beschäftigt man sich schon detailliert mit Seitennummerierungen und deren Optionen?
00:09:05Wichtig für diesen Schritt: Verliere dich nicht im Werkzeug-Labyrinth. Man verfällt leicht dem Irrglauben, nur noch diesen einen Skill zu brauchen, um alle Designprobleme zu lösen.
00:09:19Es gibt viele beeindruckende Skills für schöne Websites,
00:09:22doch diese sind oft sehr starr und eingeschränkt.
00:09:26Sie schreiben extrem viel vor
00:09:27und liefern meist nur ein einziges festes Ergebnismuster.
00:09:30Ich empfehle den Taste-Skill, Impeccable und Higgsfield, weil sie flexibel sind und viele Richtungen erlauben.
00:09:38Da sie nichts starr vorgeben, garantieren sie nicht automatisch ein Top-Ergebnis – das hängt stark von deinem Prompting ab.
00:09:47Und davon, wie du deinen Geschmack einbringst.
00:09:49In Schritt drei führen wir nun alles zusammen.
00:09:52Ich zeige dir, wie du promptest und wie du schrittweise iterierst, bis das Ergebnis stimmt.
00:09:58Wir kommen jetzt zu Schritt drei, der eigentlichen Bauphase.
00:10:00Verabschiede dich von dem Gedanken, dass der erste Versuch direkt perfekt sein muss.
00:10:03Stattdessen empfehle ich, zu Beginn ein möglichst breites Netz auszuwerfen.
00:10:09Hier habe ich eine Website für eine fiktive KI-Firma namens Argus erstellen lassen.
00:10:13Ich habe die KI gebeten, fünf Varianten in fünf verschiedenen Stilen zu entwerfen.
00:10:19Wie du siehst, habe ich auf der linken Seite Impeccable genutzt
00:10:23und auf der rechten Seite den Taste-Skill.
00:10:25Ziel beim ersten Prompt ist es, verschiedene Stilrichtungen der gewünschten Website nebeneinander zu sehen.
00:10:32Fünf Varianten sind ein guter Richtwert.
00:10:33Sobald alle fünf vorliegen, erkennt man meist schnell, welche Richtung am besten passt.
00:10:39Habe ich mich etwa für Print-Tech entschieden, erstelle ich davon weitere Abwandlungen.
00:10:44Ich lasse drei Versionen dieses Stils anfertigen,
00:10:47wähle den Favoriten aus und verfeinere ihn im Detail.
00:10:49Mein Ziel ist es, alle Optionen gleichzeitig auf einem Bildschirm zu vergleichen.
00:10:54Im Terminal sieht man schwer, wo die Reise hingehen soll, wenn man nacheinander bloß einzelne Ansätze ausprobiert.
00:11:03Es ist viel effizienter, mehrere Stile gleichzeitig zu erzeugen und direkt zu vergleichen.
00:11:07Das ist die Grundidee.
00:11:09Sobald der gewünschte Stil feststeht, nutzen wir Tools wie den Higgsfield MCP, um Grafiken, Hero-Bilder und andere Elemente zu erstellen.
00:11:20Beim Prompting gehe ich nach einem klaren Schema vor.
00:11:26Ich übergebe der KI im Prompt im Wesentlichen vier Kernaspekte.
00:11:31Das Ganze ist weder starr
00:11:33noch übertrieben detailliert.
00:11:34Es braucht keinen riesigen 10.000-Seiten-Prompt, den man irgendwo kopieren muss.
00:11:38Solche fertigen Prompts führen meist ohnehin immer zum gleichen Ergebnis.
00:11:42Sie sind sehr starr.
00:11:43Zuerst übermitteln wir die Ästhetik:
00:11:47Welcher Designfamilie soll die Website grundlegend folgen?
00:11:52Zweitens geben wir Referenzbilder vor.
00:11:54Hier kommt unsere kuratierte Inspirationsbibliothek ins Spiel.
00:11:59Füge Links zu einer oder mehreren Websites ein, die als stilistischer Orientierungspunkt dienen.
00:12:03Ziel ist es, die Stimmung einzufangen.
00:12:05Es geht nicht darum, Inhalte oder Layout 1:1 zu kopieren,
00:12:12sondern das visuelle Gefühl zu übernehmen.
00:12:14Punkt drei ist das Ziel:
00:12:16Was bauen wir und warum?
00:12:17Handelt es sich um ein SaaS-Produkt?
00:12:19Geht es um eine Event-Seite?
00:12:21Wer ist die Zielgruppe?
00:12:22Welche Aktion sollen die Nutzer ausführen?
00:12:24Sollen sie die Inhalte nur lesen?
00:12:27Oder sollen sie irgendwo klicken und ein Formular ausfüllen?
00:12:29Diese Details bestimmen den Aufbau der gesamten Website.
00:12:33Zuletzt legen wir Leitplanken fest:
00:12:35Was muss zwingend enthalten sein und was soll vermieden werden?
00:12:39Das hilft dabei, typischen KI-Slop zu verhindern.
00:12:41Ein Beispiel: Keine lila Farbverläufe,
00:12:44keine Inter-Schriftart und ähnliche Vorgaben.
00:12:46Als Referenzen kannst du auch direkte Website-URLs übergeben.
00:12:51Gefällt dir der Stil einer Seite, füge die URL einfach als Referenz ein.
00:12:56Es müssen nicht immer reine Screenshots sein.
00:12:58Das bietet eine solide Grundlage für den Start.
00:13:02Der erste Entwurf muss wie gesagt nicht perfekt sein.
00:13:04Wichtig ist, dass die Richtung stimmt.
00:13:06Beim Prompting fordere ich gezielt verschiedene Designstile an.
00:13:11Hier kommt wieder die Inspirationsbibliothek ins Spiel.
00:13:14Hast du sie wie empfohlen aufgebaut, ist sie bereits in Stile unterteilt.
00:13:19Bei mir gibt es etwa den Print-Tech-Papierstil,
00:13:21einen Dither-Mono-Stil
00:13:23oder einen schnellen, ruhigen, cinematischen Stil.
00:13:26Ich weise Claude Code einfach an, sich fünf Ästhetik-Familien aus meiner Bibliothek zu greifen und passende Entwürfe zu erstellen.
00:13:36Ohne eigene Bibliothek formulierst du die Stile direkt im Prompt.
00:13:41Mache der KI klar, dass du fünf Varianten in fünf Stilen verlangst.
00:13:44Das funktioniert ebenso gut.
00:13:45Wir nutzen jetzt genau diesen Prompt und gehen die Schritte gemeinsam durch.
00:13:50Hier ist der Prompt, den ich verwendet habe.
00:13:51Ich habe gesagt: Erstelle eine Landingpage für Kestrel, eine KI-Analyseplattform für kleine Start-ups.
00:13:55Ich gebe das Ziel an und was wir eigentlich erreichen wollen, oder?
00:13:58Wir wollen, dass sie tatsächlich eine Demo buchen.
00:14:01Wir haben einige Rahmenbedingungen.
00:14:02Ich sage, dass wir für fast alle Hero-Pages ein monumentales Bild haben werden.
00:14:06Und ich wollte, dass nie dieser billige KI-Einheitsbrei verwendet wird.
00:14:08Dinge wie lila Farbverläufe, 3D-SaaS-Blobs und so etwas.
00:14:11Ich habe gesagt, dass es fünf Versionen der Seite erstellen soll.
00:14:14Und für jede Version schlüssele ich die Richtung auf.
00:14:16Ich gebe also die Ästhetik vor.
00:14:18Ich gebe ihm ein Referenzbild.
00:14:19Das stammt wieder aus meiner Geschmackssammlung.
00:14:22Erinnert euch an dieses Teil.
00:14:23Und dann erwähne ich, wie der zukünftige Hero-Bereich wahrscheinlich aussehen wird.
00:14:26Und das mache ich für alle fünf Versionen.
00:14:28Schauen wir mal, was dabei herauskommt.
00:14:29Hier sind die fünf erstellten Versionen.
00:14:31Hier ist die Print-Tech-Paper-Version.
00:14:35Mit Daten als Textur.
00:14:36Denkt daran, all diese Grafiken wurden einfach von Claude Code generiert.
00:14:40Ich habe nichts wie das Higgsfield MCP verwendet, um die Grafiken zu erstellen.
00:14:45Hier haben wir die weite, ruhige Variante.
00:14:48Das soll ein Platzhalter für eine Art Bergkette sein, die wir erstellen würden.
00:14:52Wir haben Dither Mono.
00:14:55Und dann haben wir Classical Remix.
00:14:59Denkt also daran, wir schauen uns das Ganze erst einmal aus der Vogelperspektive an, welcher Stil mir gefällt.
00:15:07Gewissermaßen.
00:15:09Dither Mono sieht irgendwie cool aus.
00:15:11Ich finde, die weite, ruhige Version sieht ziemlich stark aus.
00:15:15Sie ist definitiv anders.
00:15:16Sehr minimalistisch.
00:15:17Aber mir gefällt, was sie macht.
00:15:19Und ich denke, das könnte richtig cool aussehen, wenn wir das Bild dahinter hinbekommen.
00:15:24Ich werde mich also für diese weite, ruhige Richtung entscheiden.
00:15:27Und jetzt werde ich es bitten, im Grunde drei verschiedene Versionen davon zu erstellen.
00:15:33Speziell beim Inhaltsbereich möchte ich einfach sehen, was so möglich ist.
00:15:36Ich habe also gesagt: Nehmen wir die weite, ruhige Version.
00:15:38Generiere drei Versionen dieser Ästhetik für mich, indem du die Layout-Formate änderst usw.
00:15:42Und man kann sehr genau vorgeben, was man anders sehen möchte.
00:15:45Genau wie vorhin wird es also drei Versionen davon geben.
00:15:49Dann legen wir die fest, die uns am besten gefällt.
00:15:51Und dann können wir ins Detail gehen, was das Ändern von Komponenten, Schriftarten, Farben und das Erstellen der Assets angeht.
00:15:59Es kommen also ein paar weitere Varianten.
00:16:00Hier ist das Original, richtig?
00:16:02Sehr minimal.
00:16:03Sehr vertikal.
00:16:05Hier ist die zweite, die auch diesen ruhigen Ansatz verfolgt.
00:16:08Aber es sieht so aus, als hätte sie dem Hauptteil etwas mehr hinzugefügt.
00:16:13Hier ist eine, die eher wie ein Register aufgebaut ist.
00:16:14Sie hat einiges nach links verschoben.
00:16:16Und jetzt haben wir diesen Index, der mitscrollt, was mir eigentlich ganz gut gefällt.
00:16:22Dann haben wir noch diese hier, die sie Frames genannt hat.
00:16:25Okay.
00:16:25Alles hat also diese Ränder an den Seiten, die jeden Abschnitt einrahmen.
00:16:31Um ehrlich zu sein, gefällt mir das Register am besten.
00:16:33Ich mag es, wie dieser Bereich links mitwandert, wenn man nach unten scrollt.
00:16:38Vielleicht fügen wir rechts noch etwas hinzu.
00:16:40Ich bin mir nicht ganz sicher.
00:16:41Aber das hier gefällt mir.
00:16:42Es ist ein ordentlicher, minimaler Ansatz, der dennoch etwas anders aussieht.
00:16:46Ich werde dem Tool jetzt also sagen: Wir nehmen Version 3B, die ruhige Register-Version.
00:16:51Und ich möchte mich zuerst um das Hero-Bild kümmern.
00:16:55Wenn der Hintergrund steht, experimentiere ich mit Schriftarten und der Anordnung der Elemente.
00:17:01Der Prompt lautet also: Nehmen wir V3B, die Register-Version.
00:17:08Und jetzt möchte ich das Hero-Bild perfekt hinbekommen.
00:17:10Du hast ja die Beispiele für Hero-Bilder aus unserer Inspirationssammlung, die zur ruhigen Ästhetik gehören.
00:17:19Ich glaube, das sind etwa drei oder vier.
00:17:21Kannst du vier verschiedene Bilder erstellen, die dazu und speziell zu unserem Hero-Bild passen?
00:17:30Bezogen auf die Gesamkomposition.
00:17:31Nutze dafür das Higgsfield MCP.
00:17:33Mache sie hochwertig.
00:17:34Erstelle sie in 2K.
00:17:35Mache vier Designs und rufe sie anschließend auf.
00:17:39Claude Code hat also das Higgsfield MCP aufgerufen.
00:17:40Hat einige Bilder erstellt.
00:17:42Hat sie in den Hero-Bereich eingefügt.
00:17:43Und jetzt werden die verschiedenen Optionen angezeigt.
00:17:45Das ist die erste Version, die Luftaufnahme.
00:17:47Wir haben die Felsformation.
00:17:49Dann haben wir fast so etwas wie ein Aquarellgemälde, was ich cool finde.
00:17:53Und dann hat es das Wolkenmeer gemacht.
00:17:55Ehrlich gesagt bin ich kein großer Fan von der 2, weil sie etwas Text überlagert.
00:18:01Ich mag Nummer eins und vier.
00:18:07Ich finde, Nummer eins sieht ziemlich cool aus.
00:18:12Aber vielleicht könnten wir noch einen Farbtupfer hinzufügen, da es sehr schwarz-weiß ist.
00:18:17Ein Hauch von Farbe würde bestimmt gut aussehen.
00:18:19Das werde ich dem Tool jetzt sagen.
00:18:20Können wir mit Option vier weitermachen und mehrere Versionen davon erstellen und zeigen?
00:18:27Können wir eventuell etwas Farbe hinzufügen?
00:18:30Im Moment ist es sehr schwarz-weiß.
00:18:31Ein kleiner Farbtupfer an der richtigen Stelle könnte gut wirken.
00:18:34Es wurden also einige Variationen erstellt.
00:18:35Hier ist das Original.
00:18:37Hier wurde etwas Farbe hinzugefügt: Dawn Touch, Golden Hour, Alpine Glow und Duotone, was viel zu viel ist.
00:18:48Von allen gefällt mir Alpine Glow am besten.
00:18:51Wir entscheiden uns also dafür.
00:18:52Nehmen wir Alpine Glow und rufe die Webseite mit diesem Hero-Bild auf.
00:18:58Achte dabei auf die Übergänge zwischen dem Hero-Bereich und dem Inhaltsbereich.
00:19:03Es sollte kein zu abruptes Umspringen sein.
00:19:07Mach es so, dass es hochwertig und elegant aussieht.
00:19:08Was das Laden der Seite angeht: Es soll sich gewichtig und wertig anfühlen.
00:19:16Das ist das Ergebnis.
00:19:18All diese Elemente laden nach und nach ein, was mir gefällt.
00:19:21Beim Hinunterscrollen gibt es keinen harten Übergang.
00:19:25Es blendet einfach langsam aus.
00:19:29Und ja, dieser Index gefällt mir wirklich ausgesprochen gut.
00:19:33Ich finde, das sieht extrem cool aus.
00:19:35Unten steht “Demo buchen”.
00:19:37Insgesamt sehr minimal, aber es passt zur Stimmung.
00:19:41Jetzt möchte ich beginnen, an Details zu feilen und etwas mehr Ausdruckskraft hineinzubringen, damit es nicht zu karg wirkt.
00:19:50Ehrlich gesagt finde ich aber, dass es gut passt.
00:19:53Der einfachste Weg ist, eine Anpassungsleiste einbauen zu lassen, statt nur zu raten.
00:20:00Das ist etwas, das man in Claude Design sieht.
00:20:03Der Prompt sieht dann etwa so aus.
00:20:05Können wir das Prinzip aus Claude Design nachbauen und eine Tweak-Bar auf diesem Dev-Server einblenden, um Schriftgröße, Schriftart oder Akzentfarben anzupassen?
00:20:16Überall, wo Gestaltungsentscheidungen anstehen – besonders im Inhaltsbereich –, möchte ich diese direkt auf der Seite anpassen können.
00:20:28Gib mir also ruhig viele Einstellungsoptionen.
00:20:30Während das gebaut wird, möchte ich kurz über Referenzen sprechen.
00:20:35Bisher ging es bei Inspiration und Referenzen vor allem um den Hero-Bereich, also das Erste, was man sieht.
00:20:44Das gilt aber genauso für den Hauptteil der Seite.
00:20:46Genauso wie wir Screenshots übergeben haben, geht das auch für den Inhaltsbereich.
00:20:49Man kann dem Tool Links von Websites geben, deren Formatierung übernommen werden soll, da Claude Code diese lesen kann.
00:20:57Und ich möchte, dass das auf meine Seite angewendet wird.
00:20:59Genau wie wir diese Inspirationssammlung angelegt haben, kann man das auch für den restlichen Inhalt tun.
00:21:04Es kann sich einfach darum handeln, wie der Hauptteil einer Website strukturiert ist.
00:21:08Unten rechts sieht man nun diesen Anpassen-Button.
00:21:14Wenn ich die Leiste öffne, kann ich wie in Claude Design direkt Anpassungen vornehmen.
00:21:19Man kann die Überschrift-Schriftart ändern – das basiert darauf, dass ich die Unterschiede direkt sehen muss.
00:21:28Ich weiß vorher nicht, welche Schriftart gut aussehen wird.
00:21:30Ich möchte Claude Code nicht ständig bitten müssen, 10 Versionen mit verschiedenen Schriftarten zu generieren.
00:21:35Gebt mir einfach genau so ein Bedienelement, richtig?
00:21:37Visuell schnell zu iterieren führt am Ende zu dem Ergebnis, das man haben möchte.
00:21:42Wir können Kursivschrift abwählen, Größen ändern und all diese Dinge.
00:21:48Ich habe ihm gesagt, dass es viele Optionen bieten soll.
00:21:49Es gibt also Regler für Hero-Bilder, Assets, Animationen, Gewichtung, Einblendabstände und all das.
00:21:57An diesem Punkt geht es nur noch darum, feinzujustieren und Referenzen zu zeigen, bis man zufrieden ist.
00:22:05Und im Grunde ging es in diesem gesamten Video genau darum.
00:22:07Es geht darum, euch einen flexiblen Arbeitsablauf zu zeigen, dem ihr Schritt für Schritt folgen könnt.
00:22:14Nichts davon ist als starre Vorgabe gedacht.
00:22:15Nichts davon muss sklavisch befolgt werden.
00:22:17Vielmehr geht es um Grundregeln, um herauszufinden, was einem gefällt, und diesen Geschmack zu kultivieren.
00:22:23Wie übertrage ich diesen Geschmack dann auf die KI?
00:22:26Welche zusätzlichen Tools gibt es außerhalb von Claude Code, die mir dabei helfen können?
00:22:31Und zu guter Letzt: Wie passe ich Dinge an?
00:22:33Wie iteriere ich, damit ich nicht auf Zufallstreffer angewiesen bin oder wie beim Lotto einen Prompts tippe wie:
00:22:40“Bitte lass es hochwertiger aussehen”, in der Hoffnung, dass das Ergebnis gut wird.
00:22:44In diesem Sinne verabschiede ich mich für heute von euch.
00:22:47Lasst mich wie immer wissen, was ihr denkt.
00:22:49Schaut bei Chase AI Plus vorbei für weitere Claude Code Anleitungen, besonders meine Claude Code Masterclass.
00:22:55Den Link dazu findet ihr unten in den angepinnten Kommentaren.
00:22:57Wir sehen uns das nächste Mal!