Autor des #1 Trending Design-Skills auf GitHub hat KI-Design erneut revolutioniert

DeutschالعربيةEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
AAI LABS
Computing/SoftwareInternet Technology

Transcript

00:00:00Wenn Sie jemals eine Website mit KI entworfen haben, wissen Sie, wie generisch die Designs
00:00:04dieser Modelle aussehen können. Es gibt viele Tools und Skills, die dieses Problem lösen wollen, und manche
00:00:09liefern wirklich solide Designs. Aber jedes einzelne hat eine Schwachstelle, und genau
00:00:14deshalb wirken ihre Designs immer noch generiert. Um diese Lücke zu schließen, gibt es ein Tool namens Inspo.
00:00:19Es stammt vom selben Entwickler wie Hallmark, einem der beliebtesten Design-Skills
00:00:23auf GitHub. Inspo löst das Problem so, dass nicht nur die Designs Ihres Agents
00:00:28besser werden, sondern er auch ein besseres Designverständnis entwickelt. Während andere Tools dafür
00:00:33kostenpflichtig sind, ist dieses absolut kostenlos. Wenn Sie zum ersten Mal hier sind: Wir sind ein
00:00:38Softwareunternehmen und das ist unser Kanal AI Labs. In diesem Video zeigen wir Ihnen genau,
00:00:43wie Inspo das Designproblem Ihres Agents löst. Doch bevor wir dazu kommen, müssen Sie
00:00:48verstehen, warum KI-Modelle überhaupt so generische Websites bauen. Ein Modell wird mit riesigen
00:00:54Datenmengen trainiert. Dabei lernt es die Muster, die in den Trainingsdesigns
00:00:59am häufigsten vorkommen. Weil sie so oft auftauchen, hält das Modell diese Muster für die sicherste Wahl.
00:01:05Wenn Sie im Prompt kaum Designvorgaben machen, wählt es einfach die häufigsten Muster,
00:01:10weil es diese als sicher eingestuft hat. Diese Entscheidungen
00:01:14sehen auf den ersten Blick gut aus, aber wenn man sie auf vielen Websites sieht, erkennt man sie schnell
00:01:19als den typischen Stil des Modells. Jedes Modell hat sein eigenes Muster auf allen Seiten. Bei einigen
00:01:25war es die Farbkombination aus Violett oder Blau auf weißem Hintergrund. Bei anderen waren es die warmen
00:01:30Orange- und Cremetöne. Deshalb braucht man etwas, um das Modell von diesem
00:01:35Einheitslook wegzulenken, damit sich die eigene Website abhebt. Es gibt zwar bereits einige Design-Skills,
00:01:40die genau hier ansetzen – und viele davon haben wir auf unserem Kanal vorgestellt. Sie funktionieren alle
00:01:45sehr gut und helfen auf ihre Art, indem sie den Modellen Designvorgaben machen,
00:01:50um gute Layouts zu erzeugen. Eines davon ist das erwähnte Hallmark, zu dem wir
00:01:55bereits ein Video haben. Wir nutzen es selbst sehr oft, weil es dem Modell eine Richtung vorgibt
00:02:00und die Seite auf typische Modell-Muster prüft. Wir nutzen auch andere Design-Skills,
00:02:06und diejenigen aus unseren Workflows stecken in unserem AI Labs Pro Design System, das wir
00:02:11auch in unserer Community bereitgestellt haben. Alle diese Skills geben dem Modell Anweisungen,
00:02:16was es tun soll, und sagen ihm, welche Standardmuster es vermeiden soll. Manche dieser Skills, wie Hallmark,
00:02:21enthalten auch Referenzen von erfolgreichen Websites, damit sich das Modell inspirieren lassen kann,
00:02:26weil diese Designs bereits funktioniert haben. Allerdings sind die meisten dieser Referenzen
00:02:30und Anweisungen in Markdown-Dateien beschrieben. Daraus muss der Agent dann herleiten,
00:02:36wie die fertige Seite aussehen soll. Er kann zwar lesen, welche Schriftarten zu nutzen sind und wie die Seite aufgebaut wird,
00:02:41aber diese Beschreibung hilft dem Modell nicht zu verstehen, wie das Zusammenspiel der Komponenten
00:02:46am Ende aussieht. Zudem verstehen Modelle oft nicht, welcher Designstil wirklich passt,
00:02:51und gestalten einfach das, was in der Anleitung steht. Genau deshalb brauchte es Inspo – denn es bietet
00:02:56den Modellen weit mehr als nur reine Anweisungen. Bevor wir uns das Tool ansehen, abonniert gerne
00:03:01den Kanal und lasst ein Like da. Diese kleine Unterstützung hilft uns wirklich sehr.
00:03:07Inspo ist im Grunde ein MCP-Server, der dieses Problem löst, indem er Ihrem Coding-Agenten
00:03:13Zugriff auf echte Websites statt nur auf Design-Anleitungen gibt. Das hilft enorm, denn mit diesem
00:03:18Tool weiß der Agent, welches Design für Ihre Art von Website funktioniert hat, und kann es direkt
00:03:23analysieren. Darauf aufbauend erstellt er ein neues Design. Es enthält 832 Websites mit
00:03:292.320 erfassten Seiten in Form von Bildern. Zudem gibt es Screenshots dieser Seiten für
00:03:36Desktop und Mobile. So sieht Ihr Agent, wie sich das Design an kleinere Bildschirme anpasst,
00:03:42und kann für alle Gerätetypen gestalten. Es bietet auch Referenzen für einzelne Seitenbereiche wie das Menü
00:03:47oder den Preisbereich. Wenn der Agent an einem bestimmten Teil arbeitet, kann er sich gezielt
00:03:53Beispiele dafür ansehen. Er kann sogar den Code für das gewünschte Element abrufen. Das Wichtigste ist jedoch:
00:03:58Zu jeder Website gehört eine design.md-Datei, die das Design strukturiert beschreibt,
00:04:04sodass der Agent es besser versteht. Sie enthält die Farbpalette mit exakten Farbwerten sowie
00:04:09die genauen Schriftarten und Maße für Textgrößen und Abstände. Der Agent kann
00:04:15diese Datei nutzen, um die Komponenten zu verstehen, statt Stile und Schriftarten nur aus
00:04:20Bildern abzuleiten. Sie können sich die Websites auf der Landingpage ansehen. Dort finden Sie
00:04:25verschiedene Seiten mit ganz unterschiedlichen Designstilen. Sie können auch die Originalseiten besuchen.
00:04:30Die Nutzung ist völlig kostenlos und Sie brauchen weder Account noch API-Key für die Einbindung.
00:04:35Bevor wir Inspo installieren, sollten Sie verstehen, wie es im Hintergrund funktioniert. Wenn Sie
00:04:40Ihrem Agenten einen Prompt geben, sendet er eine Beschreibung Ihres Projekts über ein Tool
00:04:46namens “recommend” an Inspo. Inspo sucht dann nach passenden Seiten und prüft,
00:04:51wie die besten Treffer aufgebaut sind. Es wählt das Layout, das unter diesen Top-Ergebnissen
00:04:56am häufigsten vorkommt, und liefert bis zu fünf Beispiele zurück. So erhält der Agent mehrere Referenzen
00:05:01mit ähnlichem Aufbau, die er vergleicht, bevor er das Design Ihrer Seite festlegt. Neben diesen
00:05:06Beispielen liefert Inspo auch passende Komponenten-Referenzen und eine vorgeschlagene Farbpalette.
00:05:12Die Antwort enthält bis zu drei Screenshots. Der Agent sieht sich die Seiten also an und erkennt,
00:05:17wie die Designentscheidungen zusammenwirken. Alles wird gebündelt an den Agenten gesendet, der damit
00:05:22entscheidet, wie er Ihre Vorgaben umsetzt. Inspo bietet Suchfilter für verschiedene Branchen
00:05:27und Seiten-Layouts sowie Optionen für helle oder dunkle Themes. Sie können dem Agenten im Prompt
00:05:33also genau vorgeben, welche Richtung Sie wünschen. Er grenzt die Ergebnisse dann
00:05:37mit diesen Filtern ein, um passendere Referenzen zu erhalten. Sobald der Agent geeignete Referenzen gefunden hat,
00:05:43fordert er weitere Details zu diesen Seiten und deren design.md-Dateien an, bevor er mit dem Bauen beginnt. Inspo
00:05:49weist ihn außerdem an, nur wenige davon im Detail zu analysieren. Denn jede zusätzliche Suche
00:05:54fügt dem Gespräch weitere Ergebnisse hinzu, was das Modell überfordern und unsicher machen kann,
00:06:00welchen Stil es wählen soll. Der Agent muss also nicht weiter suchen, sobald er genug Referenzen hat.
00:06:04Vor der Installation noch ein kurzer Hinweis auf unseren Sponsor Manid.
00:06:09Jedes echte Projekt braucht irgendwann Daten, die noch fehlen. Um diese zu bekommen, muss man sich meist
00:06:13für eine weitere API registrieren und wieder einen Schlüssel manuell einbinden. Manid ist der Open Router für Agent-Tools.
00:06:19Ein einziger Key reicht für jede API – den ganzen Einrichtungsaufwand kann man sich sparen. Wir binden den Skill in den Code ein
00:06:25und fordern genau das an, was benötigt wird – etwa das Suchvolumen eines Keywords oder Kontaktdaten eines Profils.
00:06:30Manid findet den passenden Endpunkt, führt den Aufruf aus und die Daten landen in Sekunden in der Session.
00:06:36Kein Server-Setup, keine Konfiguration. Dieser eine Schlüssel deckt über 1.900 weitere Tools ab – für Scraping,
00:06:43Kontaktrecherche, Suchdaten oder Videogenerierung. Stripe hat Open Router gerade für 7 Milliarden Dollar gekauft,
00:06:48und Manid überträgt dieses Konzept auf Agenten-Tools. Ein Key für jede API. Es gibt auch kein Abo:
00:06:54Sie zahlen pro Aufruf, die Kosten skalieren also mit Ihrem Wachstum, und direkt bei der Registrierung gibt es Startguthaben.
00:06:59Holen Sie sich Ihren Key und starten Sie noch heute. Der Link ist in der Beschreibung. Um Inspo zu installieren, kopieren Sie
00:07:04einfach den Befehl von der Website (Link in der Beschreibung) und fügen ihn
00:07:09in Ihr Terminal ein. Beim Ausführen erkennt das Installationsprogramm automatisch, welche Coding-Agenten
00:07:14bereits installiert sind, und fragt, ob Inspo überall hinzugefügt werden soll. Sie können es auf Wunsch
00:07:19für alle installieren. Wenn Sie es aber nur für einen bestimmten Agenten nutzen möchten, lässt sich das
00:07:24im Standard-Ablauf derzeit nicht auswählen. Wenn Sie mit “Nein” antworten, wird die Installation direkt abgebrochen.
00:07:29Um es nur für einen spezifischen Agenten zu installieren, müssen Sie den Installationsbefehl
00:07:34mit einem Client-Flag und dem Namen des Agenten ausführen. Es wird im User-Scope installiert,
00:07:39sodass Inspo in jedem Ordner verfügbar ist, sobald Sie den Agenten öffnen, und nicht nur auf das
00:07:44Installationsprojekt beschränkt bleibt. Nach Abschluss der Installation starten Sie den genutzten
00:07:49Agenten neu und führen den MCP-Befehl aus. Danach wird Inspo zusammen mit Ihren
00:07:54anderen MCP-Servern aufgelistet, und dem Agenten stehen alle 15 Tools zur Verfügung.
00:08:00Um Inspo zu nutzen, geben Sie dem Agenten einfach einen Prompt für die gewünschte Website.
00:08:05Wir haben es an einer Demo-Landingpage für Mode getestet. Im Prompt baten wir den Agenten außerdem,
00:08:11uns vor dem Erstellen einige Stile zur Auswahl zu geben. Das müssen Sie zwar nicht tun,
00:08:15aber wenn Sie vorab nach Alternativen fragen, können Sie rechtzeitig eingreifen und eine andere
00:08:20Richtung anfordern, bevor die komplette Seite gebaut ist. Obwohl wir nicht explizit gefordert hatten,
00:08:25Inspo zu nutzen, rief der Agent den zuvor verbundenen Inspo-MCP ab. Statt den Prompt einfach
00:08:31eins zu eins weiterzuleiten, ergänzt der Agent weitere Keywords zum gewünschten Stil.
00:08:36Das hilft besonders dann, wenn Ihr Prompt die gewünschte Website nicht sehr genau beschreibt.
00:08:40So kann die Suche präzise eingegrenzt werden und der MCP findet exakt passende Referenzen.
00:08:46genaue Referenzen zu finden, die zu Ihren Vorgaben passen. Er analysiert dann die zurückgegebenen Referenzen und
00:08:50vergleicht deren gemeinsame Muster, um herauszufinden, welche Designentscheidungen zu diesem Stil gehören.
00:08:55In unserem Fall hat der Agent etwa 24 Seiten analysiert und diese Referenzen für seine Designentscheidungen genutzt.
00:09:01Für unsere Website hat uns der Agent drei Designrichtungen vorgeschlagen und jede beschrieben, damit wir wählen konnten.
00:09:06Nachdem wir uns für eine Richtung entschieden hatten, begann er mit dem Aufbau der Seite. Als er fertig war,
00:09:11sah das Ergebnis anders aus als die Designs, die wir sonst von eigenständigen Modellen bekommen – selbst mit Design-Skill.
00:09:16Der erste Abschnitt der Seite nutzt Bilder, anstatt riesigen Text über die gesamte Breite zu platzieren, wie es Modelle sonst oft tun.
00:09:23Der Agent hat fettgedruckte Schriftarten und neutrale Farben verwendet, passend zum angeforderten Thema.
00:09:27Wenn Sie dem Agenten schon einmal eine Referenzseite gegeben haben, wissen Sie, dass er das Design meist eins zu eins kopiert, anstatt es als Inspiration zu nutzen.
00:09:37Wir wollten also sehen, ob unsere Seite genau das getan hat oder ob sie dem Stil über alle Referenzen hinweg gefolgt ist.
00:09:43Dafür haben wir den Agenten gefragt, welche Seiten er als Referenz genutzt hat, und er gab uns die Links zu allen verwendeten Seiten.
00:09:49Als wir diese Seiten überprüften, sahen alle unterschiedlich aus, und unsere Seite hatte keine davon exakt kopiert.
00:09:54Sie hat den Stil des Hero-Abschnitts von einer Seite übernommen, die Buttons von einer anderen und die Produktanordnung von einer dritten.
00:10:00Der Agent hat also Teile dieser Referenzen zu einem Design kombiniert, das keiner von ihnen glich.
00:10:05Der Agent hat sich auch auf mobile Layouts bezogen und hatte so Beispiele dafür, wie diese Seiten ihren Inhalt auf kleineren Bildschirmen anordnen.
00:10:12Deshalb funktionierte das Design auch gut, als wir es auf einem kleineren Bildschirm überprüften.
00:10:16Aber obwohl das Design näher an unseren Wünschen lag, war die Seite immer noch statisch und hatte keine Animationen.
00:10:22Das ist etwas, das eine Website erst komplett macht, und Inspo deckt diesen Teil nicht ab.
00:10:26Dafür haben wir den UISkills-MCP-Server verwendet.
00:10:29Dieser MCP gibt dem Agenten Zugriff auf eine Bibliothek von Design-Skills verschiedener Autoren,
00:10:34sodass Sie den Agenten bitten können, einen Skill für Ihre aktuelle Website zu finden,
00:10:38und er durchsucht seine Bibliothek nach den Skills, die zu Ihrer Anfrage passen.
00:10:42Diesen MCP haben wir auch schon in unserem vorherigen Video vorgestellt.
00:10:46Für unsere Website haben wir den Agenten also aufgefordert, mithilfe des MCP Animationen hinzuzufügen.
00:10:51Nach der Aufforderung lud er den Animations-Skill von Emil Kowalski und den Scroll-Animations-Skill von Mengto.
00:10:57Der Agent fügte dann die Animationen hinzu, und sie waren zeitlich perfekt aufeinander abgestimmt.
00:11:01Wir haben Inspo auch auf mehreren anderen Seiten getestet, und die Ergebnisse haben meistens gut funktioniert.
00:11:07Obwohl dieses Tool die Seite ziemlich gut gestaltet hat, ist es noch neu, daher gab es ein paar Probleme.
00:11:12Beim Testen lieferte es in zwei Fällen die falschen Referenzen, obwohl unser Prompt die Art der Website explizit genannt hatte.
00:11:19Die von Inspo gelieferten Referenzen stammten von völlig fremden Website-Typen.
00:11:24In einem Test forderten wir eine Kaffee-Abo-Seite an, erhielten aber Referenzen von Gesundheits- und Business-Seiten.
00:11:30Erst als wir erneut mit dem Filter für die Lebensmittel- und Getränkebranche suchten, erhielten wir Referenzen von Kaffee-Seiten.
00:11:36Und es gibt einige Probleme bei den Screenshots, die es liefert.
00:11:38Bei einigen sind Teile des Designs durch das Pop-up verdeckt, das beim Öffnen der Seite erscheint.
00:11:43In unserem früheren Test hatte einer der Screenshots ein Datenschutz-Pop-up mitten auf der Seite, sodass der Agent das Design dahinter nicht sehen konnte.
00:11:50Er hat stattdessen nach eigener Überlegung gebaut – genau das, was man durch die Installation des Tools vermeiden wollte.
00:11:57Deshalb sollten Sie, wie vorhin erwähnt, zuerst nach Designrichtungen fragen, genau wie wir es beim Testen gemacht haben,
00:12:03damit Sie es bemerken, wenn es in die falsche Richtung läuft, und neu prompten können, um diese Probleme zu beheben.
00:12:09Das Design-System, das wir Ihnen hier gezeigt haben, sowie weitere Ressourcen sind in AI Labs Pro verfügbar, unserer Community.
00:12:16Wenn Ihnen unsere Arbeit gefällt und Sie den Kanal unterstützen möchten, ist das der beste Weg dazu.
00:12:20Der Link ist in der Beschreibung.
00:12:22Damit sind wir am Ende dieses Videos angelangt.
00:12:24Wenn Sie den Kanal unterstützen und uns helfen möchten, weiterhin solche Videos zu machen, können Sie das über den Super-Thanks-Button unten tun.
00:12:30Wie immer vielen Dank fürs Zuschauen und bis zum nächsten Mal.

