Nutze diesen Claude-Skill & erhalte nie wieder KI-Schrott

CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Es gibt eine Million Fähigkeiten und Plugins, die beanspruchen, das
00:00:03Frontend-Design-Problem von Claude zu lösen.
00:00:05Aber als jemand, der buchstäblich Hunderte von ihnen getestet hat,
00:00:08gibt es eines, das herausragt, und es hat gerade ein riesiges Upgrade erhalten.
00:00:12Ich spreche von Impeccable 4.0, und es ist der König darin, Claude-
00:00:17Code die Fähigkeit zu geben, Frontend- und Webdesigns zu erstellen, die tatsächlich gut
00:00:21aussehen und Ihnen dabei die Kontrolle überlassen.
00:00:24In diesem Video werde ich also aufschlüsseln, was dieses Tool ist, wie es funktioniert
00:00:27und wie Sie das Beste aus dieser Sache herausholen können.
00:00:30Damit Sie Frontend-Designs erstellen können, die Ihnen auch wirklich gefallen.
00:00:33In meinem letzten designbezogenen Video haben wir Impeccable bereits kurz berührt,
00:00:36aber das geschah im größeren Rahmen dessen, wie man im Grunde Geschmack
00:00:41in den Webdesign-Prozess einbringen kann, um generischem KI-Einheitsbrei zu entkommen.
00:00:44Falls Sie dieses Video nicht gesehen haben, empfehle ich Ihnen dringend, das nachzuholen, denn ich werde
00:00:48nicht all die Grundlagen wiederholen, die Sie verstehen müssen, wenn es darum geht,
00:00:53Ihren Geschmack einzubringen und KI-Einheitsbrei im Designprozess zu vermeiden.
00:00:57Stattdessen werden wir einen tiefen Einblick in Impeccable als spezifisches Tool werben.
00:01:01Nun, es wird einige Überschneidungen geben, aber es hilft, diesen Hintergrund zu haben.
00:01:05Bevor wir uns jedoch intensiv mit dem Tool selbst befassen, sprechen wir über einige der Änderungen,
00:01:09denn die Chancen stehen gut, dass viele von Ihnen dieses Tool vor ein paar Monaten genutzt haben
00:01:12und sich jetzt fragen: Okay, es ist 4.0, was hat sich eigentlich geändert?
00:01:15Die größte Änderung der letzten Monate ist der Live-Modus.
00:01:17Das war etwas, das sich während ihrer 2.0-Phase noch in der Alpha befand,
00:01:21und jetzt ist es weitaus ausgereifter.
00:01:23Es läuft viel flüssiger.
00:01:24Es reagiert schneller und ermöglicht es uns erneut, das Terminal zu verlassen
00:01:28und visuell zu iterieren, was den Designprozess so viel einfacher macht.
00:01:32Die andere große Neuerung sind Welten.
00:01:34Sie sprechen davon, 177 hoch bewertete Welten in diese Skill integriert zu haben.
00:01:39Was zum Teufel soll das heißen?
00:01:40Nun, das bedeutet, dass sie im Wesentlichen 177 verschiedene Designtemplates erstellt haben,
00:01:46verschiedene Ästhetiken, die Sie nutzen können, wenn Sie Ihre Website von Grund auf erstellen.
00:01:50Ähnlich wie das, was wir im letzten Video manuell gemacht haben,
00:01:54zeigt Ihnen Impeccable zunächst eine Art erste Designidee,
00:01:59und gibt Ihnen dann ein paar andere Optionen, die völlig unterschiedlich sind.
00:02:03Sie haben einen ganzen Artikel darüber verfasst, wie sie dies im Wesentlichen entwickelt haben,
00:02:05um sicherzustellen, dass es nicht jedes Mal nur billiger Einheitsmüll ist.
00:02:09Ich werde hier nicht zu tief darauf eingehen, da das eine 15-minütige Diskussion wäre.
00:02:12Aber was es uns gibt, sind Optionen, und zwar Optionen, die wir visuell sehen können.
00:02:17Und wenn wir so etwas wie das Higgsfield-MCP damit verknüpfen,
00:02:20können wir tatsächlich sehen, wie es mit unserer spezifischen Website aussehen würde.
00:02:23Und das sehen Sie später.
00:02:24Auf diese Weise ist es nicht nur ein generisches Template.
00:02:25Sie sehen, wie Ihr Projekt in diesen verschiedenen visuellen Themen wirken würde.
00:02:31Und diese beiden Dinge – der Live-Modus und die Welten – sind die größten Unterschiede
00:02:35der letzten Monate.
00:02:36Und ich halte sie nicht für Kleinigkeiten, da sie sich ganz um Iteration
00:02:39und das Bereitstellen von Optionen während des gesamten Designprozesses drehen.
00:02:42Lassen Sie uns nun einen kurzen Überblick über Impeccable selbst geben,
00:02:45da einige von Ihnen diese App wahrscheinlich noch nie benutzt haben.
00:02:47Worüber reden wir hier also überhaupt?
00:02:48Nun, Impeccable ist ein kostenloses, Open-Source-Skill mit etwa 50.000 Sternen auf GitHub.
00:02:53GitHub selbst hat es tatsächlich in ihr eigenes KI-Tool integriert, weil es ihnen so gut gefiel.
00:02:57Und die These der Skill lautet: Wir wollen KI-Einheitsmuster identifizieren.
00:03:02Sie betrachten etwa 40 verschiedene Dinge als KI-Einheitsbrei, wie violette Farbverläufe,
00:03:05blaue Farbverläufe und dergleichen.
00:03:07Und stattdessen ersetzen wir diese durch im Wesentlichen besseres Design, sozusagen.
00:03:12Impeccable selbst ist eine Skill, umfasst aber 23 verschiedene Befehle, die verschiedene Teile des Designspektrums abdecken.
00:03:18Dies beinhaltet Dinge wie Form, Feinschliff, ruhiger machen, Animationen, Onboarding, Farbgebung, Typografie und so weiter und so fort.
00:03:25Während jedes dieser Dinge etwas leicht anderes tut, ist der Punkt folgender.
00:03:28Und das können Sie hier auf der rechten Seite sehen.
00:03:30Claude gibt uns etwas, das ziemlich generisch und ziemlich langweilig ist.
00:03:32Wir wissen automatisch, dass es von der KI stammt.
00:03:34Impeccable gibt uns etwas, das sauberer, weniger generisch und insgesamt besser für den Benutzer ist.
00:03:39Was diese 23 verschiedenen Befehle betrifft, so können Sie, wenn wir auf die Website selbst gehen – nämlich impeccable.style –,
00:03:44alle in Aktion sehen.
00:03:46Sie haben hier also eine Claude-Code-Version, dort eine Impeccable-Version.
00:03:50Sie können das für jede einzelne sehen, um eine visuelle Vorstellung davon zu bekommen, was diese Dinge eigentlich tun.
00:03:54Die Dokumentation auf der Website geht ziemlich ins Detail, und ich habe mich vorhin in Bezug auf KI-Einheitsbrei eigentlich versprochen.
00:03:58Es handelt sich tatsächlich um 64 verschiedene Muster, von denen sie sagen, dass sie KI-Standards und Produktionsfehler entlarven.
00:04:04Und Sie können sehen, wie sich das über die Jahre verändert hat.
00:04:07Wir alle erinnern uns daran, wie an die Anfänge von ChatGPT, oder?
00:04:10Und jetzt sieht KI-Einheitsbrei eben etwas mehr so aus.
00:04:14Dennoch sind dies Dinge, von denen wir uns wegbewegen wollen.
00:04:16Das ist Impeccable auf den Punkt gebracht.
00:04:18Einheitsbrei identifizieren und uns dann bessere Optionen geben, die es uns erlauben zu iterieren, und zwar sogar visuell mit ihrem Live-Tool.
00:04:23Um dieses Ding tatsächlich zu nutzen, ist die Installation ziemlich einfach.
00:04:26Es ist einfach npx impeccable install.
00:04:29Wenn Ihnen das zu verwirrend ist, können Sie auch auf die Impeccable-GitHub-Seite gehen.
00:04:33Sie können diese URL kopieren, sie in Claude Code einfügen und sagen: Hey, kannst du bitte Impeccable für mich installieren?
00:04:39Sobald Sie Impeccable installiert haben, ist das andere Ding, das Sie installieren möchten, wie ich vorhin erwähnte, das Higgsfield-MCP,
00:04:44auf das Impeccable zurückgreifen kann, wenn es diese Welten-Funktion für uns baut oder im Wesentlichen alle verschiedenen ästhetischen Stile für unsere Website zeigt.
00:04:51Um das Higgsfield-MCP einzurichten – das wiederum ein Aggregator für im Grunde jeden KI-Bild- und Video-Generator da draußen ist –,
00:04:57gehen Sie einfach auf Higgsfield.ai, oben zu dem Punkt, an dem MCP und CLI steht,
00:05:03begeben sich hier zu Claude Code, kopieren einfach diesen Prompt hier und er führt Sie durch den Authentifizierungsprozess.
00:05:09Danach ist der erste Schritt, den wir tun werden, einfach impeccable init auszuführen.
00:05:15Und in diesem Fall habe ich einen neuen Ordner geöffnet und ihn impecc-test genannt.
00:05:19Sie können jeden beliebigen Ordner oder jedes Verzeichnis erstellen, aber eben Slash impeccable init.
00:05:23Und wenn Sie das tun, beginnt es Fragen darüber zu stellen, was Sie zu bauen versuchen.
00:05:27Also werde ich sagen, dass ich eine echte Landingpage baue.
00:05:31Dann fragt es, welchen Stack dieses Projekt verwenden soll.
00:05:33Wenn Sie es nicht wissen, können Sie es einfach vorschlagen lassen, und das werden wir für heute tun.
00:05:36Und dann wird es nach Evidenz fragen, im Wesentlichen nach dem, was auf dieser Website sein soll.
00:05:40Wenn Sie Screenshots haben, die Sie bereitstellen können, oder echte Zahlen, ist das großartig.
00:05:43Wenn Sie nichts dergleichen haben, können Sie ihm im Grunde sagen, dass es sich alles ausdenken soll.
00:05:47Ich habe ihm also einfach gesagt, es soll vorerst Fake-Daten erstellen, und wir können sehen, was es liefert und es später immer noch bearbeiten.
00:05:52Nachdem wir diese Fragen beantwortet hatten, rief Impeccable das Higgsfield-MCP auf, um diese verschiedenen Welten zu erstellen,
00:05:58im Wesentlichen also diese unterschiedlichen Design-Ästhetiken für unsere Webseite.
00:06:02Und es fragt uns, welche wir auswählen wollen.
00:06:04Es bringt das Ganze auf localhost hoch, damit Sie es tatsächlich sehen können.
00:06:07Es sieht also ungefähr so aus.
00:06:09Das war also das erste, mit dem es aufwartete.
00:06:13Das wird im Wesentlichen der Hero-Bereich für Pathfinder sein.
00:06:15Und dann sehen wir all diese anderen Optionen.
00:06:17Auch das erinnert stark an das, was wir im letzten Video getan haben.
00:06:20Wir meinten: Hey, erstellt verschiedene Optionen für uns, damit wir sie tatsächlich sehen können.
00:06:23Wir haben also diese hier, wir haben jene hier.
00:06:26Und auch das ist nur eine Art hochstufiger Entwurf davon, wie es aussehen könnte und wo Sie hinwollen.
00:06:31Wir haben die Option.
00:06:33Wenn uns diese nicht gefallen, können wir sie unten rechts neu würfeln.
00:06:36Wir können ihm auch eine optionale Lenkung mitgeben.
00:06:38Wir könnten also sagen: Hey, mir gefällt Nummer drei irgendwie, aber lasst uns davon noch ein paar Variationen machen oder dergleichen.
00:06:44In diesem Fall gefällt mir von diesen das erste, das es sich ausgedacht hat, eigentlich ganz gut.
00:06:48Ich sage also einfach: Erstelle das.
00:06:50Ich klicke darauf und das wird zurück an das Terminal gesendet.
00:06:53Und nun beginnt es, den Prototypen dieser Landingpage in dem von uns gewählten Stil zu bauen.
00:06:58Und als Teil dieses Build-Prozesses zeigt es uns dann mehrere Variationen dieses spezifischen Stils.
00:07:03Wir haben also am Anfang eine Reihe verschiedener Stile.
00:07:06Wir wählen einen Stil aus und haben nun Variationen dieses Stils.
00:07:09Es gibt uns die Konstellations-Option.
00:07:12Es gibt uns quasi den Dossier-Split und dann so etwas wie das Finden des Warum.
00:07:17Genau wie zuvor habe ich, wenn wir ihm eine optionale Lenkung geben wollen, unten ein Prompt-Fenster, auf das ich es verweisen kann.
00:07:23Aber hierbei gefällt mir – ich denke, wir nehmen Nummer drei und sagen: Erstelle das.
00:07:30Sie können hier im Terminal sehen, dass es übergeben wurde.
00:07:31Es heißt: Zeitplan genehmigt.
00:07:33Aufzeichnung der Genehmigung im Oberflächen-Brief, anschließendes Laden des Craft-Floors und Bauen.
00:07:37Und das ist es, was ich an Impeccable mag: die Tatsache, dass es bei unseren Entscheidungen sehr visuell ist.
00:07:41Und bei jedem Schritt des Weges haben wir die Möglichkeit, es zu lenken.
00:07:43Es ist keine extrem präskriptive Skill.
00:07:46Und Sie kennen solche, bei denen es heißt: Okay, hier ist eine zufällige Skill aus einem zufälligen GitHub-Repo.
00:07:51Die Website, die sie erstellt, sieht wirklich cool aus, aber das ist eben auch die einzige Art Website, die sie erschaffen kann.
00:07:55Es ist im Grunde ein einseitiges Talent.
00:07:57Tools wie Impeccable sind sehr allgemein gehalten, was bedeutet, dass es meiner Meinung nach ein niedrigeres Minimum hat.
00:08:02Diese sehr einseitigen Ein-Trick-Skills liefern dir immer eine ziemlich coole Website, aber eben nur diese eine Art.
00:08:08Impeccable lässt Ihnen viel mehr Raum für Fehler, aber wir können es viel maßgeschneiderter gestalten.
00:08:14Und am Ende, wenn man wirklich daran arbeitet, erhält man meiner Ansicht nach ein besseres Produkt.
00:08:18Impeccable hat also die Erstellung der Website abgeschlossen.
00:08:20Und was es am Ende der ersten Iteration tut, ist das Starten eines Sub-Agents namens Impeccable Finish Reviewer.
00:08:26Er prüft also im Wesentlichen alles, um sicherzustellen, dass wir beim Erstellen dieses Dings
00:08:31nicht versehentlich über unsere eigenen Füße gestolpert sind und irgendein sogenanntes KI-Einheitsmuster hinzugefügt haben.
00:08:36Es führt also einen zusätzlichen Durchlauf mit einem separaten Sub-Agenten durch, der ein frisches Kontextfenster besitzt.
00:08:41Es soll also ein zweites Paar Augen sein, um sicherzustellen, dass das, was wir bauen wollten, auch das ist, was wir tatsächlich gebaut haben.
00:08:46Hier ist also die Website, die es für uns gebaut hat.
00:08:47Und denken Sie daran, wir haben Impeccable sehr wenige Informationen gegeben.
00:08:51Ich sagte einfach: Hey, ich möchte, dass es Pathfinder ist.
00:08:52Ich gab ihm keine Referenzbilder.
00:08:53Ich gab ihm nicht einmal wirklich einen CTA.
00:08:55Ich sagte nur: Das ist ein KI-Analyseunternehmen.
00:08:58Erstelle ein paar Informationen dafür.
00:09:00Und das haben wir bekommen.
00:09:02Und wenn Sie das mit dem vergleichen, was wir bei demselben Prompt erhalten hätten, wenn wir einfach die Frontend-Design-Skill verwendet hätten, sind die Ergebnisse völlig unterschiedlich.
00:09:09Hauptsächlich ist dies nicht die Art von generischem Output, die man sonst sehen würde.
00:09:13Ist das nun großartig?
00:09:14Ist das genau das, was wir auf Anhieb wollen?
00:09:16Vermutlich nicht.
00:09:17Aber ich denke, wenn man irgendeine kreative Arbeit mit KI und Claude macht, muss man sich von der Vorstellung lösen, dass dies eine Eintagsfliege sein muss.
00:09:24Es ist immer ein iterativer Prozess, weshalb die Impeccable-Live-Funktion so großartig ist.
00:09:29Um also die Impeccable-Live-Funktion zu nutzen, geben wir einfach impeccable slash und dann live ein.
00:09:35Und es wird das Ganze für uns aufrufen.
00:09:37Sobald wir das tun, wird die Website wieder angezeigt und wir haben diese kleine Leiste hier unten.
00:09:40Was Sie hauptsächlich verwenden möchten, ist die Element-auswählen-Funktion, die wir direkt hier sehen.
00:09:45Ich habe also Einfügen, aber ich kann auf Auswählen klicken und all die verschiedenen Komponenten sehen.
00:09:49Nehmen wir an, ich möchte das anpassen.
00:09:51Ich klicke darauf und habe ein Prompt-Fenster.
00:09:53Nun kann ich hier alles hinzufügen, was ich möchte, und sehen, wie viele Variationen ich will.
00:09:57Du kannst eine Variation, zwei Variationen oder bis zu vier auswählen.
00:10:00Sie können auch ein Mikrofon verwenden.
00:10:02Sie können außerdem genau wählen, was Sie tun möchten.
00:10:04Wenn ich also das Ganze kräftiger oder ruhiger machen oder einen Feinschliff oder Typografie anwenden möchte, in diesen spezifischen Bereichen, können wir das ebenfalls angeben.
00:10:12Denken Sie daran, dass diese alle mit den Impeccable-Befehlen verknüpft sind.
00:10:16Und wenn ich zur Impeccable-Website zurückkehre, kann ich sie alle hier sehen, oder?
00:10:19Ruhiger, Overdrive, Charakterisieren, all diese Dinge.
00:10:25Okay, wenn Sie also denken: Was genau verlangt das von mir?
00:10:26Was macht das?
00:10:27Schauen Sie einfach hier nach.
00:10:28Angenommen, ich wollte das einfach nur kräftiger machen, richtig?
00:10:31Ich möchte es einfach kräftiger gestalten.
00:10:32Ich muss ihm nicht einmal einen Prompt geben und ich will drei verschiedene Variationen.
00:10:35Ich klicke einfach darauf, drücke Enter, und es beginnt damit, die Varianten zu generieren.
00:10:39Und wenn Sie ins Terminal zurückspringen, sehen Sie, dass dieser Befehl dorthin gesendet wurde, da die Sitzung, in der Sie sich befinden, immer nach Live-Modus-Ereignissen sucht.
00:10:47Während das läuft, sprechen wir darüber, was hier sonst noch passiert.
00:10:50Wir haben den Erkennen-Button, der im Wesentlichen jedes dieser KI-Einheits-Antimuster aufspürt.
00:10:56Wenn Sie dies von Grund auf tun, hat es das während des Erstellungsprozesses im Grunde schon getan.
00:10:59Dies ist eher für den Fall gedacht, dass Sie Impeccable Live auf einer Website nutzen, die Sie bereits generiert haben.
00:11:03Wir haben die design.md.
00:11:06Ich verschiebe das ein wenig.
00:11:07Und das ist unsere gesamte Designdatei.
00:11:09All unsere Farben, Komponenten, was wir für unsere Buttons tun.
00:11:13Wieder sehr ähnlich zu Google Stitch und auch dem, was man heutzutage in Claude Design sieht.
00:11:19Wir können auch die eigentliche Rohdatei einsehen, wenn wir das möchten.
00:11:23Wir haben auch die Möglichkeit, Dinge einzufügen, und wir haben hier ebenfalls ein Prompt-Fenster, mit dem Sie die Seite steuern.
00:11:28Das ist also so ziemlich genau dasselbe, als ob Sie das Terminal offen hätten und sagen würden: Hey, lasst uns X, Y und Z ein bisschen anders machen, anstatt zu versuchen, eine bestimmte Komponente auszuwählen und diese drei Varianten zu erstellen, die ich Ihnen gerade gezeigt habe.
00:11:38Und apropos dieser drei Varianten: Das ist es, was es uns gab, als wir ihm sagten, es solle es kräftiger machen.
00:11:42Das ist also Variante 1, Variante 2 – da haben wir quasi nur diese rote Linie hinzugefügt – und dann haben wir Variante 3.
00:11:50Wir haben auch die Möglichkeit, diese Dinge anzupassen, sodass ich ein wenig mit der Füllung herumspielen kann.
00:11:56Möchte ich den Stempelrand ein- oder ausgeschaltet haben?
00:11:58Ich habe also nicht nur drei Variationen, sondern Variationen jeder Variation, was ich ehrlich gesagt großartig finde, im Gegensatz dazu, Claude Code auffordern zu müssen, von sich aus irgendeine Art von Mikrotuning-Bereich zu erstellen.
00:12:09Und sobald es Ihnen gefällt, müssen Sie nur auf Akzeptieren klicken.
00:12:12Und was wird das wiederum bewirken?
00:12:13Es sendet diese Information einfach an das Terminal zurück.
00:12:15Zu diesem Zeitpunkt bleibt im Grunde nur noch zu iterieren, zu iterieren, zu iterieren.
00:12:19Wir müssen nicht alles innerhalb von Impeccable Live machen, auch wenn ich das bisher vorgeführt habe.
00:12:23Der Anwendungsfall für Impeccable Live ist das, was Sie gesehen haben: Mikroanpassungen und Variationen bei bestimmten Komponenten.
00:12:30Wenn wir das große Ganze betrachten wollen, große Layout-Änderungen wünschen oder komplett in eine andere Richtung gehen wollen, werden wir dafür das Terminal nutzen.
00:12:37Wenn das also der Fall ist, nehmen wir an, dieses Design gefiel mir überhaupt nicht.
00:12:40Ich dachte: Hey, wir haben die Variationen gemacht, aber es stellt sich heraus, dass mir das nicht gefällt.
00:12:44Nun, dann tun wir das, was wir normalerweise in einem Designprozess tun würden, und füttern es mit ein paar anderen Referenzen.
00:12:48Das hier ist also gewissermaßen meine Inspirationsbibliothek all dieser verschiedenen Hero-Seiten und Designs, die mir gefallen haben und die ich im Web gesehen habe.
00:12:57Wenn ich jetzt also eine neue Variation haben möchte, die so ähnlich aussieht, richte ich Claude Code einfach auf diese Bibliothek aus oder ziehe den Screenshot hinein und sage: Hey, lass uns eine neue Variation probieren, etwas, das so aussieht.
00:13:10Nehmen wir an, wir wollten stattdessen so etwas wie diesen ASCII-Webbereich wählen, diesen bestimmten Vibe, den wir anstreben.
00:13:17Ich kann dieses Bild also einfach kopieren, es einfügen und ihm einen Prompt wie diesen geben:
00:13:23Schauen Sie sich dieses Referenzbild an, das ich Ihnen gegeben habe.
00:13:26Das befindet sich ebenfalls in meinem Geschmackstresor.
00:13:28Dies läuft derzeit auf dem Localhost-Port 4610.
00:13:33Ich möchte mit der von uns erstellten Landingpage gewissermaßen eine neue Richtung einschlagen.
00:13:38Ich möchte diesen ASCII-artigen Stil verwenden.
00:13:42Denken Sie daran, wir haben immer noch Zugriff auf das Higgsfield-MCP.
00:13:44Wenn wir also Assets für den Hintergrund der Hero-Seite benötigen, können wir das ebenfalls tun.
00:13:48Aber erstellen Sie ruhig eine Variation in diesem Stil.
00:13:51Das ist also wieder eine massiv weitreichende Änderung, nicht unbedingt etwas, wofür wir die Live-Funktion nutzen würden.
00:13:56Und hier ist die zweite Version unserer Website.
00:13:58Wiederum eine deutliche Abweichung von dem, was wir zuvor gesehen haben.
00:13:59Sie hat basierend auf unserer Referenz definitiv ein ASCII-Thema, aber dies ist nach wie vor ein auf Impeccable basierendes Produkt.
00:14:05Es lief der Impeccable-Reviewer durch und stellte sicher, dass es keinen Einheitsbrei gab.
00:14:08So können wir in diesem Fall das Beste aus beiden Welten bekommen.
00:14:11Und genau wie Sie es zuvor gesehen haben, könnten wir wieder Impeccable Live aufrufen.
00:14:14Wir könnten anfangen, Dinge zu tun.
00:14:16Ich denke, es würde cool aussehen, wenn wir im Wesentlichen so etwas wie die Animationsfunktion auf jeden dieser Abschnitte anwenden würden, um ihm ein bisschen Bewegung zu verleihen.
00:14:23Damit es nicht so statisch ist, aber so möchte man das angehen.
00:14:27Das große Ganze über Claude Code, das Detail im Kleinen wirklich mit Impeccable umsetzen.
00:14:33Und wenn ich mir das so ansehe, gibt es tatsächlich etwas Bewegung und einige Zahlen, die auf diesem Hero ein- und ausblenden, wenn man genau hinschaut.
00:14:39Das ist also das, was ich Ihnen für heute mitgeben möchte.
00:14:41Impeccable ist ein großartiges Werkzeug in Ihrem Werkzeugkasten für jegliche Art von Frontend-Designarbeit.
00:14:46Und wie Sie gesehen haben, kann man tatsächlich ziemlich weit kommen, wenn man zu 100% im Impeccable-Ökosystem bleibt.
00:14:51Ich denke, der beste Anwendungsfall dafür ist ein weiter gefasster Designansatz, der externe Quellen wie Referenzen einbezieht, die wir am Ende gesehen haben.
00:15:00Und genau diesen gesamten Workflow habe ich in meinem letzten Video Schritt für Schritt detailliert beschrieben, um KI-Einheitsbrei zu bekämpfen.
00:15:08Aber ich dachte, es wäre schön, einen tiefen Einblick in das zu geben, was meiner Meinung nach die beste Frontend-Design-Skill im Moment ist.
00:15:13Lassen Sie mich wie immer wissen, was Sie darüber denken.
00:15:15Schauen Sie unbedingt bei Chase AI Plus vorbei, wenn Sie meine Claude-Code-Masterclass in die Hände bekommen möchten.
00:15:19Dazu wird diese Woche tatsächlich ein riesiges Update veröffentlicht, was aufregend ist.
00:15:23Und ansonsten sieht man sich.

