Transcript
00:00:00"KI hat keinen Geschmack, und das ist Ihre Schuld."
00:00:03Der Grund dafür, dass Ihre visuellen Ergebnisse so mittelmäßig sind,
00:00:05ist, dass Ihre Prompts so mittelmäßig sind.
00:00:08Sie verwenden nicht die Art von Terminologie,
00:00:10Sprache und Nomenklatur,
00:00:11die ein echter Designer verwenden würde.
00:00:13Aber zum Glück habe ich eine Lösung gefunden.
00:00:16Sie heißt Impeccable.
00:00:17Es ist ein Open-Source-GitHub-Repo,
00:00:20das im Grunde genommen eine einzige Fähigkeit ist,
00:00:23die wir in Cloud Code importieren können,
00:00:25um genau dieses Problem zu lösen.
00:00:27Es verleiht Cloud Code eine Designsprache,
00:00:29die ihm beibringt, wie gutes Design wirklich aussieht,
00:00:32und ihm gleichzeitig sagt, welche schlechten Designs er vermeiden soll.
00:00:36Und heute zeige ich Ihnen nicht nur, wie diese Fähigkeit funktioniert,
00:00:39wir werden sie auch nutzen, um eine brandneue Website zu erstellen
00:00:42und eine meiner bereits existierenden Websites zu bearbeiten.
00:00:45Am Ende dieses Videos werden Sie also keine Ausrede mehr haben,
00:00:48wenn es um die Erstellung mittelmäßiger Front-End-Designs geht.
00:00:51Impeccable ist also ein Open-Source-GitHub-Repo,
00:00:54das uns eine einzige Fähigkeit an die Hand gibt,
00:00:55die es uns ermöglicht, Front-End-Designs zu erstellen,
00:00:58die nicht schlecht sind.
00:01:00Es ist eine einzige Fähigkeit,
00:01:01aber das ist etwas untertrieben,
00:01:03denn diese eine Fähigkeit umfasst 23 verschiedene Befehle.
00:01:07Es gibt sieben fachspezifische Referenzdateien.
00:01:10Es sagt uns, welche Antipatterns wir vermeiden sollten,
00:01:13und ermöglicht es uns sogar, Dinge in unserem Browser zu bearbeiten.
00:01:17Das ist also ein sehr robustes Tool.
00:01:20Das ist nicht einfach nur eine Front-End-Design-Fähigkeit,
00:01:22die sich über ein paar Absätze erstreckt,
00:01:24darüber, was Cloud Code tun sollte.
00:01:26Aber diese Komplexität kann ein wenig überwältigend sein,
00:01:28denn es gibt buchstäblich 23 verschiedene Befehle,
00:01:31die eine Reihe verschiedener Dinge tun,
00:01:34in Bezug auf Ihr Design.
00:01:35Sie sind hier alle im Repo aufgeschlüsselt,
00:01:37aber die Wahrheit ist, dass Sie sich nie alle merken werden.
00:01:40Aber es gibt zwei Dinge, die hier helfen.
00:01:42Erstens wird Cloud Code natürlich ziemlich gut darin sein,
00:01:44herauszufinden, welches Sie verwenden sollten.
00:01:46Aber zweitens haben sie eine ganze Website,
00:01:49die auch zeigt, was jede dieser 23 Fähigkeiten tut.
00:01:53Das GitHub verlinkt also auf die Website,
00:01:54die impeccable.style heißt.
00:01:56Und das Coole ist, für jede einzelne Impeccable-Fähigkeit
00:01:59können wir sehen, wie etwas vorher aussieht,
00:02:02was einfaches Cloud Code ist,
00:02:03und wie es danach aussieht,
00:02:05nachdem man diesen speziellen Impeccable-Befehl verwendet hat.
00:02:07Also ziemlich ordentlich.
00:02:09Impeccable hat wirklich sieben Säulen des Designs:
00:02:12Typografie, Farbe, räumliches Design, Responsivität,
00:02:15Interaktionen, Motion und UX-Writing.
00:02:17Es geht also nicht nur um Farben und solche Dinge.
00:02:21Es ist ziemlich umfassend.
00:02:22Und hier können wir durch all diese
00:02:25verschiedenen Befehle scrollen.
00:02:27Und wie ich schon sagte, sehen, wie sie aussehen,
00:02:29wenn man die Fähigkeit verwendet und wenn nicht.
00:02:31Wenn Sie sich also fragen: Was genau macht das eigentlich?
00:02:34Kann ich es in Aktion sehen?
00:02:35Nun, dies ist der richtige Ort dafür.
00:02:37Die Website enthält auch eine Fallstudie,
00:02:39die zeigt, wie sie diese Website
00:02:40mit Impeccable und einem einzigen Bild erstellt haben.
00:02:42Und ich finde, es sieht ziemlich cool aus.
00:02:43Und zuletzt zeigen sie diesen Live-Modus,
00:02:45mit dem wir ein wenig herumspielen werden,
00:02:47der sich in der Alpha-Phase befindet
00:02:48und es uns ermöglicht, tatsächlich über den Browser
00:02:51an unserer Website herumzuspielen, wie ich vorhin sagte.
00:02:53Nun hat es auch eine Chrome-Erweiterung und eine CLI,
00:02:56aber um ehrlich zu sein,
00:02:56bekommen wir etwa 99 % des Nutzens durch die Fähigkeit.
00:02:59Darauf werden wir uns also heute konzentrieren.
00:03:01Um das Ding zu installieren, reicht eine einzige Zeile Code,
00:03:04die man einfach kopieren muss,
00:03:06und dann in das Terminal einfügen.
00:03:07Wenn es um die Verwendung von Impeccable geht,
00:03:09gibt es eigentlich zwei Wege.
00:03:11Der eine ist Greenfield,
00:03:12bei dem wir eine Website von Grund auf neu aufbauen,
00:03:14und der zweite ist das Bearbeiten einer bestehenden Seite.
00:03:17Heute werden wir beides tun und noch mehr,
00:03:20denn ich werde Ihnen nicht nur zeigen,
00:03:22wie man es von Grund auf neu aufbaut,
00:03:23ich werde Ihnen auch zeigen, wie es aussieht,
00:03:25wenn wir von Grund auf mit einer Art Referenzbild bauen,
00:03:27mit einer Art Moodboard, sozusagen.
00:03:30Nachdem wir das getan haben, werden wir uns meine eigentliche Website ansehen
00:03:33und sehen, was Impeccable darüber denkt
00:03:36und was für einen Mist wir an meiner eigenen Arbeit ablegen können.
00:03:41Zuletzt werfen wir einen Blick auf Impeccable Live,
00:03:43das sich in der Alpha-Phase befindet,
00:03:44und sehen, wie gut das Ding tatsächlich heute schon ist.
00:03:48Aber bevor wir in den eigentlichen Build eintauchen,
00:03:50ein kurzes Wort von jedermanns Lieblingssponsor: mir.
00:03:54Letzten Monat habe ich meine Cloud Code Masterclass veröffentlicht,
00:03:56und es ist der beste Weg, um von null auf KI-Entwickler zu kommen,
00:03:59besonders, wenn man keinen technischen Hintergrund hat.
00:04:02Ich aktualisiere diesen Kurs jede einzelne Woche,
00:04:05es ist also der beste Ort, um herauszufinden,
00:04:07wie man dieses wilde Werkzeug tatsächlich benutzt.
00:04:10Wir konzentrieren uns auf reale Anwendungsfälle.
00:04:12Ich habe gerade meinen gesamten
00:04:13Cloud Code Agentic OS-Lehrplan herausgebracht.
00:04:16Wenn Sie also Ihre Hände daran bekommen wollen,
00:04:18können Sie ihn in Chase AI Plus finden.
00:04:20Es gibt einen Link dazu im angepinnten Kommentar.
00:04:23Lassen Sie uns also anfangen,
00:04:24und wir beginnen mit dem Greenfield-Projekt.
00:04:27Wir bauen also eine Website von Grund auf neu.
00:04:29Wie gesagt, es gibt so viele Befehle,
00:04:31es kann ein wenig verwirrend sein.
00:04:32Wenn Sie etwas von Grund auf neu starten,
00:04:35schlage ich vor, mit 'impeccable craft' zu beginnen,
00:04:39denn es wird einige dieser
00:04:41Hilfsbefehle wie 'impeccable teach' beinhalten.
00:04:44Was bedeuten all diese Dinge?
00:04:45Nun, 'impeccable craft' bedeutet so ziemlich,
00:04:48dass es seine eigene Version des Planungsmodus durchläuft
00:04:50und Fragen zu unserer Website, unserem Produkt stellt,
00:04:53was wir eigentlich zu bauen versuchen.
00:04:55Und bei diesem Prozess erstellt es zwei Dateien.
00:04:59Es wird eine 'product.markdown'
00:05:01und eine 'design.markdown' erstellen.
00:05:02Nun, die 'design.md' ist ziemlich das Gleiche,
00:05:07was wir in Google Stitch gesehen haben.
00:05:09Sie erinnern sich an Google Stitch, oder?
00:05:11Googles kostenloses Design-Tool.
00:05:13Sie haben dieses ganze Design-System-Ding,
00:05:14und Sie haben diese 'design.md'-Datei,
00:05:16was diese sehr tiefgreifende Markdown-Datei ist,
00:05:20die der KI sagt, wie sie etwas bauen soll.
00:05:21Dieses ganze 'design.md'-Konstrukt
00:05:24wird sozusagen zu einem Industriestandard.
00:05:27Man sieht das heutzutage überall.
00:05:29Und Impeccable folgt diesem Ansatz.
00:05:31Es wird uns also im Grunde interviewen
00:05:32und herausfinden, was wir bauen
00:05:34und wie wir es aussehen lassen wollen.
00:05:36Und sobald es das Interview geführt hat,
00:05:37wird es die Landingpage für uns bauen.
00:05:39Also innerhalb von Cloud Code,
00:05:41bin ich in einem neuen Verzeichnis namens 'impeccable-test'.
00:05:44Der Befehl ist 'impeccable-spacecraft'.
00:05:47Und der Prompt lautet: Lass uns eine Landingpage bauen
00:05:49für mein Fake-SaaS-Produkt Lighthouse.
00:05:51Es ist eine Analyseplattform für Sologründer/kleine Teams.
00:05:54Stelle mir alle Fragen, die du willst.
00:05:56Das ist ziemlich der gleiche Prompt,
00:05:58den ich Huashu Design in meinem letzten Video gegeben habe.
00:06:01Wenn Sie das noch nicht gesehen haben, tun Sie das unbedingt,
00:06:03das ist im Grunde ein Cloud-Design-Klon.
00:06:06Es wird also interessant sein zu sehen,
00:06:08wie sich Impeccable gegenüber diesem Designsystem schlägt.
00:06:11Und falls Sie dieses Video noch nicht gesehen haben,
00:06:13ich verlinke es oben.
00:06:14Es kam also mit 13 Fragen zurück.
00:06:16Die ersten vier drehen sich alle um das Produkt,
00:06:18wie zum Beispiel: Wer ist der eigentliche Kunde?
00:06:19Wie würden Sie Lighthouse beschreiben?
00:06:21Wie ist die Einstellung der Besucher?
00:06:22Und was ist der primäre CTA?
00:06:23Was ist der eigentliche Zweck dieser Landingpage?
00:06:25Die nächsten paar Fragen drehen sich alle um die Stimme und das Aussehen,
00:06:28bevor es zum Umfang kommt.
00:06:29Machen wir nur den Hero-Bereich?
00:06:30Vollständiges Scrollen, echte Screenshots?
00:06:32Haben Sie noch andere Assets für mich?
00:06:34Und was mir hier gefällt, ist die Tiefe der Fragen.
00:06:36Das sind mehr Fragen, als Huashu Design uns
00:06:40im letzten Video gestellt hat.
00:06:41Und das kommt der Anzahl der Fragen schon sehr nahe,
00:06:43die man von etwas wie Claude Design bekommen würde.
00:06:44Das ist sehr tiefgründig und ich sehe das gerne.
00:06:46Also werde ich sie einfach ausfüllen.
00:06:49Ich werde es ziemlich standard halten.
00:06:50Ich muss nichts Verrücktes tun.
00:06:52Und wir werden nach einem vollständigen Scroll fragen.
00:06:53Hier ist also, was Impeccable uns bei seinem allerersten Versuch
00:06:56mit recht minimaler Anleitung gegeben hat.
00:06:57Alles, was wir wirklich getan haben, war, seine Fragen zu beantworten.
00:06:59Wir haben ihm keine Assets oder sogar Beispiele gegeben.
00:07:01Nun, direkt,
00:07:02denke ich definitiv nicht an KI-Slop, wenn ich das sehe,
00:07:05obwohl man anfängt, diese cremefarbene Farbe
00:07:08und diese Serifenschrift überall in diesen moderneren
00:07:11Front-End-Designs zu sehen, besonders bei Dingen wie Claude Design.
00:07:13Ich mag dieses Dashboard, das es sich ausgedacht hat,
00:07:16das gefällt mir definitiv.
00:07:18Ich mag es, dass ich nicht nur Ihren Standard sehe,
00:07:20vier Bento-Boxen, die man in jeder einzelnen
00:07:23KI-Design-Website sieht.
00:07:25Dieser Teil sieht ziemlich gut aus.
00:07:26Wir haben das Zitat, vollständige Preise,
00:07:30und dann so etwas wie: Hey, geben Sie uns Ihre E-Mail.
00:07:32Für den ersten Durchgang also ziemlich gut.
00:07:35Aber was ich in letzter Zeit wirklich gerne mache,
00:07:37wenn es um meine Webdesigns mit Claude Code geht,
00:07:40ist, dass ich es nicht nur einen einzelnen Entwurf wie diesen ausgeben lasse.
00:07:44Also habe ich Impeccable, also Claude Code, gesagt:
00:07:47Ich will nicht nur ein Layout für die Website.
00:07:50Wie ihr hier seht, war das der erste Entwurf.
00:07:52Ich möchte drei verschiedene Varianten sehen, aus denen ich wählen kann.
00:07:56Und sie sollen alle ziemlich unterschiedlich sein.
00:07:59Außerdem möchte ich durch alle durchklicken können
00:08:01und sie alle nebeneinander sehen.
00:08:03Ich möchte also eine Art Makro-Layouts sehen,
00:08:05bevor wir wirklich ins Detail gehen
00:08:08und anfangen, mit Komponenten zu spielen.
00:08:09Und so hat mir Impeccable das hier geliefert.
00:08:11Wir haben also den editorialen Entwurf, den wir gerade gesehen haben.
00:08:15Es hat einen erstellt, den es hier "drenched" genannt hat.
00:08:17Definitiv ein anderer Stil, viel mehr Farbe.
00:08:20Und dann hatten wir den brutalistischen Entwurf.
00:08:22Hier ist ein Blick auf den "drenched"-Entwurf,
00:08:24definitiv viel anders.
00:08:26Ich muss sagen, wir haben hier vorne einige Überschneidungen,
00:08:29aber das sieht ziemlich anders aus als die meisten KI-Generationen.
00:08:34Wenn wir das durchgehen, wisst ihr, mag ich irgendwie die Kühnheit
00:08:39dieser Website, obwohl ich die Farben nicht wirklich kenne.
00:08:43Aber ich muss sagen, dass mir dieser brutalistische Entwurf gefällt.
00:08:44Er ist sehr in Graustufen gehalten,
00:08:46aber ich mag, wie die Zahlen angeordnet sind.
00:08:48Ich mag es, wie die Boxen irgendwie versetzt sind.
00:08:52Als ob die Linien nicht ganz zusammenpassen.
00:08:54Ich mag diesen Entwurf tatsächlich sehr.
00:08:56Ich finde, das sieht wirklich cool und sehr anders aus.
00:08:58Und ich denke, wir werden uns für den Moment
00:09:02für diesen hier entscheiden.
00:09:04Und nur damit ihr wisst, diese ganze Sache mit dem Dreifach-Design
00:09:07und alles auf einmal zu sehen,
00:09:08das ist nicht etwas, das Impeccable von Natur aus kann.
00:09:12Das ist etwas, das ich mache.
00:09:13Das ist nur ein einziger Prompt.
00:09:14Und ich empfehle euch dringend, das zu tun, egal mit welchen
00:09:17Designs oder Tools ihr arbeitet.
00:09:19Ich glaube, das habe ich irgendwie von Stitch aufgegriffen,
00:09:23denn Google Stitch macht es einem wirklich leicht,
00:09:25so etwas zu tun, wo man alle diese verschiedenen
00:09:26Variationen auf derselben Seite sehen
00:09:29und vergleichen und gegenüberstellen kann.
00:09:30Und ich persönlich muss diese visuellen Dinge sehen,
00:09:33um überhaupt eine Vorstellung davon zu haben, wohin ich will.
00:09:37Deshalb empfehle ich euch dringend, das zu tun.
00:09:38Ihr müsst nicht drei machen.
00:09:39Ihr könnt sechs machen, ihr könnt eine Million machen.
00:09:41Und auch wenn ihr Claude Code dazu auffordert,
00:09:42so etwas zu tun, sagt ihm einfach:
00:09:44Ich möchte alle drei auf derselben Seite sehen.
00:09:47Ich möchte sie einzeln im Vollbildmodus öffnen können.
00:09:50Und ihr könnt es auch bitten, euch eine Reihe
00:09:53von verschiedenen Makro-Optionen zu geben,
00:09:55und dann könnt ihr einfach daraus wählen
00:09:57und es dann diese erstellen lassen.
00:09:57Denn offensichtlich dauert es eine Weile, diese zu generieren.
00:09:59Jetzt, da wir eine Landingpage haben, die uns gefällt,
00:10:01ist es an der Zeit, einige Dinge zu bearbeiten,
00:10:03wofür das neue Impeccable Live ins Spiel kommt.
00:10:06Alles, was wir tun müssen, ist zu sagen:
00:10:07Hey, lass uns Impeccable Live auf dieser brutalistischen Seite ausführen.
00:10:10Nun, sobald ihr diesen Befehl ausführt,
00:10:12wird Claude Code euch sagen, dass der Live-Modus bereit ist.
00:10:14Es sollte euch einen Link zum Localhost geben,
00:10:18auf dem ihr sein müsst, oder ihr könnt einfach euren Browser aktualisieren.
00:10:20Und so könnt ihr jetzt hier drin sehen,
00:10:22während ich so herumscrolle, dass Dinge hervorgehoben werden.
00:10:26Und unten haben wir auch einige Dinge.
00:10:29Also zuerst einmal haben wir design.md.
00:10:32Es öffnet die Seitenleiste auf der rechten Seite.
00:10:35Und wenn ich auf "raw" klicke, kann ich alles sehen, was es tatsächlich erstellt hat.
00:10:39Wenn ich nun auf eine bestimmte Komponente klicke,
00:10:41wie diese primäre Kopie, erscheinen einige Optionen.
00:10:45Zuerst haben wir "free form", was bedeutet,
00:10:47dass ich einfach eine Texteingabe mache,
00:10:50oder ich habe Zugriff auf im Grunde
00:10:52alle diese verschiedenen Impeccable-Befehle.
00:10:54Also "bolder", "quieter", "distill", "polish", "adapt".
00:10:56Das sind alles nur Teile dieser 23 Impeccable-Befehle,
00:11:00über die wir vorhin gesprochen haben.
00:11:02Sagen wir, ich mache so etwas wie "bolder".
00:11:04Also "bolder" ist im Grunde ein vordefinierter Prompt.
00:11:09Und wenn wir uns hier die Impeccable-Dokumentation ansehen,
00:11:12ist das, was "bolder" tun wird, es kühner zu machen.
00:11:15Das ist also das Vorher, das ist das Nachher.
00:11:18Es macht es einfach ein bisschen auffälliger.
00:11:21Die genaue Definition ist, dass es sichere Designs
00:11:26Richtung Wirkung schiebt, ohne in Chaos abzugleiten,
00:11:28sagt, wann man es benutzt und wie es funktioniert und all dieses Zeug.
00:11:31Also, wenn wir "bolder" darauf anwenden, und um ehrlich zu sein,
00:11:32habe ich das Gefühl, das ist schon ziemlich kühn.
00:11:34Ich weiß nicht, ob das das Beste ist.
00:11:35Ich kann das noch weiter verfeinern.
00:11:37Ich kann also "bolder" plus jeden beliebigen Prompt machen.
00:11:40Sagen wir, ich schreibe "Farbe hinzufügen".
00:11:43Ich habe dann dieses Ding hier, das sagt
00:11:46"mal drei", "mal vier", "mal zwei".
00:11:47Das ist die Anzahl der Variationen, die es mir zeigen wird.
00:11:50Und dann drücken wir auf "los".
00:11:51Das ist also in gewisser Weise eine Mikro-Version
00:11:56von dem, was wir hier in Bezug auf Variationen gemacht haben,
00:11:58wo ich sage: "Alles klar, gib mir diese eine Sache."
00:12:00Lass uns das ändern, zeig mir Variationen.
00:12:03Jetzt machen wir das auf einer Mikro-Ebene
00:12:06und wir können noch spezifischer sein
00:12:08in Bezug auf das, was wir anstreben, richtig?
00:12:09In diesem Fall machen wir "bolder".
00:12:10Wir hätten jede dieser etwa 12 Optionen wählen können,
00:12:13und hier ist, was dabei herauskam.
00:12:14Also ja, sehr kühn im Vergleich zu den anderen Optionen.
00:12:17Das ist Variante eins, Variante zwei,
00:12:21etwas gedämpfter,
00:12:22und dann Variante drei, irgendwie wild, oder?
00:12:25Auch diese Fähigkeit, die Variante anzupassen.
00:12:27Wenn ich also auf "tune" klicke, richtig,
00:12:30können wir den Versatz irgendwie ändern.
00:12:31Zum Beispiel bei diesem "wild", wie soll es aussehen?
00:12:36Wie sollen die Farben aussehen?
00:12:39Also noch einmal, wenn wir an mein letztes Video denken
00:12:42oder ihr an Claude Design denkt, wie Tweaks,
00:12:44ist das wieder ziemlich wie Mikro-Tweaks,
00:12:47und das gilt für alle Varianten.
00:12:50Den Schlüssel verbergen, den Schlüssel anzeigen, also eine Menge, was wir tun können.
00:12:53Sagen wir, wir wollen das machen.
00:12:54Also, wenn ich das machen möchte, was werde ich tun?
00:12:56Ich muss nur auf "akzeptieren" drücken und es wird angewendet.
00:13:00Wenn ihr nun auf "akzeptieren" drückt und es so fehlerhaft läuft,
00:13:02checkt einfach den Claude-Code,
00:13:03es wendet im Grunde eure Änderungen an und lädt es neu.
00:13:06Und so sieht es mit den vorgenommenen Änderungen aus.
00:13:09Nun, das eine, worüber ich nicht gesprochen habe, war "detect".
00:13:10Wenn ich also hier "detect" drücke, sucht es im Grunde
00:13:13danach, ob es hier irgendwelchen KI-Unsinn gibt.
00:13:17Erkennt es irgendwelche dieser Anti-Patterns,
00:13:19über die wir vorhin gesprochen haben?
00:13:20Nun, da dies komplett mit Impeccable erstellt wurde,
00:13:24bezweifle ich stark, dass es irgendetwas findet,
00:13:26und deshalb sehen wir nichts auftauchen.
00:13:28Aber wir werden später sehen, wenn wir einen Blick auf meine eigene Website werfen,
00:13:31ob das der Fall ist.
00:13:32Aber so funktioniert das Live-System im Grunde.
00:13:34Und ich denke, dieser Teil ist wirklich cool und hebt es ab,
00:13:37denke ich, von anderen Front-End-Design-Skills und Repos,
00:13:41die ihr in der Vergangenheit gesehen habt,
00:13:42insbesondere die Tatsache, dass wir zusätzliche Varianten erstellen können.
00:13:45Ich bin super optimistisch, was die Möglichkeit angeht, all diese
00:13:47verschiedenen Varianten auf einmal zu sehen
00:13:49und sie auf dieser sehr Mikro-Mikro-Mikro-Ebene zu optimieren.
00:13:52Also ich liebe das, aber es ist eben Alpha.
00:13:54Also, ihr wisst schon, vielleicht stoßt ihr auf einige Fehler.
00:13:57Es gibt ein paar Dinge,
00:13:59die etwas ungeschliffen wirken,
00:14:01wie das Neuladen, das ihr gerade gesehen habt, aber hey,
00:14:03ich finde das super cool.
00:14:04Also checkt das definitiv aus, wenn ihr Impeccable benutzt.
00:14:07Lasst es nicht einfach nur erstellen und damit fertig sein.
00:14:09Geht in den Live-Modus und spielt damit herum.
00:14:11Nun, sobald ihr die Webseite an einen Punkt gebracht habt, der euch gefällt,
00:14:13gibt es weitere Befehle, die ihr ausführen könnt.
00:14:16Also können wir so etwas wie "polish" ausführen,
00:14:18wo es einen abschließenden Designsystem-Pass macht.
00:14:20Wir können so etwas wie "harden" machen,
00:14:22wo es einen Blick auf Grenzfälle und Fehler wirft
00:14:24und sicherstellt, dass alles funktioniert.
00:14:25Wie ich sagte, das ist sehr, sehr ausgefeilt
00:14:28und ziemlich tiefgründig, was die Anzahl der Befehle angeht, die wir ausführen können.
00:14:30Aber der Zeit halber werden wir jetzt
00:14:33euch zeigen, wie man von Grund auf baut,
00:14:35aber diesmal werden wir im Grunde
00:14:38so etwas wie ein Moodboard oder ein Mock-up
00:14:40der Art von Vision verwenden, die wir an Impeccable pushen wollen.
00:14:43Weil ich sehen möchte, wie das aussieht,
00:14:45wenn wir sozusagen ihre Fallstudie kopieren,
00:14:48denn was sie getan haben, ist, sie haben dieses Bild genommen,
00:14:50in Claude Code geschoben, in Impeccable gepackt,
00:14:52und wie: "Alles klar, diese Website erstellt",
00:14:53und sie konnten etwas bekommen,
00:14:54das ziemlich fantastisch aussah.
00:14:55Also habe ich einige Bilder erstellt,
00:14:58die der Ästhetik entsprechen, die Impeccable in ihrer Fallstudie verwendet hat,
00:15:02aber wir verwenden stattdessen Lighthouse,
00:15:04sodass wir zumindest eine Art Test bekommen können,
00:15:07der ein einigermaßen eins zu eins Vergleich ist.
00:15:09Also mag ich diesen hier irgendwie, also denke ich, wir werden uns für diesen entscheiden.
00:15:11Genau wie vorher führe ich Impeccable Craft als Skill aus.
00:15:15Es stellte mir dann eine ähnliche Reihe von Fragen wie zuvor,
00:15:18und mir wurde im Grunde gesagt, dass ich einfach bei
00:15:21der Stimmung und der Atmosphäre bleibe,
00:15:22die ihr von dem Bild bekommen habt, das ich euch gegeben habe.
00:15:24Das ist also, was dabei herauskam,
00:15:26und ehrlich gesagt lässt es ein bisschen zu wünschen übrig.
00:15:29Ich denke, nur dieses Moodboard darauf zu werfen
00:15:33und ihm zu sagen: "Hey, lass uns eine Website daraus erstellen",
00:15:35hat es sich schwergetan.
00:15:37Ich glaube, es hat sein Bestes gegeben.
00:15:38Wie, wir haben immer noch das Dashboard, es hat die Farben,
00:15:41aber es ist nicht so gut wie das, was sie erstellt haben,
00:15:43weil ich denke, da ich ihm nur dieses eine Asset gegeben habe
00:15:46und keine weiteren Assets hinzugefügt habe,
00:15:48hat es das nicht wirklich so aufgeteilt,
00:15:51wie Impeccable es bei ihrer Fallstudie gemacht hat,
00:15:52aber es könnte ein Problem mit der Eingabeaufforderung sein.
00:15:55Aber selbst dann kann man die Grundzüge erkennen
00:15:57von etwas, das hier funktionieren würde.
00:15:59Ich mag, wie sie das Dashboard machen.
00:16:01Also definitiv nicht so beeindruckend, denke ich,
00:16:05wie das rohe, das wir am Anfang gemacht haben,
00:16:09aber hey, ich dachte, ich probiere es mal aus.
00:16:11Mal sehen, wie es sich schlägt, wenn wir eine bestehende Website bearbeiten.
00:16:14Wir benutzen also meine Website, meine eigentliche KI-Agentur-Website,
00:16:18und wir werden ein paar Befehle darauf ausführen.
00:16:21Wir nutzen das Impeccable-Dokument,
00:16:23damit es tatsächlich eine design.md-Datei aus dem Code rückentwickeln kann,
00:16:26und dann machen wir Dinge wie ein Audit ausführen
00:16:29und eine Kritik schreiben, und wir machen wieder das Live-Ding
00:16:32auf meiner eigentlichen Website und sehen mal,
00:16:36was für Anzeigen wir erstellen können.
00:16:37Zur Information: Das ist die Website meiner KI-Agentur.
00:16:41Ich habe eine Art Standard-Hero-Section.
00:16:43Ich gehe zu den Dienstleistungen, spreche über meine Philosophie,
00:16:47wie wir KI-Implementierung durchführen,
00:16:49bevor ich eine Art Call-to-Action habe,
00:16:51einen Ort, an dem Leute ihre Informationen eintragen können,
00:16:54wenn sie mit mir zusammenarbeiten wollen.
00:16:55Ich habe noch einige zusätzliche Seiten wie meinen Blog,
00:16:57aber wir bleiben erst einmal bei der Homepage.
00:17:00Das Erste, was ich also getan habe, ist:
00:17:02Lass uns das Impeccable-Dokument auf dieser Codebasis ausführen
00:17:05und sehen, was Impeccable über meine aktuelle Website zu sagen hat.
00:17:08Es geht also durch die gesamte Codebasis
00:17:11und erstellt eine design.md für das, was wir bereits haben,
00:17:16und auf dieser Grundlage
00:17:18können wir beginnen, Dinge zu bearbeiten.
00:17:19Nachdem Impeccable die Codebasis durchlaufen hatte,
00:17:21schrieb es drei Dateien, die im Grunde so etwas sind wie
00:17:23strategischer Kontext für das, was vor sich geht.
00:17:26Es spricht über die Erfolge, den Nordstern,
00:17:29aber es spricht auch über sieben verschiedene Verstöße, die es gefunden hat.
00:17:33Also bei der blauen Sphäre sagt es, die Servicekarten-Mockups
00:17:37sind im Grunde eine ClipArt-Sortiment-Packung,
00:17:40ein beabsichtigtes Kartengitter.
00:17:43Es hasst Glasmorphismus, also mag es das nicht.
00:17:47Es sagt, wir haben eine bestimmte Schriftart geladen, aber nie verwendet,
00:17:50sowie einige andere Dinge.
00:17:53Es gab also einige Funktionen,
00:17:54die im Grunde im Code enthalten sind,
00:17:55aber eigentlich nicht im eigentlichen UI auftauchen.
00:17:58Und dann ein Problem mit einigen der Farben.
00:18:02Es spricht auch über die strategische Lücke,
00:18:04dass ich im Grunde mich, die Person, Chase,
00:18:07nicht sehr auf der Website selbst präsentiere, was fair ist.
00:18:10Jetzt können wir eine noch tiefere Kritik bekommen,
00:18:12wenn wir den Kritik-Befehl ausführen.
00:18:15Und das machen wir jetzt.
00:18:16Ich sage ihm also, es soll den Kritik-Befehl ausführen.
00:18:18Habe Kritik nicht einmal richtig geschrieben.
00:18:20Sage ihm, es soll den Kritik-Befehl auf der Landingpage ausführen.
00:18:23Es hat also seine Kritik ausgeführt und das Urteil war, es ist,
00:18:25ja, grenzwertig KI-Schlamassel.
00:18:27Es gab mir eine Design-Gesundheitsbewertung für 10 verschiedene Dinge,
00:18:33jeweils bis zu vier Punkten
00:18:34und es hat bei keinem mehr als drei erreicht,
00:18:37aber ich habe keine Einsen bekommen, also ist das gut.
00:18:39Insgesamt waren es 25 von 40, was als akzeptabel gilt.
00:18:43Für die kognitive Belastung gibt es mir fünf von acht Punkten, ein Fehler.
00:18:46Es sagt, die Hintergrundbewegung konkurriert mit dem Inhalt.
00:18:51Ja, ich denke, es ist irgendwie dezent,
00:18:54aber ich verstehe, worauf es hinaus will.
00:18:56Zwei gleichgewichtige Call-to-Actions hier mit zweideutiger Priorität.
00:19:00Der Dienstleistungsbereich hat vier verschiedene visuelle Schemata
00:19:03zusammen mit einigen anderen Dingen.
00:19:05Und der Gesamteindruck ist, dass es eine gute Basis hat,
00:19:08aber es könnte ein bisschen mehr tun.
00:19:10Und am Ende unterteilt es es
00:19:11in drei verschiedene Orte vor einer Woche.
00:19:14Also ehrlich gesagt, mag ich diese Kritik.
00:19:16Das ist sehr, sehr fundiert und gibt uns viel, womit wir arbeiten können,
00:19:19und wird ziemlich spezifisch, was seiner Meinung nach falsch ist.
00:19:22Ob ich dem jetzt zustimme oder nicht,
00:19:24ist, denke ich, zweitrangig,
00:19:26aber es gibt uns Dinge zum Nachdenken.
00:19:29Wissen Sie, ich werde nicht einfach blind annehmen,
00:19:31dass alles, was es mir sagt, korrekt ist,
00:19:32aber wir können diese durchgehen, oder wenn ich wollte,
00:19:35kann ich all diese durchgehen.
00:19:36Ich sage: Okay, lass uns das und das ändern.
00:19:37Mal sehen, was passiert, wenn wir B machen
00:19:40und sagen, wir wollen ein bisschen
00:19:42mit dem spielen, was es Dekorationsdisziplin nennt,
00:19:44und sehen, welche Änderungen es vornimmt.
00:19:46Und nachdem wir gesehen haben, welche Änderungen es vorgenommen hat,
00:19:48springen wir in die Live-Sitzung,
00:19:51genau wie wir es mit der ersten Landingpage gemacht haben,
00:19:54und spielen damit herum.
00:19:55Sehen wir uns also einige der Änderungen an, die es vorgenommen hat.
00:19:57Und die Änderungen waren sehr subtil.
00:19:59Wir können also genau hier im Dienstleistungsbereich sehen,
00:20:03das ist die aktualisierte Version.
00:20:04Sie haben die Farben etwas gedämpft und es
00:20:07bei diesem Terrakotta-Orange und Weiß belassen.
00:20:09Sie werden bemerken, es gibt keinen blauen Dunst mehr
00:20:13unten links.
00:20:14Zur Information, dies ist die vorherige Version,
00:20:17wo man diese blaue Farbe unten links hatte
00:20:18und dann Blau und dann Grün.
00:20:20Es bleibt also irgendwie bei nur zwei Farben, richtig?
00:20:23Das Weiß, eigentlich drei Farben,
00:20:25würde ich sagen, wie Weiß, Grau und dann das Orange.
00:20:28Das kann man auch hier unten im Ansatzbereich sehen.
00:20:32Während ich über die Karten fahre, haben wir immer noch diesen orangen Schein,
00:20:36aber im Original war etwas Orange hier unten.
00:20:41Es hatte irgendwie die Karte oben,
00:20:43und es denkt, das ist so eine Art KI-Schlamassel.
00:20:47Und das ist das Ausmaß der Änderungen an der Dekorationsdisziplin.
00:20:51Also ziemlich subtil, es gibt noch einige andere,
00:20:53die es auch ausprobieren will.
00:20:54Sie haben mit Vertrauen und Konversion zu tun
00:20:56und potenziell Dinge wie Porträtfotos hinzuzufügen.
00:20:58Aber worauf wir jetzt vorspringen,
00:21:00ist das Eingehen auf den Live-Modus.
00:21:02Sehen wir uns also die Website jetzt im Live-Modus an.
00:21:05Angenommen, ich wollte diese Karten etwas ändern
00:21:08und genau wie zuvor, was würde ich tun?
00:21:10Ich kann frei arbeiten oder ich kann hingehen
00:21:13und einen dieser vorinstallierten Befehle auswählen.
00:21:17Probieren wir also "Delight" für diesen aus.
00:21:19Und dann entscheiden wir uns für drei Varianten.
00:21:22Und was "Delight" tut, ist, es fügt etwas echte Persönlichkeit
00:21:26zu dieser bestimmten Komponente hinzu.
00:21:27Hier ist ein Blick auf einige der Varianten, die es uns gegeben hat.
00:21:30Diese hier ist einfach ein kleines bisschen größer,
00:21:32hat so etwas hier unten auf der rechten Seite.
00:21:35Es ändert den eigentlichen Text hier.
00:21:37Und es fügt auch diese kleine Sache hinzu.
00:21:40Und offensichtlich wie diese, haben wir die Melodien,
00:21:43um damit herumzuspielen.
00:21:45Das soll eine Zahl sein, es ist etwas daneben.
00:21:49Also ja, so ziemlich das genau gleiche Szenario
00:21:53wie bei der ersten Website, die wir erstellt haben.
00:21:55Ich denke, dieses Live-Ding für Impeccable
00:21:57ist mit Abstand das mächtigste Werkzeug.
00:22:00Die Tatsache, dass wir diese Mikroanpassungen
00:22:02von einer grafischen Oberfläche aus machen können,
00:22:04statt alles in der Befehlszeile machen zu müssen.
00:22:06Ich bin also froh zu sehen, dass es so ziemlich
00:22:08das genau gleiche Setup ist,
00:22:09selbst wenn wir eine Codebasis verwenden, die bereits existiert.
00:22:12Insgesamt mochte ich Impeccable wirklich.
00:22:13Ich denke, es ist zu 100 % ein Skill, den Sie Ihrem Stack hinzufügen sollten
00:22:17und definitiv testen sollten, wenn Sie Ihre nächste Runde
00:22:20Front-End-Design machen,
00:22:21ob für eine Website, die Sie von Grund auf neu erstellen,
00:22:23oder für etwas, das bereits existiert.
00:22:26Und probieren Sie zu 100 % das Live-Tool aus.
00:22:29Das ist etwas, das sie gerade hinzugefügt haben,
00:22:31ich glaube vor etwa einer Woche.
00:22:32Und ich denke, es ist ein großes Unterscheidungsmerkmal
00:22:34von all diesen anderen Dingen.
00:22:35Ich denke, wenn Sie diese Mikroanpassungen
00:22:38mit den Makrolayouts kombinieren, die ich Ihnen gesagt habe,
00:22:41via Prompting am Anfang,
00:22:43dann haben Sie einen wirklich mächtigen Workflow.
00:22:45Wie immer, lassen Sie mich wissen, was Sie dachten.
00:22:47Der Link zu diesem Repo wird unten in der Beschreibung sein.
00:22:49Es gibt auch den Link im angepinnten Kommentar zu Chase AI+,
00:22:52Ich bin für heute raus.
00:22:55Und abgesehen davon, sehen wir uns.