Peta Interface Claude.ai

Input Box — Fitur Lengkap

Kotak input bawah bukan sekadar tempat ketik teks. Ini semua yang bisa dilakukan:

Artifacts — Output Interaktif

Ketika Claude menghasilkan konten panjang atau kode, secara otomatis muncul panel Artifacts di sisi kanan. Ini bukan sekadar tampilan — kamu bisa:

• Preview langsung — kode HTML/React bisa di-render secara live
• Copy sekali klik — tombol copy ada di pojok kanan atas Artifact
• Download — beberapa jenis Artifact bisa langsung diunduh
• Edit & iterate — minta Claude revisi, Artifact langsung update

Keyboard Shortcuts Penting

Starred Chats & Riwayat

Claude menyimpan semua riwayat chat di sidebar. Tips organisasi:

• Rename chat — klik kanan atau ⋯ di samping nama chat → Rename. Beri nama deskriptif bukan "New Chat".
• Star chat — chat penting bisa di-pin di atas sidebar.
• Delete chat — hapus chat yang sudah tidak relevan untuk menjaga sidebar bersih.

Memory — Preferensi yang Diingat

Claude punya fitur Memory yang menyimpan fakta tentang kamu lintas semua percakapan. Untuk mengaktifkan:

📺 Video Tutorial

• 🎬 10 Menit Paham Pakai Claude
• 🎬 Claude Artifacts — cara pakai & tutorial

Tiga Model Claude

Cara Ganti Model

Token: Cara Kerja

Token adalah unit terkecil yang diproses AI. Analoginya seperti "suku kata" untuk komputer.

Estimasi Token

• 1 token ≈ 4 karakter ≈ ¾ kata bahasa Inggris
• 1 halaman A4 teks ≈ 500–750 token
• 1 gambar resolusi sedang ≈ 200–500 token
• 1 file PDF 10 halaman ≈ 5.000–8.000 token

Cek Sisa Kuota

Settings → Usage — lihat berapa pesan yang sudah terpakai. Notifikasi otomatis muncul di chat kalau sudah mendekati limit.

5 Cara Hemat Token

📺 Video Tutorial

• 🎬 Claude Models Explained — Haiku, Sonnet & Opus
• 🎬 Token & Context Window — penjelasan sederhana

Anatomi Prompt yang Baik

Prompt yang efektif punya 4 komponen. Tidak semua harus ada setiap saat, tapi semakin lengkap semakin baik hasilnya.

Teknik: Caveman Prompting

Buang semua basa-basi. Claude tidak butuh kata "tolong" atau "bisakah kamu". Langsung ke inti.

Teknik: Berikan Contoh (Few-shot)

Kalau mau output dengan format atau gaya tertentu, tunjukkan contohnya. Claude akan meniru pola itu.

Kategorikan feedback pelanggan berikut. Format seperti contoh ini:

Contoh:
Input: "Aplikasinya lambat banget waktu upload foto"
Output: [Bug/Performance] Upload foto

Sekarang kategorikan:
1. "Tombol checkout tidak bisa diklik di iPhone"
2. "Warna tampilannya kurang enak dilihat"

Teknik: Chain of Thought

Untuk masalah kompleks, minta Claude berpikir step by step sebelum menjawab.

Sebelum menjawab, tuliskan dulu langkah-langkah logis yang kamu
pakai untuk sampai ke kesimpulan.

Pertanyaan: Apakah strategi harga penetration pricing cocok
untuk produk SaaS B2B yang kami launch bulan depan?

Teknik: Iterasi via Edit

Jangan expect output sempurna di percobaan pertama. Workflow yang lebih efisien:

Teknik: Role Stacking

Untuk analisis komprehensif, minta Claude menjawab dari beberapa perspektif sekaligus.

Analisis proposal bisnis ini dari 3 perspektif berbeda:
1. CFO yang skeptis soal ROI
2. Head of Marketing yang fokus ke brand impact
3. Tech Lead yang khawatir soal implementasi

Berikan masing-masing perspektif dalam 2-3 paragraf singkat.

Prompt Template yang Sering Berguna

