·casper-design-system
*

casper-design-system

Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance.

92Installs·8Trend·@casper-studios

Installation

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

How to Install casper-design-system

Quickly install casper-design-system AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: casper-studios/casper-marketplace.

SKILL.md

View raw

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.

Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance. Source: casper-studios/casper-marketplace.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system
Category
*Creative Media
Verified
First Seen
2026-03-02
Updated
2026-03-10

Browse more skills from casper-studios/casper-marketplace

Quick answers

What is casper-design-system?

Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance. Source: casper-studios/casper-marketplace.

How do I install casper-design-system?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

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