From Zero to Launch: 30 Hari Bikin Web App Pertamamu
Hai,Welcome to Ecourse VibeCoding with Claude. Silahkan Daftarkan email yang kamu pakai saat check out ya atau Login dengan akun Google. Note: Jangan menyebarluaskan akses web LMS ini ya .
Lupa password?
atau
Belum punya akun? Daftar di sini →
Secure
✅ Verified
🎯 Terstruktur
Dashboard
🔍 Cari modul...
0
Reminder
×
Loading...
🚪
30-Hari Challenge
From Zero to Launch: Dari Ide jadi Web App dalam 30 Hari
Kelas ini nemenin kamu bikin web app pertama dari nol — pakai Claude dan AI tools, step by step. Catat progressmu di sini, mulai dari Modul 00, dan sebelum lanjut pastikan kamu sudah baca materinya. Dan Praktekkan materinya.
Buat platform e-learning interaktif berbasis game untuk anak usia dini — huruf, angka, dan Islam.
⏳ Prompt lainnya segera hadir!
Library ini akan terus diupdate dengan prompt-prompt baru. Stay tuned! 🚀
🎠
Carrousel Generator
Ubah topik apapun jadi carousel Instagram siap upload — visual konsisten, konten engaging, format PNG 1:1 atau 4:5.
📋 Cara Setup
1
Buka claude.ai → klik New Project → beri nama: Carrousel Generator → isi deskripsi bebas.
2
Di dalam project → buka Custom Instructions / Petunjuk → copy prompt di bawah → paste → Save.
Custom Instruction Prompt
ROLE:
You are a top-tier Instagram content strategist AND visual designer.
You specialize in creating high-converting, modern Instagram carousel posts that match current design trends.
Your output must ALWAYS feel clean, aesthetic, and similar to high-performing Instagram content (not random or cluttered).
---
MAIN GOAL:
Turn any user topic into a READY-TO-UPLOAD Instagram carousel (PNG format) that is:
- Visually consistent
- Easy to read on mobile
- Emotionally engaging
- Optimized for saves, shares, and comments
---
WORKFLOW (STRICT ORDER):
STEP 1 — ASK TOPIC
Ask the user:
"What topic do you want to turn into a carousel?"
Wait for answer.
---
STEP 2 — ASK DESIGN DIRECTION (IMPORTANT)
Ask the user to choose ONE:
1. Plain aesthetic background (clean, minimal, elegan, modern, playful, professional)
2. AI-generated background (visual storytelling)
3. Use my own images
4. Background color, Font color
If user is confused → suggest trending styles (minimal beige, dark mode, soft pastel, etc.)
Wait for answer.
---
STEP 3 — VISUAL STYLE DETAILS
Based on choice:
IF Plain Background:
- Ask preferred colors OR suggest 2–3 palettes
- Keep background SIMPLE (no overdesign)
IF AI Background:
- Generate consistent image style across slides
- Style must match topic (e.g. business = clean, kids = playful)
IF Upload Image:
- Ask user to upload
- Keep layout clean, DO NOT overpower with elements
---
STEP 4 — TYPOGRAPHY (SIMPLIFY THIS)
DO NOT overload options.
Auto-select font pairing based on style:
- Bold headline font
- Clean readable body font
Make sure it looks modern and Instagram-ready.
---
STEP 5 — CONFIRMATION
Summarize:
- Topic
- Background style
- Color direction
Ask:
"Ready to generate?"
Wait for YES.
---
STEP 6 — CONTENT CREATION (CAROUSEL SCRIPT)
Use this structure:
Slide 1 — HOOK (5–10 words, bold, scroll-stopping, pattern interrupt)
Slide 2 — REHOOK (curiosity builder)
Slide 3 — RELATABLE PAIN / STORY
Slides 4–7 — VALUE (1 idea per slide)
Slide 8 — AHA MOMENT
Slide 9 — ACTIONABLE TAKEAWAY
Slide 10 — CTA
WRITING STYLE:
- Short sentences
- Conversational
- Slightly dramatic
- No fluff
- 1–2 lines per slide MAX
---
STEP 7 — DESIGN GENERATION (IMPORTANT RULES)
Generate the carousel in PNG format.
STRICT DESIGN RULES:
- Clean layout (avoid clutter)
- Strong visual hierarchy
- Consistent spacing
- High contrast text
- Mobile-first readability
- Max 2 font styles
- Consistent color palette
- Do not put many blank area. Pull balance layout
- Use /generate visual that relate with content
DO NOT:
- Use random decorations
- Overcrowd elements
- Change style per slide
---
OUTPUT:
- PNG carousel slides
- Ready to upload (ratio 1:1 or 4:5)
- No explanation
Design reference style:
- Inspired by modern Instagram creators
- Similar to Canva templates
- Minimal, clean, premium look
🎓
Web E-Learning untuk Edukasi Anak
Buat platform e-learning interaktif berbasis game untuk anak usia dini — huruf, angka, dan Islam. Satu file HTML, siap deploy!
🖼️ Preview Hasil
Tampilan KIKO Learn World di mobile
💡 Panduan Penggunaan Prompt
Kamu bisa copy prompt di bawah dan salin ke Chat box di Claude. Ubah nama aplikasi sesuai brandmu. Untuk gambar/logo, kamu bisa masukkan gambar sendiri — convert dulu gambarnya ke link URL di image2url.com (contoh), lalu tempel URL-nya di bagian [ISI URL GAMBAR KAMU].
✅ Ganti nama kursus
✅ Masukkan URL gambar
✅ Isi nomor WhatsApp
Prompt Web E-Learning Edukasi Anak
Kamu adalah web developer yang membuat platform e-learning interaktif berbasis web app sederhana, dengan pendekatan game-based learning khusus untuk anak usia dini.
Aku ingin membuat web e-learning dengan topik "Belajar Sambil Bermain (Huruf, Angka, dan Dasar Islam)" untuk anak usia 4–6 tahun (PAUD–TK) dengan target pengguna orang tua (ibu).
Gaya tampilan:
* Fun, playful, penuh warna (pastel cerah)
* Banyak ikon dan ilustrasi
* Minim teks, lebih visual
* Navigasi super sederhana (child-friendly)
* Mobile-first (tampilan seperti aplikasi, bukan website formal)
Buatkan web e-learning TANPA LOGIN dengan struktur berikut:
1. Halaman Utama (Home)
* Tampilan seperti dunia bermain (playground / learning world)
* Ada karakter maskot (misalnya kelinci lucu / karakter anak)
* Judul besar + tagline
* Tombol menu besar berbentuk kartu:
* Belajar Huruf
* Belajar Angka
* Belajar Islam
* Mini Games
* Gunakan ikon besar dan warna berbeda tiap menu
2. Halaman Modul Belajar
A. Modul Huruf (A–Z)
* Klik huruf → muncul animasi + contoh objek (A = Ayam)
* Tambahkan efek suara (simulasi teks audio)
* Aktivitas sederhana:
* Drag & drop huruf
* Tebak gambar
B. Modul Angka (1–10)
* Visual angka dengan objek (apel, balon)
* Aktivitas:
* Hitung jumlah benda
* Cocokkan angka
* Tambahkan teks suara seperti "Satu… Dua…"
C. Modul Belajar Islam
* Doa harian (teks pendek + ilustrasi)
* Huruf hijaiyah
* Mini story (kisah nabi versi sangat singkat)
* Gunakan ilustrasi ramah anak
3. Halaman Mini Games
* Puzzle sederhana
* Tebak gambar/hewan
* Memory card game
* Tambahkan sistem reward sederhana:
* Bintang ⭐
* Badge 🎁
4. Halaman Dashboard Orang Tua (tanpa login, versi sederhana)
* Tampilkan progress belajar (dummy data)
* Modul yang sudah dibuka
* Total aktivitas anak
* Gunakan tampilan card seperti aplikasi modern
5. Fitur tambahan
* Tombol "Download Worksheet" di setiap modul
* Simulasi file download (untuk printable worksheet)
* Tujuan: menghubungkan web dengan produk digital worksheet
Tampilan:
* Gunakan desain modern seperti aplikasi mobile
* Card UI dengan rounded corner
* Shadow halus
* Warna dominan: biru muda, krem, pastel
* Font besar dan mudah dibaca anak
Gunakan data berikut:
Nama kursus: KIKO Learn World
Tagline: Belajar Seru Tanpa Dipaksa
Nama instruktur: Kak Nia
Gambar/logo: [ISI URL GAMBAR KAMU]
Kontak WhatsApp: [ISI NOMOR KAMU]
Tambahkan juga:
* Animasi sederhana (hover / klik)
* Ilustrasi placeholder (bisa dari URL gratis)
* Struktur HTML + CSS + JavaScript untuk elemen interaktif
Output:
* Buat dalam 1 file HTML
* Siap deploy tanpa backend
🌟 Tips Setelah Generate
Hasil prompt ini akan menghasilkan 1 file HTML lengkap. Upload ke GitHub Pages, Netlify, atau Vercel untuk deploy gratis. Kamu juga bisa embed link download worksheet ke produk digital di KniaConnect!
Panduan VS Code
Panduan praktis menggunakan VS Code dan cara konek AI Agent
📖 Panduan Praktis VS Code
✅ Step 1 — Download VS Code dan Node.js
Kunjungi code.visualstudio.com untuk download VS Code, dan nodejs.org untuk download Node.js — sesuaikan dengan OS kamu (Windows, Mac, atau Linux).
✅ Step 2 — Install & Buka File
Setelah diinstall, buka VS Code → File → Open File → pilih folder atau file yang sudah kamu download dari Claude.
✅ Step 3 — Edit & Lihat Hasil
Ubah kode di VS Code → Simpan dan kamu bisa langsung Deploy .
🤝 Cara Konek AI Agent
🥇 GitHub Copilot (Recommended)
Install ekstensi "GitHub Copilot" di VS Code → login dengan akun GitHub → langsung bisa minta AI untuk autocomplete dan suggest kode. Ada free trial!
🆓 Kilo AI (Gratis & Terbaik untuk Vibe Coding)
Install "Kilo" → daftar di kilo.ai → connect. Bisa chat langsung dengan AI dan suruh AI edit file kode kamu. Berbasis Claude, jadi powerful!
🆓 Gemini Code Assist (Gratis)
Install "Gemini Code Assist" → login dengan Google account → siap dipakai. Cocok kalau sudah terbiasa dengan Gemini.
💡 Keuntungan pakai AI Agent
Tanpa AI Agent: Copy kode → paste → test → copy error → paste balik ke Claude. Dengan AI Agent: Minta perubahan → AI langsung edit file → approve. Jauh lebih cepat! ⚡
Diskusi & Komunitas
Punya pertanyaan, mau share progress, atau butuh bantuan? Yuk langsung gabung grup WhatsApp kita! Di sana kamu bisa diskusi bareng temen-temen sesama vibe coder dan langsung tanya ke instructor. 🙌
Prompt library dan panduan praktis buat vibe coding-mu. Halaman ini sewaktu-watu akan diupdate terus mengikuti perkembangan AI dan Claude/
Prompt Library
Koleksi prompt siap pakai untuk accelerate coding workflow kamu
Panduan VS Code
Panduan praktis VS Code dan cara konek AI Agent untuk productivity maksimal
Hack Vibe Code
Tips & trik biar sesi vibe coding-mu makin efisien, anti stuck, dan hasilnya optimal
5 Framework Prompt Claude
R.O.L.E., C.O.T.O., I.C.E., F.E.W., S.P.I.N. — framework yang bikin output Claude-mu 10x lebih bagus
Panduan Github
Tutorial pengenalan Github — Apa itu Github, kegunaan Github
Panduan Github
Tutorial pengenalan Github — Apa itu Github, kegunaan Github
📌
Apa yang akan kamu pelajari?
Panduan ini membahas dasar-dasar Github dari nol — mulai dari apa itu Github, kenapa Github penting buat developer dan vibe coder, hingga cara menggunakannya untuk menyimpan dan mengelola project kamu.
Video Tutorial Panduan Github
Tutorial pengenalan Github: Apa itu Github & kegunaannya untuk project kamu
📖 Poin Penting dari Video Ini
🗂️
Apa itu Github?
Platform berbasis cloud untuk menyimpan, mengelola, dan berkolaborasi pada kode menggunakan Git — sistem version control yang paling populer di dunia.
⚡
Kegunaan Github
Backup kode secara otomatis, tracking perubahan project, kolaborasi tim, sekaligus bisa deploy project langsung via GitHub Pages secara gratis.
🚀
Github untuk Vibe Coder
Simpan semua project vibe coding kamu di Github agar aman, bisa diakses kapan saja, dan mudah di-share ke orang lain atau client.
5 Framework Prompt Claude
yang Bikin Output-mu 10x Lebih Bagus
⚡
Kenapa Hasil Claude-mu Biasa-Biasa Aja?
Sebagian besar orang dapat output biasa karena promptnya terlalu umum. Claude itu seperti kolega yang sangat pintar — kalau kamu cuma bilang "bantu bikin konten", dia harus banyak menebak. Tapi kalau kamu kasih konteks yang jelas, hasilnya bisa jauh lebih tajam. Framework ini bukan trik ajaib, tapi checklist supaya kamu tidak lupa detail penting saat nulis prompt.
🎭
Framework 1
R.O.L.E. — Kasih Claude Sebuah 'Karakter/Peran' yang Jelas
Ketika Claude tahu dia harus berperan sebagai siapa, dia akan menyesuaikan cara bicara, pendekatan, dan asumsinya. Beda peran = beda gaya output.
R — Role
Siapa Claude dalam konteks ini? (misal: "copywriter senior", "mentor coding")
O — Objective
Apa yang mau dicapai? Spesifik soal deliverable-nya.
L — Limits
Apa batasannya? Hal apa yang tidak boleh dilakukan.
E — Examples
Tunjukkan contoh output yang kamu inginkan. Satu contoh sudah cukup.
🎯 Paling cocok untuk: Menulis caption, menganalisa konten viral, membuat design di mana keahlian domain sangat penting.
📝 Contoh Prompt
Kamu adalah senior conversion copywriter dan landing page strategist dengan pengalaman 10 tahun membuat high-converting sales page untuk produk digital wanita Indonesia.
Objective: Buat landing page high conversion untuk eCourse "Creator to Founder: Build & Sell" — program 30 hari belajar bikin dan jual web app dari nol untuk ibu rumah tangga dan solopreneur pemula. Fokus pada transformasi hidup, peluang income dari rumah, dan rasa "aku juga bisa", bukan fitur teknis.
Limits: gunakan bahasa Indonesia yang natural, persuasive, mobile-friendly, hindari jargon teknis, tone hangat-modern-relatable, target audiens wanita usia 25–40 tahun pengguna HP.
Struktur wajib: headline kuat, emotional hook, pain points, solusi, benefit, CTA persuasive, dan closing yang memicu action.
Contoh tone: "Bayangkan 30 hari dari sekarang, kamu sudah punya produk digital yang bisa menghasilkan uang bahkan saat kamu sedang menemani anak di rumah..."
🧠
Framework 2
C.O.T.O. — Paksa Claude Berpikir Step-by-Step Sebelum Jawab
Untuk masalah yang kompleks atau punya banyak langkah, kualitas jawaban Claude meningkat drastis kalau dia diminta berpikir dulu sebelum langsung menjawab.
C — Context
Apa situasinya? Beri background yang cukup supaya AI tidak menebak-nebak.
O — Objective
Apa tujuan akhir? Hasil atau keputusan apa yang kamu butuhkan?
T — Think Step-by-Step
Minta Claude bernalar dulu sebelum kasih jawaban final.
O — Output Format
Mau hasilnya dalam format apa? Poin? Tabel? HTML?
🎯 Paling cocok untuk: Strategi bisnis, perencanaan launching, analisis harga, keputusan dengan banyak variabel.
📝 Contoh Prompt
Context: Aku sedang launch eCourse "Canva Masterclass" — kursus 30 hari Design with Canva untuk pemula, harga Rp 199.000. Target peserta adalah ibu rumah tangga dan solopreneur. Saat ini sudah ada 200 orang di waitlist.
Objective: Bantu aku susun strategi launch 7 hari yang optimal untuk konversi maksimal.
Think step-by-step:
- Analisa dulu kapan momen terbaik untuk share link
- Pertimbangkan psikologi buyer pemula
- Evaluasi potensi hambatan pembelian
Output: Berikan rencana harian (Hari 1–7) dalam format tabel: hari | aksi | tujuan | channel.
⚡
Framework 3
I.C.E. — Hasil Cepat, Bersih, Tanpa Basa-basi
Untuk menghemat waktu dan token. Gunakan framework ini untuk tugas cepat yang tidak butuh banyak diskusi bolak-balik.
I — Instruction
Satu perintah yang jelas. Apa yang harus dilakukan Claude?
C — Constraints
Aturan yang harus dipatuhi: format, panjang, apa yang boleh/tidak.
E — Escape Clause
Kalau Claude tidak yakin, dia harus ngapain? Tandai atau skip?
🎯 Paling cocok untuk: Ekstrak data, rewrite konten, klasifikasi, tugas yang berulang.
💡 Rahasia framework ini: Escape clause adalah kuncinya. Ini mencegah Claude mengarang jawaban saat tidak yakin — dia akan menandai ambiguitas, bukan menebak.
📝 Contoh Prompt
Instruction: Ubah semua judul modul berikut menjadi hook yang menarik untuk caption Instagram.
Constraints:
- Maksimal 10 kata per judul
- Gunakan angka atau kata kuat (rahasia, terbukti, mudah, dll)
- Bahasa Indonesia, gaya kasual
- Kembalikan dalam format daftar bernomor
Escape clause: Kalau ada judul yang terlalu teknis dan kamu tidak yakin cara mengubahnya, beri tanda (*) di sampingnya dan lanjut ke judul berikutnya.
[salin daftar modul di sini]
🎯
Framework 4
F.E.W. — Tunjukkan Contoh, Bukan Cuma Jelaskan
Daripada menjelaskan panjang lebar tentang style yang kamu mau, lebih efektif memberi contoh langsung. AI akan membaca pola dari contoh tersebut lalu menirunya pada konten baru.
F — Frame
Satu kalimat konteks. Kita lagi ngapain dan kenapa?
E — Examples
2–3 pasang contoh input → output yang menunjukkan pola yang diinginkan.
W — Work
Konten asli yang mau diproses dengan pola tersebut.
🎯 Paling cocok untuk: Tone matching, meniru gaya copywriting tertentu, meniru format konten viral.
💡 Tips: Dua contoh biasanya cukup. Tiga sudah lebih dari baik. Lebih dari lima justru bikin prompt susah dibaca.
📝 Contoh Prompt
Frame: Rewrite these viral-style social media posts into original content for moms and beginners who want to start a digital product business from home.
Example 1:
Input: "Capek kerja terus tapi uang tetap numpang lewat?"
Output: "Udah jualan tiap hari tapi hasilnya masih gitu-gitu aja?"
Example 2:
Input: "Kalau aku tahu skill ini dari dulu, mungkin hidupku beda sekarang."
Output: "Andai dulu aku belajar jualan digital lebih cepat, mungkin aku nggak akan selama ini bingung cari income dari rumah."
Example 3:
Input: "Bukan malas. Kamu cuma belum nemu cara kerja yang cocok buat hidupmu."
Output: "Mungkin kamu bukan gagal bisnis. Kamu cuma belum punya sistem yang bikin jualan terasa lebih ringan."
Now do these:
[paste konten viral pertama]
[paste konten viral kedua]
[paste konten viral ketiga]
🔍
Framework 5
S.P.I.N. — Minta Claude Mengkritik, Bukan Setuju
Kebanyakan orang pakai Claude untuk eksekusi atau minta persetujuan. S.P.I.N. membalik ini — kamu sengaja meminta Claude jadi kritikus yang membantu menemukan kelemahan, risiko, dan blind spot dari planning-mu.
S — Situation
Apa situasinya? Beri konteks dan detail penting.
P — Problem
Apa keputusan atau ketidakpastian spesifik yang sedang dihadapi?
I — Interrogate
Minta Claude berpikir kritis, cari blind spot-mu, dan push back.
N — Next Steps
Minta rekomendasi konkret atau action plan di akhir.
🎯 Paling cocok untuk: Keputusan bisnis, strategi pricing, rencana launch, apapun yang kamu mungkin bias karena terlalu dekat dengannya.
⚠️ Penting: Claude akan setuju kalau kamu tanya "apakah ini ide bagus?" Kamu harus secara eksplisit minta dia push back. Bagian 'Interrogate' inilah yang membuka jawaban jujur.
📝 Contoh Prompt
Situation: Saya menjual eCourse "Canva Masterclass" untuk ibu rumah tangga dan pemula yang ingin belajar design dan membuat produk digital dengan Canva. Saat ini saya menggunakan landing page dengan fokus pada "Belajar Design Canva Mulai dari NOL" dan harga promo Rp99 ribu.
Problem: Saya bingung apakah positioning ini sudah cukup kuat untuk menghasilkan conversion tinggi. Saya juga khawatir audiens saya masih takut teknologi dan merasa program ini terlalu sulit untuk pemula.
Interrogate my thinking:
- Apa kelemahan terbesar dari positioning saya?
- Apa blind spot yang mungkin saya abaikan?
- Kenapa audiens mungkin tetap tidak membeli meskipun harganya murah?
- Apa yang kemungkinan membuat landing page saya gagal convert?
- Jika kamu adalah marketer berpengalaman, apa yang akan kamu ubah dari angle marketing saya?
Then give me:
- Analisis brutal tapi jujur
- Rekomendasi positioning yang lebih kuat
- 3 headline yang lebih berpotensi convert
- 5 perbaikan paling penting untuk landing page saya
- Action plan yang harus saya lakukan minggu ini untuk meningkatkan conversion
📊
Quick Reference: Pilih Framework yang Tepat
Framework
Kapan Digunakan
Contoh Tugas
R.O.L.E.
Mau Claude bertindak sebagai ahli/profesi tertentu
Nulis copywriting, coding, review kurikulum, feedback
C.O.T.O.
Masalah kompleks / banyak langkah
Strategi bisnis, perencanaan launch, analisis
I.C.E.
Butuh hasil cepat & bersih tanpa basa-basi
Ekstrak data, format ulang, klasifikasi
F.E.W.
Mau Claude meniru gaya/pola tertentu
Meniru konten viral, tone matching, meniru style web design
S.P.I.N.
Butuh Claude mengkritik & menguji ide kamu
Keputusan bisnis, strategi, risk assessment
💡
Ingat ini selalu
Framework ini bukan aturan kaku — ini alat bantu. Semakin sering kamu pakai, semakin naluriah rasanya. Mulai dari satu framework yang paling relate dengan tugasmu hari ini, lalu eksplorasi yang lain secara bertahap. Prompt yang bagus = konteks jelas + tujuan spesifik + batasan yang tepat.
Hack Vibe Code
Tips & trik biar sesi vibe coding-mu makin efisien, anti stuck, dan hasilnya optimal
Tip 01
Maksimalkan Sesi Brainstorming & Planning
Sebelum mulai coding, gunakan ChatGPT atau Gemini untuk sesi brainstorming dan planning. Tulis ide, fitur yang diinginkan, dan alur aplikasinya dulu. Makin matang planningnya, makin sedikit bolak-balik saat build — Claude bisa fokus eksekusi, bukan nebak-nebak maksudmu.
Tip 02
Build Fitur Utama Dulu — Baru Modifikasi
Bangun web atau app dengan fitur yang paling utama dulu. Jangan tergoda tambah fitur baru sebelum fondasi siap. Urutan yang benar:
1
Semua fitur utama berjalan dengan baik
2
Back-end & database sudah konek dan stabil
3
Fitur login berfungsi sempurna
4
Baru mulai tambah modifikasi & fitur tambahan
Tip 03
Mulai Sesi Baru Lebih Sering — Jangan Tunggu Penuh
Claude otomatis akan "meringkas" sesi saat konteks sudah 95% penuh — dan kualitas output-nya pun ikut turun. Jangan tunggu sampai Claude mulai nge-lag atau salah arah.
Solusinya
Buat chat baru, lalu upload file sebelumnya ke sesi yang baru. Claude langsung pick up dari mana kamu berhenti — tanpa kehilangan progress.
Tip 04
Edit Langsung di VS Code — Lebih Efisien
Download output file dari Claude, lalu edit di VS Code atau Antigravity — jangan terus bolak-balik copy-paste ke Claude untuk perubahan kecil.
Edit Manual (Non-Teknis)
Untuk ubah teks, warna, copy — langsung edit manual di VS Code. Cepat, presisi, tidak perlu kirim ulang ke Claude.
Pakai AI Agent (Teknis)
Untuk hal teknis yang tidak terlalu rumit, gunakan AI Agent di VS Code. Minta langsung ke AI untuk edit file — lebih efisien dari copy-paste ke Claude.