Koding HTML, CSS, dan JavaScript di Claude Free Tanpa Kehabisan Limit

Panduan praktis untuk pengguna paket gratis yang baru berinteraksi dengan Claude: kenapa proses koding sering terputus di tengah jalan, dan bagaimana merencanakan permintaan secara bertahap supaya hasilnya tetap utuh walaupun limit habis. Berikut catatan ringkas setelah kurang lebih 2 tahun menggunakan Claude gratis, dengan beberapa akun.

Keluhan ini sangat umum. Kamu meminta Claude membuat halaman, konten lengkap dengan HTML, CSS, dan JavaScript. Di tengah penulisan, limit pemakaian habis. Sebagian file sudah terlihat jadi tetapi belum final, dan tidak ada tombol "lanjut". Kamu harus menunggu limit di-reset pada jam tertentu.

Kabar baiknya, sebagian besar masalah ini bisa dikurangi dengan cara menyusun permintaan. Bukan dengan trik rahasia, melainkan dengan perencanaan.

Kenapa Limit Cepat Habis

Riwayat ikut dihitung

Setiap kali kamu mengirim pesan, seluruh isi percakapan sebelumnya ikut diproses ulang. Chat yang panjang membuat setiap pesan baru terasa makin mahal.

Kode itu panjang

HTML, CSS, dan JavaScript memakan banyak token. Menulis ulang satu file penuh untuk perubahan kecil adalah pemborosan terbesar.

Berpikir juga memakai kuota

Pengaturan upaya (effort) yang lebih tinggi membuat Claude menalar lebih lama sebelum menulis. Itu berguna untuk logika rumit, tetapi boros untuk edit sederhana.

Revisi beruntun

Tiga pesan kecil yang terpisah biasanya lebih mahal daripada satu pesan yang memuat ketiga perbaikan sekaligus.

Catatan: angka pasti kuota paket Free bisa berubah dan tidak ditampilkan secara rinci. Karena itu panduan ini fokus pada kebiasaan yang selalu menghemat, bukan pada angka tertentu.

Prinsip Utama: Rencanakan Dulu, Bangun Bertahap

Alih-alih meminta "buatkan -anu- lengkap", pecah pekerjaan menjadi tahap yang masing-masing menghasilkan sesuatu yang sudah bisa dipakai. Jika limit habis di tahap mana pun, kamu tidak kehilangan apa-apa yang sudah selesai.

0

Rencana dan skenario

Minta Claude menyusun daftar bagian, nama elemen, dan alur tanpa menulis kode. Hasilnya pendek dan menjadi peta untuk semua tahap berikutnya.

1

Kerangka HTML

Struktur saja: judul, bagian, input, tombol, area hasil. Belum ada gaya dan belum ada logika.

2

CSS

Tampilan, warna, tata letak, dan responsif. Gunakan awalan nama kelas yang konsisten agar aman di Blogger.

3

JavaScript

Logika perhitungan atau interaksi, dibungkus IIFE. Jika rumit, pecah lagi per fungsi.

4

Uji dan perbaiki

Coba di browser, catat kesalahan, lalu kirim sebagai satu daftar perbaikan, bukan satu per satu.

5

Penyempurnaan

Hanya bila kuota masih ada. Perbaikan kecil sebaiknya kamu kerjakan sendiri jika sudah paham HTML dan CSS.

Contoh Skenario Nyata

Misalnya kamu ingin kalkulator pH larutan asam lemah. Berikut pembagian permintaannya.

Tahap 0: Rencana

Saya ingin membuat kalkulator pH asam lemah untuk blog. Jangan tulis kode dulu. Berikan: 1. Daftar bagian halaman (maksimal 6 poin) 2. Daftar id elemen input dan output 3. Rumus yang dipakai dan urutan perhitungannya Jawab ringkas.

Tahap 1: Kerangka

Berdasarkan rencana tadi, tulis HTML kerangkanya saja (tanpa CSS dan JS). Pakai id yang sudah disepakati. Awali semua kelas dengan "ph-".

Tahap 2 dan 3: Gaya dan Logika

