---
name: "Qiscus Design System 2026"
description: "Generate React/HTML/CSS UI that automatically follows Qiscus Design System components and tokens — including light and dark mode support."
type: skill
roles: ["Engineering", "Design", "Product"]
activities: ["UI Development", "Prototyping"]
tags: ["Design System", "Product UI", "React", "Light/Dark Mode"]
owner: "Wijoyo Budi Prasetyo / Product Design"
compatibility: "Claude (shared skill)"
---

# Qiscus Design System 2026

> Generate React/HTML/CSS UI that automatically follows Qiscus Design System components and tokens — including light and dark mode support.

## 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.
```