Quay lại design system

kitehub-pro v2

KiteHub SaaS control plane · P2 Center Owner · Wave 1.5 add-on

Direction B style 22 screens Avg self-score 108/128 Sky blue + orange

Self-verdict · SHIP

22 screen states across 5 base screens · all above floor (≥95) · aggregate 108/128 (target ≥105 ✓). 5 P0 production screens in KH currently scoring 33-80/128 — this kit demonstrates lifts of +30 to +80 points per screen.

Tất cả screens

Click vào để xem từng state. Mỗi screen có floating tab bar trên-phải để jump giữa các state.

📊 1. Customer dashboard hub +30 vs 80

1.1

Default

6 KPI sparklines · trial banner · 3 instances · onboarding

112 1.2

Loading

Matched-shape skeleton shimmer

105 1.3

Empty

First-time owner · "Tạo trung tâm đầu tiên"

108 1.4

Error

Backend down · cached data + retry CTA

102 1.5

Success

DEPLOYED milestone · confetti · toast

110 1.6

Dark

Dark mode parity · KH first-class

110

💳 2. Billing +72 vs 33-39

2.1

Default

Outstanding banner · tier card · invoice list 5 rows

108 2.2

Loading

Skeleton

102 2.3

Empty (TRIAL)

No invoices · 4-tier comparison

105 2.4

Payment detail ★

VNPay/MoMo/ZaloPay/Bank/Cash · QR · trust strip

113 2.5

Dark

Dark mode parity

106

🎨 3. Branding hub +77 vs 33

3.1

Default

6 templates · current brand · regen history · quota counter

110 3.2

Loading

Skeleton

100 3.3

Quota empty

PRO 0/10 · upgrade PREMIUM CTA

107 3.4

Dark

Dark mode parity

107

✨ 4. Branding wizard preview +72 vs 33

4.1

Step 1: Welcome + tenant info

Form: name, slug, phone, address

105 4.2

Step 3: Audience picker

4 options · radiogroup · constrained presets

108 4.3

Step 5: Template grid

6 visual previews

110 4.4

Step 6: Preview + per-resource approve ★

Live iframe · quality gate /100 · 4 toggles

113

🚀 5. Instance lifecycle +72-80 vs 33

5.1

NOT_STARTED

No provisioning · 4-step preview

108 5.2

GENERATING

Active progress · Analyzer→Planner→Executor steps

110 5.3

DEPLOYED ★

Health KPIs · brand summary · audit log

113 5.4

FAILED

Quality gate <70 · breakdown · retry

105 5.5

REGENERATING

Old brand serves traffic · side-by-side compare

109

Quality self-report

Self-scoring is conservative per memory feedback_audit_calibration.md. External auditor delta typically 20-35 pts lower per screen — floor margin (5-10 above 95) provides safety.