Viberouter Blog

Tag: vibe coding

  • Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI

    Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI

    Tooling Stack Vibe Coding 2026: Claude Code + Context7 + GitHub PR + CI

    Vibe coding yang bagus bukan cuma soal “AI bisa nulis kode”. Kalau workflow-nya berantakan, AI malah mempercepat kekacauan.

    Di 2026, stack yang masuk akal untuk developer dan tim kecil bukan lagi sekadar chat AI + copy paste. Kamu butuh alur yang membuat AI:

    • paham konteks,
    • bekerja dalam scope kecil,
    • menghasilkan diff yang bisa direview,
    • dan tetap lolos quality check sebelum masuk production.

    Salah satu stack yang praktis: Claude Code + Context7 + GitHub PR + CI.

    Komponen 1: Claude Code sebagai coding partner di terminal

    Claude Code cocok untuk vibe coding karena bekerja dekat dengan project. Kamu bisa meminta AI membaca file, membuat plan, mengubah kode, lalu menjelaskan diff.

    Gunakan pola Spec → Plan → Diff. Detailnya di: Cara Nyusun Prompt Spec → Plan → Diff.

    Komponen 2: Context7 untuk dokumentasi resmi

    Context7 membantu memasukkan dokumentasi resmi ke prompt dengan format terstruktur agar jawaban lebih presisi dan sesuai versi.

    Baca tutorialnya: Cara Pakai Context7 untuk Nambah Dokumentasi Resmi ke Prompt.

    Komponen 3: GitHub PR sebagai gerbang review

    AI bisa membuat diff cepat, tapi tetap perlu gerbang review. PR sebaiknya berisi ringkasan perubahan, alasan, cara test, dan catatan area yang dibuat dengan bantuan AI.

    Komponen 4: CI untuk mencegah bug dasar masuk production

    CI minimal: lint, typecheck, unit test, build. Ini pagar terakhir sebelum merge.

    name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint --if-present
      - run: npm run build

    Alur kerja lengkap: dari ide ke merge

    1. Tulis spec fitur.
    2. Siapkan Context7 jika butuh dokumentasi resmi.
    3. Jalankan Claude Code.
    4. Minta plan tanpa edit kode.
    5. Review plan.
    6. Minta implementasi diff kecil.
    7. Jalankan test lokal.
    8. Buat GitHub PR.
    9. Jalankan CI.
    10. Review dan merge.

    Di mana VibeRouter masuk dalam stack ini?

    VibeRouter berperan sebagai infrastruktur API untuk workflow AI coding. Saat iterasi makin intens, kamu butuh jalur request yang stabil dan praktis.

    Mulai setup dari sini: Tutorial Claude Code Setup Awal untuk Pemula.

    Kalau sudah siap, daftar di: VibeRouter.

    Ringkasan

    Pola stack yang saya rekomendasikan:

    Claude Code → Context7 → GitHub PR → CI

    Kalau keempatnya jalan, vibe coding tidak cuma cepat, tapi juga bisa dipertanggungjawabkan. Untuk konteks awal, baca: Vibe Coding: Apa Itu.

  • Cara Bikin Website dengan AI Tanpa Coding: Panduan Praktis untuk Pemula

    Cara Bikin Website dengan AI Tanpa Coding: Panduan Praktis untuk Pemula

    Dulu, kalau kamu mau bikin website sendiri, jalurnya terasa panjang: belajar HTML, CSS, JavaScript, hosting, domain, responsive design, dan banyak istilah lain yang bikin pusing sebelum mulai.

    Sekarang jalurnya berubah. Dengan AI coding tools, kamu bisa membuat website sederhana—misalnya landing page portfolio, halaman produk, atau website bisnis kecil—tanpa harus punya basic coding yang kuat sejak awal.

    Bukan berarti skill coding jadi tidak penting. Tapi untuk banyak kebutuhan awal, kamu bisa mulai dulu dengan bantuan AI, lalu belajar sambil jalan.

    Apa yang Bisa Dibuat dengan AI Tanpa Basic Coding?

    Kalau tujuannya realistis, AI bisa sangat membantu. Contohnya:

    • landing page untuk produk digital,
    • website portfolio pribadi,
    • halaman jasa freelance,
    • mockup dashboard sederhana,
    • halaman event atau komunitas,
    • website company profile kecil.

    Yang penting: mulai dari scope kecil. Jangan langsung minta AI bikin marketplace penuh, sistem payment, dashboard admin, dan aplikasi mobile dalam satu prompt. Itu resep cepat frustrasi.

    Langkah 1: Tentukan Website yang Mau Dibuat

    Sebelum buka AI tool, jawab dulu beberapa pertanyaan sederhana:

    • Website ini untuk siapa?
    • Apa tujuan utamanya?
    • Pengunjung harus melakukan apa setelah membaca?
    • Konten apa saja yang wajib ada?

    Contoh sederhana:

    “Buat landing page untuk jasa desain logo. Targetnya UMKM. Tujuan halaman: calon klien klik tombol WhatsApp. Section wajib: hero, benefit, portfolio, proses kerja, harga mulai, FAQ, CTA.”

    Prompt seperti ini jauh lebih efektif daripada hanya menulis: “buatkan website bagus.”

    Langkah 2: Minta AI Membuat Struktur Landing Page

    Mulai dari struktur, bukan langsung kode. Ini membantu kamu mengecek apakah alur websitenya sudah masuk akal.

    Contoh prompt:

    “Bantu buat struktur landing page untuk jasa desain logo UMKM. Susun section dari atas ke bawah, jelaskan tujuan tiap section, dan berikan contoh copy singkat untuk setiap bagian.”

    Dari sini, AI biasanya akan memberi kerangka seperti:

    1. Hero section
    2. Problem yang dialami target audience
    3. Benefit layanan
    4. Portfolio atau contoh hasil
    5. Proses kerja
    6. Harga atau paket
    7. Testimoni (kalau ada)
    8. CTA akhir

    Kalau struktur sudah oke, baru lanjut ke visual dan kode.

    Langkah 3: Minta AI Membuat Kode Website Sederhana

    Setelah struktur jelas, kamu bisa minta AI membuat kode HTML/CSS sederhana.

    Contoh prompt:

    “Buatkan landing page HTML + CSS satu file berdasarkan struktur ini. Style modern, responsive mobile, warna biru-putih, tombol CTA ke WhatsApp, dan gunakan copy bahasa Indonesia yang natural.”

    Kalau kamu memakai AI coding agent seperti Claude Code, Codex CLI, atau Pi Agent, kamu bisa minta AI langsung membuat file project:

    • index.html
    • style.css
    • script.js kalau perlu interaksi sederhana

    Untuk tahap awal, jangan terlalu banyak animasi. Fokus dulu ke halaman yang rapi, cepat dibuka, dan mudah dipahami.

    Langkah 4: Review Hasil Seperti Pengunjung Biasa

    Setelah website pertama jadi, jangan langsung publish. Buka di browser dan cek dari sudut pandang pengunjung:

    • Apakah judul langsung jelas?
    • Apakah tombol utama terlihat?
    • Apakah halaman nyaman dibaca di HP?
    • Apakah informasi terlalu panjang?
    • Apakah ada typo atau kalimat yang terasa aneh?

    Bagian ini penting karena AI sering membuat output yang “terlihat benar”, tapi belum tentu enak dibaca manusia.

    Langkah 5: Minta AI Memperbaiki Bagian Spesifik

    Jangan minta revisi terlalu umum seperti “buat lebih bagus”. Lebih efektif kalau instruksinya spesifik:

    • “Buat hero section lebih jelas untuk pemilik UMKM.”
    • “Singkatkan copy benefit jadi maksimal 2 kalimat per poin.”
    • “Buat versi mobile lebih nyaman dibaca.”
    • “Tambahkan CTA WhatsApp setelah section harga.”
    • “Perbaiki spacing agar tidak terlalu padat.”

    Semakin spesifik feedback kamu, semakin bagus hasil AI.

    Tools yang Bisa Dipakai

    Ada beberapa pendekatan yang bisa kamu pilih:

    1) Chatbot AI biasa

    Cocok untuk bikin struktur, copy, dan potongan kode. Tapi kamu masih perlu copy-paste dan mengatur file sendiri.

    2) AI coding agent

    Lebih cocok kalau kamu ingin AI membuat dan mengubah file langsung di project. Contohnya Claude Code, Codex CLI, atau Pi Agent.

    3) Website builder dengan AI

    Cocok kalau kamu ingin paling cepat, tapi biasanya fleksibilitas teknisnya lebih terbatas.

    Kalau kamu ingin belajar sambil tetap punya kontrol atas kode, AI coding agent biasanya lebih menarik. Kamu bisa lihat bagaimana file dibuat, lalu perlahan memahami struktur websitenya. Kalau mau paham kenapa alur ini bisa lebih mulus, baca juga pembahasan tentang router AI untuk coding dan bagaimana layer routing membantu workflow yang lebih stabil.

    Kapan Tetap Perlu Developer?

    AI bisa membantu banyak hal, tapi ada batasnya. Kamu sebaiknya tetap melibatkan developer jika website membutuhkan:

    • payment gateway,
    • login dan sistem akun,
    • database pengguna,
    • integrasi API kompleks,
    • keamanan data sensitif,
    • dashboard admin custom,
    • performa dan SEO teknis tingkat lanjut.

    Untuk landing page sederhana, AI bisa jadi starting point yang sangat cepat. Untuk aplikasi bisnis yang kompleks, AI lebih aman dipakai sebagai asisten developer, bukan pengganti total.

    Kenapa Workflow AI Coding Bisa Lebih Enak dengan Router

    Saat kamu mulai sering memakai AI untuk eksperimen website, revisi copy, generate kode, dan debugging, request bisa cepat banyak. Di sinilah workflow mulai terasa berat kalau kamu bergantung ke satu tool atau satu model saja.

    Pendekatan seperti router AI untuk coding membantu karena request bisa diarahkan ke model yang sesuai. Task ringan tidak harus selalu memakai model paling berat, sementara task kompleks tetap bisa diarahkan ke model yang lebih kuat.

    Kalau kamu sedang mencari tool yang lebih fleksibel untuk eksperimen seperti ini, kamu juga bisa baca panduan memilih tool AI coding tanpa batas supaya workflow bikin website tetap enak saat revisi mulai banyak.

    Kalau kamu sebelumnya sudah pernah mencoba AI untuk coding tapi sering kehilangan momentum, artikel cara coding AI tanpa limit juga bisa bantu kamu menyusun workflow yang lebih stabil.

    Ringkasan + CTA

    Cara bikin website dengan AI tanpa coding dimulai dari scope kecil: tentukan tujuan, susun struktur, minta AI membuat kode, review hasil, lalu revisi secara spesifik.

    Kamu tidak harus langsung jadi programmer untuk membuat landing page pertama. Tapi semakin sering kamu memakai AI, semakin penting punya workflow yang stabil agar proses revisi dan eksperimen tidak gampang putus.

    Kalau kamu ingin mencoba workflow AI coding yang lebih fleksibel, mulai dari tool yang bisa membantu kamu tetap produktif saat membuat, menguji, dan memperbaiki website dengan bantuan AI.

    Panduan Lanjutan