GitHub ist deine neue Designbibliothek.
Designer*innen sammeln Referenzen. Screenshots, Videos, Links und ziemlich volle Figma-Seiten mit Dingen, die irgendwann einmal nützlich werden könnten.
Das Problem beginnt meistens einen Schritt später.
Man findet einen großartigen Shader, eine ungewöhnliche Interaktion oder einen 3D-Effekt und weiß ziemlich genau, wie er im eigenen Projekt funktionieren könnte. Bauen kann man ihn trotzdem nicht. Also landet die Referenz im Moodboard und das Produkt bekommt am Ende eine etwas ambitioniertere CSS-Animation.
Diese Grenze verschiebt sich gerade.
Mit Coding Agents wird GitHub auch für Designer*innen zugänglich. Nicht als Ort, an dem man plötzlich Softwareentwicklung studieren muss. Sondern als Bibliothek für Gestaltung, die bereits funktioniert.
Keine statischen Assets. Ausführbare Ideen.
Mehr Werkstatt als Bibliothek
GitHub ist natürlich keine Asset Library im klassischen Sinn. Es gibt keine sauber kuratierte Auswahl und keinen Download-Button für „Chrome Effect, final, wirklich final".
Stattdessen findet man dort Experimente, Libraries und Werkzeuge, die andere Menschen gebaut und öffentlich zugänglich gemacht haben. Manche sind produktionsreif. Andere bestehen aus einem einzigen guten Gedanken und überraschend viel Mathematik.
Früher musste man den Code verstehen, bevor man damit arbeiten konnte. Heute kann ein Coding Agent das Repository lesen, die Struktur erklären, Abhängigkeiten installieren und einen ersten Prototyp in das eigene Projekt übertragen.
Das verändert vor allem den Anfang.
Statt eine komplexe Idee aus Angst vor der Umsetzung früh zu vereinfachen, kann man sie zunächst ausprobieren. Im Browser, mit echtem Verhalten und innerhalb des tatsächlichen Designs.
Vier Beispiele.
01 — ShaderGradient
ShaderGradient erzeugt animierte 3D-Verläufe für React. Form, Farben, Licht, Bewegung und Perspektive lassen sich über Parameter steuern. Für Figma und Framer gibt es ebenfalls Integrationen.
Das klingt zunächst nach einem besseren Gradient Tool. Tatsächlich ist es ein guter Einstieg in eine Welt, die vielen Designer*innen bisher verschlossen blieb: Shader.
Man muss nicht bei null anfangen und auch nicht verstehen, wie jede Berechnung im Hintergrund funktioniert. Man kann mit einer funktionierenden Grundlage beginnen, Werte verändern und beobachten, wie sich das visuelle System verhält.
Der Unterschied zum klassischen Asset: Man übernimmt kein fertiges Bild. Man übernimmt eine Logik.
02 — Liquid Logo
Liquid Logo von Paper Design verwandelt eine Wortmarke oder ein Zeichen in flüssiges Metall.
Das Repository ist weniger universelle Library als ein sehr gutes visuelles Experiment. Und genau deshalb gehört es in diese Liste.
Man kann den Effekt als Referenz speichern. Oder man nimmt ihn auseinander, ersetzt das Logo, verändert Material und Bewegung und prüft, ob daraus etwas Eigenes entsteht.
Nicht jede Idee muss zur Produktfunktion werden. Manchmal reicht ein funktionierender Prototyp, um eine Marke für einen Moment anders zu sehen.
03 — Liquid Glass JS
Liquid Glass JS bringt Apple-inspirierte Glaseffekte in den Browser. Die Library arbeitet mit WebGL und erzeugt Refraction, Blur und Masking in Echtzeit. Form, Radius und Tönung lassen sich verändern.
Das Beispiel zeigt aber auch, warum GitHub kein kostenloser Süßwarenladen ist.
Das Repository ist jung und besteht derzeit aus einem einzigen Commit. Accessibility, Performance-Optimierung und bessere Unterstützung für mobile Interaktion stehen noch auf der Roadmap. Das macht es interessant für Experimente, aber nicht automatisch bereit für den nächsten großen Produktlaunch.
Ein laufender Effekt ist noch kein belastbares Interface.
04 — React Three Fiber
React Three Fiber ist eine andere Größenordnung. Es handelt sich nicht um einen einzelnen Effekt, sondern um einen React Renderer für Three.js.
Damit lassen sich dreidimensionale Szenen, Materialien, Animationen und Interaktionen als React-Komponenten entwickeln. Das Projekt öffnet praktisch das gesamte Three.js-Ökosystem für React und bringt zusätzlich eine große Auswahl an Hilfswerkzeugen mit.
Das kann ein schwebendes Produktmodell sein. Eine räumliche Navigation. Eine Datenvisualisierung. Oder eine Website, die sich nicht mehr wie eine Abfolge flacher Rechtecke anfühlt.
Ein Coding Agent senkt die Einstiegshürde erheblich. Er ersetzt aber nicht das Verständnis für Szene, Kamera, Licht, Material und Performance. Selbst die offizielle Dokumentation empfiehlt, sich mit React und Three.js vertraut zu machen.
Die Werkzeuge werden zugänglicher. Die gestalterischen Entscheidungen werden dadurch nicht automatisch besser.
Finden ist die neue Grundfähigkeit
Der interessante Teil beginnt deshalb nicht mit dem Prompt. Er beginnt mit der Suche.
Welchen Effekt brauche ich eigentlich? Gibt es dafür eine Library, einen Shader oder ein gut dokumentiertes Experiment? Wann wurde das Projekt zuletzt aktualisiert? Gibt es offene Probleme? Funktioniert es mit meinem technischen Setup? Und darf ich es überhaupt verwenden?
Ein öffentliches Repository ist nicht automatisch frei verwendbar. Ohne Lizenz gelten grundsätzlich die üblichen Urheberrechte. Andere dürfen den Code dann zwar auf GitHub ansehen und forken, aber nicht automatisch übernehmen, verändern oder weiterverbreiten. GitHub erklärt diesen Unterschied in seiner Dokumentation zu Repository-Lizenzen.
Auch eine MIT-Lizenz beantwortet nicht jede Frage. Dependencies, Browser-Support, Accessibility und Performance bleiben Teil der Arbeit. GitHubs Dependency Graph kann beispielsweise Lizenzinformationen und bekannte Sicherheitslücken in eingebundenen Paketen sichtbar machen.
Die fünf Minuten vor dem Kopieren sind meistens wichtiger als der Prompt danach.
Das ist nicht Copy and Paste
Die schlechteste Anwendung wäre, jede gefundene Library unverändert auf eine Website zu werfen. Dann sehen bald alle Produkte aus wie dieselbe Sammlung beliebter GitHub-Repositories.
Der Wert liegt nicht im Effekt selbst. Er liegt in der Möglichkeit, ihn früh zu testen und gestalterisch weiterzuentwickeln.
Passt die Bewegung zur Marke? Funktioniert sie auch auf einem kleineren Gerät? Bleibt der Inhalt zugänglich? Ist der Effekt noch überzeugend, wenn man ihn zum zehnten Mal sieht? Und trägt er etwas zum Produkt bei – oder beweist er nur, dass jemand WebGL installieren konnte?
Coding Agents übernehmen einen größeren Teil der technischen Übersetzung. Designer*innen gewinnen dadurch keinen Freifahrtschein, sondern einen größeren Entscheidungsraum.
Das ist für mich eine der sinnvollsten Formen von Vibe Coding: Eine visuelle Idee muss nicht mehr als Screenshot enden. Sie kann innerhalb weniger Stunden zu einem funktionierenden Prototyp werden.
Danach beginnt die eigentliche Arbeit.
Auswählen. Verändern. Weglassen. Und aus dem gefundenen Material etwas machen, das nicht mehr nach Fundstück aussieht.
GitHub ist die neue Design Asset Library.
Die Assets sind nur nicht fertig.
