Claude Code untuk Non-Developer

Baris Kode Pertamamu — Tanpa Perlu Tahu Coding

Selama bertahun-tahun, coding adalah tembok yang memisahkan dua kelompok orang. Di satu sisi: orang teknis yang bisa membangun apapun dari layar hitam penuh teks. Di sisi lain: semua orang lain yang punya ide bagus tapi harus menunggu developer, membayar freelancer, atau menyederhanakan visinya sampai bisa dibangun tanpa coding.

Claude Code mengubah itu. Bukan dengan mengajarkan kamu JavaScript atau Python — tapi dengan menerima Bahasa Indonesia sebagai input dan menghasilkan kode yang berjalan sebagai output.

Kamu tidak perlu tahu apa itu variabel, fungsi, atau Git. Yang kamu butuhkan adalah kemampuan mendeskripsikan apa yang kamu mau dengan kalimat yang jelas — skill yang kamu sudah punya.

Panduan ini adalah jalan dari nol sampai website pertamamu live di internet. Tidak ada asumsi pengetahuan teknis. Tidak ada jargon yang tidak dijelaskan.

Claude Code vs Cowork — Apa Bedanya?

Sebelum mulai, penting untuk tahu kapan pakai Claude Code dan kapan Cowork sudah cukup.

Claude Chat Chatbot biasa untuk tanya jawab, draft teks, analisis, brainstorming. Output berupa teks di dalam window chat — tidak ada yang tersimpan di luar itu.

Claude Cowork Agent yang bekerja di dalam folder komputermu. Bisa buat file Word, Excel, PDF, presentasi, dan simpan langsung ke foldermu. Output ada di komputermu, bisa dibuka dengan aplikasi biasa.

Claude Code Agent yang menulis dan menjalankan kode. Output bukan file biasa — tapi website yang bisa diakses siapa saja, aplikasi yang berjalan di browser, dashboard interaktif, tools yang bisa digunakan ulang oleh siapapun dengan link.

Perbedaan yang paling penting: output Cowork ada di komputermu saja. Output Claude Code bisa dipublikasikan ke internet untuk semua orang.

Kapan pakai Claude Code, bukan Cowork:

• Kamu butuh output yang bisa diakses dari browser oleh orang lain
• Kamu butuh sesuatu yang interaktif — form yang bisa diisi, kalkulasi yang berjalan otomatis, filter data
• Kamu butuh link yang bisa dibagikan ke siapapun
• Kamu butuh sesuatu yang berjalan sendiri tanpa kamu harus buka file

Yang Bisa Dibuat Non-Developer dengan Claude Code

Ini bukan daftar teoritis. Ini hal-hal yang sudah dibuat orang tanpa background coding apapun.

Website dan Landing Page

• Landing page untuk produk atau layanan, lengkap dengan formulir kontak
• Media kit atau halaman portofolio online yang bisa dibagikan ke klien potensial
• Halaman "coming soon" untuk project yang sedang dibangun
• Website sederhana untuk bisnis kecil yang tidak perlu CMS rumit

Tools dan Dashboard

• Kalkulator custom: ROI campaign marketing, margin produk, estimasi biaya project, simulasi cicilan, kalkulasi pajak freelancer
• Dashboard tracking KPI yang bisa diupdate secara manual
• Form input data yang rapi dan bisa dikirim via email
• Tabel interaktif untuk data yang sering berubah dan perlu di-filter

Konten Interaktif

• Quiz atau assessment untuk audiens atau klien — hasil langsung muncul di akhir
• Halaman presentasi yang lebih menarik dan interaktif dari slide PowerPoint biasa
• Laporan yang bisa di-filter berdasarkan periode, kategori, atau metrik

Brief untuk Tim Teknis

• Prototype visual yang menunjukkan persis tampilan dan fungsi yang kamu mau
• Spesifikasi yang jauh lebih jelas dari dokumen Word — developer langsung paham

Setup Awal — 4 Langkah Sebelum Mulai

Setup ini hanya perlu dilakukan sekali. Setelah selesai, kamu tinggal buka Claude Code dan mulai kerja.

Langkah 1 — Download Claude Desktop App

Buka claude.com/download, download versi untuk Mac atau Windows, install seperti aplikasi biasa.