Key Takeaway

Durch die Kombination von Impeccable 4.0 und Claude Code lassen sich mithilfe von 177 Designtemplates und dem Live-Modus maßgeschneiderte, nicht-generische Webdesigns erstellen.

Highlights

  • Impeccable 4.0 ist ein kostenloses Open-Source-Skill mit etwa 50.000 Sternen auf GitHub, das speziell für das Frontend-Design entwickelt wurde.

  • Das Tool identifiziert und ersetzt 64 verschiedene KI-Standardmuster und Einheitsbrei-Elemente wie violette Farbverläufe.

  • Die Skill umfasst insgesamt 23 verschiedene Befehle für Aspekte wie Typografie, Animationen, Feinschliff und Farbgebung.

  • Mit dem neuen Live-Modus und 177 integrierten Design-Ästhetiken, sogenannten Welten, lässt sich der Designprozess direkt visuell steuern.

  • Die Installation erfolgt einfach über den Befehl npx impeccable install oder direkt in Claude Code über das GitHub-Repository.

Timeline

Neuerungen in Impeccable 4.0

  • Die Version 4.0 bringt zwei wesentliche Neuerungen: den verbesserten Live-Modus und sogenannte Welten.
  • Insgesamt 177 hoch bewertete Designtemplates bieten verschiedene visuelle Ästhetiken für den Start eines Projekts.
  • Der Live-Modus ermöglicht das visuelle Iterieren direkt im Browser und verringert die Arbeit im Terminal.

