UI mit Claude bauen: 26 Design-Ressourcen, mit denen eure KI-Oberflächen eigenständig aussehen

Ein lila Farbverlauf, eine zentrierte Überschrift und darunter drei Karten mit Icons. Wer in den letzten Monaten Landingpages gesehen hat, die mit KI gebaut wurden, kennt dieses Bild. Claude, ChatGPT und Co. schreiben inzwischen sehr guten Code. Ohne Vorgaben landen sie beim Design aber immer wieder bei denselben sicheren Standardlösungen.

‍

Die gute Nachricht: Das lässt sich ändern. Gebt der KI echte Vorlagen und Bausteine, die Designer bereits gebaut haben. Wir stellen euch 26 Ressourcen vor, sortiert nach Einsatzzweck, und zeigen, wie ihr sie in drei Schritten an Claude übergebt. Die Auswahl basiert auf einer Liste, die der Entwickler Prajwal Tomar auf X geteilt hat. Wir haben sie für deutsche Teams eingeordnet und um rechtliche Hinweise ergänzt.

‍

Warum sehen KI-Oberflächen so oft gleich aus?

KI-Modelle greifen ohne Vorgaben auf die häufigsten Muster aus ihren Trainingsdaten zurück. Deshalb ähneln sich viele KI-generierte Oberflächen so stark. Die Lösung sind konkrete Referenzen: Screenshots von Designs, die euch gefallen, fertige Komponenten-Bibliotheken und eine Datei mit euren Farben, Schriften und Abständen.

‍

Für Marketing-Teams ist das relevant, weil Claude längst nicht mehr nur Texte schreibt. Mit Claude Code oder den Artifacts entstehen Landingpages, interne Tools und Prototypen in wenigen Stunden. Ob das Ergebnis nach eurer Marke aussieht oder nach jeder zweiten KI-Seite, entscheidet sich an den Vorgaben, die ihr mitgebt.

‍

Lese-Tipp

Du nutzt Claude kostenlos und möchtest dir einen ersten Überblick verschaffen? In unserem Artikel erfährst du alles über Funktionen, Limits und Alternativen beim kostenlosen Einsatz von Claude.

‍

Komponenten-Bibliotheken und Inspirationsquellen: zwei verschiedene Dinge

Die Ressourcen in dieser Liste fallen in zwei Gruppen, und für beide gelten andere Regeln.

‍

Komponenten-Bibliotheken wie shadcn/ui oder Magic UI sind dafür gebaut, dass ihr sie in eure Projekte übernehmt. Die meisten sind Open Source und stehen unter der MIT-Lizenz, die auch kommerzielle Nutzung erlaubt. Ihr kopiert den Code, passt ihn an und veröffentlicht ihn.

‍

Inspirationsgalerien wie Mobbin oder Godly zeigen Designs echter Unternehmen. Diese Designs gehören den jeweiligen Firmen und Designern und sind in der Regel urheberrechtlich geschützt. Nutzt sie, um Ideen für Aufbau, Farbwelt oder Animationen zu sammeln. Eine komplette Seite eins zu eins nachzubauen, ist dagegen rechtlich riskant und hilft eurer Marke auch nicht.

‍

So gebt ihr Claude Design-Vorgaben in drei Schritten

1. Richtung festlegen: Sucht zwei oder drei Designs aus den Galerien weiter unten, die euch gefallen. Gebt Claude die Screenshots und beschreibt, was euch an jedem gefällt, etwa die Typografie der einen Seite und den Aufbau der Preistabelle einer anderen.
2. Echte Komponenten vorgeben: Sagt Claude, welche Bibliothek es verwenden soll, zum Beispiel shadcn/ui für alle Bedienelemente. Dann greift es auf erprobte Bausteine zurück und baut nicht jedes Mal eigene.
3. Eigene Handschrift ergänzen: Passt Farben, Texte und Abstände an, bis die Oberfläche nach euch aussieht. Behaltet, was funktioniert, und streicht den Rest.

‍

Ein Prompt für Schritt 1 und 2 kann so aussehen: „Baue eine Landingpage für unser Produkt. Orientiere dich beim Aufbau am ersten Screenshot und bei der Typografie am zweiten. Verwende für alle Komponenten shadcn/ui und für Farben, Schriften und Abstände die Datei DESIGN.md im Projektordner.“

‍

Wir arbeiten bei bakedwith selbst mit einer solchen Design-System-Datei für unsere Marke. Daraus übernimmt Claude Farben, Schriften und Abstände, zum Beispiel für die Grafiken in unseren Artikeln.

‍

Ready to scale with AI?

Get a free strategy call and discover how AI can help you automate workflows, create better content, and scale your marketing.

Book a call

‍

Die fünf Ressourcen für den Einstieg

Wer nur wenig Zeit hat, fängt mit diesen fünf an:

‍

‍

