Der Produktdesigner Florian Boelter sammelt auf fglibs.com 72 Bibliotheken und Komponenten für Animationen und Interface-Effekte. Ein MCP-Server macht den Katalog für KI-Assistenten wie Claude abfragbar. Lizenzangaben fehlen allerdings, auch beim Webflow-eigenen GSAP.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Stellen Sie sich vor, Ihr KI-Assistent schlägt auf fglibs.com nach, statt einen Seitenübergang zum dritten Mal von Grund auf zu bauen. Genau dafür hat Florian Boelter den Katalog angelegt. Boelter verantwortet beim Vertragssoftware-Anbieter Juro das Design der Vertragsabläufe[1] und nennt sein Projekt „F*cking Good Libraries“.

Das Wichtigste in Kürze

  • fglibs.com listet 72 Bibliotheken, Komponenten und Repositorys für Animationen, Shader und UI-Effekte.
  • Gesucht wird nach dem gewünschten Effekt, nicht nach dem Paketnamen.
  • Ein kostenloser MCP-Server macht den Katalog für KI-Assistenten abfragbar, nur lesend.
  • Lizenzangaben fehlen im Katalog, die Prüfung bleibt bei Ihnen.

Was steckt in fglibs.com?

Fahrradrad mit hellblauem Reifen und Schild „SCHON ERFUNDEN“ steht mittig auf einem weißen Regal vor weißem Hintergrund
fglibs.com ist ein frei zugänglicher Katalog mit 72 Einträgen, darunter 44 Bibliotheken und 20 Komponenten. Nutzer beschreiben gewünschte Effekte im Suchfeld

fglibs.com ist ein frei zugänglicher Katalog mit 72 Einträgen, darunter 44 Bibliotheken und 20 Komponenten. Nutzer beschreiben im Suchfeld den Effekt, den sie bauen wollen, etwa einen weichen Seitenwechsel.[2] Die ersten Einträge stammen vom 24. September.

Boelter begründet das Projekt mit einem Namensproblem: „Designer haben jetzt Zugang zu Code. Wir wissen immer noch nicht, wie die Hälfte dieses Zeugs heißt.“ Den schwierigsten Teil eines Effekts habe meist schon jemand gelöst und veröffentlicht. Für die Suche nutzt Boelter nach eigenen Angaben das Modell Jev des Start-ups TypeSafe AI.[2]

Neben Klassikern wie GSAP und Three.js stehen junge Projekte im Katalog. Dazu zählen die Effektsammlung Libraries.dev und die Glaskomponenten von amazing-glass. Auch die WebGPU-Bibliothek vgpu ist verzeichnet.

Wie fragen KI-Assistenten den Katalog ab?

Über den MCP-Server unter fglibs.com/mcp binden Nutzer den Katalog in Claude und andere MCP-fähige Programme ein. Der Zugang erlaubt nur Lesezugriffe, Einträge ändern oder löschen lässt sich darüber nicht.[2]

Drei Werkzeuge stellt der Server bereit: eine Suche mit bis zu acht Treffern, eine Detailabfrage und ein Einbau-Briefing.[3] Im Test von Dr. Web am 7. Oktober lieferte das Briefing für Lenis keinen Code, sondern eine allgemeine Arbeitsanweisung samt Link. Der Assistent soll zuerst das Projekt und die aktuelle Dokumentation prüfen. Die Felder für Voraussetzungen blieben bei GSAP und Lenis leer.

Andere Dienste gehen einen Schritt weiter. Mit dem MCP-Server von shadcn/ui landen Komponenten aus Registries direkt im Projekt.[4] 21st.dev liefert Komponentencode per MCP im Builder-Tarif für 6 Dollar im Monat bei jährlicher Zahlung, rund 5 €.[5] Microsoft gibt Agenten auf demselben Weg sein Design-System als MCP-Server an die Hand.

fglibs.com und zwei Alternativen
Wie KI-Assistenten per MCP an fertige Effekte und Komponenten kommen

Der Katalog in Zahlen

72
Einträge, davon 44 Bibliotheken, 20 Komponenten und 8 sonstige
3
MCP-Werkzeuge: Suche, Detailabfrage, Einbau-Briefing
0 €
Nutzung von Website und MCP-Server, ohne Konto
keine
Lizenzangabe pro Eintrag, weder auf der Website noch im MCP-Server

Was die Dienste per MCP liefern

fglibs.com
Findet passende Bibliotheken und verweist auf deren Quelle
kostenlos, nur lesend
shadcn/ui
Installiert Komponenten aus Registries direkt ins Projekt
kostenlos, MIT-Lizenz
21st.dev
Liefert Komponentencode aus dem eigenen Marktplatz
Builder: 6 Dollar im Monat bei jährlicher Zahlung, rund 5 €

Ein Katalog erspart Ihnen den Nachbau, die Lizenzprüfung nimmt er Ihnen nicht ab.

Markus Seyfferth, Chefredakteur Dr. Web
Zitat teilen

Worauf sollten Agenturen achten?

Zu keinem Eintrag auf fglibs.com steht eine Lizenz. Prüfen Sie deshalb jede Bibliothek an der Quelle, bevor ein Agent sie in ein Kundenprojekt einbaut.[3]

Am Beispiel GSAP wird deutlich, warum sich der Blick lohnt. Die Bibliothek ist kostenlos, gehört aber Webflow und steht unter einer eigenen Lizenz. Verboten ist der Einsatz in No-Code-Werkzeugen für visuelle Animationen, die mit Webflow konkurrieren.[6] Agenturen mit eigenen Baukästen oder Plugins betrifft das direkt.

Achten Sie bei Bewegungseffekten außerdem auf die Systemeinstellung „Bewegung reduzieren“, die Browser als prefers-reduced-motion melden. Viele Aufgaben, für die früher eine Scroll-Bibliothek nötig war, lassen sich heute mit CSS lösen. Für Freelancer und Inhouse-Teams, die mit KI-Assistenten Prototypen bauen, taugt fglibs.com als kostenloses Nachschlagewerk. Einen Überblick über weitere KI-Webdesign-Tools finden Sie auf Dr. Web.

Quellen

[1] Florian Boelter: „Florian Boelter, Staff Product Designer“

[2] Florian Boelter: „F*cking Good Libraries“

[3] fglibs.com: „MCP-Server Fcking Good Libraries“

[4] shadcn/ui: „MCP Server“

[5] 21st.dev: „Plans & Pricing“

[6] GSAP: „Standard ‚No Charge‘ GSAP License“

Mehr Newshunger?

4,2 22 Bewertungen

Wie hat Ihnen dieser Artikel gefallen?