# Summarize dokumen
"Baca dokumen ini dan buat ringkasan eksekutif maks 200 kata.
Fokus pada: keputusan yang perlu diambil, risiko utama, next steps."

# Analisis data
"Data ini berisi [jelaskan]. Temukan 3 insight terpenting dan
buat rekomendasi aksi yang spesifik untuk masing-masing."

# Improve teks
"Perbaiki teks ini. Pertahankan semua fakta dan poin utama.
Tujuan: lebih jelas, lebih singkat, nada lebih profesional."

# Brainstorm
"Generate 10 ide untuk [tujuan]. Untuk setiap ide:
- 1 kalimat deskripsi
- Hambatan utama
- Estimasi effort (rendah/sedang/tinggi)"

📺 Video Tutorial

• 🎬 Getting Started with Projects in Claude.ai (Anthropic)
• 🎬 Vibe Coding Tutorial for Beginners 2026 — Build with AI

Apa itu Project?

Project adalah ruang kerja di Claude yang menyimpan tiga hal sekaligus: instruksi permanen (Custom Instructions), dokumen referensi (Project Knowledge), dan semua chat yang terkait tugas itu. Setiap chat baru dalam satu Project otomatis punya akses ke semuanya.

Buat Project Pertama

Template Custom Instructions

## Peranmu
Kamu adalah asisten senior untuk tim Marketing PT [nama perusahaan].

## Konteks bisnis
- Industri: [jelaskan]
- Target audience: [jelaskan]
- Produk utama: [jelaskan]
- Kompetitor utama: [jelaskan]

## Cara kerjamu
- Selalu gunakan Bahasa Indonesia profesional
- Jawaban harus actionable, bukan teori saja
- Format output default: heading H2, bullet points, bold untuk poin penting
- Kalau tidak yakin, tanya dulu jangan asumsi

## Yang tidak boleh dilakukan
- Jangan beri saran yang butuh budget besar tanpa diminta
- Jangan gunakan jargon terlalu teknis

Apa itu Skill?

Skill adalah instruksi spesifik yang mendefinisikan satu kemampuan Claude — cara dia berperilaku untuk jenis tugas tertentu. Skill dibuat sebagai file SKILL.md dan diunggah ke Project Knowledge.

Yang membuat Skill powerful: Claude auto-trigger skill berdasarkan konteks percakapan. Kamu tidak perlu mengetik nama skill-nya — cukup mulai dengan tugas yang sesuai.

Struktur SKILL.md

---
name: weekly-report-generator
description: >
  Aktif ketika diminta membuat weekly report, laporan mingguan,
  atau recap aktivitas periode tertentu
---

## Tugasmu
Generate weekly report dari data yang diberikan.

## Format output wajib
1. **Executive Summary** (3 kalimat, untuk atasan yang sibuk)
2. **Highlight Minggu Ini** (3-5 bullet points, achievements)
3. **Tantangan & Blocker** (apa yang menghambat, butuh bantuan apa)
4. **Rencana Minggu Depan** (maks 5 item dengan PIC dan deadline)

## Aturan
- Gunakan angka/data konkret, bukan kata-kata umum
- Kalau data tidak lengkap, tandai dengan [DATA DIBUTUHKAN]
- Nada: profesional tapi tidak kaku

Contoh Use Case Skills per Profesi

📺 Video Tutorial

• 🎬 Getting Started with Projects in Claude.ai (Anthropic)

Install Claude Desktop

Fitur Cowork

Cowork adalah mode Claude Desktop di mana Claude bisa melihat layarmu, baca file lokal, dan menjalankan aksi di komputer — dengan izinmu. Muncul sebagai tab tersendiri di sidebar kiri aplikasi.

Setup Dispatch (Akses dari HP)

MCP — Model Context Protocol

MCP adalah protokol yang memungkinkan Claude terhubung langsung ke aplikasi dan layanan eksternal — tanpa harus upload file atau copy-paste data. Claude bisa read dan write ke sistem yang terhubung secara real-time.

Connector yang Tersedia

Cara Tambah Connector

📺 Video Tutorial