shadcn/ui ist die Basis, auf der viele andere Bibliotheken aufbauen. Das Projekt hat auf GitHub über 125.000 Sterne (Stand Oktober 2026). Weil es so verbreitet ist, kennt Claude die Komponenten gut und setzt sie meist auf Anhieb richtig ein.

‍

21st.dev bietet zu jeder Komponente einen fertigen Prompt zum Kopieren. Ihr fügt ihn in Claude Code ein, und die Komponente entsteht direkt in eurem Projekt. Laut Anbieter gibt es ein kostenloses Tageskontingent, mehr Kopien sind mit einer Mitgliedschaft möglich.

‍

Magic UI liefert die kleinen Bewegungen, etwa Zahlen, die hochzählen, Laufbänder mit Kundenlogos oder animierte Rahmen. Die Bibliothek ist auf shadcn/ui abgestimmt und hat über 22.000 GitHub-Sterne.

‍

Mobbin lohnt sich vor allem für App-Projekte. Ihr seht, wie bekannte Apps ein Onboarding oder eine Bezahlschranke gestalten. Laut Anbieter lässt sich der Pro-Plan per MCP an KI-Agenten anbinden, sodass Claude die Bibliothek selbst durchsuchen kann.

‍

DESIGN.md ist am wenigsten bekannt und für Claude besonders praktisch. Ihr ladet ein Design-System als einzelne Datei herunter, legt sie neben die README in euren Projektordner und weist Claude an, sich daran zu halten.

‍

Alle 26 Ressourcen nach Einsatzzweck

Komponenten-Bibliotheken für eure Projekte

• shadcn/ui: Bedienelemente wie Buttons, Formulare, Dialoge und Tabellen, die ihr in euer Projekt kopiert. MIT-Lizenz.
• 21st.dev: Komponenten, Vorlagen und Themes mit Prompt zum Kopieren für Claude Code.
• Magic UI: Animierte Komponenten passend zu shadcn/ui. MIT-Lizenz.
• Aceternity UI: Auffällige Heldenbereiche und Effekte zum Kopieren, kostenlose Komponenten plus Pro-Version.
• Motion Primitives: Animierte Open-Source-Komponenten für React und Tailwind. MIT-Lizenz.
• Uiverse: Große Community-Sammlung von UI-Elementen als HTML und CSS, Tailwind oder React, auch für kommerzielle Projekte nutzbar.
• SmoothUI: Animierte Komponenten, die sich direkt in shadcn/ui einfügen.
• Shadcnblocks: Hunderte fertige Seitenabschnitte auf Basis von shadcn/ui, überwiegend kostenpflichtig.
• MicroKit: Kleine Mikrointeraktionen wie animierte Buttons, Hover-Effekte und Tabs. MIT-Lizenz.

‍

Design-Systeme, die Claude lesen kann

• DESIGN.md: Hunderte Design-Systeme, jedes als einzelne Datei.
• Refero Styles: Stile echter Websites mit passender DESIGN.md-Datei, gut zum Vergleichen von Farben, Schriften und Abständen.

‍

Inspiration für ganze Websites

• Mobbin: Screens aus echten Apps und Websites, wöchentlich ergänzt.
• Godly: Kuratierte Sammlung besonders gut gestalteter Websites.
• Minimal Gallery: Ausgewählte, reduzierte Websites, täglich neue Einträge.
• Awwwards: Die bekannte Auszeichnung für Webdesign, gut für einen Blick auf aktuelle Agenturarbeiten.
• Landing.love: Landingpages als Videoaufnahme, damit ihr seht, wie Animationen tatsächlich ablaufen.

‍

Inspiration für einzelne Seitenbereiche

• Supahero: Nur Heldenbereiche, also der obere Teil einer Seite.
• Navbar Gallery: Navigationsleisten.
• Footer Design: Footer, sortierbar nach Art und Stil.
• CTA Gallery: Call-to-Action-Bereiche.
• Pricing Pages: Preisseiten von SaaS-Firmen, Onlineshops und Agenturen.

‍

Animation

• Motion In: Interaktive Abschnitte mit Physik- und Cursor-Effekten, jeweils mit Prompt für eure KI.
• Anime.js: Schlanke JavaScript-Bibliothek für eigene Animationen, über 73.000 GitHub-Sterne, MIT-Lizenz.

‍

Icons, Illustrationen und Schriften

• 3dicons: Kostenlose 3D-Icons, auch für kommerzielle Projekte ohne Namensnennung nutzbar.
• Kitbitz: Handgezeichnete Illustrationen, kostenlos für kommerzielle Nutzung und laut Anbieter per MCP anbindbar.
• Font In Logo: Zeigt, welche Schrift bekannte Marken in ihrem Logo verwenden.

‍

Worauf ihr achten solltet