Key Takeaway

Der kostenlose MCP-Server Inspo verhindert generische KI-Webseiten, indem er Coding-Agenten 832 echte Website-Referenzen, mobile Layouts und präzise design.md-Dateien zur direkten Analyse bereitstellt.

Highlights

  • Das kostenlose MCP-Tool Inspo löst das Problem generischer KI-Webdesigns, indem es Coding-Agenten Zugriff auf 832 echte Referenz-Websites mit 2.320 erfassten Seiten gibt.

  • Jeder Website-Eintrag in Inspo enthält Screenshots für Desktop und Mobile sowie eine design.md-Datei mit exakten Farbwerten, Schriftarten und Abstandsmaßen.

  • Über die Funktion recommend sucht Inspo nach passenden Layouts und liefert bis zu fünf Referenzen, dazugehörige Komponenten und drei Screenshots an den Agenten zurück.

  • Die systemweite Installation auf dem Rechner erfolgt über einen einfachen Terminal-Befehl, kann jedoch über ein Client-Flag auch gezielt auf einzelne Agenten beschränkt werden.

  • Eine Kombination aus Inspo für visuelle Layout-Muster und dem UISkills-MCP-Server für Animationen erzeugt vollständig responsive, animierte Websites.

Timeline

Ursachen generischer KI-Designs und die Grenzen von Markdown-Skills

  • KI-Modelle wählen ohne spezifische Vorgaben immer die am häufigsten trainierten Muster als sicherste Option.
  • Typische Modell-Muster zeigen sich oft in wiederkehrenden Farbkombinationen wie Violett/Blau auf Weiß oder warmen Orange/Cremetönen.
  • Reine Text- und Markdown-Anweisungen reichen nicht aus, damit ein Modell das finale Zusammenspiel von visuellen Komponenten versteht.