Satu hal penting: Claude Code membutuhkan akun Pro ($20/bulan). Versi gratis tidak bisa mengakses tab Code. Setelah login, kamu akan lihat tiga tab di bagian atas: Chat, Cowork, dan Code. Klik tab Code untuk mulai.

Langkah 2 — Buat Akun GitHub Gratis

GitHub adalah tempat kode proyekmu tersimpan secara online — bayangkan seperti Google Drive, tapi khusus untuk kode. Setiap perubahan yang Claude Code buat akan tersimpan di sini, dan dari sinilah website-mu akan di-deploy ke internet.

Tidak perlu mengerti cara kerjanya. Kamu hanya perlu punya akun.

1. Buka github.com → klik Sign up di pojok kanan atas
2. Masukkan email → buat username (bisa nama atau apapun yang kamu mau) → buat password
3. Verifikasi email yang dikirim GitHub
4. Pilih plan gratis — tidak perlu upgrade
5. Selesai. Akun siap.

Langkah 3 — Hubungkan GitHub ke Claude Code

1. Di Claude Desktop App, klik nama akunmu di pojok kiri bawah
2. Pilih Settings → Connectors
3. Klik Browse connectors → cari "GitHub"
4. Klik Connect → sebuah window login GitHub akan muncul
5. Login dengan akun GitHub yang baru dibuat → izinkan akses
6. Kembali ke Claude → GitHub sekarang terkoneksi

Langkah 4 — Pilih Folder dan Setting yang Tepat

Di tab Code, kamu perlu pilih folder di komputermu sebagai tempat Claude Code bekerja. Buat folder baru bernama "Claude Code Projects" di Desktop, lalu pilih folder itu sebagai working directory.

Setting yang direkomendasikan:

• Model: Opus terbaru (untuk kualitas kode terbaik)
• Auto accept edits: ON — ini penting, supaya Claude tidak berhenti dan minta izin setiap perubahan kecil

Prompt Pertamamu — Template yang Langsung Bisa Dipakai

Claude Code berbeda dari Cowork dalam satu hal penting: kamu perlu lebih eksplisit bahwa kamu tidak bisa coding, dan kamu perlu memberikan goal yang jelas — bukan instruksi teknis.

Filosofi prompt yang benar:

• Deklarasikan dari awal bahwa kamu non-developer
• Berikan goal dan success criteria, bukan spesifikasi teknis
• Minta Claude buat repository GitHub sekaligus
• Sertakan referensi visual jika ada

Template dasar yang bisa dikustomisasi:

Aku tidak bisa coding dan tidak ingin belajar coding. Kerjakan semua
hal teknis sendiri tanpa minta izinku kecuali untuk keputusan yang
benar-benar perlu masukan dariku.

Buat repository GitHub baru bernama [nama-project].

Yang aku mau: [deskripsikan apa yang kamu mau dibuat]

Ini berhasil kalau: [deskripsikan tampilannya, fungsinya, dan pengalaman
pengguna yang kamu inginkan]

Referensi visual: [URL website yang tampilannya mirip dengan yang kamu mau,
atau deskripsikan jika tidak ada]

Contoh 1 — Landing page untuk layanan konsultasi:

Aku tidak bisa coding. Kerjakan semua hal teknis tanpa minta izinku.

Buat repository GitHub bernama landing-konsultasi-marketing.

Yang aku mau: landing page untuk jasa konsultasi marketing digital.
Target klien adalah pemilik UMKM yang mau mulai iklan online tapi
tidak tahu caranya.

Halaman ini harus punya:
- Hero section dengan headline yang kuat dan tombol "Konsultasi Gratis"
- Section yang jelaskan 3 masalah klien dan bagaimana aku bantu
- Testimoni dari 3 klien (aku akan isi teksnya nanti)
- Form kontak sederhana: nama, email, nomor WA, dan dropdown
  untuk pilih jenis bisnis

Referensi visual: saya suka tampilan yang bersih, warna dominan biru
gelap dan putih, tidak terlalu banyak animasi.

Contoh 2 — Kalkulator margin produk:

Aku tidak bisa coding. Kerjakan semua hal teknis tanpa minta izinku.

Buat repository GitHub bernama kalkulator-margin-produk.

Yang aku mau: kalkulator sederhana untuk menghitung margin produk.