• Der nächste Einheitslook: Wenn alle dieselben Bibliotheken nutzen, sehen Seiten wieder ähnlich aus. Eure Farben, Schriften und Texte machen den Unterschied.
• Weniger Animation: Ein oder zwei gut gesetzte Bewegungen wirken hochwertig. Wer jede Animation einbaut, die er findet, lässt die Seite unruhig wirken und verlangsamt sie.
• Lizenzen und Kosten: Die meisten Bibliotheken hier sind kostenlos und stehen unter MIT-Lizenz. Aceternity UI, Magic UI, Shadcnblocks, 21st.dev und Motion In haben aber kostenpflichtige Stufen. Prüft vor dem Livegang, was ihr nutzen dürft.
• Schriften datenschutzkonform einbinden: Seit einem Urteil des Landgerichts München I vom Januar 2022 gilt das dynamische Einbinden von Google Fonts ohne Einwilligung als Datenschutzverstoß. Lasst Claude Schriften deshalb lokal einbinden und prüft das im fertigen Code.
• Kontrast und Barrierefreiheit: Schicke Farbverläufe und hellgraue Texte sehen gut aus, sind aber oft schlecht lesbar. Für viele digitale Angebote an Verbraucher gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz.
• Galerien nur als Ideengeber: Übernehmt Ideen für Aufbau und Stil, aber keine kompletten Seiten.

‍

Und wenn euch eine dieser Bibliotheken viel Arbeit spart: Die meisten werden von kleinen Teams oder Einzelpersonen gepflegt. Ein Stern auf GitHub oder ein gekaufter Pro-Plan hilft ihnen weiter.

‍

Expert Comment

Design-Bibliotheken sind Abkürzungen, kein Ersatz für Haltung: „Tools wie shadcn/ui sparen uns Wochen an Entwicklungszeit. Aber der Unterschied zwischen einer beliebig austauschbaren KI-Seite und einem echten Markenauftritt liegt im Fine-Tuning. Nutzt Bibliotheken für das Fundament, aber investiert die gesparte Zeit in eigene Typografie und euren Content.“ — Jens Bohse, Co-Founder

‍

Fazit: Bessere KI-Oberflächen beginnen mit besseren Vorlagen

Claude baut gute Oberflächen, sobald es die passenden Referenzen bekommt. Wer zwei, drei Vorbilder zeigt, eine Komponenten-Bibliothek vorgibt und die eigene Marke als Design-System-Datei mitliefert, bekommt Ergebnisse, die nach dem eigenen Unternehmen aussehen. Die fünf Ressourcen aus der Tabelle oben reichen für den Anfang.

‍

Der beste Einstieg: Nehmt eine bestehende Seite, die ihr verbessern wollt, sucht euch auf Godly oder Mobbin drei Vorbilder und lasst Claude die Seite mit shadcn/ui neu bauen. Legt vorher eine DESIGN.md mit euren Markenfarben und Schriften in den Projektordner.

‍

Wenn ihr Claude in euren Marketing- und Vertriebsprozessen einsetzen wollt, unterstützen wir euch gerne in unserer KI-Beratung.

‍

FAQ: Häufig gestellte Fragen zu Design mit Claude

Kann Claude Webdesign?

Ja, Claude schreibt sauberen Frontend-Code und setzt Layouts zuverlässig um. Ohne Vorgaben greift es aber auf Standardmuster zurück. Mit Screenshots, einer Komponenten-Bibliothek und einer Design-System-Datei werden die Ergebnisse deutlich eigenständiger.

‍

Was ist shadcn/ui?

shadcn/ui ist eine Open-Source-Sammlung von Bedienelementen für React, etwa Buttons, Formulare, Dialoge und Tabellen. Ihr kopiert die Komponenten direkt in euer Projekt und könnt sie frei anpassen. Das Projekt steht unter MIT-Lizenz und hat über 125.000 Sterne auf GitHub.

‍

Darf ich Designs aus Galerien wie Mobbin kopieren?

Nein, zumindest nicht eins zu eins. Die gezeigten Designs gehören den jeweiligen Unternehmen und sind in der Regel urheberrechtlich geschützt. Ideen für Aufbau, Farbwelt oder Interaktionen dürft ihr aufgreifen, eine komplette Seite nachzubauen ist riskant.

‍

Was ist eine DESIGN.md-Datei?

Eine Markdown-Datei, die das Design-System eines Projekts beschreibt: Farben, Schriften, Abstände und Regeln für Komponenten. Ihr legt sie in den Projektordner, und Claude übernimmt die Vorgaben beim Bauen der Oberfläche. Vorlagen findet ihr zum Beispiel auf designmd.ai und Refero Styles.

‍

Welche Design-Ressourcen für Claude sind kostenlos?

Die meisten. shadcn/ui, Motion Primitives, MicroKit und Anime.js sind komplett kostenlos und stehen unter MIT-Lizenz. Magic UI, Aceternity UI und 21st.dev haben kostenlose Angebote mit bezahlten Zusatzstufen, Shadcnblocks ist überwiegend kostenpflichtig.

‍