Chatgpt 5

{

  "version": "1.0",

  "language": "id",

  "prompts": {

    "ui_ux_product": {

      "label": "Prompt — UI/UX & Product (web app + website)",

      "content": "Peran: Anda adalah Senior Product Designer & UX Strategist untuk produk B2B SaaS kelas enterprise.\n\nTujuan: Rancang web app (SaaS) dan website pemasaran dengan desain sangat baik untuk Sistem Manajemen Arsip Berkas Kantor yang dilengkapi modul analitik berkas bawaan.\n\nKonteks produk (ringkas):\n- Produk: sistem manajemen arsip berkas kantor berbasis web dengan kemampuan pencarian cerdas, kolaborasi, kepatuhan, dan analitik penggunaan berkas.\n- Target utama: perusahaan menengah–besar dengan kebutuhan kepatuhan (legal, HR, finance, operasional).\n\nArahan gaya desain:\n- Nuansa premium, modern, minimal; fokus pada tipografi yang rapi, whitespace lega, dan penggunaan grid 8pt.\n- Palet warna netral dengan 1 warna aksen (biru/ungu/teal); sediakan konsep untuk mode terang dan gelap.\n- Komponen tegas namun tetap halus (elevated, micro-interactions ringan), ikon outline konsisten di seluruh sistem.\n- Aksesibilitas sesuai WCAG 2.2 level AA (kontras, ukuran font, fokus state, keyboard navigation).\n\nPersona utama:\n- Admin arsip (mengelola struktur folder, izin, kebijakan).\n- Legal/HR (mengelola kontrak, dokumen karyawan, dokumen legal).\n- Operasional (dokumen prosedur, SOP, laporan operasional).\n- TI/Compliance (audit, keamanan, retensi, legal hold).\n- Pengguna eksternal/tamu (penerima tautan berbagi dokumen).\n\nFitur inti web app (produk utama):\n- Auth & akses:\n  - SSO (SAML/OIDC), MFA, dan RBAC dengan role/izin granular (per folder, per tindakan).\n- Manajemen berkas:\n  - Unggah berkas (drag & drop, bulk upload), impor massal, integrasi email-in (alamat khusus per folder/proyek).\n  - Struktur kombinasi folder + tag, metadata kustom (template per jenis dokumen).\n  - OCR multi-bahasa, pencarian full-text cerdas (filter lanjutan, saved search, highlight kata kunci).\n  - Preview (PDF/DOCX/XLSX/IMG), versi dokumen, check-in/check-out, deduplikasi, anotasi & komentar.\n- Workflow & kolaborasi:\n  - Alur persetujuan (workflow), tugas, SLA, notifikasi (email/in-app).\n- Kepatuhan & keamanan berkas:\n  - Kebijakan retensi, legal hold, audit log lengkap, watermark, kontrol unduh.\n- Berbagi & integrasi:\n  - Berbagi internal/eksternal (tautan kadaluarsa, hak akses granular).\n  - Integrasi: Google Drive/OneDrive/SharePoint, layanan e-sign, antivirus scan.\n  - Ekspor/backup, impor metadata dari CSV.\n- Responsivitas:\n  - PWA/responsif (desktop-first, mobile-ready, tetap nyaman digunakan di tablet/mobile).\n\nAnalitik berkas (dashboard analitik):\n- Metrik volume & aktivitas:\n  - Total berkas, pertumbuhan dari waktu ke waktu, aktivitas unggah/unduh per periode.\n- Penggunaan storage:\n  - Total penggunaan, per departemen/tag/jenis dokumen.\n- Komposisi & perilaku:\n  - Distribusi jenis berkas, top pengguna/departemen, berkas usang/stale.\n- Pencarian & performa:\n  - Query populer, hit vs no-result, waktu respons pencarian.\n- Kepatuhan:\n  - Berkas yang mendekati kadaluarsa retensi, status legal hold.\n- Kualitas data:\n  - Rasio berkas tanpa metadata, tanpa hasil OCR, atau dengan metadata tidak lengkap.\n\nKebutuhan non-fungsional & keamanan:\n- Keamanan:\n  - Enkripsi in-transit dan at-rest, pemindaian malware, opsi DLP/redaction untuk dokumen sensitif.\n  - Auditability kuat, pilihan data residency, dan kesiapan sertifikasi (SOC2/ISO27001).\n- Performa:\n  - Target performa pencarian p95 < 500 ms untuk skenario umum.\n- Skalabilitas & pengalaman:\n  - Desain harus dapat diskalakan (multi-tenant) dan tetap mudah dipahami untuk user non-teknis.\n\nWebsite pemasaran (marketing site):\n- Tujuan:\n  - Menjelaskan value proposition produk, meningkatkan kepercayaan, dan mendorong demo/trial.\n- Elemen utama:\n  - Hero section yang jelas (headline, subheadline, CTA utama).\n  - Penjelasan manfaat inti, fitur kunci, dan demo/preview UI (gambar atau ilustrasi).\n  - Social proof (testimoni, logo klien, badge compliance).\n  - Seksi pricing, FAQ, dan beberapa CTA (demo, kontak sales, free trial).\n  - SEO: copy ringkas dan fokus, struktur heading yang benar, meta tags, schema dasar, dan outline blog.\n\nYang harus Anda keluarkan (deliverables):\n- Ringkasan produk dan positioning (segmentasi pasar, value prop, diferensiasi).\n- IA/sitemap:\n  - Struktur informasi web app (menu utama, submenu, modul).\n  - Struktur informasi website pemasaran (halaman utama dan turunan).\n- User journey utama untuk persona kunci (dari masuk hingga menyelesaikan tugas penting).\n- Daftar fitur dengan prioritas (Must/Should/Could), termasuk edge cases dan acceptance criteria tingkat tinggi.\n- Low-fi wireframe (deskripsi per layar) untuk:\n  - Dashboard utama, halaman daftar berkas, detail dokumen, workflow persetujuan, halaman pengaturan.\n  - Sertakan daftar komponen UI yang digunakan per layar.\n- Design tokens:\n  - Warna (primary, secondary, background, surface, success/warning/error, states hover/active/disabled).\n  - Tipografi (jenis font, hirarki heading, body, label).\n  - Spacing (berbasis 8pt), radius, shadow, border, dan states interaksi.\n- Spesifikasi analitik:\n  - Daftar metrik dan dimensi, contoh chart yang digunakan, layout dashboard analitik.\n- Copywriting singkat untuk website:\n  - Teks hero (headline + subheadline + CTA).\n  - 3–5 poin fitur/manfaat utama.\n  - CTA utama dan sekunder.\n- 5 pertanyaan klarifikasi teratas yang Anda butuhkan sebelum desain high-fidelity.\n\nFormat jawaban:\n- Gunakan heading yang jelas per bagian.\n- Gunakan bullet list untuk merinci.\n- Jika membantu, boleh sertakan diagram ASCII sederhana.\n- Jawab seluruhnya dalam Bahasa Indonesia."

    },

    "fullstack_prototype": {

      "label": "Prompt — Prototipe Kode Full‑stack",

      "content": "Peran: Anda adalah Senior Full-stack Engineer yang berpengalaman membangun aplikasi SaaS B2B produksi.\n\nTugas: Rancang dan jelaskan skeleton arsitektur serta contoh implementasi kode untuk web app + website Sistem Manajemen Arsip Berkas Kantor dengan analitik bawaan. Fokus pada struktur yang rapi, bisa dikembangkan tim, dan mudah di-deploy di lingkungan pengembangan.\n\nStack yang diinginkan:\n- Frontend:\n  - Next.js (App Router, TypeScript).\n  - Tailwind CSS + shadcn/ui untuk komponen.\n  - React Query (TanStack Query) untuk data fetching.\n  - Zod untuk skema dan validasi.\n- Backend:\n  - Node.js + NestJS (TypeScript).\n  - REST API.\n  - Prisma ORM + PostgreSQL.\n- Storage berkas:\n  - S3-compatible (mis. MinIO lokal) dengan mekanisme presigned URL untuk upload/download.\n- Pencarian:\n  - OpenSearch/Elasticsearch (opsional: fallback Postgres full-text).\n- Background jobs:\n  - BullMQ (Redis) untuk OCR & indexing (boleh berupa stub/pseudo-code).\n- Charts:\n  - Chart.js atau Recharts di frontend.\n- Auth:\n  - OIDC (mis. Keycloak/Auth0) + JWT; RBAC berbasis role.\n- Infrastruktur dev:\n  - Docker Compose (service: web, api, db, redis, minio, opensearch).\n\nFitur minimum yang harus diimplementasi (MVP teknis):\n- Auth dasar + RBAC:\n  - Role: admin, manager, staff, viewer.\n  - Proteksi route frontend dan guard di backend.\n- Manajemen berkas:\n  - Upload berkas ke S3 melalui presigned URL.\n  - Penyimpanan metadata berkas di database, termasuk versi sederhana.\n- Struktur & metadata:\n  - Struktur folder.\n  - Tag dan metadata kustom dengan skema fleksibel (mis. JSONB).\n- Pencarian:\n  - Pencarian berdasarkan judul, tag, dan metadata.\n  - Endpoint stub untuk full-text search (integrasi OpenSearch nanti).\n- Dashboard analitik sederhana:\n  - Total berkas.\n  - Total storage terpakai.\n  - Grafik aktivitas unggah 7 dan 30 hari terakhir.\n- Audit log:\n  - Pencatatan event penting: buat/ubah/unduh/berbagi berkas.\n- Website pemasaran statis:\n  - Halaman dengan hero, fitur, CTA, FAQ, dan meta SEO dasar.\n\nYang harus Anda keluarkan:\n- Struktur repo:\n  - Jelaskan apakah menggunakan monorepo (mis. pnpm/turbo) atau dua folder terpisah (app/ dan api/), beserta alasannya singkat.\n- Skema database:\n  - Prisma schema (tabel utama: User, Role, Permission/RoleBinding, Folder, File, FileVersion, Tag, FileTag, Metadata, AuditLog, dsb).\n  - ERD ringkas dalam bentuk teks (relasi kunci).\n- Desain API:\n  - Daftar endpoint REST utama (path, method, ringkasan fungsi).\n  - Contoh request/response (JSON) untuk beberapa endpoint penting (mis. auth, upload init, list file, pencarian).\n- Frontend:\n  - Daftar komponen UI kunci:\n    - Layout (shell dashboard), navbar, sidebar.\n    - Tabel data, kartu (card), modal, uploader, komponen chart.\n  - Jelaskan struktur folder Next.js (App Router) dan bagaimana integrasi React Query/Zod.\n- Contoh implementasi kode (potongan ringkas tapi konkret):\n  - Alur upload dengan presigned URL (endpoint backend + pemanggilan dari frontend).\n  - CRUD folder/tag/metadata (controller + service + contoh Prisma query).\n  - Query analitik (contoh SQL/Prisma agregasi untuk total file, storage, aktivitas harian).\n- Lingkungan pengembangan:\n  - Contoh file docker-compose.yml (ringkas namun lengkap service utama).\n  - Contoh .env.example (variabel penting).\n  - Langkah menjalankan proyek di mode dev (perintah dan urutan).\n- Data awal:\n  - Desain seed script sederhana (mis. beberapa user dengan role berbeda, beberapa folder & file dummy, tag, dan contoh metadata).\n- Pengujian:\n  - Rencana minimal 1–2 e2e test (mis. login + akses dashboard, alur upload dasar).\n  - 2–3 unit test untuk service penting (mis. perhitungan izin, query analitik).\n- Catatan keamanan:\n  - Rekomendasi rate limiting, batas ukuran file, validasi MIME type, antivirus hook (tempat integrasi), dan hal teknis lain yang perlu diperhatikan di tahap berikutnya.\n- Daftar pekerjaan lanjutan:\n  - Item backlog untuk OCR, pencarian lanjutan (full-text + filter kompleks), workflow persetujuan, notifikasi, multi-tenant, dsb.\n\nKriteria jawaban:\n- Gaya kode idiomatis untuk stack yang disebut.\n- Struktur modular dan dapat diskalakan untuk tim.\n- Sertakan komentar TODO yang jelas untuk bagian yang masih berupa stub.\n- Perhatikan aksesibilitas dasar pada komponen UI (fokus, ARIA seperlunya).\n- Cantumkan secara ringkas isi README yang ideal untuk repo ini.\n\nFormat jawaban:\n- Gunakan heading dan subheading yang jelas.\n- Gunakan bullet list untuk merinci.\n- Sertakan blok kode (pseudo-code atau TypeScript/Nest/Next) seperlunya.\n- Jawab dalam Bahasa Indonesia."

    },

    "visual_concept": {

      "label": "Prompt — Konsep Visual UI (gambar/mockup)",

      "content": "Ultra-clean enterprise SaaS web application dashboard UI for an office document archive management system with built-in analytics. Elegant minimal layout with a top navbar and left sidebar, cards and dense yet readable data tables, file list with colored tags and metadata chips, advanced search bar with filters and dropdowns, upload drag-and-drop module, version history side panel, large document preview modal, and analytics widgets (bar, line, and pie charts showing storage usage and activity trends). Subtle soft shadows, 8pt grid, plenty of whitespace, light and dark theme variants, neutral cool gray palette with teal accent for primary actions and charts, modern outline iconography, responsive 1440px desktop canvas, highly readable sans-serif typography, WCAG-aware contrast, professional enterprise look, inspired by Apple HIG and Material 3. Use real-world UI labels instead of lorem ipsum (for example: File name, Owner, Tags, Department, Last modified, Storage usage, Upload, Share, Download, Advanced filters). No people, no illustrations, focus only on the UI. --ar 16:9 --v 6"

    }

  }

}