Input yang perlu ada:
- Harga pokok produk (HPP)
- Target margin keuntungan (dalam %)
- Biaya operasional per unit (opsional)
- Biaya platform marketplace (opsional, dalam %)

Output yang harus muncul otomatis:
- Harga jual yang direkomendasikan
- Keuntungan bersih per unit
- Breakdown persentase setiap komponen

Tampilannya harus sederhana dan bisa dipakai di HP.

Contoh 3 — Dashboard tracking KPI tim:

Aku tidak bisa coding. Kerjakan semua hal teknis tanpa minta izinku.

Buat repository GitHub bernama dashboard-kpi-tim.

Yang aku mau: dashboard sederhana untuk tracking 5 KPI tim marketing:
jumlah leads per bulan, conversion rate, cost per lead, total spend iklan,
dan revenue dari leads.

Data diisi manual — ada tombol edit di setiap baris.
Dashboard tampilkan grafik trend per bulan dan ringkasan bulan ini vs
bulan lalu dalam bentuk persentase naik/turun.

Tidak perlu login atau database yang kompleks. Simpan data di browser saja.

Deploy ke Internet — Dari Kode ke Website Live

Setelah Claude Code selesai, kode ada di GitHub repository kamu. Tapi ini baru kode — belum jadi website yang bisa diakses orang lain. Ada satu langkah lagi: deploy ke Vercel.

Apa itu Vercel: Platform gratis untuk mempublikasikan website dari GitHub. Setiap kali kode di GitHub di-update, website otomatis ikut update. Tidak perlu setup server, tidak perlu konfigurasi teknis apapun.

Cara deploy (5 menit, gratis):

1. Buka vercel.com → klik Sign up
2. Pilih "Continue with GitHub" → login dengan akun GitHub yang sama
3. Di dashboard Vercel, klik "Add New Project"
4. Pilih repository yang baru dibuat Claude Code dari daftar
5. Klik Deploy — Vercel otomatis mendeteksi teknologi yang dipakai
6. Tunggu 1-2 menit → website live dengan URL berformat nama-project.vercel.app

Cara update website setelah live:

1. Buka Claude Code, sambungkan ke folder project yang sama
2. Ketik apa yang mau diubah dalam Bahasa Indonesia — misalnya: "Ganti warna tombol jadi oranye" atau "Tambahkan section FAQ di bawah testimoni"
3. Claude Code update kode → otomatis ter-push ke GitHub → Vercel otomatis re-deploy
4. Perubahan live dalam 1-2 menit

Cara Menghindari "Please Confirm" Berulang Kali

Meski Auto accept edits sudah aktif, Claude Code kadang masih berhenti dan minta konfirmasi — terutama untuk perubahan yang dianggap signifikan. Ini memperlambat proses dan bisa frustrating.

Solusi 1 — Tambahkan frasa ini di setiap prompt:

Kerjakan semuanya dari awal sampai selesai tanpa berhenti untuk minta
konfirmasi. Kalau ada keputusan yang perlu diambil, pilih yang paling
masuk akal dan lanjutkan. Beri tahu aku di akhir kalau ada hal yang
perlu aku review.

Solusi 2 — Buat file CLAUDE.md di folder project:

CLAUDE.md adalah "briefing permanen" untuk Claude Code — file ini dibaca otomatis setiap kali Claude Code membuka folder tersebut. Isinya adalah instruksi yang selalu berlaku untuk project ini.

Template isi CLAUDE.md yang bisa langsung dipakai:

# Project Brief

## Tentang Pemilik Project
Aku tidak bisa coding dan tidak ingin belajar coding. Semua keputusan
teknis adalah tanggung jawabmu. Kerjakan dari awal sampai selesai
tanpa minta izin kecuali ada keputusan yang benar-benar membutuhkan
masukan dariku — misalnya kalau ada dua arah yang sangat berbeda dan
dampaknya signifikan.

## Cara Bekerja
- Jangan berhenti di tengah task untuk minta konfirmasi hal kecil
- Kalau ada error, tangani sendiri terlebih dahulu
- Kalau ada keputusan desain minor, pilih yang paling clean dan simpel
- Setelah selesai, beri ringkasan singkat: apa yang dibuat, apa yang
  perlu di-test, dan apakah ada hal yang perlu aku ketahui

