Koleksi Template Web & Prompt Generator (Aset Mandiri)
Dokumentasi hasil karya desain web kita sendiri lengkap dengan gambar screenshot hasil render nyata, prompt master pembentuknya, dan sandbox preview interaktif.
KARYA SENDIRI #02Pro SaaS & AI Dashboard
High-Productivity Pro 4-Pane Studio Dashboard Layout
Karya resmi: OXID Cortex Studio • November 2026
Screenshot Hasil Render Nyata:
🔍 Klik untuk Zoom Layar Penuh100% Verified Production
Template arsitektur dashboard profesional 4-pane yang mengadopsi struktur referensi NFT.Market Pro: Left Icon Rail vertikal (w-20), Top Action Bar dengan capsule search, Main Center Area dengan Featured Split Card + 3-Column Item Grid, serta Right Finance & Savings Sidebar dengan kurva sparkline chart.
✦Arsitektur: 4-Pane Responsive Grid (Left Rail, Top Bar, Center Main, Right Sidebar)
✦Palet Warna: Hitam Doff (#0a0a0c), Deep Obsidian (#121216), Cyber Orange (#ff5722), Neon Emerald (#10b981)
✦Fitur Utama: Countdown Timer, Double Action Buttons (Inspect & Copy), Sparkline Savings Chart
✦Framework: Next.js 14 App Router, Tailwind CSS, TypeScript
Prompt Master Pembentuk Template:Gunakan di Claude / v0 / Cursor
Bertindaklah sebagai Lead Software Architect & UI/UX Engineer kelas dunia.
Tugasmu: Bangun arsitektur dashboard web pro modern 4-pane dengan standar produksi tinggi.
Struktur & Hierarki Layout:
1. Left Navigation Rail (w-16 sm:w-20 fixed/sticky):
- Logo atas dengan badge rounded-2xl
- Menu ikon vertikal dengan active indicator pill melengkung
- Avatar profil di bagian paling bawah
2. Top Bar (h-20 sticky):
- Deretan filter pills di sisi kiri
- Search bar berbentuk kapsul di tengah
- Tombol aksi utama (Sync Radar / Connect) dan theme toggle di sisi kanan
3. Main Center Content Area:
- Featured Hero Card (Container besar terbelah 2 kolom):
* Sisi Kiri (Visual Preview): Gambar render mockup, badge avatar insinyur aktif (+28), timer hitung mundur kuota (Quota Refresh in 14H : 17M), dan bottom overlay benefit gratis dengan tombol aksi copy.
* Sisi Kanan (Metadata): Segment tabs (Details, Parameters, Changelog), timestamp verifikasi, judul besar H1, naskah teknis, dan profil kreator di footer.
- All Items Section (3-Column Item Grid):
* Header section dengan counter total items dan sorting dropdown
* Kartu item 3 kolom dengan menu tiga titik, counter hati, visual thumbnail, benefit price, dan 2 tombol aksi bawah (Inspect & Copy)
4. Right Sidebar (w-80):
- Widget 'Studio Savings / Quota' dengan kurva sparkline SVG grafik hijau neon, kalkulator penghematan biaya ($28k+ Saved), dan tombol refresh.
- Featured Creators mini cards
- Live Activity stream feed
Gunakan Next.js 14 App Router dan Tailwind CSS dengan tema Hitam Doff (#0a0a0c) dan aksen Cyber Flame Orange (#ff5722).
KARYA SENDIRI #01Web3 & AI Art Portal
Duke-Style Ultra-Modern NFT Showcase Layout
Karya resmi: OXID Cortex Studio • November 2026
Screenshot Hasil Render Nyata:
🔍 Klik untuk Zoom Layar Penuh100% Verified Production
Template replikasi visual berkelas dunia yang mengadopsi struktur estetika NFT.Market Duke 100%: 3-Column Header Simetris, Hero Section dengan kartu miring 3D bergaya layered cards, Carousel 4-Drop Koleksi Visual, Live Activity Stream interaktif, dan Featured Artists Showcase.
✦Desain: 7 Zona Eksplorasi Visual (Hero 3D, Drops Carousel, Live Activity, Top Artists)
✦Interaksi: Real-time Live Scraper trigger button, carousel next/prev state, dan spotlight search Ctrl+K
✦Aset Grafis: 4 SVG Vektor Kustom (Copilot, Fintech, Editorial, Hardware)
✦Styling: Glassmorphism header, badge verified, and custom scrollbars
Prompt Master Pembentuk Template:Gunakan di Claude / v0 / Cursor
Bertindaklah sebagai Lead Front-End Engineer & UI/UX Designer kelas atas.
Tugasmu: Replikasi penuh tata letak dan estetika Duke NFT Marketplace ke dalam aplikasi portal web berita/intelijen AI modern.
Spesifikasi Detail Antarmuka:
1. Header Simetris 3-Kolom (Sticky Glassmorphism):
- Kiri: 5 Menu navigasi utama
- Tengah: Brand logo OXID Labs melingkar putih + teks uppercase
- Kanan: Tombol spotlight search (Ctrl+K), Notification Bell dengan popover floating, sakelar tema, dan tombol aksi oranye
2. Hero Section 2-Kolom:
- Sisi Kiri: Headline font serif berbobot tebal, deskripsi tajam, CTA ganda, dan stat counter 3 kolom (250+ Drops, 12.8k Quotas, 99.8% Speed)
- Sisi Kanan: Kartu bertumpuk 3D (Layered Angled Cards) dengan kartu belakang terotasi 6 derajat
3. Featured Drops Showcase:
- Carousel interaktif 4 kartu dengan tombol panah melingkar bergaris tipis 1px
4. Live Activity Stream:
- Feed data scraper terbaru dengan avatar kreator asli (@karpathy, @swyx, @shuding_, @sama)
5. Bento Grid AI Design Vault:
- Bento box interaktif dengan OpenGraph capture asli dan tombol salin prompt