• 🎬 Claude Gmail Connector Tutorial

Kenapa Perlu GitHub?

Buat Akun GitHub

Buat Repository Pertama

Repository (repo) adalah folder project di GitHub. Setiap project punya repo sendiri.

Anatomi Halaman Repo

Edit File Langsung di GitHub

Untuk perubahan kecil, tidak perlu download ke komputer dulu:

📺 Video Tutorial

• 🎬 Cara Menggunakan GitHub untuk Pemula

Konsep Dasar Git

Setup Git di Komputer (Sekali Saja)

# Install Git — cek dulu apakah sudah ada
git --version

# Kalau belum: download dari git-scm.com

# Konfigurasi identitas (nama & email harus sama dengan akun GitHub)
git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

# Verifikasi
git config --list

Workflow Harian: Clone → Edit → Commit → Push

git clone https://github.com/username/repo-name.git

git commit -m "feat: tambah halaman kontak"

git push origin main

Bekerja dengan Branch

# Buat branch baru untuk fitur
git checkout -b nama-fitur

# Kerjakan perubahan, lalu commit seperti biasa

# Push branch ke GitHub
git push origin nama-fitur

# Setelah selesai, merge ke main via Pull Request di GitHub

Perintah Git Darurat

# Batalkan perubahan yang belum di-commit (hati-hati: tidak bisa undo!)
git checkout -- nama-file.txt

# Lihat riwayat commit
git log --oneline

# Ambil perubahan terbaru dari GitHub
git pull origin main

# Kalau terjadi conflict saat pull
# Edit file yang conflict (tandai <<<< HEAD ====),
# lalu commit ulang setelah resolve

📺 Video Tutorial

• 🎬 Git Pemula — clone, add, commit, push, pull

Install GitHub Desktop

Clone Repo via Desktop

Commit & Push via Desktop

📺 Video Tutorial

• 🎬 Cara Upload ke GitHub dengan GitHub Desktop

Kenapa Vercel?

Vercel adalah platform hosting yang paling populer untuk web app modern. Deploy semudah connect repo GitHub — Vercel handle sisanya: build, CDN global, HTTPS otomatis, domain gratis .vercel.app.

Buat Akun Vercel

Deploy Project Pertama

Preview Deployments

Setiap push ke branch selain main (misalnya feature branch) otomatis mendapat URL preview tersendiri — nama-branch.nama-project.vercel.app. Berguna untuk review sebelum merge ke production.

📺 Video Tutorial

• 🎬 Cara Hosting Website Gratis di Vercel — Tutorial Lengkap

Environment Variables

API key, database URL, dan secret lainnya tidak boleh di-hardcode di kode yang masuk ke GitHub. Simpan di Vercel sebagai Environment Variables — aman, tidak terekspos di repo.

# Di kode (Node.js/Vite), akses env var seperti ini:
process.env.ANTHROPIC_API_KEY    # Node.js
import.meta.env.VITE_API_KEY     # Vite (harus prefix VITE_)

Custom Domain

Monitoring & Logs

📺 Video Tutorial

• 🎬 How to Add Environment Variables in Vercel

Replit vs GitHub + Vercel

Buat Akun Replit

Dashboard — Peta Menu Utama

Setelah login, kamu akan melihat dashboard utama. Ini semua menu dan fungsinya:

Buat Repl Baru

Import dari GitHub

Anatomi Interface Editor — Semua Bagian

Ini peta lengkap interface Replit saat kamu membuka sebuah Repl:

1. Sidebar Kiri — Navigasi & Tools

2. Area Editor — Tempat Coding

3. Panel Bawah — Console & Shell

4. Panel Kanan — Preview & Output

Untuk web app, panel kanan menampilkan preview langsung dari kode yang dijalankan. Untuk backend/API, panel ini menampilkan URL endpoint. Bisa di-pop out ke tab baru untuk layar lebih lega.

Keyboard Shortcuts Penting

Fitur Replit Agent — AI Building App

Replit Agent adalah AI yang bisa membuat aplikasi lengkap dari instruksi bahasa manusia. Kamu cukup describe apa yang ingin dibuat, dan Agent akan:

