⚡ Standar: NgodingPakeAI 4-Phase
1 Ide & Spesifikasi Fitur
2 Analisis & Rekomendasi Stack
3 PRD & 24 Tasks Board

Langkah 1: Deskripsikan Ide & Fitur

Mulai dari masalah nyata yang ingin kamu selesaikan. Tentukan nama proyek dan fitur utama — sistem cerdas BikinPlan akan menganalisis kebutuhan arsitektur dan merekomendasikan stack yang paling ideal di langkah berikutnya.

Pilihan Blueprint Preset:
⚡
Pertajam Ide & Temukan Edge Cases dengan AI Mendeteksi skenario gagal, celah validasi, dan aturan bisnis tersembunyi

Langkah 2: Rekomendasi Arsitektur Stack

Berdasarkan analisis ide dan fitur yang kamu masukkan di Langkah 1, berikut rekomendasi tech stack & sistem autentikasi yang paling efisien, aman, dan ramah token untuk AI coding agent.

Kategori Terdeteksi: Marketplace & Rental Proyek: KosHunt

"..."

Pilihan Tech Stack Utama

Pilih kerangka kerja yang akan menjadi pondasi kode. Kami menandai opsi yang paling optimal untuk ide ini:

⭐ Rekomendasi Utama
TanStack Start

Fullstack SSR instan (Vite + Nitro Engine) dipadukan Drizzle ORM & PostgreSQL. Standar resmi NgodingPakeAI.

Type-Safe End-to-End Hemat Token AI Low Latency SSR
Next.js 15 (App Router)

React 19 Server Components, Prisma ORM, Server Actions, dan ekosistem library Shadcn UI yang sangat luas.

Shadcn Ecosystem Server Actions Prisma ORM
Vite React SPA + Express

Arsitektur terpisah klasik: React SPA cepat di frontend dan REST API mandiri Express.js di backend.

Classic Architecture Zustand State Express API
💡 Mengapa ini direkomendasikan untuk idemu?
Memuat analisis teknis...
Pilihan Sistem Autentikasi

Pilih mekanisme login & session management yang sesuai dengan kenyamanan target pengguna:

⭐ Rekomendasi Utama
Better Auth

Google OAuth 2.0 + Email Password modern. Session tersimpan di HTTP-Only SameSite Cookie tanpa risiko kebocoran XSS.

Google 1-Click HttpOnly Cookie Zero Leak
Supabase Auth

Managed Auth dari Supabase dengan fitur Magic Link email, Social Auth, dan Row Level Security (RLS) PostgreSQL.

Magic Link PostgreSQL RLS Managed Cloud
Custom JWT Session

Mekanisme JWT mandiri (Access Token 15 menit + Refresh Token 7 hari) yang ringan dan cocok untuk REST API mandiri.

Custom Middleware Stateless Pure Standard
💡 Mengapa metode ini direkomendasikan untuk target audiensmu?
Memuat analisis autentikasi...

Menyusun Spesifikasi Rekayasa Sistem (Enrichment Mode)...

1
Menganalisis domain, personas, dan batasan sistem...
2
Merancang skema DDL PostgreSQL & tabel relasional...
3
Menyusun kontrak endpoint RESTful API & JSON payload...
4
Memetakan UI State Matrix & 24 micro-tasks berfase...
⚡ CARA PALING MUDAH (SEPERTI NGODINGPAKEAI) Cukup 1 Kali Paste!

Master Prompt — Langsung Jadi dalam Sekali Kirim

Kamu tidak perlu pusing memikirkan kapan harus kirim AGENTS.md atau memecah file. Master Prompt ini sudah merangkum seluruh spesifikasi PRD, arsitektur, dan protokol pengerjaan otomatis. Cukup buka AI Coding Agent kamu (Claude Code, Hermes Agent, Antigravity, Cursor, atau ChatGPT) di folder proyek kosong, lalu paste prompt ini — agent langsung paham dan langsung bikinin!

🗺️

Arahan Pengerjaan Proyek: Langkah Awal Sampai Selesai

1 Langkah Awal

Bikin folder proyek baru di komputermu (misal mkdir my-app && cd my-app) dan buka AI Agent di terminal folder itu.

2 Kirim Prompt

Paste Master Prompt di atas ke AI Agent. Agent langsung memproses dan mulai membangun Fase 1 (Layout & Mockup UI).

3 Cek di Browser

Begitu Fase 1 beres, jalankan npm run dev. Buka browser, klik-klik tampilannya dulu. Pastikan kamu suka desainnya!

4 Lanjut Backend

Jika UI sudah cocok, ketik di chat agent: "Tampilan oke, lanjut ke database & API". Agent akan menyusun tabel & endpoints.

5 Langkah Akhir

Agent menjalankan audit build production tanpa error. Proyekmu beres 100% dan siap di-deploy ke hosting!

Nama Aplikasi

TanStack Start SaaS 24 Tasks • Production Ready
⚡ ONE-PROMPT ALL-DONE PROTOCOL Satu Prompt Semua Beres

Autonomous Master Prompt

