← Resep AI harianKerja✓ Terverifikasi 28 Agu 2026

Buat aplikasi web kerja hanya dengan satu prompt dengan Claude Code dan Fable

Deskripsikan ide dalam satu kalimat - dapatkan kode siap pakai dan panduan interaktif langkah demi langkah dalam 10 menit.

  1. 1.Pasang Node.js (versi LTS) dari situs resmi jika belum terpasang. Periksa pemasangan dengan perintah node -v di terminal - versi akan muncul.

    Jika layanan tidak tersedia langsung di wilayah Anda, gunakan VPN saat tahap pengunduhan.

    Node.js ↗
  2. 2.Pasang Claude Code secara global melalui npm. Buka terminal dan jalankan perintah pemasangan, lalu ikuti prosedur otorisasi di konsol.

    Claude Code gratis untuk pelanggan Claude Pro dan Max. Tanpa langganan, diperlukan paket berbayar - lihat bagian biaya.

    Claude Code ↗Tentang alat ini
    Prompt
    npm install -g @anthropic-ai/claude-code
    Apa fungsi prompt iniPerintah ini memasang alat CLI Claude Code secara global. Tidak perlu mengganti apa pun - jalankan apa adanya di terminal.
  3. 3.Buat folder kosong untuk proyek, masuk ke folder tersebut di terminal dan jalankan Claude Code dengan perintah claude. Saat pertama kali dijalankan, ikuti instruksi di layar untuk menautkan akun Anthropic.

    Jika layanan tidak tersedia di wilayah Anda, diperlukan VPN untuk otorisasi.

    Claude Code ↗Tentang alat ini
    Prompt
    mkdir my-app && cd my-app && claude
    Apa fungsi prompt iniMembuat folder my-app, masuk ke dalamnya, dan menjalankan sesi interaktif Claude Code. Nama folder bisa diganti sesuka Anda.
  4. 4.Tempelkan prompt berikut ke dalam sesi Claude Code. Prompt ini akan membuat struktur proyek, logika, dan file dalam satu langkah.

    Claude Code akan membuat file di folder saat ini secara otomatis. Tidak perlu menyalin kode secara manual.

    Claude Code ↗Tentang alat ini
    Prompt
    Buat aplikasi web satu halaman bernama «[APP_NAME]» yang melakukan hal berikut: [DESCRIBE_WHAT_IT_DOES]. Gunakan HTML, CSS, dan JavaScript murni dalam satu file index.html. Buat UI yang bersih dan responsif. Sertakan judul «[APP_NAME]», formulir input, dan area hasil. Tambahkan validasi input dasar.
    Apa fungsi prompt iniPrompt ini meminta Claude Code untuk membuat aplikasi web satu halaman. Ganti [APP_NAME] dengan nama aplikasi Anda (misalnya, Task Tracker), dan [DESCRIBE_WHAT_IT_DOES] dengan deskripsi fungsi aplikasi (misalnya, memungkinkan pengguna menambah tugas, menandai selesai, dan menghapusnya). Biarkan teks lainnya apa adanya - Claude akan membuat file index.html di folder saat ini.
  5. 5.Buka situs Fable, klik Get Started dan otorisasi melalui Google atau email. Paket gratis memungkinkan membuat panduan publik.

    Jangan masukkan data pribadi atau pembayaran ke layanan pihak ketiga tanpa perlu. Fable digunakan untuk perekaman layar.

    Fable ↗
  6. 6.Mulai perekaman layar di Fable, buka file index.html di browser (klik ganda), demonstrasikan cara kerja aplikasi - masukkan data, tunjukkan hasilnya. Hentikan rekaman dan publikasikan panduan, lalu salin tautannya.

    Sebelum merekam, tutup tab dengan informasi pribadi - bisa ikut terekam.

    Fable ↗
💰 Berapa biaya untuk mengikutinyaharga per 2026-08
  • gratisNode.jsSepenuhnya gratis untuk diunduh dan digunakan.
  • langgananClaude CodeMemerlukan langganan Claude Pro ($20/bulan) atau Max ($100/bulan); tanpa langganan dapat digunakan via API dengan bayar per token. Tidak ada paket gratis.
  • gratisFablePaket gratis memungkinkan membuat panduan interaktif publik; tersedia paket berbayar untuk tim.
Coba dan jadilah yang pertama menandai

Kenapa hari ini

2
video kreator dalam 48 jam
2
kanal sumber
6,2 rb
total tayangan
Nate Herk | AI AutomationyoutubeSaluran di katalog
Борис опятьtelegramSaluran di katalog
Anthropic Docsweb
Fableweb
Anthropic Pricingweb

Layanan AI berubah cepat - antarmuka dan batas gratis bisa berbeda dari yang dijelaskan.