human-ui-design

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

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