Qiscus Design System 2026

Overview

Qiscus Design System 2026 is a Claude skill for building UI that’s consistent with the Qiscus product design system. The generated code automatically uses the official components and tokens — colors, typography, spacing, radius — so the result feels like “Qiscus” right away, without manually matching styles.

The focus is product UI: components, layouts, dashboards, and chat panels. Both light mode and dark mode are supported.

When to Use

• Building new components or pages in Qiscus products
• Prototyping an on-brand dashboard or chat panel
• Converting a mockup into React/HTML/CSS that matches the design system

Install Steps

1. Install the Qiscus Design System 2026 skill from the shared skill library in Claude
2. Ask Claude to generate UI code or a layout, and note that the result should follow Qiscus Design System 2026

Example Prompts

Using Qiscus Design System 2026, build an agent dashboard page
with a list of active conversations and a stats panel. Support dark mode.

Build a chat bubble component (incoming & outgoing) following
Qiscus Design System 2026, in React + CSS.