·casper-design-system
*

casper-design-system

Sistema di progettazione interna di Casper Studios per generare un'interfaccia utente SaaS coerente e di livello produttivo. Utilizza questa competenza ogni volta che generi codice dell'interfaccia utente per strumenti interni, app client, dashboard, POC, prototipi o qualsiasi interfaccia visiva, anche mockup o artefatti rapidi. Applicalo ogni volta che l'output è un componente, una pagina o un layout React. Se l'utente menziona "il nostro sistema di progettazione", "stile Casper", "abbina il nostro aspetto" o ti chiede di creare qualsiasi tipo di app o interfaccia, usa questa abilità. Si attiva anche quando si rinnova o si crea un tema dell'interfaccia utente esistente per adattarlo al linguaggio visivo di Casper. Questa competenza ha la priorità rispetto alle indicazioni generiche sulla progettazione del frontend.

92Installazioni·8Tendenza·@casper-studios

Installazione

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

Come installare casper-design-system

Installa rapidamente la skill AI casper-design-system nel tuo ambiente di sviluppo tramite riga di comando

  1. Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
  2. Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
  3. Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Fonte: 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.

Sistema di progettazione interna di Casper Studios per generare un'interfaccia utente SaaS coerente e di livello produttivo. Utilizza questa competenza ogni volta che generi codice dell'interfaccia utente per strumenti interni, app client, dashboard, POC, prototipi o qualsiasi interfaccia visiva, anche mockup o artefatti rapidi. Applicalo ogni volta che l'output è un componente, una pagina o un layout React. Se l'utente menziona "il nostro sistema di progettazione", "stile Casper", "abbina il nostro aspetto" o ti chiede di creare qualsiasi tipo di app o interfaccia, usa questa abilità. Si attiva anche quando si rinnova o si crea un tema dell'interfaccia utente esistente per adattarlo al linguaggio visivo di Casper. Questa competenza ha la priorità rispetto alle indicazioni generiche sulla progettazione del frontend. Fonte: casper-studios/casper-marketplace.

Fatti (pronti per citazione)

Campi e comandi stabili per citazioni AI/ricerca.

Comando di installazione
npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
Categoria
*Creatività
Verificato
Prima apparizione
2026-03-02
Aggiornato
2026-03-10

Browse more skills from casper-studios/casper-marketplace

Risposte rapide

Che cos'è casper-design-system?

Sistema di progettazione interna di Casper Studios per generare un'interfaccia utente SaaS coerente e di livello produttivo. Utilizza questa competenza ogni volta che generi codice dell'interfaccia utente per strumenti interni, app client, dashboard, POC, prototipi o qualsiasi interfaccia visiva, anche mockup o artefatti rapidi. Applicalo ogni volta che l'output è un componente, una pagina o un layout React. Se l'utente menziona "il nostro sistema di progettazione", "stile Casper", "abbina il nostro aspetto" o ti chiede di creare qualsiasi tipo di app o interfaccia, usa questa abilità. Si attiva anche quando si rinnova o si crea un tema dell'interfaccia utente esistente per adattarlo al linguaggio visivo di Casper. Questa competenza ha la priorità rispetto alle indicazioni generiche sulla progettazione del frontend. Fonte: casper-studios/casper-marketplace.

Come installo casper-design-system?

Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Dov'è il repository sorgente?

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