Impeccable 4.0 baut auf früheren Versionen auf und behebt das Problem generischer KI-Designs. Durch die Integration von 177 unterschiedlichen Stiloptionen und einem ausgereiften Live-Modus erhalten Entwickler visuelle Kontrolle über den Erstellungsprozess, ohne im reinen Code-Modus festzusitzen.

Funktionsweise und Befehle

  • Das Tool enthält 23 spezifische Befehle für Design-Bereiche wie Onboarding, Animationen und Layout.
  • Es zielt darauf ab, typische Designfehler und Klischees von künstlicher Intelligenz zu erkennen und auszumerzen.
  • Auf der offiziellen Website impeccable.style lassen sich alle Befehle und deren visuelle Auswirkungen direkt vergleichen.

Als Open-Source-Projekt mit starker Community-Verbreitung setzt Impeccable bei der Erstellung von Webseiten auf saubere Ästhetik. Es gleicht den generierten Code mit 64 definierten Anti-Mustern ab und ersetzt sie durch gezielte gestalterische Aufwertungen.

Installation und Einrichtung

  • Die Installation erfolgt über den Terminal-Befehl npx impeccable install oder alternativ per GitHub-URL in Claude Code.
  • Das Higgsfield-MCP dient als Aggregator und wird für die Generierung der verschiedenen Design-Welten eingebunden.
  • Der Initialisierungsprozess fragt Projektdetails, Stacks und grundlegende Inhalte ab, um erste Entwürfe zu erzeugen.

