| name | ui-pattern-library |
| description | UI pattern catalog for frontend, dashboard, landing page, SaaS, fintech, ecommerce, developer tools, admin, marketplace, healthcare, mobile web, forms, tables, onboarding, settings, and empty states. Use when choosing product-specific interface patterns. |
UI Pattern Library
Katalog pola UI untuk membantu agent memilih arah desain yang terasa seperti produk nyata. Gunakan sebagai inspirasi arsitektur UI, bukan template siap copy.
Aturan Pakai
- Pilih pola berdasarkan domain + user job + data density + backend state.
- Jangan pakai semua pola sekaligus.
- Jangan copy brand, aset, layout spesifik, atau CSS dari produk lain.
- Jika project sudah punya design system, katalog ini hanya referensi sekunder.
Enterprise SaaS / Admin
Cocok untuk: CRM, ERP, internal tools, ops dashboard, RBAC admin.
- Layout: sidebar kiri stabil, top bar ringkas, content area dengan page header + action cluster.
- Density: medium-high; table/list sering lebih penting daripada card cantik.
- Visual: neutral surfaces, border halus, status chip, compact filters.
- State: permission denied, audit trail, bulk action, stale data, optimistic failure.
- Jangan: hero marketing, gradient, card grid kosong.
Developer Tool
Cocok untuk: API platform, CLI dashboard, logs, deployments, observability.
- Layout: split pane, command palette, monospace data, timeline/log stream.
- Visual: high clarity, low ornament, strong information hierarchy.
- State: build running, failed job, retry, copied token, rate limit, webhook error.
- Microcopy: direct, technical, actionable.
- Jangan: friendly mascot berlebihan jika task technical.
Fintech / Billing
Cocok untuk: payments, invoice, wallet, subscription, accounting.
- Layout: account summary + transaction timeline/table + risk/status callouts.
- Visual: trust-first; conservative color, clear currency alignment, audit metadata.
- State: pending settlement, failed payment, dispute, verification required.
- Microcopy: exact amounts, dates, next action, legal clarity.
- Jangan: playful gradients yang mengurangi trust.
Ecommerce / Marketplace
Cocok untuk: product catalog, cart, merchant admin, order management.
- Layout: visual product grid untuk browse, table/timeline untuk admin ops.
- Visual: product images lead; filters visible; price/availability prominent.
- State: out of stock, variant unavailable, shipping delay, return window.
- Microcopy: concrete delivery/return/payment info.
- Jangan: fake reviews/metrics.
Healthcare / Wellness
Cocok untuk: patient dashboard, appointment, medical records, habit tracking.
- Layout: calm hierarchy, priority alerts, clear next step, minimal cognitive load.
- Visual: accessible contrast, restrained color, avoid alarm fatigue.
- State: missing consent, pending lab, urgent alert, privacy warning.
- Microcopy: plain language, safety-focused, no overclaim.
- Jangan: gamified visual jika konteks klinis serius.
AI Product
Cocok untuk: chat, copilots, generation tools, review assistants.
- Layout: input/result loop, source citations, confidence/status, history.
- Visual: clear provenance; show what changed and why.
- State: streaming, queued, model error, unsafe request, low confidence.
- Microcopy: transparent about limits.
- Jangan: “AI magic” hero generik dan glowing orb default.
Landing Page Produk
Cocok untuk: marketing site, launch page, product homepage.
- Layout: specific hero promise, proof near top, product screenshot/context, use cases, pricing/CTA.
- Visual: one memorable motif tied to product domain.
- State: no backend heavy state, but forms need validation/success/error.
- Copy: name actual customer problem; avoid buzzword soup.
- Jangan: centered generic hero + 3 cards + gradient blobs tanpa proof.
Data Dashboard
Cocok untuk: analytics, metrics, monitoring, business intelligence.
- Layout: KPI strip only if actionable; primary chart/table gets largest area.
- Visual: chart semantics > decoration; align axes, legends, units.
- State: no data, partial data, stale sync, timezone, permissions.
- Microcopy: explain metric definition and freshness.
- Jangan: fake metric cards yang tidak bisa ditindak.
Forms / Onboarding
Cocok untuk: signup, setup wizard, KYC, config.
- Layout: one decision per step; progress visible only if meaningful.
- Visual: strong labels, inline validation, examples, save/resume behavior.
- State: validation, duplicate, server rejected, partial save, timeout.
- Microcopy: explain why data needed.
- Jangan: giant decorative side panel jika form panjang dan task berat.
Settings / Preferences
Cocok untuk: account, team, billing, notification, API keys.
- Layout: grouped sections, destructive actions isolated, save state clear.
- Visual: compact, predictable, low novelty.
- State: unsaved changes, save success, permission, revoke/rotate, audit event.
- Jangan: hide dangerous actions near primary controls.
Pattern Selection Output
## Pattern Choice
**Domain:** ...
**Selected pattern:** ...
**Why:** ...
**Rejected patterns:** ...
**Backend states shaping UI:** ...