• Memilih framework dan tech stack yang tepat
• Membuat struktur file dan folder
• Menulis kode dari awal
• Install dependencies
• Menjalankan dan test
• Fix error secara otomatis

Fitur Replit Deployments

Replit punya built-in deployment — tidak perlu pindah ke Vercel/Netlify. Semua bisa diakses dari tombol "Deploy" di pojok kanan atas editor.

Settings Penting di Replit

Tips Penting untuk Pemula

📺 Video Tutorial

• 🎬 Replit — Platform Coding Online Gratis (Deddy Corbuzier)
• 🎬 Replit Agent Tutorial 2026

Metode 1: Build dengan Replit Agent (Paling Mudah)

Replit Agent bisa membuat app dari deskripsi bahasa manusia — cocok untuk yang tidak mau menulis kode manual.

Buat website portofolio single-page dengan:
- Header: foto profil bulat, nama "Nama Kamu", title "Full Stack Developer"
- Section About: bio singkat 2 paragraf
- Section Skills: grid 6 skill cards (React, Node.js, Python, dll)
- Section Projects: 3 card project dengan gambar placeholder, judul, dan link
- Section Contact: form sederhana (nama, email, pesan)
- Footer: link sosial media (GitHub, LinkedIn, Instagram)
- Desain modern, dark theme, responsive di mobile
- Gunakan HTML + CSS saja, tidak perlu framework

Metode 2: Build Manual dengan AI Chat

Kalau kamu ingin lebih kontrol atas kode, mulai dari template dan pakai AI Chat untuk bantuan.

Step 1: Buat Repl dari Template

Step 2: Edit index.html

Klik file index.html di panel kiri, lalu tulis atau paste kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portofolio — Nama Kamu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <img src="https://picsum.photos/150" alt="Foto Profil" class="avatar">
    <h1>Nama Kamu</h1>
    <p class="title">Full Stack Developer</p>
    <p class="bio">Membuat web application yang modern, cepat, dan user-friendly.
       Passionate dengan clean code dan desain yang menarik.</p>
  </header>

  <section class="skills">
    <h2>Skills</h2>
    <div class="grid">
      <div class="card">React</div>
      <div class="card">Node.js</div>
      <div class="card">Python</div>
      <div class="card">TypeScript</div>
      <div class="card">PostgreSQL</div>
      <div class="card">Tailwind CSS</div>
    </div>
  </section>

  <section class="projects">
    <h2>Projects</h2>
    <div class="grid">
      <div class="project-card">
        <img src="https://picsum.photos/400/200?random=1" alt="Project 1">
        <h3>Dashboard Analytics</h3>
        <p>Web app untuk visualisasi data penjualan dengan chart interaktif.</p>
      </div>
      <div class="project-card">
        <img src="https://picsum.photos/400/200?random=2" alt="Project 2">
        <h3>E-Commerce API</h3>
        <p>REST API untuk toko online dengan auth, cart, dan payment gateway.</p>
      </div>
      <div class="project-card">
        <img src="https://picsum.photos/400/200?random=3" alt="Project 3">
        <h3>Chat App</h3>
        <p>Real-time chat application dengan WebSocket dan private messaging.</p>
      </div>
    </div>
  </section>

  <section class="contact">
    <h2>Hubungi Saya</h2>
    <form id="contact-form">
      <input type="text" placeholder="Nama" required>
      <input type="email" placeholder="Email" required>
      <textarea placeholder="Pesan" rows="4" required></textarea>
      <button type="submit">Kirim</button>
    </form>
  </section>

  <footer>
    <div class="socials">
      <a href="#">GitHub</a>
      <a href="#">LinkedIn</a>
      <a href="#">Instagram</a>
    </div>
    <p>&copy; 2025 Nama Kamu</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

Step 3: Edit style.css

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: #0F172A;
  color: #E2E8F0;
  line-height: 1.7;
}