## Preferensi Teknis
- Gunakan teknologi yang paling stabil dan mudah di-maintain
- Prioritaskan tampilan yang bersih dan responsif (bisa dibuka di HP)
- Pastikan website bisa di-deploy ke Vercel tanpa konfigurasi tambahan

## Standar Output
- Semua teks placeholder harus jelas ditandai supaya aku tahu apa
  yang perlu aku isi
- Setiap form harus punya validasi dasar
- Website harus loading cepat

Debugging untuk Non-Developer

Sesuatu tidak berjalan sesuai harapan. Atau ada error message yang muncul. Apa yang harus dilakukan?

Prinsip utama: kamu tidak perlu mengerti error-nya. Kamu hanya perlu copy dan paste error tersebut ke Claude Code dan minta dia tangani.

Workflow debugging:

1. Sesuatu tidak berjalan atau tampilan tidak sesuai yang diminta
2. Screenshot kondisi yang salah, atau copy error message yang muncul
3. Ketik di Claude Code:

Ini tidak sesuai yang aku minta. Yang aku lihat: [deskripsikan secara
spesifik apa yang salah — warna, posisi, fungsi yang tidak bekerja].
Yang aku mau: [deskripsikan hasil yang benar].
Tolong perbaiki.

Atau kalau ada error message:

Ada error ini muncul: [paste teks error message]
Tolong identifikasi penyebabnya dan perbaiki.

Tips untuk debugging yang lebih efisien:

• Deskripsikan yang salah secara konkret — "tombol tidak bisa diklik" jauh lebih berguna dari "ini tidak bagus"
• Screenshot yang menunjukkan referensi lebih efektif dari deskripsi panjang — Claude Code bisa "lihat" gambar
• Kalau project sudah berantakan setelah banyak perubahan yang salah, minta: "Kembali ke state yang berjalan dengan baik, pertahankan semua fitur utama, hapus semua perubahan yang menyebabkan masalah"

Batasan yang Perlu Diketahui

Ini panduan yang jujur, jadi perlu disebutkan di mana Claude Code tidak bisa membantu sepenuhnya.

Aplikasi yang sangat kompleks — e-commerce dengan payment gateway, sistem manajemen enterprise dengan hak akses berlapis, atau aplikasi yang butuh keamanan data tingkat tinggi: Claude Code bisa membangun fondasi dan prototipe, tapi finishing dan hardening keamanannya butuh developer sungguhan.

Database dan autentikasi yang aman — untuk website yang menyimpan data sensitif pengguna (password, informasi pembayaran, data personal), setup yang aman membutuhkan konfigurasi teknis yang lebih dari yang bisa di-handle via prompt biasa.

Bug yang tidak langsung terlihat — Claude Code bisa menghasilkan kode yang terlihat benar tapi punya masalah yang baru muncul ketika banyak orang menggunakannya secara bersamaan. Selalu test dulu dengan beberapa skenario nyata sebelum membagikan ke publik.

Backup sebelum perubahan besar — sebelum meminta Claude Code untuk melakukan overhaul besar, minta dia backup versi yang berjalan dulu di GitHub: "Buat branch baru di GitHub untuk simpan state saat ini sebelum mulai perubahan."

Checklist Setup dan Project Pertama

• [ ] Download Claude Desktop App dan upgrade ke plan Pro
• [ ] Buat akun GitHub gratis di github.com
• [ ] Hubungkan GitHub ke Claude Code via Settings → Connectors
• [ ] Buat folder "Claude Code Projects" di Desktop sebagai working directory
• [ ] Aktifkan Auto accept edits dan pilih model Opus
• [ ] Buat file CLAUDE.md di folder project dengan template dari Section 7
• [ ] Tulis prompt pertama menggunakan template dari Section 5
• [ ] Setelah Claude Code selesai, buat akun Vercel dan deploy
• [ ] Test website dari HP dan laptop — cek semua tombol dan form berfungsi
• [ ] Bagikan link ke satu orang untuk feedback sebelum promosi lebih luas

Kamu tidak perlu jadi developer untuk memanfaatkan teknologi coding. Claude Code mengubah kemampuan mendeskripsikan sesuatu dengan jelas menjadi skill teknis yang cukup — dan itu adalah skill yang kamu sudah miliki sejak lama.