Die Einrichtung erfordert nur wenige Schritte im Terminal. Nach der Installation von Impeccable und dem Higgsfield-MCP startet der Befehl impeccable init, der die Basis für das neue Projekt legt und erste visuelle Optionen generiert.

Projektgenerierung und Auswahl

  • Das System präsentiert verschiedene Design-Entwürfe auf einem lokalen Server im Browser.
  • Benutzer können aus mehreren Stilvarianten wählen oder das Design über zusätzliche Prompts anpassen.
  • Ein separater Sub-Agent namens Impeccable Finish Reviewer prüft das Endergebnis am Ende des ersten Durchlaufs.

Nach der Eingabe von Projektdetails erstellt das Tool auf dem Localhost mehrere visuelle Optionen für den Hero-Bereich. Der Nutzer wählt einen Favoriten aus, woraufhin der Prototyp im Terminal gebaut und von einem Reviewer-Agenten auf KI-Muster überprüft wird.

Der Live-Modus und iteratives Design

  • Mit dem Befehl impeccable live wird die interaktive Benutzeroberfläche zur Feinabstimmung im Browser gestartet.
  • Einzelne Elemente lassen sich anklicken und gezielt in bis zu vier verschiedenen Varianten modifizieren.
  • Für grundlegende Richtungswechsel und große Layout-Änderungen dient weiterhin das Terminal mit externen Referenzen.

Der Live-Modus erlaubt detaillierte Mikroanpassungen an bestimmten Komponenten direkt auf der Live-Ansicht. Größere Stilwechsel erfolgen durch das Einbinden von Referenzbildern im Terminal, womit sich das Design Schritt für Schritt an individuelle Vorstellungen anpasst.

Community Posts

View all posts