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.

一貫した運用グレードの SaaS UI を生成するための Casper Studios の内部設計システム。内部ツール、クライアント アプリ、ダッシュボード、POC、プロトタイプ、またはあらゆるビジュアル インターフェイス (クイック モックアップやアーティファクトも含む) の UI コードを生成するときは常に、このスキルを使用します。出力が React コンポーネント、ページ、またはレイアウトである場合はいつでも適用します。ユーザーが「当社のデザイン システム」、「Casper スタイル」、「当社の外観に一致する」と言及した場合、または何らかの種類のアプリやインターフェイスの構築を依頼した場合は、このスキルを使用してください。 Casper の視覚言語に合わせて既存の UI を再スタイルまたはテーマ設定するときにもトリガーされます。このスキルは、一般的なフロントエンド設計ガイダンスよりも優先されます。 ソース: casper-studios/casper-marketplace。