Diese Fähigkeit hat Kimi K3 als Designer 10-mal besser gemacht
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Kimi K3 ist gerade erschienen – ein extrem leistungsstarkes Modell auf Augenhöhe mit Claudes Fable 5 und GPT 5.6.
00:00:06Das Highlight: Es ist wirklich hervorragend im Frontend-Bereich,
00:00:09so gut, dass viele es bereits als stärkstes Design-Modell überhaupt bezeichnen.
00:00:14Und es ist tatsächlich beeindruckend – doch die Sache hat einen Haken, der nicht nur Kimi betrifft.
00:00:17Jedes KI-Modell besitzt seinen eigenen Designstil, den man erst bemerkt, wenn man lange genug damit arbeitet.
00:00:22Wird ein neues Modell angekündigt, heißt es sofort, es sei das beste für Frontend – und bei den ersten Websites stimmt das gefühlt auch.
00:00:28In Wahrheit nutzen sie alle wiederkehrende Muster in jedem Entwurf.
00:00:32Egal ob Sonnet 4.5 oder GPT 5.6: Genau diese Schemata tauchen immer wieder auf.
00:00:38Unabhängig vom Modell braucht man also eine Technik, um es aus diesem Standardpfad zu lösen – wie es ein guter Designer tut.
00:00:43Eine der effektivsten Methoden dafür ist der Skill "Hallmark".
00:00:46Falls Sie neu hier sind: Wir sind ein Softwareunternehmen und das ist unser Kanal AI Labs,
00:00:50auf dem wir Ihnen zeigen, wie Sie Ihr Unternehmen mit KI optimieren – und falls Sie kein eigenes haben,
00:00:54können Sie diese Fähigkeiten nutzen, um Kundenprojekte zu optimieren und damit Geld zu verdienen.
00:00:58In diesem Video analysieren wir das Kimi-Modell, seine Frontend-Fähigkeiten und den Skill, der Designs von diesen typischen Mustern befreit.
00:01:05Vielleicht kennen Sie Kimi K3 bereits als eines der stärksten Modelle von Moonshot, aber hier ist eine kurze Zusammenfassung für alle anderen.
00:01:11Moonshot AI hat es als neues Flaggschiff veröffentlicht und es gewann extrem schnell an Popularität.
00:01:15Der wesentliche Vorteil: Es gehört nun zu den Modellen mit einem Kontextfenster von einer Million Tokens.
00:01:20Leistungstechnisch konkurriert es in vielen Bereichen direkt mit Fable 5 und GPT 5.6 – zwei der aktuell stärksten Modelle.
00:01:26Für den Vergleich nutzen wir die Benchmarks von Artificial Analysis, die Modelle in verschiedenen Kategorien bewerten.
00:01:32In puncto Intelligenz liegt es weit vor Opus 4.8 und dem neuen Gemini 3.6, knapp hinter Fable 5 und GPT 5.6.
00:01:40Der Unterschied in den Werten ist jedoch so gering, dass es praktisch in derselben Liga spielt.
00:01:44Im Frontend-Design schlägt es laut LM Arena sogar diese beiden Top-Modelle,
00:01:48wo Modelle mit identischen Prompts gegeneinander antreten und von echten Nutzern bewertet werden.
00:01:54Ein Grund für Kimis hervorragendes Abschneiden ist die integrierte Vision-in-the-Loop-Funktion, die auf seinen starken Bildverarbeitungsfähigkeiten basiert.
00:02:00Im Grunde schreibt das Modell nicht nur Code, sondern überprüft aktiv das visuelle Ergebnis.
00:02:04Die meisten Modelle analysieren nur den Code, um das Aussehen der Website zu erahnen,
00:02:07aber Kimi erstellt Screenshots des gebauten UIs, bewertet das Aussehen und korrigiert gezielt nach.
00:02:11Das ist ein Hauptgrund, warum viele es im Frontend-Bereich vorne sehen.
00:02:15Abstände und Layouts wirken deutlich ausgewogener und durchdachter als bei anderen Modellen.
00:02:19Bleibt noch der Preis.
00:02:20Und genau hier bietet Kimi einen echten Vorteil.
00:02:22Es liegt preislich bei 3 $ pro Million Input-Tokens und 15 $ pro Million Output-Tokens.
00:02:27GPT 5.6 ist mit 5 $ für Input und 30 $ für Output etwas teurer.
00:02:32Und Fable ist mit 10 $ für Input und 50 $ für Output aktuell das teuerste.
00:02:36Kimi bietet also dieselbe Spitzenleistung wie die Top-Modelle zum günstigsten Preis im Vergleich.
00:02:41Kimi wird mit einer eigenen Harness namens Kimi Code ausgeliefert, die zusammen mit dem K2.5-Modell auf den Markt kam.
00:02:47Es handelt sich um einen terminalbasierten Coding-Agenten, mit dem man Kimi nutzen kann, ohne direkt die API anzusprechen.
00:02:52In unseren Tests erwies sich Kimi Code jedoch als extrem langsam.
00:02:55Eine Aufgabe, die Claude Code oder Codex in etwa 3 Minuten erledigen, dauert mit Kimi Code fast 10 Minuten.
00:03:00Das liegt im Wesentlichen an zwei Gründen.
00:03:01Erstens sind die Modellgewichtungen von Kimi nicht frei verfügbar, sodass das Modell ausschließlich von Kimi gehostet wird.
00:03:08Jede Anfrage muss daher zwingend über die eigenen Server von Kimi verarbeitet werden.
00:03:12Diese Server sind häufig überlastet, weshalb jede Antwort deutlich länger dauert.
00:03:16Der zweite Grund ist die Ausführungsumgebung selbst.
00:03:17Schon bei älteren Modellen war die Arbeit damit recht zäh, und Kimi räumt in der Dokumentation selbst ein, dass sie nicht darauf ausgelegt ist, das volle Potenzial von K3 zu entfalten.
00:03:25Abgesehen von der Geschwindigkeit gibt es zwei weitere Probleme.
00:03:27Eines betrifft den Kontext.
00:03:28Bei Codex und Claude Code wechseln wir je nach Aufgabe häufig das Modell, und beide behalten dabei den Kontext zuverlässig bei.
00:03:36In Kimi Code ist das kaum möglich, da die Speicherung des Gesprächskontexts beim Modellwechsel fehlschlägt.
00:03:43Das andere Problem betrifft Sub-Agenten.
00:03:44Während der Ausführung wirkte es, als würden unzählige Instanzen gestartet.
00:03:47Auf Nachfrage gab das System jedoch an, nur 5 Sub-Agenten für die Aufgabe genutzt zu haben.
00:03:51Um das Modell angemessen zu testen, haben wir es stattdessen in Claude Code ausgeführt, wo es hervorragend funktioniert.
00:03:57Und Kimi bietet genau für diesen Anwendungsfall eine Möglichkeit.
00:03:59Eine Option besteht darin, Kimi innerhalb von Claude Code direkt über die API anzusprechen.
00:04:03Das wird jedoch schnell teuer, da jedes verarbeitete und generierte Wort abgerechnet wird, was sich bei intensiver Nutzung summiert.
00:04:10Die bessere Lösung ist es daher, die Nutzung über das bestehende Kimi-Abonnement abzuwickeln.
00:04:14Auf diese Weise zahlen Sie lediglich Ihren festen monatlichen Betrag ohne zusätzliche API-Kosten.
00:04:18Dafür gibt es das Tool CLI Proxy API.
00:04:21Es greift auf Ihre angemeldeten Entwicklungs-Tools zu und stellt sie als lokale API auf Ihrem eigenen Rechner bereit.
00:04:28Sie wandeln Ihr bestehendes Abonnement im Prinzip in einen lokal nutzbaren Server um.
00:04:33Die Installation erfolgt einfach über den Befehl "brew install".
00:04:35Anschließend melden Sie sich mit "kimi login" an, woraufhin sich die Kimi-Anmeldeseite für das Login öffnet.
00:04:41Sobald die Zugangsdaten hinterlegt sind, ist die Authentifizierung abgeschlossen.
00:04:43Danach starten Sie den Server, um die Verbindung zu Kimi aufrechtzuerhalten.
00:04:47Der letzte Schritt besteht im Erstellen eines API-Schlüssels für das lokale Setup, da dieser Schlüssel Claude Code für den Zugriff übergeben werden muss.
00:04:54Anstatt dies manuell zu erledigen, können Sie einfach Claude Code oder Ihren bevorzugten Agenten bitten, den API-Schlüssel über das Tool einzurichten.
00:05:02Sobald der Vorgang abgeschlossen ist, kopieren Sie den Schlüssel zur Verwendung.
00:05:04Danach starten Sie Claude Code.
00:05:06Hierzu muss die Ziel-URL angepasst werden, an die Claude seine Anfragen sendet.
00:05:09Standardmäßig verweist diese auf die Server von Claude; ändern Sie diese auf localhost, da der Server nun lokal auf Ihrem System läuft.
00:05:16Fügen Sie den von Claude generierten Schlüssel als Anthropic-Auth-Token ein und legen Sie als Modell Kimi K3 fest.
00:05:22Führen Sie danach den Claude-Befehl aus, und Claude Code öffnet sich mit K3 über Ihr Kimi-Abonnement.
00:05:28Wichtig zu wissen: Diese Einstellungen gelten ausschließlich für die aktuelle Terminal-Sitzung.
00:05:32Es wird also nichts dauerhaft verändert.
00:05:33Wenn Sie die Sitzung schließen und Claude in einem neuen Terminal öffnen, nutzen Sie Claude Code ganz gewohnt über Ihr Regulär-Abo.
00:05:39Bevor wir zu den Details des Skills kommen: Abonnieren Sie gerne den Kanal und aktivieren Sie die Glocke.
00:05:44Diese kleine Unterstützung hilft uns extrem weiter.
00:05:47Eine Landingpage ist das Aushängeschild Ihres Unternehmens.
00:05:49Sieht diese minderwertig oder nach billigem KI-Einheitsbrei aus, verlieren Sie an Glaubwürdigkeit und potenzielle Kunden.
00:05:54Für ein professionelles Ergebnis müssen Sie das Modell aus seinen gewohnten Standardmustern herausholen.
00:06:00Genau dafür wurden spezialisierte Skills entwickelt.
00:06:02Einer der bekanntesten ist Hallmark, ein Anti-KI-Slop-Design-Skill für Agenten.
00:06:07Er wird über vier zentrale Befehle gesteuert.
00:06:08Der erste ist der Standardbefehl: Sie beschreiben dem Agenten das Ziel, und er erstellt neue Benutzeroberflächen gemäß den vorgegebenen Richtlinien.
00:06:15Der zweite ist "Audit": Er prüft den Code auf bekannte Anti-Muster, um generische KI-Elemente auszuschließen.
00:06:21Der dritte ist "Redesign": Er verwirft den bestehenden Entwurf und erstellt eine grundlegend neue Variante in einer völlig anderen Stilrichtung.
00:06:27Der letzte ist "Study": Sie übergeben eine Beispielsagenseite, deren Stil analysiert und als Orientierung für das Design genutzt wird.
00:06:33Hier kommt der entscheidende Punkt:
00:06:34Ohne Hallmark würde ein Agent eine Vorlage meist Eins-zu-Eins kopieren.
00:06:40Hallmark verhindert genau das und nutzt die Zielseite lediglich als gestalterische Referenz statt als Kopiervorlage.
00:06:45Das Ergebnis bleibt somit eigenständig und originell.
00:06:47Zusätzlich bringt das Tool eine umfangreiche Bibliothek an Designstilen für eigene Projekte mit.
00:06:51Um sich diese Stile anzusehen, finden Sie auf der Website entsprechende Vorschau-Landingpages für jeden Stil.
00:06:56So können Sie die Designs visuell vergleichen.
00:06:57In der Dokumentation beschreibt die Datei "recipe.md" zudem die bewährten Praktiken für die Prompt-Erstellung.
00:07:02Vor der Nutzung muss Hallmark zunächst installiert werden.
00:07:04Kopieren Sie dazu den Installationsbefehl aus dem GitHub-Repository, fügen Sie ihn im Terminal ein und starten Sie den Vorgang.
00:07:11Das System fragt ab, für welchen Agenten die Installation erfolgen soll.
00:07:13Wenn Sie Kimi Code oder Codex nutzen, können Sie die Standardeinstellung direkt bestätigen.
00:07:17Die Dateien werden im Ordner ".agents" abgelegt, den viele Agenten – einschließlich dieser beiden – für Konfigurationen nutzen.
00:07:23Da Sie Kimi jedoch in Claude Code ausführen, müssen Sie zusätzlich Claude Code aus der Agentenliste auswählen.
00:07:28Dadurch erfolgt die Installation im Ordner ".claude", wo die Konfigurationen von Claude gespeichert sind.
00:07:32Nach Abschluss der Installation befinden sich die Ordner ".agents" und ".claude" mit dem Skill in Ihrem Projektverzeichnis.
00:07:38Die Datei "skill.md" enthält Anweisungen zur Verwendung, zum Aufruf sowie alle erforderlichen Funktionsparameter.
00:07:44Genau das macht dieses Tool anderen Alternativen überlegen.
00:07:46Es enthält über hundert Referenzen für verschiedene Designaspekte, einschließlich bekannter KI-Slop-Muster.
00:07:52Vor der Ausgabe durchläuft der Code ein Testverfahren mit 58 Prüfpunkten, um sauberes Design ohne KI-Typizitäten zu garantieren.
00:07:58Zusätzlich sind Vorgaben für Komponenten sowie die zuvor erwähnten Steuerungsbefehle enthalten.
00:08:02Bevor wir uns die Ergebnisse ansehen, ein kurzer Hinweis unseres Sponsors.
00:08:05Ihr KI-Coding-Assistent ist während der Arbeit großartig, vergisst jedoch alles, sobald Sie das Tool schließen oder wechseln.
00:08:12Man fängt jedes Mal von vorne an, verliert Kontext zu bisherigen Entscheidungen anderer Agenten und verschwendet Zeit wie Geld durch doppelte Erklärungen.
00:08:19Jolly Memory ist eine kostenlose Open-Source-IDE-Erweiterung, die Ihrem Assistenten ein dauerhaftes Gedächtnis verleiht.
00:08:24Es erfasst automatisch die Hintergründe Ihres Projekts aus Tickets, Links und Unterhaltungen, speichert sie lokal auf Ihrem Rechner und wandelt sie in strukturierte Dokumentationen um, die jedem Commit beigefügt werden und die Logik jeder Architektur- und Entwicklungsentscheidung festhalten.
00:08:39Es ist nicht an ein bestimmtes Tool oder Modell gebunden: Wechseln Sie flexibel zwischen Claude, Gemini oder Qwen – Ihr Speicher bleibt erhalten, ganz ohne synchrone "state.md"-Dateien oder manuelle Notizen.
00:08:48Es funktioniert in VS Code, IntelliJ, Cursor, Claude und Windsurf: Einmal installieren und überall nahtlos nutzen.
00:08:56Tritt ein Fehler auf, lässt sich der Hintergrund jeder Änderung nachvollziehen; das System stellt die Struktur wie eine übersichtliche Karte Ihres Projekts dar.
00:09:03Testen Sie Jolly Memory über den Link im angepinnter Kommentar.
00:09:06Obwohl Kimi im Frontend-Bereich extrem stark ist, besitzt auch dieses Modell eigene Muster, die seinen Designstil prägen.
00:09:13Da das Modell neu ist, fallen diese Eigenheiten aktuell noch wenig auf, werden sich mit der Zeit aber deutlicher zeigen.
00:09:18Da chinesische Modelle bekanntlich häufig durch Distillation von Claude-Modellen trainiert werden – also durch Training mit den Ausgaben anderer Modelle –, spiegelt sich der Stil von Opus 4.8 stark in Kimis Ergebnissen wider.
00:09:29Die Platzierung von Bildern hinter der Hero-Section, seitlich versetzter Hero-Text sowie die Vorliebe für warme Orange- und Brauntöne – egal ob bei hellen oder dunklen Themes – finden sich auch bei Kimi wieder.
00:09:40Ein positiver Aspekt bei Kimi ist jedoch, dass die Texte nicht mit den typischen Marketing-Floskeln von Opus überladen sind.
00:09:46Die Inhalte wirken durchdacht und lesen sich wesentlich zielgerichteter als die Ausgaben vergleichbarer Modelle.
00:09:51Um den Skill zu testen, haben wir ihn in Claude Code mit Kimi ausgeführt und eine einfache Landingpage angefordert.
00:09:56Der Prozess beginnt mit einer Vorbereitungsphase, dem sogenannten Pre-Flight.
00:09:59Hierbei analysiert das System bestehende Dateien mit Stilvorgaben und entscheidet, welche Elemente übernommen oder ersetzt werden.
00:10:06Da wir ein frisches Next.js-Template genutzt haben, wurde Next.js als Framework fixiert und überflüssige Konfigurationen entfernt.
00:10:11Vor der Erstellung fragt das System drei Parameter ab: Zielgruppe, Verwendungszweck der Website und den gewünschten Tonalitätsstil.
00:10:18Diese Angaben direkt im Prompt mitzugeben ist ratsam; fehlen sie, fragt das System diese jedoch automatisch ab.
00:10:25Nach Eingabe der Antworten zieht das Modell Themes sowie Referenzen heran und generiert die Seite.
00:10:30Nach der Erstellung wird sichergestellt, dass alle 58 Qualitätsprüfungen erfolgreich bestanden wurden.
00:10:34Da Hallmark mit festen Befehlen arbeitet, bewirkt die Anforderung eines vollständigen Redesigns eine grundlegende Überarbeitung.
00:10:39Das System erkennt den Befehl, lädt das Redesign-Protokoll, stellt die Detailfragen erneut und baut die gesamte Seite in einer völlig neuen Stilrichtung auf.
00:10:49Zusätzlich gibt es den Audit-Modus, der das Design gezielt auf KI-Slop-Muster prüft.
00:10:53Beim Ausführen des Hallmark-Audits lädt das System den Skill neu, erstellt einen Bericht anhand der Kriterien und markiert jede Auffälligkeit.
00:11:00Basierend auf diesem Bericht entscheiden Sie, welche Anpassungen umgesetzt werden sollen.
00:11:02Bei der Arbeit mit Kimi in Claude Code ist jedoch auf das Kontextmanagement zu achten, da die automatische Komprimierung nicht greift.
00:11:09Ist das Kontextfenster voll, bricht der Prozess zwar nicht ab,
00:11:12allerdings weichen die Antworten zunehmend von den Vorgaben ab oder werden ungenau und generisch.
00:11:18Nach dem Audit setzte Kimi die markierten Korrekturen um – und davon gab es einige.
00:11:22Die Schriftart, die das Design nach typischer KI aussehen ließ, wurde entfernt.
00:11:25Bilder von Unsplash wurden durch Pixum ersetzt, da Unsplash der Standard fast aller Modelle ist.
00:11:32Zudem wurde die mobile Darstellung korrigiert, was den Gesamteindruck deutlich aufwertete.
00:11:36Von diesem Stand aus können Sie weitere Iterationen anfordern, bis das gewünschte Ergebnis erreicht ist.
00:11:39Ein Tipp für die Nutzung von Skills mit Kimi in Claude Code:
00:11:42Der automatische Aufruf funktioniert nicht immer zuverlässig, da Kimi nicht das Standardmodell von Claude Code ist
00:11:47und dieser Triggermechanismus speziell auf Claudes eigene Modelle abgestimmt ist.
00:11:51Ratsamer ist es daher, den Skill manuell per Slash-Befehl aufzurufen, um das korrekte Laden vor dem Bauen sicherzustellen.
00:11:57Wir haben denselben Test in Claude Code mit dem Modell Opus 4.8 durchgeführt – jeweils mit und ohne den Skill.
00:12:03Zunächst haben wir ohne Skill getestet; die Anwendung wurde auf reguläre Weise erstellt.
00:12:06Der Vorgang dauerte etwa 6 Minuten, und das Ergebnis wies deutliche Merkmale typischer KI-Generierung auf.
00:12:10Von der Farbwahl über den Hintergrundverlauf bis hin zu den abgerundeten Containern entsprach alles dem klassischen Opus-Stil.
00:12:16Unser Design-System beinhaltet jedoch den KI-Slop-Detector-Skill,
00:12:20der darauf trainiert ist, typische Muster – einschließlich derer von Opus – zuverlässig zu erkennen.
00:12:24Nach der Analyse wurden zahlreiche Auffälligkeiten mit hoher sowie niedriger Wahrscheinlichkeit gemeldet,
00:12:30wobei insbesondere die Textfarbverläufe bemängelt wurden.
00:12:32Anschließend führten wir Hallmark aus.
00:12:33Der Skill wurde geladen, der Pre-Flight durchgeführt, Muster erfasst und die Abfrage erneut durchlaufen.
00:12:39Der Prozess dauerte zwar deutlich länger als ohne Skill, das Ergebnis überzeugte jedoch:
00:12:43Das finale Design wirkte wesentlich kreativer und durchdachter.
00:12:46Die Interaktivität der Buttons war verbessert, was auf ein besseres Produktverständnis des Modells zurückzuführen ist.
00:12:51Standardmäßig werden keine Platzhalterbilder eingesetzt, da Stockfotos von Unsplash laut Regelwerk als KI-Muster gelten.
00:12:58Das System ist für Entwickler konzipiert und fordert eigene Medien an, statt auf KI-generierte Bilder oder Stockfotos zurückzugreifen.
00:13:04Insgesamt fiel das Design spürbar besser aus als bei Kimi, weshalb der Skill mit Claude derzeit noch effektiver arbeitet.
00:13:10Die spezifische Designcharakteristik von Kimi ist noch nicht tiefgehend integriert, weshalb primär bekannte Muster anderer Modelle gefiltert werden.
00:13:15In sämtlichen Tests lieferte der Skill jedoch hervorragende Ergebnisse.
00:13:18Das erwähnte Design-System sowie alle in unseren Videos gezeigten Ressourcen
00:13:23stehen in unserer Community "AI Labs Pro" zur Verfügung.
00:13:26Wenn Ihnen unsere Inhalte Mehrwert bieten und Sie den Kanal unterstützen möchten, ist das die beste Möglichkeit dazu.
00:13:31Der Link befindet sich in der Videobeschreibung.
00:13:33Wer Codex kennt, weiß, dass das Modell standardmäßig auf eine Farbkombination aus Grün und Weiß setzt –
00:13:38ähnlich wie Opus bevorzugt auf Orange, Creme und Braun zurückgreift.
00:13:42Das sind die Farben, die es standardmäßig wählt.
00:13:45Die Designs nutzen zudem häufig viele SVGs und tendieren zu eher kleinen Schriftgrößen im Verhältnis zum Bildschirm.
00:13:51Die Ergebnisse sind im Vergleich gut, allerdings treten diese Standardmuster immer wieder auf.
00:13:56Wir haben Codex mit dem installierten Skill im Ordner ".agents" getestet und eine einfache Beschreibung des Zielprojekts vorgegeben.
00:14:03Hierfür nutzten wir die Codex-App, da sie Browser-Tools und weitere nützliche Funktionen mitbringt.
00:14:09Nach dem Pre-Flight wurden Zielgruppe, Anwendungsfall und Tonalität abgefragt.
00:14:14Nach der Eingabe bearbeitete das System mehrere Dateien, führte Tests durch und schloss einen interaktiven Browsertest an.
00:14:21Da die Browser-Integration direkt vorhanden und sehr ausgereift ist, wird sie gewinnbringend eingesetzt.
00:14:26Das finale Ergebnis der Website wirkte deutlich hochwertiger.
00:14:29Die Kombination aus Blau und Weiß kann zwar leicht nach KI aussehen, wirkt hier jedoch gewollt und passend, da sie gut zu technischen Websites passt.
00:14:39Alle Elemente wichen positiv von den sonstigen Codex-Standards ab.
00:14:43Im Bildbereich der Hero-Section gab es zwar kleine Fehler – etwa bei der Darstellung des ausgewählten Tabs –, diese ließen sich jedoch manuell korrigieren.
00:14:52Anschließend führten wir das Hallmark-Audit aus, das einen Bericht erstellte.
00:14:54Laut Bericht war die Gesamtstruktur stark, mit nur wenigen verbleibenden Problemen wie der Responsivität, die in der ersten Version meist fehlt.
00:15:02Damit sind wir am Ende dieses Videos angekommen.
00:15:03Wenn Sie den Kanal unterstützen möchten, nutzen Sie gerne den Super-Thanks-Button unter dem Video.
00:15:10Vielen Dank fürs Zuschauen und bis zum nächsten Mal!