---
name: human-ui-design
description: UI design, frontend, dashboard, landing page, component, Tailwind, Figma, generated AI, human-crafted interface. Use when designing or reviewing frontend UI so output avoids generic AI-looking visuals while staying accessible and backend-aware.
---

# Human UI Design

Gunakan skill ini saat membuat, memperbaiki, atau review UI: landing page, dashboard, form, table, admin panel, mobile web, komponen, design system, Tailwind/CSS, React/Vue/Svelte/Next.

Tujuan: UI terlihat seperti dibuat tim produk nyata, bukan hasil template AI.

## Mode Otomatis JCE-Worker

- User tidak perlu menjalankan command khusus seperti `flow frontend-human`.
- Jika request menyebut UI/frontend/design/page/component, aktifkan workflow ini otomatis.
- Jika arah produk belum jelas, tanya maksimal 3 hal sebelum desain:
  1. target user + pekerjaan utama yang ingin selesai,
  2. rasa visual/brand yang diinginkan,
  3. contoh gaya yang disukai atau wajib dihindari.
- Jika user tidak mau menjawab, infer dari repo, domain, copy, route, schema, dan existing design system; lalu lanjut.

## Prinsip Utama

1. **Produk dulu, dekorasi belakangan**
   - Mulai dari user job, domain, data nyata, status backend, dan keputusan pengguna.
   - UI bagus karena jelas, bukan karena penuh efek.

2. **Ambil inspirasi, jangan menyalin**
   - Boleh riset referensi publik: Apple, Linear, Stripe, Vercel, Notion, GitHub, Shopify, Mobbin, Dribbble, Awwwards, SaaS nyata, dashboard domain serupa.
   - Ambil pola abstrak: hierarchy, density, navigation model, empty-state style, copy tone, spacing rhythm.
   - Jangan copy layout 1:1, teks, aset, brand, icon set berlisensi, ilustrasi, atau visual trade dress.
   - Jika memakai inspirasi internet, sebutkan sumber dan apa yang diadaptasi secara abstrak.

3. **Hindari bau “generated by AI”**
   - Gradient blob ungu/biru tanpa alasan.
   - Glassmorphism berlebihan.
   - Card grid seragam tanpa hierarchy.
   - Hero centered generik: “Transform your workflow with AI”.
   - Fake metrics tanpa konteks.
   - Ikon random dan illustration filler.
   - Semua radius terlalu besar, shadow terlalu lembut, spacing terlalu simetris.
   - Copy marketing kosong: “seamless”, “powerful”, “unlock”, “revolutionize”.

4. **Gate risiko generic wajib lulus**
   - Beri skor **Generic AI Risk 1-5** sebelum final.
   - Jika skor 3+, revisi sekali: perjelas hierarchy, kurangi dekorasi, ganti copy generic, tambah state nyata, dan beri motif visual yang spesifik produk.
   - Final tidak boleh mengandung placeholder generik kecuali user minta mockup kasar.

5. **Kekhususan domain wajib terlihat**
   - Pakai istilah domain, data shape, status, tindakan, dan constraint nyata.
   - Empty/loading/error/success state harus menyebut objek produk nyata.
   - Microcopy harus membantu keputusan pengguna, bukan mengisi ruang.

6. **Design system menang atas selera baru**
   - Reuse token, spacing, typography, component, icon, dan interaction yang sudah ada.
   - Jika belum ada sistem, buat sistem kecil: color roles, type scale, spacing scale, radius, border, surface, focus.

## Workflow Wajib

1. **Inventory**
   - Cek UI existing: komponen, token, layout, CSS/Tailwind pattern, dark mode, responsive behavior.
   - Cek backend/API: endpoint, schema, auth, error format, pagination, mutation, loading latency.

2. **Inspiration Pass**
   - Jika web access tersedia dan user mengizinkan/menanyakan inspirasi, cari 2-5 referensi publik.
   - Catat: sumber, pola yang dipelajari, batasan yang tidak boleh disalin.
   - Jika web tidak tersedia, gunakan pola umum dari produk mapan tanpa mengklaim browsing.

3. **Direction**
   - Tulis satu visual thesis: “UI ini harus terasa seperti ___ karena user perlu ___”.
   - Tentukan density, navigation, hierarchy, tone, dan primary action.
   - Tentukan satu signature motif yang terkendali: status rail, data stamp, command affordance, editorial labels, tactile cards, atau pattern lain yang masuk akal untuk domain.

4. **Backend-State Mapping**
   - Petakan loading, empty, partial, validation, permission, conflict, rate-limit, offline, success.
   - Jangan bikin UI async tanpa state ini.

5. **Build Small Vertical Slice**
   - Implement dari data boundary ke UI.
   - Hindari redesign global jika scope kecil.

6. **Human UI Review**
   - Jalankan checklist di bawah sebelum selesai.
   - Hitung Generic AI Risk. Jika 3+, revisi sebelum final.

## Human UI Review Checklist

Wajib jawab saat membuat/review UI:

- **Generic AI patterns avoided:** pola generik apa yang dihindari?
- **Domain-specific details:** istilah/data/status domain apa yang ditambahkan?
- **Inspiration sources:** referensi apa, pola apa yang diadaptasi, apa yang tidak disalin?
- **Visual hierarchy:** elemen mana paling penting dan bagaimana hierarchy dibuktikan?
- **Backend states:** loading/error/empty/validation/permission/success apa yang ditangani?
- **Accessibility:** keyboard, focus, label, contrast, reduced motion aman?
- **Responsive behavior:** layout berubah karena konten, bukan breakpoint asal?
- **Remaining visual QA risks:** apa yang masih perlu dicek di browser/designer?
- **Generic AI Risk score:** 1-5 dan alasan singkat.

## Output Contract

```md
## Human UI Direction
**Visual thesis:** ...
**Target feel:** ...
**Not this:** ...

## Inspiration
| Source | Pattern learned | Adapted as | Not copied |
|--------|-----------------|------------|------------|

## Backend-State Mapping
| Backend condition | UI state | User action |
|-------------------|----------|-------------|

## Human UI Review
- Generic AI Risk: 1/5 - ...
- Generic AI patterns avoided:
- Domain-specific details:
- Visual hierarchy:
- Accessibility:
- Responsive behavior:
- Remaining risks:
```

## Internet Inspiration Rules

- Boleh cari inspirasi jika tool web tersedia dan sesuai scope.
- Jangan scrape aset, gambar, CSS, atau kode dari situs desain untuk disalin.
- Jangan klaim “terinspirasi dari X” jika tidak benar-benar membaca/melihat X dalam sesi itu.
- Untuk implementasi, ubah inspirasi jadi keputusan desain sendiri: token, layout logic, component behavior, dan copy sesuai produk.