W1 Framing + Tools + First Deploy
Objectives
- Pahami cara framing masalah (River Crossing)
- Kenali AI prototyping tools — dan pilih yang cocok buat kamu
- Setup semua tools (Node.js, VS Code, GitHub, Google AI Studio, Cloudflare, Obsidian)
- Deploy sesuatu yang LIVE di internet hari pertama
Intinya minggu ini
- 1Tulis framing River Crossing untuk ide kamu: Sisi Sini (masalah) → Sisi Sana (dunia ideal)
- 2Bikin 1 prompt lengkap pakai formula CONTEXT + BRAND + TASK + FORMAT + CONSTRAINTS
- 3Install semua tools: Node.js, VS Code, Obsidian, Google AI Studio, Cloudflare, GitHub
- 4Deploy 1 website LIVE di internet — URL bisa dibuka siapapun
Done? Kamu punya website live, framing yang tajam, prompt pertama, dan semua tools siap. Minggu depan kita mulai build.
Pre-work
| Materi | Format | Durasi |
|---|---|---|
| Framing Problem → Solution (River Crossing model) | Artikel | 15 min |
| Kenalan dengan AI Prototyping Tools | Baca di bawah | 10 min |
| Install Node.js + VS Code + Obsidian | Setup guide | 20 min |
| Buat akun Google AI Studio, Cloudflare, GitHub | Setup guide | 15 min |
Konsep: River Crossing
River Crossing adalah cara framing masalah dari Shape Up. Bayangkan kamu mau menyeberangkan orang dari sisi sini ke sisi sana lewat jembatan:
- Sisi Sini = Realita sekarang. Pain point user. Masalah yang nyata.
- Jembatan = Solution yang kamu build. Ini yang jadi app/product.
- Sisi Sana = Dunia ideal setelah masalah terselesaikan. Outcome yang diinginkan.
Jangan langsung ke jembatan. Pastikan dulu: sisi sini benar-benar menyakitkan, dan sisi sana benar-benar diinginkan.
Contoh Framing: Good vs Bad
Lihat perbedaan framing yang generik vs yang tajam. Klik tab untuk lihat contoh dari berbagai genre — SaaS, game, community, creative tool, dan niche B2B.
Ide: App Keuangan Pribadi
Framing yang kurang tajam
Sisi Sini
“Saya mau bikin app keuangan”
Sisi Sana
“App keuangan saya jadi”
Framing yang tajam
Sisi Sini
Freelancer Indonesia harus buka 3 app (bank, e-wallet, spreadsheet) tiap malam untuk rekap pengeluaran. Sering lupa, akhirnya nggak tahu berapa sisa uang yang aman buat dipakai.
Sisi Sana
Freelancer buka 1 app, semua transaksi otomatis masuk. Dalam 10 detik tahu: bulan ini sudah keluar berapa, sisa aman berapa, dan invoice mana yang belum dibayar.
Kenapa framing ini lebih baik?
Framing yang bagus menyebut SIAPA yang punya masalah, APA pain-nya yang spesifik, dan outcome yang terukur (10 detik, bukan "mudah").
Checklist Framing yang Tajam
Framing kamu TAJAM kalau menjawab semua ini:
- SIAPA yang punya masalah? (bukan “semua orang”)
- APA pain-nya yang spesifik? (bukan “butuh X”)
- BERAPA kerugian/frekuensi? (angka = credibility)
- Outcome TERUKUR — bukan “lebih mudah” tapi “dalam 10 detik”, “turun 80%”, “Rp 0”
Quiz
Mana contoh framing 'Sisi Sini' yang paling tajam?
Studi Kasus: Dari Masalah ke Prompt
Sekarang lihat bagaimana pola pikir ini diterapkan ke 3 produk nyata. Bukan tutorial bikin app — tapi cara berpikir yang benar sebelum bikin app. Prompt di setiap studi kasus bisa langsung kamu copy-paste ke Google AI Studio.
Membedah Cara Berpikir Product Maker
Pilih satu studi kasus. Ikuti 4 langkah dari masalah sampai prompt siap pakai. Ini bukan tutorial bikin app — ini cara berpikir yang benar sebelum bikin app.
Kamu fotografer event. Habis motret nikahan, punya 2000+ foto, total 47GB. Client minta semua foto untuk web gallery. Tapi upload 47GB? Nggak mungkin. Compress satu-satu pakai Photoshop? Sebulan baru selesai.
- File foto terlalu besar untuk dikirim atau upload
- Kompres manual satu-satu memakan waktu berminggu-minggu
- Tools yang ada ribet, berbayar, atau butuh install software berat
- Upload ke server pihak ketiga = risiko privasi (foto pre-wedding, dll)
Pelajaran
Ada TUJUAN yang jelas (kirim foto ke client) dan HAMBATAN yang spesifik (file terlalu besar, proses manual lama). Ini masalah yang valid karena kamu bisa tunjuk SIAPA yang ngalamin dan KAPAN.
Pola yang Sama, Produk Beda
Ketiga studi kasus pakai pola pikir yang sama: Masalah (siapa yang sakit) → Keinginan (dunia ideal, tanpa nyebut tech) → Jembatan (baru pilih tools) → Prompt (terjemahkan ke instruksi AI). Coba terapkan ke ide kamu sendiri.
AI Prototyping Tools
Kamu nggak perlu bisa coding untuk bikin tampilan yang bagus. Sekarang ada banyak tools AI yang bisa generate UI lengkap dari deskripsi teks — tinggal jelasin apa yang kamu mau.
Yang bisa kamu masukkan ke AI prototyping tools:
- Deskripsi produk — “Buatkan landing page untuk app tracking kebiasaan dengan pricing section”
- Screenshot referensi — Upload screenshot website yang kamu suka, minta AI bikin versi serupa
- Sketch / wireframe — Gambar coret-coret di Excalidraw, foto, lalu upload — AI convert jadi UI
- Iterasi bertahap — “Ubah warna jadi lebih gelap”, “tambah testimonial section”, “bikin mobile-friendly”
Rekomendasi: Google AI Studio (Gratis)
Untuk bootcamp ini, kita pakai Google AI Studio sebagai default karena:
- Gratis — nggak perlu bayar
- Nggak perlu install — langsung pakai di browser
- Multimodal — bisa terima teks, gambar, sketch, file
- Bisa prototype cepat — masukkan deskripsi produk kamu, dapat UI dalam hitungan detik
Link: aistudio.google.com
Tools lain kalau kamu mau lebih serius
| Tool | Harga | Kelebihan |
|---|---|---|
| v0 | Freemium | Generate React components, bisa copy-paste ke project |
| Lovable | Paid | Full-stack app builder, termasuk database & auth |
| Same.new | Freemium | Clone website apapun dari URL — bagus untuk referensi |
| Replit Agent | Freemium | Cloud IDE + AI agent, bisa deploy langsung |
| Firebase Studio | Gratis | Cloud IDE dari Google, terintegrasi Firebase backend |
| Aura | Paid | Fokus design quality, hasil lebih polished |
Mau lebih advanced? Pakai AI Coding Agent
Tools di atas bagus untuk prototyping visual. Tapi kalau kamu mau kontrol penuh — edit code langsung, bikin fitur custom, integrasi API — kamu butuh AI coding agent yang jalan di terminal:
- Claude Code (Anthropic) — AI agent paling capable untuk coding. Install via
npm install -g @anthropic-ai/claude-code. Pakai kalau kamu mau pair programming dengan AI yang bisa baca seluruh project kamu. Paid (langganan Claude Pro/Max). - Kimi CLI (Moonshot) — Alternatif gratis/murah. Install via
uv tool install kimi-cli. Cocok buat yang baru mulai dan mau explore tanpa budget besar. Free tier tersedia. - GLM CLI (Zhipu AI) — Opsi lain dari China, harga kompetitif. Kemampuan mirip Kimi CLI.
Rekomendasi bootcamp: Mulai dari Google AI Studio (gratis) untuk prototyping. Kalau sudah nyaman dan mau build lebih serius, upgrade ke Claude Code atau Kimi CLI. Setup lengkap ada di halaman Setup.
Kapan pakai yang mana?
- Brainstorm & sketch cepat — Google AI Studio (gratis, multimodal)
- UI component individual — v0 (React, bisa copy-paste ke project)
- Full MVP app — Lovable atau Replit (termasuk database & auth)
- Clone referensi — Same.new (paste URL, dapat starter code)
- Full control + custom code — Claude Code atau Kimi CLI (terminal-based AI agent)
Quiz
Kamu punya ide app dan mau bikin prototype cepat tanpa install apapun. Tool mana yang paling cocok?
Prompt Engineering: Generic vs Kontekstual
Kualitas output AI tergantung kualitas input kamu. Lihat perbedaan drastis antara prompt yang asal-asalan vs prompt yang punya context (skills + brand guideline).
Kamu mau bikin landing page untuk produk SaaS
Prompt tanpa context
Prompt
Buatkan landing page untuk produk SaaS saya.
Hasil
AI menghasilkan halaman generik: hero section standar, lorem ipsum, warna biru default, fitur placeholder. Hasilnya bisa untuk produk apapun — artinya nggak unik untuk produk KAMU.
Prompt + skills + brand context
Context yang ditambahkan
Kamu adalah web designer expert. Brand: warna sage green (#8B9E7C), tone casual-profesional, audience freelancer Indonesia umur 25-35.
Prompt
Buatkan landing page untuk "KasKu" — app tracking keuangan freelancer Indonesia. Hero section fokus ke pain point: freelancer harus buka 3 app buat rekap pengeluaran. CTA: "Coba Gratis 14 Hari". Testimonial dari freelancer desain grafis dan content writer. Pricing: freemium (gratis sampai 50 transaksi/bulan).
Hasil
AI menghasilkan halaman yang SPESIFIK: hero dengan headline relatable untuk freelancer Indonesia, warna sage green sesuai brand, copy dalam bahasa yang casual tapi profesional, testimonial yang believable, pricing yang jelas. Hasilnya nggak bisa dipakai untuk produk lain — ini MILIK produk kamu.
Formula Prompt yang Bagus
CONTEXT: [Siapa kamu / skill apa yang kamu minta]
BRAND: [Tone, warna, audience, personality]
TASK: [Apa yang harus di-generate — spesifik]
FORMAT: [Bentuk output yang diinginkan]
CONSTRAINTS: [Apa yang NGGAK boleh dilakukan]Contoh prompt lengkap untuk AI Studio:
Kamu adalah web designer expert yang paham UX untuk audience Indonesia.
Brand context:
- Nama produk: KasKu
- Warna utama: sage green (#8B9E7C), accent: dark charcoal (#2D2D2D)
- Tone: casual tapi profesional, kayak ngobrol sama teman yang lebih tau soal keuangan
- Audience: freelancer Indonesia umur 25-35, non-technical
Task: Buatkan landing page HTML lengkap dengan:
1. Hero section: headline yang nyebut pain point (buka 3 app buat rekap pengeluaran)
2. 3 fitur utama dengan icon sederhana
3. Testimonial section (2 testimonial dari freelancer desain grafis dan content writer)
4. Pricing: Gratis (50 transaksi/bulan) vs Pro Rp 49K/bulan (unlimited)
5. CTA: "Coba Gratis 14 Hari"
Constraints:
- Jangan pakai gambar placeholder dari internet
- Semua copy dalam Bahasa Indonesia
- Mobile-friendly (responsive)
- Jangan pakai framework CSS, cukup inline style atau <style> tagQuiz
Apa yang paling bikin output AI jadi lebih bagus?
Live Session
Environment check — troubleshoot setup issues. Yang belum setup, pakai StackBlitz sementara.
Framing: Problem → Solution — River Crossing exercise. Tulis framing untuk ide kamu sendiri. Feedback langsung dari mentor.
Prompt Engineering di AI Studio — demo live: prompt generic vs kontekstual. Peserta coba bikin prompt untuk produk mereka.
Build + Deploy ke Cloudflare Pages — dari nol sampai live di internet. Ikuti step-by-step guide.
Custom domain — quick demo connect domain. Peserta lanjutkan di async.
Tool ecosystem: Claude Code vs KIMI CLI — demo singkat, rekomendasi per budget. Q&A.
Hands-on: Starter Template
Copy template ini ke src/App.jsx kamu. Ganti 3 placeholder dengan ide produk kamu dari River Crossing exercise tadi.
NAMA_PRODUK_KAMU
TULIS_MASALAH_YANG_KAMU_SOLVE_DI_SINI
Dibangun di AI Builder Bootcamp — W1 First Deploy
Cara pakai
- Klik Copy Code di atas
- Buka file
src/App.jsxdi VS Code - Hapus semua isinya, paste code yang sudah di-copy
- Ganti 3 placeholder: nama produk, masalah, dan outcome
- Save, lihat hasilnya di browser
Hands-on: Deploy Step-by-Step
Ikuti langkah-langkah ini untuk deploy website pertama kamu. Centang setiap step yang sudah selesai.
npm create vite@latest my-app -- --template react
cd my-app
npm install
Ganti "my-app" dengan nama project kamu. Huruf kecil, tanpa spasi.
npm run dev
Buka http://localhost:5173 di browser. Kalau lihat halaman Vite + React, sukses!
code .
Belum perlu bagus. Cukup tulis teks dulu. Nanti kita bikinin bagus pakai AI.
git init
git add .
git commit -m "first deploy"
git branch -M main
git remote add origin https://github.com/USERNAME/my-app.git
git push -u origin main
Ganti USERNAME dengan username GitHub kamu. Kalau diminta login, pakai Personal Access Token.
1. Klik Workers & Pages → Create
2. Pilih Pages → Connect to Git
3. Pilih repository "my-app"
4. Build settings:
Framework preset: Vite
Build command: npm run build
Build output: dist
5. Klik Save and Deploy
Tunggu 1-2 menit. Setelah selesai, kamu dapat URL seperti my-app-xxx.pages.dev — ini sudah LIVE!
Share URL kamu ke grup. Kamu baru saja deploy website pertama kamu ke internet!
Guided Questions
Guided Question
Tulis 1 ide yang mau kamu build. Apapun. Se-random apapun.
Tulis jawabanmu di Obsidian vault.
Guided Question
River Crossing — Dari ide itu, tulis: (a) Sisi sini = realita sekarang yang menyakitkan, (b) Sisi sana = dunia ideal setelah app kamu ada. Pakai checklist: SIAPA, APA pain-nya, BERAPA kerugian/frekuensi, OUTCOME terukur.
Tulis jawabanmu di Obsidian vault.
Guided Question
Buka Google AI Studio dan tulis prompt lengkap (pakai formula CONTEXT + BRAND + TASK + FORMAT + CONSTRAINTS) untuk generate landing page produk kamu. Screenshot hasilnya dan simpan di Obsidian vault.
Tulis jawabanmu di Obsidian vault.
Post-work
Output: Kamu punya website live, paham cara framing masalah yang tajam, bisa bikin prompt yang kontekstual, punya prototype pertama dari AI, dan semua tools sudah setup.