UI/UX Pro Max - Design Intelligence System

English | Bahasa Indonesia

---

<a name="english"></a>

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like anti-slop, design-system-architect, hig, tailwind-expert, brainstorming, zero-to-prod-orchestrator, and session-memory-manager to ensure cohesive execution.

Description

UI/UX Pro Max is a comprehensive design intelligence engine equipped with an offline BM25 search index covering color palettes, typography, responsive patterns, icon sets, chart recommendations, UX guidelines, Material Design 3 (M3), and stack-specific best practices across 11 technology stacks.

Trigger Conditions

Reference these guidelines or run the CLI search engine when:

• Designing new UI components, landing pages, or dashboards.
• Choosing color schemes, font pairings, and design tokens.
• Learning, reverse-engineering, or cloning website design templates & components directly from a target URL (Combine with website-design-cloner).
• Generating a complete design system recommendation for a project.
• Auditing code for UX, accessibility (a11y), or performance issues.
• Needing stack-specific code patterns (React, Next.js, Vue, Nuxt, Svelte, Tailwind, SwiftUI, React Native, Flutter, Shadcn).

---

Python BM25 Search CLI Integration

The skill includes a fast Python search engine in scripts/search.py that queries 12 domain CSV datasets and 11 tech-stack CSV datasets.

1. Generate Complete Design System Recommendation

Run this before starting design/coding to get an aggregated design system spec:

python scripts/search.py "<project/topic query>" --design-system -p "Project Name" -f markdown

Example: python scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricsApp" -f markdown

2. Domain-Specific Search

Search specific design domains:

python scripts/search.py "<query>" --domain <domain> --max-results 3

