·casper-design-system
*

casper-design-system

Sistema de diseño interno de Casper Studios para generar una interfaz de usuario SaaS consistente y de nivel de producción. Utilice esta habilidad siempre que genere código de interfaz de usuario para herramientas internas, aplicaciones de cliente, paneles, POC, prototipos o cualquier interfaz visual, incluso maquetas o artefactos rápidos. Aplíquelo cada vez que la salida sea un componente, página o diseño de React. Si el usuario menciona "nuestro sistema de diseño", "estilo Casper", "coincide con nuestra apariencia" o le pide que cree cualquier tipo de aplicación o interfaz, utilice esta habilidad. También se activa al rediseñar o tematizar la interfaz de usuario existente para que coincida con el lenguaje visual de Casper. Esta habilidad tiene prioridad sobre la orientación genérica de diseño de interfaz.

93Instalaciones·7Tendencia·@casper-studios

Instalación

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

Cómo instalar casper-design-system

Instala rápidamente el skill de IA casper-design-system en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
  3. Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

Fuente: casper-studios/casper-marketplace.

SKILL.md

Ver original

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 de diseño interno de Casper Studios para generar una interfaz de usuario SaaS consistente y de nivel de producción. Utilice esta habilidad siempre que genere código de interfaz de usuario para herramientas internas, aplicaciones de cliente, paneles, POC, prototipos o cualquier interfaz visual, incluso maquetas o artefactos rápidos. Aplíquelo cada vez que la salida sea un componente, página o diseño de React. Si el usuario menciona "nuestro sistema de diseño", "estilo Casper", "coincide con nuestra apariencia" o le pide que cree cualquier tipo de aplicación o interfaz, utilice esta habilidad. También se activa al rediseñar o tematizar la interfaz de usuario existente para que coincida con el lenguaje visual de Casper. Esta habilidad tiene prioridad sobre la orientación genérica de diseño de interfaz. Fuente: casper-studios/casper-marketplace.

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
Categoría
*Creatividad
Verificado
Primera vez visto
2026-03-02
Actualizado
2026-03-10

Browse more skills from casper-studios/casper-marketplace

Respuestas rápidas

¿Qué es casper-design-system?

Sistema de diseño interno de Casper Studios para generar una interfaz de usuario SaaS consistente y de nivel de producción. Utilice esta habilidad siempre que genere código de interfaz de usuario para herramientas internas, aplicaciones de cliente, paneles, POC, prototipos o cualquier interfaz visual, incluso maquetas o artefactos rápidos. Aplíquelo cada vez que la salida sea un componente, página o diseño de React. Si el usuario menciona "nuestro sistema de diseño", "estilo Casper", "coincide con nuestra apariencia" o le pide que cree cualquier tipo de aplicación o interfaz, utilice esta habilidad. También se activa al rediseñar o tematizar la interfaz de usuario existente para que coincida con el lenguaje visual de Casper. Esta habilidad tiene prioridad sobre la orientación genérica de diseño de interfaz. Fuente: casper-studios/casper-marketplace.

¿Cómo instalo casper-design-system?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

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