Da KI-Modelle auf riesigen Datenmengen trainiert werden, stufen sie die am häufigsten vorkommenden Gestaltungsformen als statistisch sicherste Wahl ein. Ohne detaillierte Steuerung entstehen dadurch immer gleiche Layouts und Farbschemata. Bestehende Design-Skills wie Hallmark versuchen diesem Effekt entgegenzuwirken, indem sie Vorgaben in Markdown-Dateien formulieren. Diese rein textuellen Beschreibungen erklären zwar Schriftarten und Strukturen, vermitteln dem Agenten jedoch kein echtes visuelles Verständnis für das fertige Gesamtbild.

Funktionsumfang und Datenbasis des Inspo MCP-Servers

  • Inspo gewährt Coding-Agenten Zugriff auf eine Datenbank von 832 Websites mit insgesamt 2.320 gestalteten Seiten.
  • Jedes Referenz-Design beinhaltet Bildschirmfotos für Desktop und Mobilgeräte sowie Beispiele für einzelne Komponenten wie Menüs und Preistabellen.
  • Strukturierte design.md-Dateien liefern exakte Farbwerte, konkrete Schriftarten und präzise Abstandsmaße.

Inspo agiert als MCP-Server, der dem Agenten reale visuelle Vorlagen statt abstrakter Beschreibungen zur Verfügung stellt. Durch Screenshots von Mobile- und Desktop-Ansichten lernt der Agent, wie sich Layouts an unterschiedliche Bildschirmgrößen anpassen. Neben den Bildern liefert eine integrierte design.md-Datei technische Spezifikationen wie exakte Farbcodes und Schriftgrößen, was die präzise Extraktion von Designregeln ohne bloßes Raten ermöglicht. Die Nutzung auf der Landingpage ist komplett kostenlos und erfordert weder eine Registrierung noch einen API-Schlüssel.