.hero {
  text-align: center;
  padding: 80px 20px 60px;
  background: linear-gradient(135deg, #1E293B, #0F172A);
}
.avatar { width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid #3B82F6; margin-bottom: 20px; }
.hero h1 { font-size: 2rem; font-weight: 800; }
.hero .title { color: #3B82F6; font-size: 1.1rem; margin: 8px 0; }
.hero .bio { max-width: 500px; margin: 16px auto 0; color: #94A3B8; }

section { max-width: 700px; margin: 0 auto; padding: 60px 20px; }
h2 { font-size: 1.5rem; margin-bottom: 24px; text-align: center; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card {
  background: #1E293B; padding: 16px; border-radius: 10px;
  text-align: center; font-weight: 600; border: 1px solid #334155;
}
.project-card { background: #1E293B; border-radius: 12px; overflow: hidden; }
.project-card img { width: 100%; height: 160px; object-fit: cover; }
.project-card h3, .project-card p { padding: 12px 16px 0; }
.project-card p { color: #94A3B8; font-size: 0.9rem; padding-bottom: 16px; }

#contact-form { display: flex; flex-direction: column; gap: 12px; }
#contact-form input, #contact-form textarea {
  padding: 12px; border-radius: 8px; border: 1px solid #334155;
  background: #1E293B; color: #E2E8F0; font-size: 0.95rem;
}
#contact-form button {
  padding: 12px; border-radius: 8px; background: #3B82F6; color: #fff;
  font-weight: 700; border: none; cursor: pointer; font-size: 1rem;
}

footer { text-align: center; padding: 40px 20px; border-top: 1px solid #1E293B; }
.socials { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; }
.socials a { color: #3B82F6; text-decoration: none; font-weight: 600; }

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

Step 4: Edit script.js

document.getElementById('contact-form').addEventListener('submit', (e) => {
  e.preventDefault();
  alert('Terima kasih! Pesanmu sudah dikirim.');
  e.target.reset();
});

Step 5: Klik ▶ Run

Klik tombol hijau ▶ Run di atas editor. Preview website portofolio akan muncul di panel kanan. Semua perubahan di editor akan otomatis ter-refresh (hot reload).

Install Package dari UI

Kalau project-mu butuh library tambahan, tidak perlu pakai terminal:

Environment Variables (Secrets)

API key, database URL, dan secret lainnya disimpan di Secrets — aman dan tidak terekspos di kode:

Deploy ke Internet — Step by Step

Setelah app berjalan dengan baik, saatnya publish ke URL publik:

Deploy Gratis (Static)

Cocok untuk HTML/CSS/JS tanpa backend:

Deploy Backend (Reserved VM)

Untuk app dengan server (Express, Flask, FastAPI):

Custom Domain di Replit

Gunakan domain sendiri (misal: namakamu.com) alih-alih .repl.co:

Monitoring & Debugging

Kolaborasi Real-time

Replit mendukung editing bersamaan (multiplayer) seperti Google Docs:

• Share link — klik "Share" → "Invite collaborators" → kirim link. Mereka bisa edit langsung di browser tanpa perlu install apapun.
• Multiplayer cursor — lihat cursor temanmu bergerak di editor secara real-time.
• Chat di editor — ada fitur chat built-in untuk diskusi sambil coding.
• Permissions — atur apakah collaborator bisa edit, view-only, atau run-only.

Ringkasan: Dari Nol Sampai Live

📺 Video Tutorial

• 🎬 Replit — Platform Coding Online Gratis (Deddy Corbuzier)
• 🎬 Replit Agent Tutorial 2026

Jalur A — Termux (Android)

Install Termux

Setup Awal & Install Claude Code

# Update dulu
pkg update && pkg upgrade

# Install dependencies
pkg install git nodejs python

# Verifikasi
node --version && git --version

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Login dengan akun Claude (bukan API key)
claude --login

# Jalankan
claude

Tips Termux

• Keyboard eksternal sangat disarankan — Bluetooth keyboard jauh lebih nyaman dari on-screen
• Akses storage HP: jalankan termux-setup-storage agar bisa akses folder HP dari terminal
• Background: Termux tetap jalan saat kamu switch ke app lain
• Tablet: Android tablet + keyboard eksternal adalah setup paling nyaman

Jalur B — Termius (iOS & SSH)

Apa itu Termius?

Termius adalah aplikasi SSH client yang tersedia di iOS, Android, Mac, Windows, dan Linux. Fungsinya: connect dari HP ke server remote yang sudah ada Claude Code-nya. Kamu tidak menjalankan Claude Code di HP — HP hanya jadi layar untuk kontrol server di cloud.

Install & Setup Termius

Cara Paling Mudah: SSH ke Laptop Sendiri

📺 Video Tutorial

• 🎬 Cara Daftar dan Menggunakan Claude AI

Apa yang akan diinstall

Claude Code adalah AI coding assistant dari Anthropic yang berjalan langsung di terminal. Sebelum bisa pakai, kita perlu menyiapkan lingkungan terminal yang lengkap:

🪟 Untuk Windows (CMD / PowerShell)

Panduan khusus Windows — semua langkah dari awal sampai Claude Code siap dipakai di Command Prompt atau PowerShell.

1. Install Git untuk Windows

git --version
# Output: git version 2.x.x

git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

2. Install Node.js di Windows

node --version
# Output: v20.x.x atau v22.x.x
npm --version
# Output: 10.x.x

3. Install Claude Code

npm install -g @anthropic-ai/claude-code

Tunggu sampai selesai. Verifikasi:

claude --version

4. Login ke Claude

Claude Code menggunakan autentikasi login, bukan API key. Setelah install, login dengan akun Claude-mu:

claude --login

5. Jalankan Claude Code

mkdir project-pertama
cd project-pertama
claude

Saat pertama jalan, Claude Code akan minta izin terminal. Ketik y lalu Enter untuk setuju. Mulai coding!

Untuk Mac & Linux

Ikuti langkah-langkah di bawah ini.

1. Cek Shell Terminal

Buka Terminal (Mac) atau terminal emulator (Linux). Cek shell yang kamu pakai:

echo $SHELL
# Output biasanya: /bin/zsh (Mac modern) atau /bin/bash

Mac modern pakai Zsh secara default. Linux umumnya pakai Bash. Dua-duanya sama-sama bisa untuk panduan ini.

2. Install Xcode Command Line Tools (Mac)

Mac butuh Xcode Command Line Tools — ini menyediakan compiler dan tools dasar yang dibutuhkan Git dan package manager:

xcode-select --install

Muncul pop-up → klik "Install" → tunggu selesai (5-15 menit tergantung internet). Kalau sudah terinstall sebelumnya akan muncul pesan "error: command line tools are already installed".

3. Install Homebrew (Mac — opsional)

Homebrew memudahkan install Git dan tools lainnya. Bisa skip kalau sudah punya Git dari Xcode CLI tools.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Ikuti petunjuk di terminal. Setelah selesai, tambahkan Homebrew ke PATH:

# Untuk Mac dengan chip Apple (M1/M2/M3):
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
eval "$(/opt/homebrew/bin/brew shellenv)"

# Untuk Mac Intel:
echo 'eval "$(/usr/local/bin/brew shellenv)"' >> ~/.zshrc
eval "$(/usr/local/bin/brew shellenv)"

Verifikasi: brew --version

4. Install Git

Cek apakah Git sudah ada:

git --version
# Output: git version 2.x.x

Kalau belum ada, install:

# Mac (via Homebrew)
brew install git

# Ubuntu/Debian
sudo apt install git

# Fedora
sudo dnf install git

Konfigurasi identitas Git (wajib — ini akan terhubung ke Claude Code):

git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

5. Install Node.js

Claude Code butuh Node.js versi 18 atau lebih baru. Cara termudah: pakai nvm (Node Version Manager):

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Setelah selesai, restart terminal atau jalankan:

source ~/.zshrc
# atau: source ~/.bashrc

# Cek nvm
nvm --version

Install Node.js LTS terbaru:

nvm install --lts
nvm use --lts

# Verifikasi
node --version
# Output: v22.x.x atau v20.x.x (LTS)
npm --version
# Output: 10.x.x

6. Install Claude Code

Setelah Node.js dan Git siap, install Claude Code secara global via npm:

npm install -g @anthropic-ai/claude-code

Tunggu sampai selesai. Verifikasi instalasi:

claude --version
# Output: claude-code x.x.x

7. Login ke Claude

Claude Code menggunakan autentikasi login, bukan API key. Setelah install, login dengan akun Claude:

claude --login

8. Jalankan Claude Code Pertama Kali

Buat folder project baru, masuk ke folder itu, lalu jalankan Claude Code:

mkdir project-pertama
cd project-pertama
claude

Saat pertama kali dijalankan, Claude Code akan meminta konfirmasi beberapa izin. Baca dan setujui (type y lalu Enter). Setelah itu, terminal berubah menjadi mode chat — kamu bisa mulai coding dengan AI.

Command Penting Claude Code

Ringkasan Instalasi

Kalau semua tools sudah ada di komputer, instalasi Claude Code cukup 3 langkah:

node --version                           # cek Node.js
npm install -g @anthropic-ai/claude-code  # install
claude --login                            # login dengan akun Claude
claude                                    # jalan!

📺 Video Tutorial

• 🎬 How to Install Node and NVM on Mac/macOS
• 🎬 How to Download & Install Git — Windows, Mac & Linux
• 🎬 Vibe Coding Full Tutorial for Beginners 2026 — Build App with AI

Apa itu Template Build?

Template Build Sesi Eksplorasi adalah panduan step-by-step untuk membangun tools berbasis web menggunakan AI. Template ini terdiri dari 3 bagian:

Step 1: Download / Copy Template

Template tersedia di folder MBCL Cohort 1 dengan nama file MBCL 1 Template Build Sesi Eksplorasi.md. Buka file itu di editor teks atau langsung di browser.

Step 2: Isi Bagian 1 — Konteks Proyek

Bagian ini yang paling penting. Semakin spesifik, semakin akurat hasil build-nya. Ini yang perlu diisi:

Step 3: Upload ke AI

Pilih AI yang akan kamu pakai:

Step 4: Jalankan Build Prompts

Setelah AI memahami konteks, jalankan 3 prompt berikut secara berurutan:

Step 5: Edit untuk Kebutuhan Pribadi

Setelah AI menghasilkan tools, kamu bisa minta perubahan sesuai selera:

• Ganti warna — "Ubah warna tema jadi biru navy dan emas"
• Tambah fitur kecil — "Tambah tombol reset di samping tombol submit"
• Perbaiki teks — "Ganti judul jadi [judul tools kamu]"
• Tambahkan logo — "Tambah logo di header, ukuran 40x40px, dari URL ini: ..."
• Ganti font — "Pakai font Poppins dari Google Fonts"

Step 6: Simpan & Kumpulkan ke TA

Yang perlu dikumpulkan ke dosen TA / facilitator:

📺 Video Tutorial

• 🎬 Cara Daftar dan Menggunakan Claude AI
• 🎬 Vibe Coding Full Tutorial for Beginners 2026 — Build App with AI

Sekilas Tools

🪟 Install di Windows

1. Install VS Code

2. Install Python

python --version
pip --version

3. Install Git & Node.js

Panduan lengkap Git dan Node.js untuk Windows sudah ada di Bab 15 — Install Claude Code bagian Windows. Langkah-langkahnya:

• Git: download dari git-scm.com, jalankan installer, pilih opsi "Git from the command line"
• Node.js: download dari nodejs.org (LTS), jalankan .msi, pastikan "Add to PATH" tercentang

Detail step-by-step ada di Bab 15 → bagian Windows.

🍏 Install di Mac

1. Install VS Code

2. Install Python

Mac sudah punya Python bawaan versi lama. Install versi terbaru:

brew install python

python3 --version
pip3 --version

3. Install Git & Node.js

Panduan lengkap untuk Mac sudah ada di Bab 15:

• Xcode CLI Tools: xcode-select --install (dibutuhkan Git dan compiler)
• Git: brew install git atau dari Xcode CLI tools
• Node.js: via nvm atau download dari nodejs.org

Detail ada di Bab 15 → bagian Mac & Linux.

🐧 Install di Linux (Ubuntu/Debian)

1. Install VS Code

# Download & install .deb package
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update && sudo apt install code

Atau download langsung dari code.visualstudio.com/download → pilih .deb → klik dua kali untuk install.

2. Install Python

sudo apt update
sudo apt install python3 python3-pip

# Verifikasi
python3 --version
pip3 --version

Python biasanya sudah ada di Ubuntu. Cek dulu: python3 --version. Kalau sudah ≥ 3.10, tidak perlu install ulang.

3. Install Git & Node.js

Panduan lengkap untuk Linux ada di Bab 15 — bagian Mac & Linux:

• Git: sudo apt install git
• Node.js: via nvm (disarankan) atau sudo apt install nodejs npm

VS Code Extension Penting

Setelah VS Code terinstall, tambahkan extension ini biar coding lebih nyaman:

Cara install: buka VS Code → klik ikon Extensions di sidebar kiri (atau Ctrl+Shift+X) → cari nama extension → klik Install.

Cek Semua Tools

Jalankan perintah ini untuk verifikasi semua tools sudah terinstall:

code --version          # VS Code
python3 --version      # Python
pip3 --version         # Python package manager
git --version          # Git
node --version         # Node.js
npm --version          # npm (bundled dengan Node.js)

📺 Video Tutorial

• 🎬 Cara Download dan Install Visual Studio Code — Tutorial Lengkap
• 🎬 Installing Python — Windows, macOS & Linux Setup

Cara Pakai

Prompt-prompt ini dirancang untuk digunakan secara berurutan dalam satu sesi Claude yang sama. Jalankan Stage 1–4 dulu sebelum lanjut ke Anchor dan Diverge — Claude perlu mengingat konteks sebelumnya.

Apa itu Claude Design?

Claude Design adalah mode khusus di Claude.ai di mana Claude menghasilkan tampilan visual interaktif — bukan hanya teks. Output-nya berupa mockup UI yang bisa langsung dilihat, dinavigasi, dan dijadikan referensi desain.

Cara Akses Claude Design

Struktur Prompt 5 Bagian

Prompt yang baik untuk Claude Design punya 5 komponen. Semakin lengkap, semakin akurat hasil visualnya.

Contoh Prompt Lengkap

Teknik Iterasi

Jangan expect hasil sempurna di percobaan pertama. Gunakan chat yang sama untuk revisi spesifik:

Prompt Template untuk Berbagai Kebutuhan

Apa yang Claude Design Bisa & Tidak Bisa

Workflow Claude Design untuk Workshop

Ini adalah contoh output Claude Design — sebuah aplikasi "Pantau" untuk memantau status tim secara real-time. Perhatikan hal-hal yang bikin hasilnya rapi: hierarki visual jelas, spacing konsisten, status berwarna, dan frame HP yang realistis.

Saat praktik nanti, jadikan ini patokan: bukan soal meniru persis, tapi soal standar kerapian dan detail yang bisa dicapai kalau prompt design-nya spesifik.

Cara pakai di kelas: tunjukkan mockup ini di awal, lalu minta peserta bikin versi mereka sendiri untuk kasus masing-masing — dengan kualitas detail yang setara. Tombol ⬇ Download JPEG ada di bagian bawah mockup di atas.

File Contoh Sesi 4 — Design Thinking Flow

Enam file .md dari proses Sesi 4 Kak Borrys — dari riset pengguna sampai prompt design. Klik untuk download, pakai sebagai contoh alur lengkap.

Urutannya: putuskan konsep → visualkan → pressure test → tulis build prompt. Tiap prompt menghasilkan output yang dipakai prompt berikutnya. Yang di dalam [kurung siku] wajib kamu ganti sendiri.

Board di bawah ini bisa kamu geser (pan) dan zoom langsung. Pakai sebagai panduan visual untuk mengerjakan challenge-nya. Kalau ingin layar lebih luas, buka di tab baru.

Cara pakai: ikuti alur di board, kerjakan tiap tahap pakai Claude seperti yang dilatih di Sesi 5, dan bandingkan hasilmu dengan target di board.