VibeKoding / Level 1 · PemulaLevel 1 · Beginner
VK

Dari Nol ke Prototipe Pertama Zero to Your First Prototype

⏱️ ~15 jam santai~15 relaxed hours 🧒 Level: Pemula & Siapapun BisaLevel: Universal / Zero Prerequisite 🎯 Output: 1 prototipe nyata onlineOutput: 1 real online prototype 📖 16 Topik Lengkap Easy-Vibe16 Complete Easy-Vibe Topics

Selamat datang di Level 1! Di sini kamu sama sekali tidak butuh pengalaman coding sebelumnya. Kita mulai dari memahami paradigma vibe coding, membuat game pertamamu via percakapan AI di browser, pindah ke markas AI IDE (Trae / Cursor), berburu ide masalah nyata sehari-hari, merakit prototipe interaktif multi-halaman, hingga menyambungkan kecerdasan AI dan mempublikasikannya ke internet. Di bawah ini kamu bisa ikuti 6 Pelajaran Interaktif mandiri atau telusuri 16 Referensi Kurikulum Asli Easy-Vibe secara lengkap! 😄 Welcome to Level 1! You don't need any prior coding experience whatsoever. We start by understanding the vibe coding paradigm, building your first game through AI browser chat, graduating to an AI IDE workspace (Trae / Cursor), hunting for authentic everyday problems, crafting interactive multi-page prototypes, infusing real AI capabilities, and shipping to the global internet. Follow our 6 Interactive Lessons or explore the complete 16 Original Easy-Vibe Curriculum References below! 😄

Jalur Belajar UtamaMain Learning Track

6 Pelajaran Interaktif Menuju Produk Pertamamu 6 Interactive Lessons to Your First Product

Setiap pelajaran dilengkapi panduan langkah demi langkah, template prompt salin 1-klik, jokes pembuka/penutup, dan kuis interaktif berhadiah XP! 🧪 Each lesson features step-by-step guidance, 1-click copyable prompts, opening/closing humor, and interactive XP quizzes! 🧪

LESSON 01 · ~45 MIN

🧭 Apa Itu Vibe Coding?🧭 What Is Vibe Coding?

Peta petualanganmu: asal-usul istilah Andrej Karpathy, peranmu sebagai Product Engineer, dan Analogi Restoran Cerdas. Your adventure roadmap: Andrej Karpathy's genesis, your role as Product Engineer, and The Smart Kitchen Analogy.

LESSON 02 · ~2 HOURS

🐍 Bisa Ngomong = Bisa Coding🐍 If You Can Talk, You Can Code

Bikin game ular AI-native pertamamu langsung di browser tanpa install apa pun. Satu kalimat ajaib bikin program hidup! Build your first AI-native snake game in the browser without installing anything. One magic prompt brings code to life!

LESSON 03 · ~2 HOURS

🛠️ Pindah ke Markas Developer: AI IDE🛠️ Moving to Developer HQ: The AI IDE

Pindah dari dapur browser ke IDE bertenaga AI (Trae/Cursor). Aturan emas bertanya ke AI & loop belajar AI-native. Transition from browser sandboxes to AI-powered IDEs (Trae/Cursor). The golden question rule & AI-native learning loops.

LESSON 04 · ~3 HOURS

💡 Berburu Ide: Dari Keluhan Jadi Produk💡 Idea Hunting: From Complaints to Products

Menemukan rasa sakit nyata (pain points), memfilter dengan 4 pertanyaan ajaib, dan merumuskan konsep produk tervalidasi. Identifying authentic pain points, filtering via 4 magic questions, and defining validated product problem statements.

LESSON 05 · ~4 HOURS

🏗️ Bangun Prototipe Pertamamu🏗️ Build Your First Prototype

Rumus 4 langkah mengubah ide samar menjadi aplikasi web multi-halaman yang interaktif dan responsif di AI IDE. 4-step formula turning vague ideas into clickable, multi-page, responsive web prototypes in an AI IDE.

LESSON 06 · ~3 HOURS

Masukkan Kekuatan AI + Pamerkan ke Dunia! Add AI Powers + Show It to the World!

Sambungkan API kecerdasan buatan (analogi pelayan restoran), lalu publikasikan karyamu ke internet gratis via Vercel/GitHub. Connect AI APIs (the restaurant waiter analogy), then deploy your creation online for free via Vercel/GitHub Pages.

Kurikulum Asli Easy-Vibe (16 Bab)Original Easy-Vibe Curriculum (16 Chapters)

📚 Katalog Referensi Lengkap Level 1Complete Level 1 Reference Catalog

Seluruh 16 topik terperinci dari silabus resmi Easy-Vibe yang menjadi pondasi materi di level ini. Klik topik untuk membuka bab aslinya di dokumentasi resmi! 📖 All 16 granular topics from the official Easy-Vibe syllabus underpinning this stage. Click any topic to view its full documentation chapter! 📖

BAB 1.1 · ROADMAP ↗

🗺️ Cara Belajar & Peta Jalur Kursus🗺️ How to Learn This Course & Learning Map

Panduan navigasi seluruh kurikulum dari Level 1 sampai Level 3 dan ensiklopedia penunjang. Comprehensive navigation guide across Stage 1 through Stage 3 and supporting knowledge archives.

BAB 1.2 · GAME EXP ↗

🎮 Pengalaman Koding Pertama di Era AI🎮 First Programming Experience in the AI Era

Merasakan langsung lompatan teknologi koding melalui studi kasus pembuatan game interaktif. Hands-on experience of the AI programming paradigm shift through interactive game creation.

BAB 2.1 · TOOLS ↗

🛠️ Pengenalan Alat-Alat Pemrograman AI🛠️ Introduction to AI Programming Tools

