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.

نظام التصميم الداخلي Casper Studios لإنشاء واجهة SaaS UI متسقة على مستوى الإنتاج. استخدم هذه المهارة عند إنشاء تعليمات برمجية لواجهة المستخدم للأدوات الداخلية، أو تطبيقات العميل، أو لوحات المعلومات، أو POCs، أو النماذج الأولية، أو أي واجهة مرئية - حتى النماذج بالحجم الطبيعي أو المصنوعات اليدوية السريعة. قم بتطبيقه في أي وقت يكون فيه الإخراج مكونًا أو صفحة أو تخطيطًا في React. إذا ذكر المستخدم "نظام التصميم الخاص بنا"، أو "أسلوب Casper"، أو "مطابقة مظهرنا"، أو طلب منك إنشاء أي نوع من التطبيقات أو الواجهة، فاستخدم هذه المهارة. يتم التشغيل أيضًا عند إعادة تصميم واجهة المستخدم الحالية أو تخصيصها لتتناسب مع لغة Casper المرئية. تأخذ هذه المهارة الأولوية على إرشادات تصميم الواجهة الأمامية العامة. المصدر: casper-studios/casper-marketplace.