Question 1

Was ist die Systra Studios Library?

Accepted Answer

Eine kuratierte Sammlung kopierfertiger React- und Tailwind-Komponenten und Sections mit Animation. Du siehst jede Komponente live, kopierst den Quellcode und setzt ihn direkt ein, ohne Installation oder Konfiguration.

Question 2

Für wen ist die Library gedacht?

Accepted Answer

Für Designer, Entwicklerinnen, Agenturen und Teams, die schnell hochwertige Oberflächen bauen wollen. Auch Einsteiger kommen zurecht, weil jede Komponente eigenständig und ohne Setup nutzbar ist.

Question 3

Ist die Library eine Alternative zu Osmo Supply oder BYQ Supply?

Accepted Answer

Ja. Wie Osmo Supply und BYQ Supply bündeln wir sofort einsetzbare, animierte Bausteine an einem Ort. Unser Fokus liegt auf React und Tailwind mit framer-motion, kopierfertigem Code, einem Style Extractor für Design Tokens und einem MCP-Zugang, mit dem dein KI-Editor die Komponenten direkt einfügt.

Question 4

Welche Technik steckt dahinter?

Accepted Answer

React 19, Tailwind CSS v4 und framer-motion. Die Komponenten nutzen ausschließlich diese Bausteine plus lucide-react für Icons, damit du sie ohne fremde Abhängigkeiten übernehmen kannst.

Question 5

Wie übernehme ich eine Komponente?

Accepted Answer

Du öffnest die Komponente, klickst auf Kopieren und fügst den Code in dein Projekt ein. Der Code ist vollständiges TSX und braucht nur react, framer-motion und lucide-react, die in den meisten Projekten ohnehin vorhanden sind.

Question 6

Kann ich statt Code einen Prompt kopieren?

Accepted Answer

Ja. Neben dem reinen Code kannst du einen fertigen Prompt für deinen KI-Editor oder Generator kopieren, etwa für Claude Code, Cursor, Windsurf, v0, Bolt, Lovable oder Replit.

Question 7

Kann ich die Komponenten anpassen?

Accepted Answer

Vollständig. Du bearbeitest den kopierten Code frei, tauschst Texte, Farben und Abstände aus und respektierst dabei deine eigenen Design-Tokens.

Question 8

Respektieren die Animationen reduzierte Bewegung?

Accepted Answer

Ja. Die Komponenten berücksichtigen prefers-reduced-motion und stellen bei Bedarf ruhige Varianten dar.

Question 9

Was ist der Unterschied zwischen Elementen und Sections?

Accepted Answer

Elemente sind einzelne Bausteine wie Buttons, Typografie oder Scroll-Effekte. Sections sind fertige Seitenabschnitte wie Heros, Feature-Bereiche, Preistabellen oder Footer, die du direkt zu ganzen Seiten zusammensetzt.

Question 10

Welche Section-Kategorien gibt es?

Accepted Answer

Unter anderem Heros, CTAs, Features, Bento, Process, Pricing, Vergleich, Stats, Trust, Team, Karriere, Blog, Galerie, Formulare, FAQ, Fehlerseiten und Footer.

Question 11

Stehen die neuesten Sections oben?

Accepted Answer

Ja. Neue Sections und Elemente erscheinen automatisch weiter oben, damit du frische Bausteine sofort findest.

Question 12

Was ist kostenlos nutzbar?

Accepted Answer

Du kannst die Library durchstöbern, Komponenten ansehen und die kuratierten Farbpaletten frei kopieren. Ein Bild-Album ist ebenfalls frei begehbar.

Question 13

Was schaltet Premium frei?

Accepted Answer

Premium gibt dir vollen Zugriff auf alle Komponenten und Sections, alle Bild-Alben, neue Bausteine bei jeder Erweiterung und den MCP-Zugang für deinen Editor.

Question 14

Gibt es ein Tageslimit?

Accepted Answer

Kostenlose Nutzung hat sanfte Tageslimits für Downloads und Extraktionen. Mit Premium sind die Limits deutlich höher.

Question 15

Was ist der MCP-Zugang?

Accepted Answer

Über das Model Context Protocol verbindest du deinen KI-Editor direkt mit der Library. Dein Assistent durchsucht die Komponenten und fügt den Quellcode ohne manuelles Kopieren ein.

Question 16

Welche Editoren werden unterstützt?

Accepted Answer

Alle MCP-fähigen Umgebungen, darunter Claude Code, Cursor und VS Code. Du hinterlegst die Server-Adresse einmal in der Konfiguration.

Question 17

Werden meine Projektdaten übertragen?

Accepted Answer

Nein. Der Server bietet nur lesenden Zugriff auf die Komponenten. Es werden keine Inhalte aus deinem Projekt an die Library gesendet.

Question 18

Was macht der Style Extractor?

Accepted Answer

Du gibst eine URL ein und erhältst Farben, Typografie und Spacing der Seite als Design Tokens, aufbereitet als DESIGN.md oder tokens.json für dein Projekt.

Question 19

Wie viele Extraktionen sind möglich?

Accepted Answer

Kostenlos sind es einige Extraktionen pro Tag, mit Premium deutlich mehr. Wiederholte Analysen derselben URL werden kurzzeitig aus dem Cache bedient.

Question 20

Was finde ich unter Ressourcen?

Accepted Answer

Kuratierte Bilder und Videos in Alben sowie fertige Farbpaletten. Bilder siehst du in einer Lightbox an und lädst sie herunter, Paletten kopierst du mit einem Klick.

Question 21

Kann ich nach Video oder Foto filtern?

Accepted Answer

Ja. Innerhalb eines Albums filterst du nach Fotos und Videos, sobald das Album beide Medientypen enthält.

Question 22

Brauche ich ein Konto?

Accepted Answer

Zum Stöbern nicht. Für Favoriten, höhere Limits und Premium-Inhalte meldest du dich mit einem kostenlosen Konto an.

Question 23

Wie funktionieren Favoriten?

Accepted Answer

Angemeldet markierst du Komponenten als Favorit und findest sie jederzeit in deinem Konto wieder.

Häufige Fragen

Allgemein

Sections

MCP-Zugang

Konto & Favoriten

Komponenten & Code

Premium & Preise

Style Extractor

Ressourcen