Mit Impeccable baut Claude Webseiten, die nicht nach KI aussehen
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Dies ist Impeccable, ein Toolchain-Design-Tool, das Ihrem Harness tiefgreifendes Designwissen
00:00:05vermittelt, um großartig aussehende Websites zu erstellen. Es erkennt 37 Design-Anti-Patterns, damit Ihre KI
00:00:12nicht die gleichen generischen Designs produziert, die man schon so oft gesehen hat. Es bietet sogar die Möglichkeit,
00:00:17dass Menschen sehr präzise Design-Anpassungen direkt im Browser vornehmen können. Aber ist das nur ein weiteres gehyptes KI-Tool,
00:00:22das einem Markdown-Dateien liefert und Token verbrennt, oder ist es tatsächlich nützlich? Abonnieren Sie und lassen Sie
00:00:28es uns herausfinden. Falls Sie mein Video über Superpowers gesehen haben, das Plugin, das Claude hilft, besseren Code zu schreiben,
00:00:36nun, das hier ist wie jenes, nur für Design, und zwar im guten Sinne. Es bietet einen strukturierten Arbeitsablauf, der der KI hilft,
00:00:42erstaunliche Designs und Websites zu erstellen, egal welcher Agent oder Harness verwendet wird. Entwickelt von Paul Backhouse,
00:00:47einem unabhängigen Product Engineer, der tatsächlich JQUI gemacht hat, falls Sie alt genug sind, um zu wissen, was das ist,
00:00:53und der schon so lange über die Fortschritte von Impeccable twittert, dass ich sicher bin,
00:00:58dass dies ein Teil dessen ist, was es so beliebt gemacht hat. Also, lassen Sie es uns ausprobieren. Ich werde eine Homepage
00:01:02für mein kinoreifes Film-Tool mit Impeccable bauen, um die Designs, die in meinem Kopf existieren, auf den Bildschirm zu bringen.
00:01:08Wir werden sehen, wie das läuft. Ich werde vier Haupt-Unterbefehle verwenden: teach, shape,
00:01:14craft und iterate. Nun, iterate ist nicht direkt ein Unterbefehl, aber das wird später im
00:01:19Video mehr Sinn ergeben. Legen wir los. Ich habe bereits den Impeccable-Skill mit for sales skill.sh installiert und
00:01:25ein leeres Verzeichnis erstellt, in das alle Code- und Designdateien kommen. Öffnen wir also
00:01:29Claude Code, und das Erste, was ich tun werde, ist, den Unterbefehl Impeccable teach auszuführen, der
00:01:34ihm beibringen wird, für wen dieses Produkt ist, und eine project.md-Datei erstellen soll, die
00:01:40wichtige Dinge wie den Zweck des Produkts, die Markenidentität und Designprinzipien enthält. Wenn wir also Enter drücken,
00:01:46sagt es mir, dass das Produktverzeichnis leer ist, und wir gehen durch ein paar Fragen der ersten Runde. Nun,
00:01:51das Wichtige, was man hier realisieren muss, bevor man weitermacht, ist der Unterschied zwischen einer Marke und
00:01:55einem Produkt. Der Produktdesignstil ist so etwas wie das hier, mit Sans-Serif-Schriften und einer halbfetten
00:02:00Hierarchie, was perfekt für ein Utility oder eine App ist, wohingegen der Markendesignstil eher ein
00:02:05Serif-Display und mehr Kursivschrift hat und ideal für ein Editorial/Magazin ist. Es gibt mehr Informationen
00:02:10über die Unterschiede auf der Impeccable-Website, aber für meinen speziellen Anwendungsfall wird dies
00:02:15ein Produkt sein. Ich habe nun die Antworten auf die drei Fragen geschrieben, drücke Enter, und es wird
00:02:19mir ein paar weitere Fragen stellen, wie zu Persönlichkeit, Referenzen und Zielgruppe. Ich habe also
00:02:24diese drei Folgefragen beantwortet, indem ich die Namen von Seiten angegeben habe, deren Look mir gefällt, sowie
00:02:28die Zielgruppe. Sobald man diese Fragen beantwortet hat, erstellt Impeccable eine product.md-Datei und gibt uns
00:02:33hier eine Zusammenfassung. An diesem Punkt fragt es, ob wir Impeccable document ausführen wollen, um eine
00:02:38design.md-Datei zu erstellen, oder Impeccable shape auslösen wollen, was uns hilft, eine Designsprache für unsere
00:02:43Homepage zu finden. Ich werde jetzt zu Impeccable shape springen, weil ich erst eine Vorstellung vom Design haben will,
00:02:48bevor ich das Designdokument erstelle. Wenn wir also Enter drücken, haben wir eine weitere Runde von Fragen,
00:02:53um uns bei einem Design-Briefing zu helfen. In manchen Fällen oder bei Verwendung bestimmter Harnesses wird Impeccable
00:02:59etwas namens Probe unter Verwendung eines Bildmodells erstellen, das dazu verwendet wird, das Design
00:03:04weiter zu verbessern. Da Claude Code aber kein Bildmodell hat, versuche ich, Impeccable auszutricksen,
00:03:08um GPT image 2 zu verwenden. Mal sehen, ob das funktioniert. Ich habe also seine Fragen zur Farbstil,
00:03:14dem Seitenlayout und dem Tech-Stack beantwortet. Ich habe ihm gesagt, dass ich einen OpenAI-Key in meiner Shell habe
00:03:20und GPT image 2 verwenden möchte, um eine Probe zu erstellen. Okay, es hat die Proben fertiggestellt
00:03:25und wir können sie uns ansehen, um zu wählen, welche wir wollen, zwischen A, B und C. Das hier ist A, was
00:03:30mir optisch wirklich gefällt. Das ist B, das auch gut aussieht, aber nicht so gut wie A. Und dann haben wir C, das
00:03:35großartige Arbeit beim Generieren dieser KI-Bilder geleistet hat, aber der Gewinner für mich ist definitiv A.
00:03:40Also werde ich ihm diese Details geben, und nach einer Weile gibt es mir ein Design-Briefing mit einer Funktionszusammenfassung,
00:03:45einer Benutzeraktion und so vielen anderen Informationen. Ich werde also die Fragen beantworten, die es mir
00:03:50am Ende gestellt hat, und hoffentlich wird es dann das Design erstellen. Nachdem das erledigt ist, war der nächste Schritt
00:03:55für mich, eigentlich Impeccable Craft auszuführen, aber es bot mir an, das für mich zu tun, also habe ich einfach Ja gedrückt,
00:04:00und es erstellt jetzt tatsächlich die Website mit Astro und Tailwind. Und nach etwa fünf Minuten
00:04:06ist es fertig mit dem Coden des Designs, hat all diese Astro-Seiten sowie eine Tailwind-Konfiguration erstellt
00:04:11und gibt mir ein detailliertes Briefing darüber, was es tatsächlich getan hat, was wirklich beeindruckend aussieht. Ich mag
00:04:17die Tatsache, dass ich hier kopieren kann, um die URL zu erhalten, wir bekommen die Alpha macOS zuerst, das Testvideo, das nicht
00:04:23funktioniert, aber toll, dass es hinzugefügt wurde, und wir bekommen einige Informationen über das Produkt mit diesem Effekt hier,
00:04:28sodass wir das Vorher und Nachher ziehen können, was eine sehr nette Sache ist. Wir haben sogar einige Befehle, um
00:04:33es zu installieren, und ein FAQ am Ende mit einem funktionierenden Akkordeon. Aber es gibt ein paar Probleme,
00:04:37die ich entdeckt habe, zum Beispiel ist dieses Schließ-Ding sehr klein und das Layout hier der Befehle sieht
00:04:43sehr merkwürdig aus. Aber jetzt, bevor wir zur Iterate-Phase gehen, möchte ich eine design.md-Datei erstellen, damit ich
00:04:49in einer anderen Sitzung Anpassungen vornehmen kann und es alles über mein Design weiß. Dazu führe ich Impeccable
00:04:54Document aus, was, wenn es fertig ist, ein Designdokument erstellt, das alles von Farben
00:04:59bis zur Typografie und sogar das CSS und die Styles enthält, die in meinem Projekt verwendet werden. Nun werden wir
00:05:06unser Design iterieren, was, wie ich vorhin erwähnt habe, kein einzelner Unterbefehl ist, sondern
00:05:10verschiedene Dinge enthalten kann. Wenn ich eine Animation hinzufügen wollte, könnte ich diesen animate-Unterbefehl zu bestimmten Teilen
00:05:15des Projekts hinzufügen, ich könnte bolder verwenden, um bestimmte Teile fetter zu machen, damit wir den Unterschied vorher
00:05:20und nachher sehen können, oder ich könnte eines dieser Dinge im Bereich refine verwenden oder Impeccable dazu bringen, das Design automatisch
00:05:25zu polieren. Und der beste Weg ist, diese Iterationsebene durchzuführen, anstatt meinem Harness zu sagen,
00:05:30welchen Bereich ich ändern möchte, und ihm einen dieser Unterbefehle zu geben. Stattdessen könnte ich Impeccable
00:05:35Live verwenden, das eine Alpha ist und in Claudes Code durch Ausführen von Impeccable Live ausgelöst wird. Aber was das tut,
00:05:39ist, es installiert eine Reihe von Skripten, verbindet sich dann über Astro mit meiner Website und startet einen Server auf Port 800,
00:05:46der auf Änderungen wartet, die ich an meiner Live-Seite vornehme. Wenn ich also zum Browser gehe und meine Seite betrachte, können
00:05:52wir sehen, dass ich jetzt dieses pinke Overlay habe, und wenn ich auf einen Abschnitt klicke, sagen wir diesen Textabschnitt, dann habe ich
00:05:58die Optionen, die ich vorhin gezeigt habe, Dinge fetter zu machen, ruhiger zu machen, Politur hinzuzufügen und so weiter, oder ich könnte einfach
00:06:03eintippen, genau was ich will. Also könnte ich sagen: Mach den Text hier größer, und wenn ich auf Go klicke, geht das
00:06:09direkt an meinen Agenten und aktualisiert den Code auf meiner Live-Seite. Wir können sehen, dass mein Prompt an
00:06:15Claudes Code gesendet wurde, also: Mach den Text größer mit dem spezifischen Teil der Seite, der diese Änderung braucht.
00:06:20Und ich kann weiterhin durch Teile der Seite gehen und solche Änderungen vornehmen, bis ich zufrieden bin.
00:06:25Zum Beispiel diesen Abschnitt hier mit dem Programmiertext, der schwer zu lesen ist, kann ich ihm einen Prompt geben,
00:06:29die Anzahl der Varianten wählen, die ich will, und Impeccable sein Ding machen lassen, und jetzt sieht es viel,
00:06:34viel besser aus, und es wurde sogar automatisch auf jeden einzelnen Teil der Website angewendet, der Code
00:06:39anzeigt. Da haben wir es also, ein kurzer Durchlauf, wie man von Grund auf eine beeindruckend aussehende Seite erstellt
00:06:44unter Verwendung von Impeccable, Claude Code und GPT image 2. Wenn ich ehrlich bin, ist dies ein Werkzeug für jemanden, der
00:06:50etwas Schönes schaffen will, sich aber nicht zu sehr in den Designdetails verlieren möchte. Dafür
00:06:55würde ich sagen, benutze so etwas wie Pencil, wo man sehr präzise bei der Positionierung, dem
00:06:59Border-Radius und allem anderen sein kann, wenn es um ein Design geht. Wenn Sie mehr über Pencil
00:07:04wissen wollen, schauen Sie sich dieses Video an, das ich früher gemacht habe. Auch wenn Impeccable modell- und harness-agnostisch ist,
00:07:10würde ich sagen, ist Claude Code wahrscheinlich nicht der beste Harness dafür, rein deshalb, weil Impeccable
00:07:15viele Token verbraucht, besonders wenn man ein riesiges Produkt und eine design.md-Datei hat, die in
00:07:21jedem einzelnen Impeccable-Unterbefehl verwendet wird, und Claudes Code in Kombination mit den Claude-Modellen sind sehr teuer.
00:07:26Wenn ich die Chance hätte, dieses Experiment noch einmal durchzuführen, würde ich höchstwahrscheinlich Codex CLI oder den Codex GUI
00:07:32verwenden, was Bildgenerierung ermöglicht, und es gäbe also keinen Grund für mich, anzugeben, das GPT image 2 Modell zu verwenden,
00:07:38da Impeccable das automatisch tun würde, weil es sich der Fähigkeiten des Harness bewusst ist,
00:07:43und Codex oder die GPT-Modelle sind viel großzügiger mit ihren Nutzungslimits. Jetzt werde ich
00:07:47etwas versuchen, das ich bei vielen YouTubern gesehen habe, nämlich Sie auf ein Video zu lenken, das
00:07:53vom YouTube-Algorithmus basierend auf Ihrem Wiedergabeverlauf empfohlen wurde, also schauen Sie es sich an.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video