Sekarang tulis CSS-nya saja, tema seagreen dan putih. Jangan ulang HTML. (pesan berikutnya) Sekarang tulis JavaScript-nya saja, dibungkus IIFE, untuk menghitung pH dari Ka dan konsentrasi. Jangan ulang HTML dan CSS.

Tahap 4: Perbaikan

Hasil uji: (1) angka desimal pakai titik, harusnya koma, (2) tombol hitung tidak merespons di Blogger. Perbaiki hanya dua hal itu, tampilkan bagian yang berubah saja.

Prompt Boros vs Prompt Hemat

Situasi	Boros	Hemat
Mengubah warna tombol	"Tolong perbaiki kodenya, tombolnya kurang bagus" (Claude menulis ulang seluruh file)	"Ubah hanya warna .ph-btn menjadi seagreen, tampilkan aturan CSS-nya saja"
Ada beberapa bug	Kirim satu bug per pesan	Kumpulkan semua bug dalam satu daftar bernomor
Revisi sudah belasan kali	Lanjut di chat yang sama	Buka chat baru, tempel kode terakhir, tulis perubahan yang diminta
Permintaan awal	"Buatkan 'konten lengkap tertentu' dengan semua fitur"	Mulai dari versi inti, tambah fitur satu per satu
Edit sederhana	Effort tinggi untuk segala hal	Effort rendah untuk edit kecil, sedang hanya untuk logika rumit

Kalau Proses Sudah Terlanjur Terputus

Waspada file setengah jadi. File yang terputus sering tampak normal tetapi kurang penutup tag atau fungsi. Jangan langsung dipasang ke Blogger.

1. Salin dulu semua yang sudah dihasilkan ke penyimpanan sendiri (Notepad, Catatan, atau file lokal).
2. Cari titik putusnya. Biasanya berhenti di tengah fungsi JavaScript, di dalam aturan CSS, atau sebelum tag penutup.
3. Tunggu limit di-reset, lalu tempel potongan terakhir dan tulis: "Kode terputus di sini. Lanjutkan dari titik ini saja, jangan ulang dari awal."
4. Uji di browser sebelum ditempel ke Blogger.

Checklist Sebelum Mengirim Permintaan Kode

• Apakah ini tugas tunggal, bukan gabungan banyak tugas?
• Apakah sudah ada rencana atau skenario tahapnya?
• Apakah saya menyebut bagian mana yang boleh diubah dan mana yang jangan disentuh?
• Apakah beberapa revisi kecil sudah saya gabung dalam satu pesan?
• Apakah effort sudah sesuai tingkat kesulitan tugas?
• Apakah chat ini sudah terlalu panjang sehingga lebih baik mulai chat baru?
• Apakah saya sudah menyimpan versi kode terakhir yang berfungsi?

Pertanyaan yang Sering Muncul

Apakah ada tombol untuk melanjutkan otomatis?

Tidak selalu tersedia. Cara paling andal adalah mengirim pesan lanjutan secara manual setelah limit di-reset, disertai potongan kode terakhir sebagai patokan.

Lebih baik minta file lengkap atau potongan saja?

Untuk perubahan kecil, minta potongan yang berubah saja. Minta file lengkap hanya ketika kamu butuh versi final yang akan dipasang, dan idealnya di chat yang masih pendek.

Kapan sebaiknya mulai chat baru?

Ketika sudah banyak putaran revisi, atau ketika Claude mulai lupa atau mengulang kesalahan yang sama. Tempel kode terakhir dan tuliskan ringkasan kondisi serta perubahan yang diinginkan.

Apakah upgrade berbayar wajib?

Tidak wajib. Dengan perencanaan bertahap dan edit bertarget, banyak proyek HTML kecil sampai menengah tetap bisa diselesaikan di paket Free. Upgrade baru terasa perlu bila kamu rutin mengerjakan proyek besar dalam satu sesi.

Intinya: perlakukan Claude seperti rekan kerja yang kuotanya terbatas. Beri rencana jelas, pekerjaan kecil per tahap, dan simpan hasil di setiap langkah. Dengan begitu limit yang habis tidak lagi berarti kerja yang hilang.
Gunakan beberapa akun gratisan jika dirasa token akan habis minta buat ringkasan dan apa yang harus dikerjakan berikutnya.