Design-Inspirations-Index
Eine Abruf-Karte: „Ich brauche Inspiration für X, also gehe zu Quelle Y.“ Es handelt sich um einen Index öffentlicher Galerien und Verzeichnisse, nicht um eine Design-Autorität; sobald Sie Referenzen haben, bauen Sie mit dem ui-Skill und überprüfen Sie das Ergebnis mit anti-slop. Details pro Website (Zugriff, Format, Filter, Abruf-Tipps) finden Sie in references/galleries.md.
Nichts hiervon ist erforderlich. Jede Quelle ist eine öffentliche Website; die beiden, die MCP-Server haben (Mobbin, Refero), sind optional und lohnen sich nur, wenn Sie sie häufig nutzen.
Wenn Sie X brauchen, gehen Sie zu Y
| Sie brauchen | Gehen Sie zu | Notizen |
|---|---|---|
| Eine komplette Website zum Bewundern (breiter Geschmackseingabe) | collected.li (Shuffle), siteofsites.co (filterbar), unmatchedstyle.com (redaktionell), recent.design (täglich) | collected zeigt 8 zufällige Seiten; siteofsites filtert nach Plattform; unmatchedstyle hat Trendartikel |
| Ein Hero oder ein ganzseitiges Layout | landing.love (Bewegung), craftwork.design/inspiration/websites (breit) | landing.love zeichnet Vollseiten-Video auf |
| Eine Landing Page in Bewegung | landing.love | filtern Sie nach den GSAP-, WebGL- oder ThreeJS-Kollektionen |
| Eine SaaS-Marketing-Seite oder einen SaaS-Seitentyp | saaspo.com | filtern nach Seitentyp (Preise, Funktionen) und Branche |
| Eine Preisseite | saaspo.com (Seitentyp) und cta.gallery (der CTA-Block) | |
| Eine Navbar, einen Header oder ein Mega-Menü | navbar.gallery | filtern nach sticky, Mega-Menü, Sidebar, Vollbild |
| Einen Call-to-Action, einen Anmelde- oder Newsletter-Block | cta.gallery | filtern nach Branche und nach Button, Formular, Newsletter, Modal |
| Eine Bewegungs- oder Mikro-Interaktionsidee | 60fps.design (die Bewegung), designspells.com (die Idee und das Warum) | designspells erklärt ein entzückendes Detail, mobil und Desktop |
| Ein entzückendes Detail, Easter Egg oder „magischen“ Touch | designspells.com | Tags: Easter Egg, Konfetti, Übergang, 404 |
| Echtes Produkt-UI: Seitentypen, Abläufe, UX-Muster (Web) | refero.design | filtern nach Seitentyp, Ablauf, Muster, Element oder Schriftart; hat einen optionalen MCP-Server |
| OG-Bilder, App-Store-Screenshots, App-Icons | recent.design | spezielle Tabs, die nur wenige andere haben |
| Ein Logo, Markenidentität oder Rebrand | rebrand.gallery | die einzige Branding-Quelle hier |
| Wie man eine UI-Komponente erstellt oder benennt | component.gallery | systemübergreifende Referenz mit Namens-Aliasen (Accordion = Collapse = Disclosure) |
| Komponenten-Code zum Einfügen (React) | shadcn/ui, mapcn (Karten) | beginnen Sie mit dem, was das Projekt bereits verwendet |
| Vorgefertigte App-Blöcke (Formulare, Authentifizierung, Sidebars, Tabellen) | blocks.so | kostenlos, kopieren und einfügen |
| Vorgefertigte Marketing- und Landing-Blöcke | tailark.com (kuratiert), shadcnblocks.com (groß, Freemium), shadcnspace.com | Freemium |
| Ein komplexes zusammengesetztes Widget (Gantt, Kanban, Editor, Tabelle) | kibo-ui.com | kostenlos, shadcn CLI Registry |
| Animierter Komponenten- oder Mikro-Interaktionscode | smoothui.dev, ui-layouts.com | Motion- oder GSAP-basiert |
| Theme-Generierung für shadcn | shadcnstudio.com | kostenlose Community-Stufe |
| Einen Retro- oder Pixel-Art-Look | 8bitcn.com | shadcn-Neugestaltung, nischenhaft vom Design her |
| Barrierefreie Komponenten auf React Aria (nicht Radix) | intentui.com | mischt sich nicht sauber mit Radix-basiertem shadcn |
| Ein Icon oder SVG | lucide.dev (Standard), react-icons, reicon.dev, hugeicons.com | Lucide ist der shadcn-Standard, Strichstil; react-icons bündelt viele Sets inklusive Markenlogos; Reicon hat Outline und Filled; Hugeicons ist groß und Freemium |
| Mobile App-Abläufe und -Bildschirme | Mobbin | Anmeldung erforderlich; verwenden Sie seinen MCP-Server, falls vorhanden, ansonsten die Website |
| Das Design-System einer berühmten Marke ausgeschrieben | das awesome-design-md Repo (github.com/VoltAgent/awesome-design-md) | lesen Sie zwei oder drei, bevor Sie eine Designsprache definieren |
| Ein benanntes UX-Prinzip für einen Überprüfungsfund | lawsofux.com | zitieren Sie das Gesetz beim Namen: Fitts, Hick, Jakob, Peak-End |
| Komponentensuche oder generierte UI-Varianten | 21st.dev | suchen Sie, bevor Sie neuartige UI von Hand schreiben |
Kostenlose Komponentenbibliotheken, die ihre eigene Registry ausliefern, sind es wert, überprüft zu werden, bevor Sie einen Block von Hand schreiben. Passen Sie alles, was Sie importieren, an die Tokens und Barrierefreiheitsregeln des Projekts an.
Design-Ingenieure zum Studieren
Personen mit hoher Signalstärke, deren Websites und Open-Source-Arbeit es wert sind, studiert und verfolgt zu werden.
| Person | Website | Bekannt für |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner, Vaul; Web-Animation-Handwerk |
| shadcn | shadcn.com | shadcn/ui; Copy-in-Komponenten und Registries |
| Paco Coursey | paco.me | cmdk, next-themes; tastaturorientiertes minimales UI |
| Rauno Freiberg | rauno.me | Interface-Invarianten und das Warum hinter der Politur |
| Raphael Salaja | raphaelsalaja.com | bewegungsreiches Portfolio, verspieltes Interaktionshandwerk |
| Gavin Nelson | nelson.co | Produkt- und Icon-Design |
| floguo | floguo.com | ausdrucksstarke Mikro-Interaktionen, Persönlichkeit |
| Syed Subhan | syedsubhan.in | Mikro-Übergänge; baute Amicro (amicro.vercel.app), eine Sammlung wiederverwendbarer Mikro-Übergangsmuster |
Mobbin und Refero: optionale MCP-Server
Beide erfordern eine Anmeldung und werden am besten über einen MCP-Server abgefragt, falls einer angeschlossen ist. Mobbin ermöglicht die Suche nach Bildschirmen, Abläufen und Sektionen; der Server von Refero ist unter https://api.refero.design/mcp (Dokumentation: https://doc.refero.design/mcp/getting-started) und gibt echte Produktbildschirme zurück. Wenn Sie keinen von beiden haben, durchsuchen Sie die Websites von Hand. Scrapen Sie nicht.
Zugriffs-Spickzettel
Überprüfen Sie vor der Nutzung; Websites ändern sich.
- Offen und kostenlos, keine Anmeldung: landing.love, navbar.gallery, cta.gallery, 60fps.design, collected.li, siteofsites.co, unmatchedstyle.com, recent.design, designspells.com, lucide.dev, reicon.dev, component.gallery, saaspo.com.
- Freemium (kostenlos durchsuchen, für Assets oder die vollständige Bibliothek bezahlen): craftwork.design, rebrand.gallery, hugeicons.com, refero.design.
- Anmeldung oder MCP: Mobbin, refero.design.
Einige davon (saaspo.com, component.gallery, landing.love, designspells.com) blockieren automatisierte Abrufe mit einem 403 oder 429, öffnen aber in einem normalen Browser problemlos. godly.website leitet jetzt auf recent.design weiter. Um programmatisch von einer blockierten Website zu ziehen, verwenden Sie einen echten Browser (z. B. mit einem Playwright MCP, falls installiert) anstelle eines einfachen HTTP-Abrufs.
So erweitern Sie diesen Index
Fügen Sie eine neue Galerie zu references/galleries.md mit denselben Feldern hinzu (Name, URL, Kategorie, am besten geeignet für, Zugriff, Format, Abruftipp), und fügen Sie dann eine Routing-Zeile zur obigen Tabelle hinzu.