What makes Sablier Design different from standard AI coding?

Unlike generic AI code generators, this skill applies a bold, intentional aesthetic specific to the Sablier brand, ensuring interfaces look professionally designed rather than computer-generated.

Which frameworks does this skill support?

The skill is optimized for React development and leverages the shared Sablier CSS theme and the Motion library for high-performance animations.

Can I use this for production-grade applications?

Absolutely. The skill is designed to output functional, refined, and performance-optimized code that meets production standards for modern web applications.

Does it only support dark themes?

Yes, this skill is native to Sablier's signature dark-theme aesthetic, utilizing deep surfaces, orange-to-yellow gradients, and blue/purple accents.

Sablier Design System

Name: Sablier Design System
Author: sablier-labs

bysablier-labs

•

Design Tools

Generates production-grade, dark-themed React interfaces that align with the premium Sablier aesthetic and brand identity.

The Sablier Design skill empowers developers to create distinctive, high-fidelity web components and applications that move beyond generic AI-generated layouts. By leveraging Sablier’s signature dark-theme tokens, Urbanist typography, and orange-to-yellow gradients, this skill provides precise guidance for building visually striking interfaces. It focuses on intentional design choices, including bold spatial compositions, sophisticated motion effects, and meticulous visual detailing to ensure every project feels professional, cohesive, and unforgettable.

Key Features

01Expert implementation of Urbanist and Roboto typography for premium readability

025 GitHub stars

03Creative visual detailing including gradient meshes, noise textures, and grain overlays

04Advanced spatial composition including asymmetrical layouts and grid-breaking elements

05Native integration with Sablier’s dark-theme CSS tokens and color palette

06High-impact motion design using CSS-only solutions and the Motion library

Use Cases

01Developing high-fidelity DeFi dashboards and financial interfaces

02Prototyping visually dense landing pages with complex layouts and animations

03Creating branded React component libraries that avoid generic UI patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sablier-labs/plugin-marketplace design

For use in Claude.ai and ChatGPT

Download Skill