• Available Domains (--domain):
  • style: Visual design styles (Minimalism, Glassmorphism, Dark Mode, Aurora, Brutalism, Bento Grid, Spatial UI, WebGL 3D elements, etc.)
  • prompt: Copy-paste ready AI prompts & CSS implementation checklists
  • color: Hex color palettes tailored by product type (Primary, Secondary, CTA, Background, Text)
  • chart: Chart type recommendations, library suggestions, accessibility & color guidance
  • landing: High-converting landing page layouts, section orders & CTA placement
  • product: Product-type specific design system blueprints (SaaS, E-commerce, Fintech, Crypto, AI-Native Chat Interfaces, etc.)
  • ux: UX anti-patterns, usability best practices, severity, and good/bad code examples
  • typography: Google font pairings, heading/body recommendations, mood keywords & CSS imports
  • icons: Icon usage guidance, SVG libraries (Lucide, Heroicons), and code imports
  • react: React & Next.js performance optimizations, re-render fixes & dynamic imports
  • web: Web interface guidelines (ARIA, focus traps, virtual list, form inputs)
  • m3: Material Design 3 specific design tokens, color roles, elevation, and component specs
  • preset-monday: Monday.com spacious SaaS aesthetic (Vibrant Blue #0073ea, Clean White #FFFFFF + Light Grays #F9F9F9/#F5F6F8, Dark Footer #111111, Figtree/Inter fonts, 12-16px card radius, 80-120px vertical spacing)

Example: python scripts/search.py "fintech dark theme" --domain color

3. Stack-Specific Guidelines Search

Search guidelines tailored to your exact tech stack:

python scripts/search.py "<query>" --stack <stack> --max-results 3

• Supported Stacks (--stack):
  • html-tailwind | react | nextjs | vue | nuxtjs | nuxt-ui | svelte | swiftui | react-native | flutter | shadcn

Example: python scripts/search.py "virtualized list performance" --stack react

---

Quick Reference for Professional Rules

1. Accessibility (WCAG 2.2) - CRITICAL

• Color Contrast: Minimum 4.5:1 ratio for normal text, 3:1 for large text/UI components.
• Focus States: Visible focus rings (focus-visible:ring-2 focus-visible:ring-offset-2) during keyboard navigation.
• Alt Text & ARIA: Descriptive alt text for imagery; proper aria-expanded, aria-controls, and semantic HTML tags.

2. Touch & Interaction - CRITICAL

• Touch Target Size: Minimum 44x44px for mobile devices.
• Loading & State: Disable buttons during async requests to prevent duplicate submissions; show subtle spinners or skeleton loaders.
• Cursor Pointer: Always add cursor-pointer to clickable/interactive elements.

3. Performance & Animation - HIGH / MEDIUM

• Image & Assets: Use WebP/AVIF formats, srcset, explicit width/height attributes, and loading="lazy".
• Micro-interactions: Keep transition durations between 150ms–300ms (ease-in-out) for fast and responsive UI feel.
• Reduced Motion: Respect prefers-reduced-motion: reduce.

4. Light/Dark Mode Contrast

• Light Mode: High-contrast text (e.g. Slate-900 #0F172A); avoid pale grays for primary text. Ensure borders (border-slate-200) remain visible.
• Dark Mode: High contrast foreground elements over dark slate/gray backgrounds; avoid pure black #000000 text containers unless requested.

5. Sovereign Visual Hierarchy & Elegant Aesthetic Architecture

Visual hierarchy guides the user's perception through deliberate scale, contrast, spacing, depth, and rhythm (Linear/Apple/Stripe-caliber design):

• Modular Typographic Rhythm & Optical Tracking:

  • Eyebrow / Overline: text-[11px] font-semibold tracking-wider uppercase text-neutral-500 dark:text-neutral-400 — sets immediate context with deliberate breathing room.
  • Hero / Display Title: text-3xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 leading-[1.1] — tight optical tracking creates punchy authority.
  • Section / H2: text-xl md:text-2xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100 — anchored section landmark.
  • Subheading / Body: text-sm md:text-base font-normal leading-relaxed text-neutral-600 dark:text-neutral-300 — comfortable reading flow.
  • Tabular Figures Contract: Mandatory tabular-nums (font-variant-numeric: tabular-nums) on all metrics, counters, currency values, dates, and data tables to prevent horizontal layout jiggle.

• The 60-30-10 Color Rule & Single Primary CTA Dominance:

  • 60% Neutral Base: Main canvas/background (bg-neutral-50 dark:bg-neutral-950).
  • 30% Structural Surface: Cards, sidebars, headers, table shells (bg-white dark:bg-neutral-900 border border-neutral-200/80 dark:border-neutral-800).
  • 10% Intentional Accent: Reserved exclusively for key conversion moments (Primary CTA, active navigation marker, key KPI badge).
  • Single Focal Point Rule: Maximum ONE primary button per viewport. Secondary actions must use outline/subtle treatments; tertiary actions use ghost/text-only variants.
  • 3-Tier Semantic Text Contrast: Primary text (text-neutral-900 dark:text-neutral-50 >= 7:1 contrast), secondary text (text-neutral-600 dark:text-neutral-400 >= 4.5:1), tertiary/metadata (text-neutral-400 dark:text-neutral-500).

• Gestalt Proximity & Spatial Breathing Room:

  • Label-Input Tightness: Place form labels tightly to their fields (gap-1.5 / 6px).
  • Internal vs External Gaps: Card internal padding (p-5 or p-6) must exceed element gaps (gap-3 or gap-4).
  • Section Cadence: Separate major blocks with generous whitespace (py-16 md:py-24 or gap-8 md:gap-12). Whitespace is an active structural design asset.

• Surface Layering, Tactile Depth & Crisp 1px Borders:

  • Physical Elevation Tiers:
    • Canvas (L0): App background (bg-neutral-50/50 dark:bg-neutral-950).
    • Card (L1): Content container (bg-white dark:bg-neutral-900 border border-neutral-200/80 dark:border-neutral-800 shadow-xs).
    • Raised (L2): Dropdown menu, popover, hover card (shadow-md border border-neutral-200 dark:border-neutral-700).
    • Overlay (L3): Modal dialog with backdrop (shadow-xl).
    • Floating (L4): Toast alert, persistent dock (shadow-2xl).
  • Sanitation: Ban blurry muddy 30px black shadows and ungrounded glowing neon orbs. Enforce crisp 1px borders paired with directional micro-shadows.

• Scanability & Layout Flow Patterns:

  • F-Pattern: Apply to dense data views, dashboards, and feeds (strong left-anchor for headings, metrics, and row labels).
  • Z-Pattern: Apply to marketing hero sections and conversion landing pages (Logo -> Secondary CTA -> Value Prop -> Primary CTA).
  • Progressive Chunking: Break large datasets into clear card modules with distinct header, metric, and footer zones.
  • Material Design 3 (M3) Integration: Support Adaptive Window Size Classes (Compact <600dp, Medium 600–839dp, Expanded ≥840dp) and tonal elevation tiers (surface-container-lowest to surface-container-highest).

---

Sovereign UI/UX Anti-Slop Directive (6 Design Pillars)

The UI/UX tier of vibes-plug strictly eliminates generic AI visual slop and incomplete user experiences:

1. Ban on Generic "AI Gradient" Aesthetic:

   • 🔴 Forbidden: Defaulting to the cliché dark-slate backdrop with purple/cyan glowing neon gradients (bg-slate-900 from-purple-500 to-indigo-600), indiscriminate glassmorphic cards with faint border-white/10, and floating glowing dots with zero brand context.
   • ✅ Standard: Purpose-driven brand aesthetic. Deliberately choose and enforce a coherent design philosophy matching the domain: Swiss International Typography, Clean Scandinavian Editorial, High-Density Data Monochrome, Precision Industrial, or Warm Handcrafted Minimal.

2. Mandatory 5-State Component Rule (Zero Happy-Path Bias):

   • 🔴 Forbidden: Generating only the static happy-path layout while omitting edge-case states.
   • ✅ Standard: Every interactive view or data component must explicitly support all 5 core states:
     • Ideal State: Clean, structured layout with realistic domain content.
     • Loading State: Content-shaped pulsing skeleton layout matching exact element geometry (no layout shifts or jarring full-screen spinners).
     • Empty State: Contextual vector icon/illustration, concise explanatory copy, and a primary action button to create the first record.
     • Error State: Inline accessible alert with actionable retry trigger and clear explanation (RFC 9457 friendly).
     • Interactive / Disabled State: Clear hover, active, keyboard focus-visible:ring-2, and aria-disabled="true" with tooltip explanation.

3. Semantic & Accessible DOM (Zero Div-Soup Slop):

   • 🔴 Forbidden: Using <div onClick={...}> instead of <button>, omitting <label> tags on inputs, or icon-only buttons without accessible names.
   • ✅ Standard: Semantic HTML5 (<button type="button">, <nav>, <main>, <dialog>), explicit <label htmlFor="...">, aria-label or <span className="sr-only"> on icon buttons, and visible keyboard navigation focus rings (focus-visible:ring-2 focus-visible:ring-offset-2).

4. Fluid Responsiveness & Mobile Insets:

   • 🔴 Forbidden: Hardcoded fixed pixel widths (w-[480px]) causing horizontal scrolling on 360px mobile viewports; applying overflow-x: hidden on <body> to hide layout clipping bugs.
   • ✅ Standard: Fluid layout constraints (max-w-md w-full), CSS Grid with minmax(), dynamic viewport units (dvh over vh), and safe-area padding (pb-safe).

5. Intentional Micro-Motion & Reduced Motion:

   • 🔴 Forbidden: Jarring 0ms instant state snaps, sluggish 800ms+ animations that delay task completion, and hover effects that trigger layout shifts.
   • ✅ Standard: Snappy 150ms–250ms transitions with ease-out, zero layout shifts on hover, and strict respect for @media (prefers-reduced-motion: reduce).

6. Domain-Authentic Content (No Lorem Ipsum Slop):

   • 🔴 Forbidden: Filling UI mockups with "Lorem ipsum dolor sit amet", "John Doe", "Jane Doe", or dummy placeholder avatars.
   • ✅ Standard: Use realistic, contextual domain content matching the business use-case (real currency, realistic timestamps, localized names, authentic domain terms).

---

UI/UX Design Pre-Delivery Checklist

• Visual Hierarchy: Clear typographic scale (H1 -> H2 -> Body -> Eyebrow) with optical tracking (tracking-tight on large headings, tracking-wider on uppercase eyebrows).
• Single Focal CTA: Only 1 primary conversion action per viewport; secondary actions use subtle/outline variants.
• Tabular Numerals: tabular-nums applied to all metrics, currency, timestamps, and table numbers.
• Gestalt Proximity: Related items grouped tightly (gap-1.5), unrelated sections separated with generous breathing room (py-16/gap-8).
• Surface & Border Layering: Crisp 1px borders (border-neutral-200/80 dark:border-neutral-800) paired with subtle micro-shadows (shadow-xs/shadow-sm); zero muddy 30px shadows or floating neon orbs.
• Visual Quality: No emojis used as UI icons (use SVG icons from Lucide/Heroicons). Hover states do not cause layout shifts.
• Interaction: cursor-pointer applied to all interactive elements. Smooth 150–300ms transitions with active:scale-[0.98].
• Contrast: Text contrast ratio >= 4.5:1 in light mode (>= 7:1 for headings). Visible borders in both light and dark modes.
• Layout & Responsive: Tested across 375px, 768px, 1024px, 1440px breakpoints. No unintentional horizontal scrolling on mobile.
• Accessibility: All images have meaningful alt text. Form inputs have explicitly connected <label> elements or aria-label.

---

<a name="bahasa-indonesia"></a>

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti anti-slop, design-system-architect, hig, tailwind-expert, brainstorming, zero-to-prod-orchestrator, dan session-memory-manager untuk memastikan eksekusi yang kohesif.

Deskripsi

UI/UX Pro Max adalah mesin kecerdasan desain komprehensif yang dilengkapi indeks pencarian BM25 offline. Mencakup palet warna, tipografi, pola tata letak responsif, rekomendasi ikon, grafik visualisasi data, pedoman UX, Material Design 3 (M3), serta praktik terbaik untuk 11 tumpukan teknologi (technology stacks).

Kondisi Pemicu

Gunakan pedoman ini atau jalankan mesin pencari CLI ketika:

• Mendesain komponen UI baru, landing page, atau dashboard.
• Memilih skema warna, pasangan font, dan token desain.
• Menghasilkan rekomendasi sistem desain (design system) lengkap untuk proyek.
• Mengaudit kode untuk masalah UX, aksesibilitas (a11y), atau kinerja.
• Membutuhkan pola kode spesifik stack (React, Next.js, Vue, Nuxt, Svelte, Tailwind, SwiftUI, React Native, Flutter, Shadcn).

---

Integrasi CLI Pencarian Python BM25

Skill ini dilengkapi mesin pencari Python cepat di scripts/search.py yang dapat mengueri 12 dataset CSV domain dan 11 dataset CSV tech-stack.

1. Generasi Rekomendasi Sistem Desain Lengkap

Jalankan ini sebelum memulai desain/coding untuk mendapatkan spesifikasi sistem desain terintegrasi:

python scripts/search.py "<kueri proyek/topik>" --design-system -p "Nama Proyek" -f markdown

Contoh: python scripts/search.py "SaaS analytics dashboard" --design-system -p "MetricsApp" -f markdown

2. Pencarian Berdasarkan Domain

Cari domain desain tertentu:

python scripts/search.py "<kueri>" --domain <domain> --max-results 3

• Domain yang Tersedia (--domain):
  • style: Gaya desain visual (Minimalism, Glassmorphism, Dark Mode, Aurora, Brutalism, Bento Grid, Spatial UI, elemen WebGL 3D, dll.)
  • prompt: Prompt AI siap pakai & checklist implementasi CSS
  • color: Palet warna Hex sesuai jenis produk (Utama, Sekunder, CTA, Background, Teks)
  • chart: Rekomendasi jenis grafik, pustaka grafik, panduan kontras & aksesibilitas
  • landing: Tata letak landing page konversi tinggi, urutan seksi & penempatan CTA
  • product: Cetak biru sistem desain spesifik jenis produk (SaaS, E-commerce, Fintech, Crypto, Antarmuka Chat AI-Native, dll.)
  • ux: Anti-pattern UX, praktik terbaik kegunaan, tingkat keparahan, serta contoh kode baik/buruk
  • typography: Pasangan font Google Fonts, rekomendasi font judul/isi, mood & CSS import
  • icons: Panduan penggunaan ikon, pustaka SVG (Lucide, Heroicons), & import kode
  • react: Optimasi performa React & Next.js, perbaikan re-render & dynamic import
  • web: Pedoman antarmuka web (ARIA, focus trap, virtual list, input form)
  • m3: Token desain spesifik Material Design 3, peran warna, elevasi, dan spesifikasi komponen
  • preset-monday: Estetika SaaS lapang ala Monday.com (Biru Cerah #0073ea, Putih Bersih #FFFFFF + Abu-abu Terang #F9F9F9/#F5F6F8, Footer Gelap #111111, font Figtree/Inter, radius kartu 12-16px, jarak seksi vertikal 80-120px)

Contoh: python scripts/search.py "fintech dark theme" --domain color

3. Pencarian Pedoman Spesifik Tech Stack

Cari pedoman yang disesuaikan persis dengan tech stack proyek:

python scripts/search.py "<kueri>" --stack <stack> --max-results 3

• Tech Stack yang Didukung (--stack):
  • html-tailwind | react | nextjs | vue | nuxtjs | nuxt-ui | svelte | swiftui | react-native | flutter | shadcn

Contoh: python scripts/search.py "virtualized list performance" --stack react

---

Acuan Cepat Aturan Profesional

1. Aksesibilitas (WCAG 2.2) - KRITIS

• Kontras Warna: Rasio kontras minimal 4.5:1 untuk teks normal, 3:1 untuk teks besar/komponen UI.
• Focus States: Tampilkan cincin fokus yang jelas (focus-visible:ring-2 focus-visible:ring-offset-2) saat menggunakan navigasi keyboard.
• Alt Text & ARIA: Sediakan alt text deskriptif pada gambar; gunakan atribut aria-expanded, aria-controls, serta elemen HTML semantik.

2. Sentuhan & Interaksi - KRITIS

• Touch Target Size: Ukuran area sentuh minimal 44x44px untuk perangkat mobile.
• Loading & State: Nonaktifkan tombol selama operasi asinkron agar tidak terjadi submit ganda; tampilkan spinner halus atau skeleton loader.
• Cursor Pointer: Wajib menambahkan cursor-pointer pada elemen interaktif yang dapat diklik.

3. Performa & Animasi - TINGGI / MENENGAH

• Aset Gambar: Gunakan format WebP/AVIF, atribut srcset, dimensi width/height eksplisit, serta loading="lazy".
• Mikro-interaksi: Durasi transisi antara 150ms–300ms (ease-in-out) agar antarmuka terasa cepat dan responsif.
• Reduced Motion: Hormati preferensi prefers-reduced-motion: reduce.

4. Kontras Mode Terang & Gelap

• Mode Terang: Teks gelap kontras tinggi (misal Slate-900 #0F172A); hindari teks abu-abu pudar. Pastikan batas/border (border-slate-200) tetap terlihat.
• Mode Gelap: Kontras tinggi antara elemen latar depan dengan latar belakang gelap; hindari kontainer teks serba hitam pekat #000000 kecuali diminta khusus.

5. Hierarki Visual & Arsitektur Estetika Elegan Berdaulat

Hierarki visual memandu persepsi pengguna secara intuitif dan elegan melalui skala ukuran, kontras warna, jarak spasial, kedalaman elevasi, dan irama membaca (standar kaliber Apple/Linear/Stripe):

• Irama Tipografi Modular & Tracking Optik:

  • Eyebrow / Overline: text-[11px] font-semibold tracking-wider uppercase text-neutral-500 dark:text-neutral-400 — menetapkan konteks kategori secara presisi dengan jarak antarhuruf yang lega.
  • Judul Utama / Display H1: text-3xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 leading-[1.1] — tracking rapat memberikan ketegasan visual tanpa memakan ruang vertikal berlebih.
  • Subjudul Seksi / H2: text-xl md:text-2xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100 — jangkar struktural seksi.
  • Teks Tubuh / Body: text-sm md:text-base font-normal leading-relaxed text-neutral-600 dark:text-neutral-300 — alur membaca yang nyaman dan tidak melelahkan mata.
  • Angka Tabular Wajib: Terapkan tabular-nums (font-variant-numeric: tabular-nums) pada semua metrik angka, harga/mata uang, stempel waktu, dan tabel data agar angka sejajar vertikal dan tidak bergoyang saat nilai berubah.

• Aturan Warna 60-30-10 & Dominasi Single Primary CTA:

  • 60% Basis Netral: Kanvas utama latar belakang (bg-neutral-50 dark:bg-neutral-950).
  • 30% Permukaan Struktural: Kartu, panel, sidebar, header (bg-white dark:bg-neutral-900 border border-neutral-200/80 dark:border-neutral-800).
  • 10% Aksen Fokal Intensional: Dikhususkan HANYA untuk titik konversi utama (Primary CTA, status aktif, lencana KPI kritis).
  • Aturan Titik Fokus Tunggal: Maksimal SATU tombol utama per viewport. Tombol aksi lain wajib menggunakan varian outline/subtle atau ghost/text-only agar pengguna tidak mengalami kelelahan kognitif (choice paralysis).
  • 3 Tingkat Kontras Teks Semantik: Teks utama (text-neutral-900 dark:text-neutral-50 rasio >= 7:1), teks sekunder (text-neutral-600 dark:text-neutral-400 rasio >= 4.5:1), teks tersier/metadata (text-neutral-400 dark:text-neutral-500).

• Hukum Kedekatan Gestalt (Proximity) & Ruang Bernapas (Whitespace):

  • Kerapatan Label & Input: Label form harus sangat dekat dengan field inputnya (gap-1.5 / 6px).
  • Hierarki Padding Internal vs Margin Luar: Padding internal card (p-5 atau p-6) harus lebih besar daripada jarak antar-elemen di dalamnya (gap-3 atau gap-4).
  • Irama Antar-Seksi: Pisahkan blok utama halaman dengan ruang kosong yang lega (py-16 md:py-24 atau gap-8 md:gap-12). Ruang kosong (negative space) adalah elemen desain aktif bernilai tinggi yang menciptakan kesan premium dan tenang.

• Pelapisan Permukaan (Surface Layering), Kedalaman Taktil & Border 1px Presisi:

  • Tingkatan Elevasi Fisik:
    • Kanvas (L0): Latar belakang dasar aplikasi (bg-neutral-50/50 dark:bg-neutral-950).
    • Kartu Konten (L1): Kontainer data (bg-white dark:bg-neutral-900 border border-neutral-200/80 dark:border-neutral-800 shadow-xs).
    • Terangkat (L2): Menu dropdown, popover, hover state (shadow-md border border-neutral-200 dark:border-neutral-700).
    • Overlay (L3): Dialog modal dengan backdrop halus (shadow-xl).
    • Mengambang (L4): Toast notifikasi, floating action dock (shadow-2xl).
  • Sanitasi Elevasi: Larang bayangan hitam buram 30px yang kotor serta lingkaran neon mengambang tanpa dasar fisik. Terapkan garis border tajam 1px yang dipadukan dengan micro-shadows halus terarah.

• Pola Pemindaian Mata (Scanability) & Alur Tata Letak:

  • Pola F (F-Pattern): Terapkan pada tampilan padat data, dashboard, dan daftar tabel (orientasi kuat di sisi kiri untuk judul, metrik, dan baris data).
  • Pola Z (Z-Pattern): Terapkan pada landing page promosi dan alur onboarding (Logo kiri atas -> Navigasi kanan -> Pesan Nilai Utama -> Tombol CTA).
  • Chunking Progresif: Pecah kumpulan informasi kompleks menjadi modul-modul kartu terstruktur dengan header, metrik, dan footer yang jelas.
  • Integrasi Material Design 3 (M3): Mendukung Kelas Ukuran Jendela Adaptif (Compact <600dp, Medium 600–839dp, Expanded ≥840dp) serta tingkatan elevasi tonal (surface-container-lowest hingga surface-container-highest).

---

Direktif Anti-Slop UI/UX Berdaulat (6 Pilar Desain)

Tingkat UI/UX vibes-plug melarang keras slop visual AI generik dan pengalaman pengguna separuh jadi:

1. Larangan Estetika "Gradien AI" Generik:

   • 🔴 Dilarang: Menggunakan default klise latar belakang dark-slate dengan gradien neon ungu/sian menyala (bg-slate-900 from-purple-500 to-indigo-600), kartu glassmorphic berlebihan dengan border-white/10, serta titik-titik neon mengambang tanpa konteks merek.
   • ✅ Standar: Estetika berbasis tujuan merek. Terapkan filosofi desain yang disengaja sesuai domain produk: Tipografi Internasional Swiss, Editorial Skandinavia Bersih, Monokrom Data Densitas Tinggi, Presisi Industrial, atau Desain Minimalis Hangat.

2. Aturan Wajib 5 Status Komponen (Nol Bias Happy-Path):

   • 🔴 Dilarang: Hanya menghasilkan tata letak statis saat kondisi data ideal dan melupakan status di dunia nyata.
   • ✅ Standar: Setiap tampilan interaktif atau komponen data WAJIB mendukung 5 status inti:
     • Status Ideal: Tata letak rapi, terstruktur, dengan konten domain realistis.
     • Status Loading: Skeleton loader berdenyut halus dengan geometri persis sesuai elemen (tanpa pergeseran layout / CLS, tanpa spinner layar penuh yang mengganggu).
     • Status Kosong (Empty State): Ikon/ilustrasi kontekstual, teks penjelasan ringkas dan ramah, serta tombol CTA utama untuk membuat data pertama.
     • Status Error: Banner/kartu error inline yang aksesibel disertai pesan jelas dan tombol coba lagi (retry).
     • Status Interaktif / Nonaktif (Disabled): Status hover, active, cincin fokus keyboard focus-visible:ring-2, serta atribut aria-disabled="true" dengan penjelasan tooltip.

3. DOM Semantik & Aksesibel (Nol Slop Div-Soup):

   • 🔴 Dilarang: Menggunakan <div onClick={...}> menggantikan tombol asli, menghilangkan tag <label> pada input, atau tombol ikon tanpa nama aksesibel.
   • ✅ Standar: Gunakan elemen HTML5 semantik (<button type="button">, <nav>, <main>, <dialog>), <label htmlFor="..."> eksplisit, aria-label atau <span className="sr-only"> pada tombol ikon, dan cincin fokus navigasi keyboard yang jelas (focus-visible:ring-2 focus-visible:ring-offset-2).

4. Responsif Fluid & Inset Layar Mobile:

   • 🔴 Dilarang: Menetapkan lebar piksel statis (w-[480px]) yang merusak tampilan mobile 360px; menggunakan trik overflow-x: hidden pada <body> untuk menyembunyikan bug layout bocor.
   • ✅ Standar: Batasan layout fleksibel (max-w-md w-full), CSS Grid dengan minmax(), unit viewport dinamis (dvh), dan padding area aman mobile (pb-safe).

5. Mikro-Gerakan Disengaja & Reduced Motion:

   • 🔴 Dilarang: Transisi kaku 0ms, animasi lambat >800ms yang memperlambat interaksi, dan efek hover yang memicu pergeseran tata letak (layout shift).
   • ✅ Standar: Transisi responsif 150ms–250ms dengan ease-out, tanpa layout shift saat hover, serta kepatuhan mutlak pada @media (prefers-reduced-motion: reduce).

6. Konten Domain Autentik (Nol Slop Lorem Ipsum):

   • 🔴 Dilarang: Memenuhi antarmuka pengguna dengan "Lorem ipsum dolor sit amet", "John Doe", "Jane Doe", atau avatar tiruan kosong.
   • ✅ Standar: Gunakan konten realistis sesuai domain bisnis produk (mata uang nyata, stempel waktu realistis, nama lokal, istilah bisnis autentik).

---

Checklist Desain UI/UX Sebelum Delivery

• Hierarki Visual: Skala tipografi terstruktur jelas (H1 -> H2 -> Body -> Eyebrow) dengan tracking optik (tracking-tight pada judul besar, tracking-wider pada eyebrow huruf besar).
• Single Focal CTA: Hanya 1 aksi konversi utama per viewport; tombol aksi lain menggunakan varian subtle atau outline.
• Angka Tabular: tabular-nums diterapkan pada semua metrik data, mata uang, tanggal/waktu, dan tabel.
• Kedekatan Gestalt (Proximity): Elemen terkait terkelompok rapat (gap-1.5), seksi yang berbeda dipisahkan ruang bernapas yang lega (py-16/gap-8).
• Pelapisan Permukaan & Border 1px: Border 1px tajam (border-neutral-200/80 dark:border-neutral-800) dipadukan dengan micro-shadows halus (shadow-xs/shadow-sm); bebas dari bayangan hitam buram 30px atau neon orbs.
• Kualitas Visual: Tidak menggunakan emoji sebagai ikon UI (gunakan ikon SVG seperti Lucide/Heroicons). Efek hover tidak menggeser tata letak.
• Interaksi: cursor-pointer diterapkan pada semua elemen interaktif. Transisi halus 150–300ms dengan respons active:scale-[0.98].
• Kontras: Rasio kontras teks minimal 4.5:1 pada mode terang (>= 7:1 untuk judul utama). Border terlihat jelas di kedua mode (terang & gelap).
• Tata Letak & Responsif: Diuji pada breakpoint 375px, 768px, 1024px, 1440px. Tidak ada scroll horizontal tak disengaja pada perangkat mobile.
• Aksesibilitas: Semua gambar memiliki alt text yang bermakna. Form input memiliki <label> terhubung eksplisit atau aria-label.

---

🎨 Automatic Visual Assets Generation Mandate (CRITICAL)

MANDATORY: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the generate_image tool to create a custom logo that perfectly matches the application's core concept and aesthetic. This generated image MUST be explicitly used as:

1. The primary application logo (e.g., in the header/navbar).
2. The website favicon (favicon.ico or equivalent).
3. The Open Graph (OG) image for SEO metadata (og:image).

Do not use placeholders for these assets. Generate and integrate them automatically.