Instruksikan AI Agent (Claude Code, Hermes Agent, Antigravity, atau Cursor) untuk membaca PRD.md, TASKS.md, dan AGENTS.md lalu mengeksekusi seluruh 24 task berfase secara berurutan dan mandiri!

LANGKAH 1
Siapkan Folder Proyek

Unduh bundle ZIP dan ekstrak file (PRD.md, TASKS.md, AGENTS.md, CLAUDE.md) ke folder proyekmu.

LANGKAH 2
Buka Terminal AI Agent

Buka Claude Code, Hermes Agent, Antigravity, atau Cursor Composer langsung di folder proyek tersebut.

LANGKAH 3
Paste Prompt & Duduk Manis

Tempel prompt ini. Agent otomatis membaca spesifikasi dan mengeksekusi 24 task secara mandiri sampai tuntas!

Teks One-Prompt Autonomous Loop (Siap Kirim): Telah disesuaikan otomatis dengan arsitektur & modul proyekmu 

          

        

      


      
      

        

          

            Filter Layer:
            
            
            
            
            
          

          0 / 24 Selesai
        

        

      


      
      

        

          

            
          

          

        

      


      
      

        

          

            

              
              
            

            

              
            

          


          

            

          


          

            

              
                Lihat Kode Sumber Mermaid (Siap di-paste ke GitHub Markdown / Notion / Eraser.io)
              
              

            

          

        

      


      
      

        

          

            PostgreSQL 16 Schema (Type-Safe Relations & Indexes)
            
          

          

        

      


      
      

        

      


      
      

        

          

            

              
              
              
              
            

            
          

          

        

      

    

  


  

    
    Prompt task disalin ke clipboard!
  


  
  

  
  
  

    

      

        

          🧭
          Panduan AI Agent: Cara & Kapan Mengirim File
        

        
      

      

        
        
        

          

            1
            Langkah Paling Awal: Setup Folder Proyek
          

          
Sebelum membuka AI Agent apa pun, buat folder kosong baru di komputermu:

          
mkdir my-app && cd my-app

          
Setelah men-generate dokumen di BikinPlan, klik tombol "Download PRD + Tasks (.md)", lalu pindahkan 3 file tersebut ke dalam folder my-app/:

          
    
            
  • PRD.md — Spesifikasi lengkap arsitektur, DDL database, dan kontrak API.
    • 
            
  • TASKS.md — Daftar 24 micro-tasks berfase yang memandu pengerjaan harian.
    • 
            
  • AGENTS.md — Instruksi dan aturan main agar agent tidak membuat kode berantakan (*anti-slop*).
    • 
          

        


        
        

          

            2
            Kapan Mengirim File PRD dan AGENTS.md? (First Handshake)
          

          
Kirim file ini DI PERCAKAPAN PERTAMA KALI, tepat saat kamu baru membuka Claude Code, Hermes Agent, Antigravity, atau Cursor di terminal folder tersebut.

          
PENTING: Jangan langsung menyuruh agent coding atau membuat database! Berikan prompt inisialisasi pembuka berikut:

          
          

            
Baca PRD.md dan AGENTS.md di folder ini sebagai acuan arsitektur dan batasan pengerjaan.
Pahami alur 4 fase (Fase 1 Frontend Mockup -> Fase 2 State -> Fase 3 Database & API -> Fase 4 Integrasi).
DILARANG membuat tabel database, API rumit, atau menulis kode fitur sebelum saya memberikan nomor task spesifik.
Apakah kamu sudah membaca dan paham arsitekturnya?

            
          

          
Tujuan handshake ini: Membangun mental model arsitektur di memori agent terlebih dahulu agar agent tidak berhalusinasi atau melompati tahapan.

        


        
        

          

            3
            Siklus Eksekusi Task (Satu Task per Giliran)
          

          
Setelah agent menjawab "Paham", buka tab "Roadmap & 24 Tasks Board" di BikinPlan:

          
    
            
  • Mulai dari task pertama yang belum selesai (misalnya T-01: Setup Repo & Layout Shell).
    • 
            
  • Klik tombol "Copy Prompt Agent" pada task tersebut.
    • 
            
  • Tempelkan ke terminal agent. Agent akan fokus menyelesaikan HANYA checklist pada task tersebut.
    • 
            
  • Agent akan menjalankan kriteria verifikasi penerimaan (*acceptance test*) sebelum melapor selesai.
    • 
          

        


        
        

          

            4
            Checkpoint Verifikasi Manusia (Jangan Biarkan Agent Nyelonong!)
          

          
Sesuai formula Frontend Mock First, Fase 1 (T-01 s/d T-06) sengaja menggunakan data tiruan statis:

          
    
            
  • Setelah Fase 1 selesai, nyalakan server lokal (npm run dev) dan buka browser.
    • 
            
  • Klik-klik tombol, navigasi, dan filter tampilan di browser. Pastikan tampilannya sudah sesuai keinginanmu.
    • 
            
  • Jika tampilan sudah disetujui, barulah perintahkan agent untuk lanjut ke Fase 2 (state) dan Fase 3 (skema database).
    • 
            
  • Manfaat: Kamu tidak membuang token untuk backend yang salah arah, dan tampilan UI sudah terbukti bagus sejak hari pertama!
    •