일관된 프로덕션급 SaaS UI를 생성하기 위한 Casper Studios 내부 디자인 시스템입니다. 내부 도구, 클라이언트 앱, 대시보드, POC, 프로토타입 또는 시각적 인터페이스(빠른 목업이나 아티팩트 포함)에 대한 UI 코드를 생성할 때마다 이 기술을 사용하세요. 출력이 React 구성 요소, 페이지 또는 레이아웃일 때마다 적용하세요. 사용자가 "우리 디자인 시스템", "캐스퍼 스타일", "우리 모양과 일치"라고 언급하거나 어떤 종류의 앱이나 인터페이스를 빌드하라고 요청하는 경우 이 기술을 사용하세요. 또한 Casper의 시각적 언어와 일치하도록 기존 UI의 스타일을 변경하거나 테마를 지정할 때 트리거됩니다. 이 기술은 일반적인 프런트엔드 디자인 지침보다 우선순위가 높습니다.
명령줄에서 casper-design-system AI 스킬을 개발 환경에 빠르게 설치
출처: 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.
일관된 프로덕션급 SaaS UI를 생성하기 위한 Casper Studios 내부 디자인 시스템입니다. 내부 도구, 클라이언트 앱, 대시보드, POC, 프로토타입 또는 시각적 인터페이스(빠른 목업이나 아티팩트 포함)에 대한 UI 코드를 생성할 때마다 이 기술을 사용하세요. 출력이 React 구성 요소, 페이지 또는 레이아웃일 때마다 적용하세요. 사용자가 "우리 디자인 시스템", "캐스퍼 스타일", "우리 모양과 일치"라고 언급하거나 어떤 종류의 앱이나 인터페이스를 빌드하라고 요청하는 경우 이 기술을 사용하세요. 또한 Casper의 시각적 언어와 일치하도록 기존 UI의 스타일을 변경하거나 테마를 지정할 때 트리거됩니다. 이 기술은 일반적인 프런트엔드 디자인 지침보다 우선순위가 높습니다. 출처: casper-studios/casper-marketplace.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system일관된 프로덕션급 SaaS UI를 생성하기 위한 Casper Studios 내부 디자인 시스템입니다. 내부 도구, 클라이언트 앱, 대시보드, POC, 프로토타입 또는 시각적 인터페이스(빠른 목업이나 아티팩트 포함)에 대한 UI 코드를 생성할 때마다 이 기술을 사용하세요. 출력이 React 구성 요소, 페이지 또는 레이아웃일 때마다 적용하세요. 사용자가 "우리 디자인 시스템", "캐스퍼 스타일", "우리 모양과 일치"라고 언급하거나 어떤 종류의 앱이나 인터페이스를 빌드하라고 요청하는 경우 이 기술을 사용하세요. 또한 Casper의 시각적 언어와 일치하도록 기존 UI의 스타일을 변경하거나 테마를 지정할 때 트리거됩니다. 이 기술은 일반적인 프런트엔드 디자인 지침보다 우선순위가 높습니다. 출처: casper-studios/casper-marketplace.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/casper-studios/casper-marketplace