Vibe Coding Tapi Masih Acak-acakan? Improve Code Lo dengan Spec-First!
Pernah nggak sih lo lagi semangat-semangatnya buka VS Code, buka AI assistant (ChatGPT/Gemini/Claude), terus langsung ngetik prompt: "Bikin komponen navbar lengkap dengan dropdown dan dark mode"?
Beberapa detik kemudian, boom! Kodenya jalan. Lo ngerasa kayak hacker di film-film. Ini yang sekarang sering disebut sebagai Vibe Coding—ngoding ngikutin flow dan feeling, minta AI buatin semuanya on-the-fly.
Tapi... ada tapinya nih.
Setelah projectnya jalan seminggu, lo minta AI nambahin satu fitur kecil. Tiba-tiba, aplikasinya error. Lo minta AI benerin, malah merusak fitur lain yang udah jalan. Akhirnya, lo pusing sendiri ngebaca kode yang di-generate AI. Kenapa bisa gini?
Kenapa Vibe Coding Sering Bikin Mentok?
Masalah utamanya satu: AI itu nggak punya ingatan jangka panjang (Memory). AI bekerja berdasarkan context window. Saat lo ngoding secara organik (Code-First) lewat puluhan prompt, AI lama-lama bakal "lupa" sama aturan awal, struktur database, atau arsitektur yang udah disepakati di prompt pertama. Kalau lo nggak punya dokumentasi yang jelas dan cuma ngandelin history chat, AI bakal mulai halusinasi dan ngasih solusi yang nabrak sana-sini.
Hasilnya? Welcome to Spaghetti Code 🍝
Kalau lo memaksakan code-first bareng AI tanpa planning, selamat, lo baru aja menciptakan Spaghetti Code.
Spaghetti code itu ibarat mie yang kusut; kodenya saling melilit, nggak terstruktur, dan susah banget di-maintain.
Contoh Spaghetti Code: Bayangin lo punya satu file UserDashboard.js yang isinya 1000 baris. Di satu file itu, lo nge-fetch data dari API langsung di dalam render, nge-handle business logic yang kompleks, nyampur CSS inline, dan ada manipulasi state yang berlapis-lapis. Begitu lo mau ubah warna tombol, tiba-tiba query database-nya ikut error. Kusut banget kan?
Solusinya: Spec-First Development
Biar kode nggak jadi spaghetti dan AI tetap on track, lo harus ubah mindset dari Code-First jadi Spec-First.
Artinya: Tulis dulu spesifikasinya, aturannya, dan arsitekturnya, baru suruh AI nulis kodenya berdasarkan spesifikasi itu.
Nah, buat nerapin ini tanpa ribet, gue mau ngenalin satu tool yang gue buat namanya Specter 🔮.
Kenalan sama Specter 🔮
Specter adalah sebuah framework dokumentasi berbasis CLI yang di-desain khusus buat Spec-driven development dengan dukungan AI.
Intinya, Specter bakal bikinin struktur folder dokumentasi yang rapi di dalam project lo. Jadi, setiap kali lo mau nge-prompt AI, lo tinggal ngasih file spesifikasi dari Specter sebagai konteksnya. AI-nya jadi lebih pinter dan terarah!
Fitur Andalan Specter:
Organized Structure: Bikin folder docs yang super komprehensif buat misahin spek, rencana, sampai progress.
AI-Ready: Format dokumentasinya udah dioptimasi biar gampang dibaca dan dipahami sama AI (ChatGPT/Gemini/Cursor, dll).
Spec-Driven: Memaksa kita buat mikir spesifikasi dulu sebelum nulis kode.
Easy Setup: Cukup satu command, beres!
Cara Install & Quick Start
Lo bisa install Specter secara global pakai npm:
npm install -g specter
Atau kalau mau langsung sikat pakai npx:
Initialize di folder saat ini
npx specter init
Atau initialize di spesifik direktori
npx specter init ./my-project
Nanti, Specter bakal otomatis nge-generate project configuration .specterrc yang isinya metadata project lo kayak gini:
{
"version": "1.0.0",
"projectName": "My Project",
"createdAt": "2026-04-14T12:00:00.000Z",
"specDriven": true,
"aiEnabled": true
}
Dan yang paling penting, Specter bakal buatin struktur folder dewa ini:
docs/
├── specs/ # Buat naruh spesifikasi fitur, API, dan business rules
├── plans/ # Roadmap, milestone, dan sprint planning
├── tasks/ # Todo list dan task dependencies
├── techstacks/ # Dokumentasi tech stack & instruksi setup
└── progress/ # Tracking progress dan blocker
Gimana Cara Pakainya Biar "Vibe Coding" Tetep Rapi?
Biar lo kebayang, ini contoh workflow mantep gabungin Specter sama AI:
Skenario: Mau bikin fitur "User Authentication"
Bikin Spek Dulu: Jangan langsung nyuruh AI ngoding. Lo masuk ke folder docs/specs/ dan bikin file auth-spec.md. Tulis di situ: "Kita pakai JWT, expirynya 24 jam, password harus di-hash pakai bcrypt."
Bikin Task: Masuk ke docs/tasks/auth-tasks.md, pecah jadi kerjaan kecil: (1) Bikin UI Login, (2) Bikin Endpoint API, (3) Setup Middleware.
Prompting ke AI: Nah, sekarang waktunya vibe coding! Lo tinggal copy-paste (atau attach file) auth-spec.md ke AI dan bilang: "Tolong buatin Endpoint API berdasarkan spesifikasi di file ini."
Update Progress: Kalau udah kelar, catet di folder docs/progress/.
Hasilnya? Kode lo bakal jauh lebih modular, nggak ada lagi cerita AI lupa context, dan nggak ada lagi yang namanya spaghetti code.
Penutup
Vibe coding pakai AI itu emang seru banget dan bikin kita produktif parah. Tapi tanpa struktur yang jelas, project lo cuma tinggal nunggu waktu buat runtuh.
Dengan metode Spec-First pakai Specter, lo bisa tetep ngoding cepet bareng AI, tapi dengan kualitas engineering yang solid dan terstruktur.
Tertarik cobain? Langsung aja meluncur ke reponya:
Jangan lupa support dengan kasih ⭐ di repository-nya ya! Built with 💚 for spec-driven development.
Gimana menurut kalian soal Spec-First development vs Code-First? Yuk diskusi di kolom komentar! 👇
Top comments (0)