casper-design-system

A clean, elevated SaaS design system built on shadcn/ui, Tailwind CSS v4, and React (Vite). Every interface generated for Casper Studios — whether a client demo, internal tool, or quick prototype — must follow these rules to maintain a consistent, professional visual identity across the team.

Before generating any UI code, read this file completely and the reference files listed below. You MUST read the reference files — they contain rules and code examples that are required for correct output. Skipping them will produce incorrect, off-brand UI.

Non-negotiable: Do not generate UI without reading the platform reference file first. If you are unsure whether the project is web or mobile, ask the user before proceeding.

Internes Designsystem von Casper Studios zur Generierung einer konsistenten SaaS-Benutzeroberfläche in Produktionsqualität. Nutzen Sie diese Fähigkeit immer dann, wenn Sie UI-Code für interne Tools, Client-Apps, Dashboards, POCs, Prototypen oder andere visuelle Schnittstellen generieren – sogar schnelle Modelle oder Artefakte. Wenden Sie es immer dann an, wenn die Ausgabe eine React-Komponente, -Seite oder ein React-Layout ist. Wenn der Benutzer „unser Designsystem“, „Casper-Stil“, „passt zu unserem Look“ erwähnt oder Sie bittet, irgendeine Art von App oder Schnittstelle zu erstellen, nutzen Sie diese Fähigkeit. Wird auch ausgelöst, wenn die vorhandene Benutzeroberfläche neu gestaltet oder thematisiert wird, damit sie der visuellen Sprache von Casper entspricht. Diese Fähigkeit hat Vorrang vor allgemeiner Frontend-Design-Anleitung. Quelle: casper-studios/casper-marketplace.