Eksplorasi ekosistem AI IDE: Trae, Cursor, Windsurf, Copilot, dan perbandingan fiturnya. Exploring the AI IDE landscape: Trae, Cursor, Windsurf, Copilot, and feature trade-offs.

BAB 2.2 · CLONE APP ↗

📸 Kloning dari Screenshot: Praktik Tiruan Pertama📸 Clone from Screenshots: First Imitation Practice

Teknik menyalin antarmuka aplikasi populer hanya dengan mengunggah gambar screenshot ke AI. Techniques to replicate popular app interfaces simply by feeding UI screenshots to multimodal AI.

BAB 3.1 · IDEA HUNT ↗

🔍 1. Menemukan Masalah Nyata di Sekitar🔍 1. Find Real Problems

Metode observasi lapangan untuk menggali titik frustrasi dan keluhan bernilai tinggi. Field observation methodology to uncover high-value user frustrations and friction points.

BAB 3.2 · SELECTION ↗

🎯 2. Memilih Arah yang Layak Dibangun🎯 2. Select a Direction Worth Building

Menyaring ide dengan matriks frekuensi masalah, kemauan membayar, dan kelayakan teknis. Filtering ideas using frequency matrix, willingness-to-pay, and technical feasibility checks.

BAB 3.3 · JTBD ↗

💼 3. Memahami Kebutuhan Sejati (Jobs-To-Be-Done)💼 3. Understand Real Needs (JTBD Framework)

Kerangka kerja JTBD: bukan sekadar produk apa yang dibeli, tapi "pekerjaan" apa yang diselesaikan pengguna. JTBD framework: uncovering the underlying progress and "job" users hire your product to accomplish.

BAB 3.4 · MOM TEST ↗

👩 4. Validasi Kebutuhan dengan Uji Ibu (The Mom Test)👩 4. Validate Needs Through The Mom Test

Cara mewawancarai calon pengguna tanpa mendapatkan pujian palsu atau masukan yang menyesatkan. How to conduct customer discovery interviews without eliciting polite lies or false positives.

BAB 3.5 · DIAMOND ↗

💎 5. Mempersempit Solusi (Model Double Diamond)💎 5. Narrow the Solution (Double Diamond Model)

Proses berpikir divergen-konvergen desain produk: jelajahi banyak opsi, lalu fokus ke 1 solusi tertajam. Divergent-convergent product design: explore wide solution spaces, then converge on the sharpest MVP.

BAB 4.1 · PROTOTYPE ↗

🏗️ 6. Membangun Prototipe Interaktif🏗️ 6. Build an Interactive Prototype

Langkah demi langkah menyusun antarmuka aplikasi yang dapat diklik dan diuji langsung oleh calon pengguna. Step-by-step engineering of clickable, user-testable interactive prototypes.

BAB 4.2 · AI HOOKS ↗

🧠 7. Menghubungkan Kemampuan AI Sungguhan🧠 7. Connect Real AI Capabilities

Integrasi model bahasa (LLM) dan generator gambar ke dalam logika aplikasi melalui API REST. Connecting LLMs and image generation models into application workflows via standard REST APIs.

BAB 4.3 · DELIVERY ↗

📦 8. Memoles & Menyerahkan Produk Lengkap📦 8. Polish and Deliver a Complete Product

Penyempurnaan error boundary, penyesuaian tampilan mobile responsive, dan pengemasan produk siap rilis. Hardening edge cases, responsive UI polishing, and final product packaging for distribution.

LAMPIRAN 1 · DEPLOY ↗

🌐 Publikasi Situs Statis Vibe Coding ke Cloud🌐 Publish Your Vibe Coding Project to the Cloud

Panduan langkah publikasi website statis ke platform hosting cloud tanpa biaya server. Step-by-step tutorial deploying static vibe-coded websites onto cloud platforms with zero server costs.

LAMPIRAN 2 · THINKING ↗

💡 Fondasi Pola Pikir Produk (Product Thinking)💡 Product Thinking Fundamentals

Prinsip berpikir seorang Product Manager dalam memprioritaskan fitur yang benar-benar menciptakan nilai. Core Product Manager mental models for prioritizing features that unlock genuine user value.

LAMPIRAN 3 · SCENARIOS ↗

🏢 Menemukan Skenario AI di Alur Kerja Nyata🏢 Find AI Scenarios in Real Workflows

Daftar kasus penggunaan AI praktis di industri pendidikan, e-commerce, administrasi, dan kreatif. Catalog of high-impact AI application scenarios across education, e-commerce, operations, and creative agencies.

LAMPIRAN 4 · TROUBLESHOOT ↗

🚑 Masalah Umum & Panduan Pemecahan Error🚑 Common Issues and Troubleshooting Guide

Pertolongan pertama saat menemui layar putih, API key expired, CORS error, atau loop tak berujung. First-aid playbook for blank screens, expired API keys, CORS issues, and infinite agent loops.

🐢 Saran Belajar dari KamiOur Study Advice

Selesai lebih penting daripada sempurna. Kerjakan 6 pelajaran utama satu per satu, praktikkan langsung di browser & IDE (jangan cuma dibaca!), dan jangan takut salah. Error itu bukan kegagalan — error itu AI yang lagi ngajak kamu ngobrol lebih lanjut. 😜 Kalau kamu pelajar, profesional, maupun wirausahawan: ajak temanmu belajar bareng, siapa tahu kalian bikin startup beneran. Done is more important than perfect. Complete the 6 main lessons sequentially, practice hands-on in the browser & IDE (don't just read!), and never fear mistakes. Errors aren't failures — errors are AI inviting you to chat some more. 😜 If you're a student: invite a friend to learn together — who knows, you might build a real startup.