·casper-design-system
*

casper-design-system

Système de conception interne de Casper Studios pour générer une interface utilisateur SaaS cohérente et de qualité production. Utilisez cette compétence chaque fois que vous générez du code d'interface utilisateur pour des outils internes, des applications client, des tableaux de bord, des POC, des prototypes ou toute autre interface visuelle, même des maquettes ou des artefacts rapides. Appliquez-le à chaque fois que la sortie est un composant, une page ou une mise en page React. Si l'utilisateur mentionne « notre système de conception », « le style Casper », « correspond à notre look » ou vous demande de créer tout type d'application ou d'interface, utilisez cette compétence. Déclenchez également lors du restylage ou de la création d'un thème de l'interface utilisateur existante pour correspondre au langage visuel de Casper. Cette compétence est prioritaire sur les conseils génériques en matière de conception d’interface.

93Installations·7Tendance·@casper-studios

Installation

$npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system

Comment installer casper-design-system

Installez rapidement le skill IA casper-design-system dans votre environnement de développement via la ligne de commande

  1. Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
  2. Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
  3. Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Source : casper-studios/casper-marketplace.

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.

Système de conception interne de Casper Studios pour générer une interface utilisateur SaaS cohérente et de qualité production. Utilisez cette compétence chaque fois que vous générez du code d'interface utilisateur pour des outils internes, des applications client, des tableaux de bord, des POC, des prototypes ou toute autre interface visuelle, même des maquettes ou des artefacts rapides. Appliquez-le à chaque fois que la sortie est un composant, une page ou une mise en page React. Si l'utilisateur mentionne « notre système de conception », « le style Casper », « correspond à notre look » ou vous demande de créer tout type d'application ou d'interface, utilisez cette compétence. Déclenchez également lors du restylage ou de la création d'un thème de l'interface utilisateur existante pour correspondre au langage visuel de Casper. Cette compétence est prioritaire sur les conseils génériques en matière de conception d’interface. Source : casper-studios/casper-marketplace.

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
Catégorie
*Créativité
Vérifié
Première apparition
2026-03-02
Mis à jour
2026-03-10

Browse more skills from casper-studios/casper-marketplace

Réponses rapides

Qu'est-ce que casper-design-system ?

Système de conception interne de Casper Studios pour générer une interface utilisateur SaaS cohérente et de qualité production. Utilisez cette compétence chaque fois que vous générez du code d'interface utilisateur pour des outils internes, des applications client, des tableaux de bord, des POC, des prototypes ou toute autre interface visuelle, même des maquettes ou des artefacts rapides. Appliquez-le à chaque fois que la sortie est un composant, une page ou une mise en page React. Si l'utilisateur mentionne « notre système de conception », « le style Casper », « correspond à notre look » ou vous demande de créer tout type d'application ou d'interface, utilisez cette compétence. Déclenchez également lors du restylage ou de la création d'un thème de l'interface utilisateur existante pour correspondre au langage visuel de Casper. Cette compétence est prioritaire sur les conseils génériques en matière de conception d’interface. Source : casper-studios/casper-marketplace.

Comment installer casper-design-system ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Où se trouve le dépôt source ?

https://github.com/casper-studios/casper-marketplace