Such- und Empfehlungsmechanismus im Hintergrund

  • Über das Werkzeug recommend analysiert Inspo die Anforderung des Agenten und ermittelt das häufigste Layout unter den besten Treffern.
  • Inspo gibt maximal fünf Seitenbeispiele, passende Komponenten-Referenzen, Farbpaletten und bis zu drei Screenshots zurück.
  • Die Begrenzung der Suchergebnisse schützt den Agenten vor einer Überforderung durch zu viele widersprüchliche Stile.

Der Ablauf beginnt mit der Projektbeschreibung des Agenten, die über das intern aufgerufene Tool recommend verarbeitet wird. Inspo identifiziert die am besten passenden Layouts aus der Datenbank und stellt ein Bündel aus bis zu fünf Referenzseiten, Farbpaletten und Screenshots zusammen. Der Agent wertet diese Daten gebündelt aus, um gemeinsame Muster zu erkennen. Um Verwirrung durch eine zu große Menge unterschiedlicher Stilrichtungen zu vermeiden, ist der Agent angewiesen, nur wenige Ergebnisse detailliert zu analysieren.

Installation und MCP-Einrichtung im Terminal

  • Die Installation erfolgt über das Ausführen eines einzigen Terminal-Befehls von der offiziellen Website.
  • Das Installationsskript erkennt vorhandene Coding-Agenten automatisch und bindet Inspo im globalen User-Scope ein.
  • Mit einem spezifischen Client-Flag lässt sich die Installation gezielt auf einen einzelnen Agenten einschränken.

Das Ausführen des Bereitstellungsskripts im Terminal startet eine automatische Erkennung aller installierten Coding-Agenten. Standardmäßig richtet sich Inspo im User-Scope ein, wodurch das Tool in jedem beliebigen Projektordner sofort einsatzbereit ist. Wer die Einbindung auf ein bestimmtes Programm beschränken möchte, nutzt dafür ein Client-Flag während des Aufrufs. Nach einem Neustart des jeweiligen Agenten stehen sämtliche 15 enthaltenen MCP-Werkzeuge direkt zur Verfügung.

Praxistest: Erstellung einer Landingpage mit Kombinations-Referenzen

  • Der Agent ergänzt eigenständig passende Stil-Schlüsselwörter, um die Suche über Inspo präziser einzugrenzen.
  • Anstatt eine einzelne Seite eins zu eins zu kopieren, kombiniert der Agent Elemente aus rund 24 analysierten Referenzseiten.
  • Die Vorab-Abfrage von mehreren Designrichtungen schützt vor unerwünschten Gestaltungsentscheidungen.

In einem praktischen Test für eine Mode-Landingpage erweiterte der Agent die ursprüngliche Prompt-Eingabe selbstständig um relevante Stil-Begriffe. Nach der Anforderung von drei verschiedenen Designvorschlägen analysierte der Agent 24 Referenzseiten von Inspo. Das Endergebnis bildete keine direkte Kopie einer Vorlage ab: Der Hero-Bereich stammte von einer ersten Seite, die Button-Gestaltung von einer zweiten und das Produkt-Grid von einer dritten. Durch den Rückgriff auf mobile Screenshots funktionierte das erzeugte Layout auch auf Smartphones einwandfrei.

Ergänzung von Interaktionen und typische Anwendungsfehler

  • Da Inspo keine Animationen abdeckt, ergänzt der UISkills-MCP-Server vorgefertigte Animations-Skills für flüssige Übergänge.
  • Falsche Brancheneinstufungen bei der automatischen Suche erfordern eine manuelle Filterung über Parameter wie Branche oder Theme.
  • Datenschutz-Popups auf den Screenshots können die Inhaltserkennung der KI verdeckend stören.

Da Inspo rein statische Layouts liefert, erfordert das Hinzufügen von Bewegungsabläufen zusätzliche Hilfsmittel wie den UISkills-MCP-Server. Dieser lädt spezifische Animations-Skripte nach, um Elemente zeitlich abgestimmt einzublenden. In der Praxis traten zudem gelegentlich Fehler bei der automatischen Referenzsuche auf, etwa als eine Kaffee-Abo-Seite Referenzen aus dem Gesundheitsbereich erhielt. Zudem verdeckten Cookie-Banner auf einigen Screenshots das dahinterliegende Design, weshalb die manuelle Kontrolle der Vorgeschlagenen Stile vor der Generierung essenziell bleibt.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video