Judul asli: Cara Menjadi Ahli Vibe Coder dalam 6 Bulan
Bahasa Asli oleh:
Foto oleh Peggy Block Beats

presses editor: Vibe Coding tidak hanya "biarkan AI menulis kode Anda" tetapi konstruksi lengkap dari ide-ide ke produk online. Cara untuk menjadi benar-benar efektif adalah tidak mengulangi tuntutan samar-samar dan menunggu model untuk menjadi sihir, tetapi lebih untuk belajar untuk merencanakan, meminta, meninjau dan menyebarkan。

Peta jalan memecahkan Vibe Coding turun menjadi enam bulan: pertama untuk menyelesaikan Web, Git dan gudang teknologi dasar, kemudian untuk memperoleh alat-alat seperti Kursor, Claude Code; kemudian untuk belajar tip, teknik konteks, MCP, RAG, pengujian, keselamatan dan penyebaran produksi. Intinya adalah untuk tidak membuat pemula programer tradisional, tetapi untuk membantu siapa pun yang memiliki ide produk untuk menggunakan AI lebih sistematis untuk menjadikannya aplikasi nyata。

Salah satu rekomendasi yang paling penting bagi pemula bukan hanya untuk melihat kurikulum, melainkan untuk terus melakukannya. Proyek kecil, operasional, akses dan iteratif harus diselesaikan setiap bulan. Kemajuan nyata datang bukan dari berapa banyak kursus yang telah Anda pelajari, tetapi dari apakah Anda benar-benar menerbitkan produk。

Berikut ini adalah teks asli:

Vibe Coding telah menjadi salah satu keahlian pembangun yang paling dikagumi dari eksperimen Twitter kecil。

Aku baru saja putus bagaimana menjadi Koder Agenik 1% pertama。

Jendela pintu masuk awal masih terbuka, tetapi hanya milik mereka yang benar-benar melakukan hal-hal。

Masalahnya adalah bahwa kebanyakan pemula tidak tahu di mana untuk memulai. Mereka biasanya: download Cursor, masukkan ide yang samar-samar, dan kemudian bertanya-tanya mengapa itu berantakan; membaca tutorial YouTube yang tak terhitung jumlahnya, tetapi tidak pernah benar-benar membuat sesuatu; melompat ke dalam alat yang kompleks tanpa memahami bagaimana mengatur petunjuk, mengelola konteks, atau menyebarkan。

Hasil tersebut biasanya sama: Demo setengah selesai, siklus kematian dari Ørepairing Bugs dan menciptakan Bugs baru" dan ketiadaan produk online yang nyata。

Panduan ini ditujukan untuk mengatasi masalah ini. Ini adalah peta jalan rinci bulan demi bulan, dengan sumber daya yang terbukti untuk 2025-2026, meliputi setiap keterampilan yang Anda butuhkan untuk tumbuh dari nol total dasar untuk memberikan produk nyata, Vibe Coder. Setiap bulan ada tonggak sejarah dan setiap keterampilan memiliki sumber daya link。

Hanya ada satu aturan sebelum kita mulai: semuanya dilakukan dengan tangan。

Ini bukan tentang membaca, ini tentang melihat orang melakukannya, ini tentang benar-benar membuka alat, mengikuti langkah, memecahkan sesuatu, memperbaikinya, dan akhirnya menerbitkannya。

Vibe Coding, apa itu

Kata ŠVibe Coding" diusulkan oleh peneliti AI Andrej Karpati. Dia menggunakannya untuk menggambarkan pendekatan pemrograman yang sepenuhnya dipercayakan kepada AI: menerima setiap saran dari AI, tidak meninjau kode secara manual, memfokuskan semua perhatian pada menggambarkan hasil akhir, daripada menulis logika secara pribadi。

DALAM PRAKTEK, ITU BERARTI BAHWA ANDA MENGGAMBARKAN APA YANG ANDA INGINKAN PERANGKAT LUNAK DALAM BAHASA ALAM, DAN KEMUDIAN MEMBIARKAN AI MENGHASILKAN, TERBALIK, MENGUJI DAN MEMPERBAIKI KODE UNTUK ANDA。

Tapi kebanyakan pemula cenderung mengabaikan satu hal: Vibe Coding tidak pasif menunggu, itu bukan sihir. Ini adalah proses terstruktur yang pada dasarnya mengubah niat manusia menjadi perangkat lunak operasional。

KUALITAS KELUARAN YANG KUALITAS KELUARANNYA HAMPIR SEPENUHNYA BERGANTUNG PADA KUALITAS INPUT: PETUNJUK ANDA, DOKUMEN KONTEKS, KEMAMPUAN PERENCANAAN, DAN KEMAMPUAN ANDA UNTUK MENINJAU KONTEN OUTPUT AI. DAN MENGUASAI INPUT INI ADALAH INTI DARI SELURUH PERMAINAN。

Pada tahun 2026, Vibe Coding tool dibagi menjadi dua kategori luas:

Pembina aplikasi AI: mis, Loveable, Bolt dan Reprit. Alat-alat semacam itu dapat menghasilkan aplikasi berskala penuh berdasarkan deskripsi, termasuk hosting dan penyebaran. Mereka berorientasi pada pengguna non-teknis dan pengembang prototipe jalur cepat dan tidak membutuhkan lingkungan konfigurasi lokal。

Programming IDE: e.g. Kursor 3.0, Claude Code dan Windsurf. Alat-alat tersebut tertanam dalam lingkungan pembangunan dan membantu pengembang untuk mempersiapkan, debug dan kode iteratif. Mereka membutuhkan basis teknis, tetapi menyediakan kontrol yang lebih tinggi dan kapasitas kap dalam pengembangan tahap produksi serius。

Peta jalan ini akan membawa Anda ke kedua dunia: dimulai dengan keterampilan dasar yang membuat semua alat bekerja lebih baik, sebelum bergerak menuju spesialisasi。

Kapasiasiasi dasar, semua yang harus dimiliki oleh Kode Vibe

TUJUAN BULAN INI ADALAH UNTUK MEMAHAMI BAGAIMANA PERANGKAT LUNAK BEKERJA PADA TINGKAT KONSEPTUAL, SEHINGGA KODE YANG DIHASILKAN AI TIDAK LAGI TERLIHAT SEPERTI KOTAK HITAM, DAN BAHWA LEBIH CERDAS UNTUK MENGARAHKANNYA。

Kesalahan paling umum dari Koder Vibe adalah melewatkan bulan ini sepenuhnya. Mereka membuka alat, menulis petunjuk samar-samar berikut, melihat hasilnya dan bingung, lalu jatuh ke dalam apa yang sering disebut komunitas the lingkaran kematian": untuk memungkinkan AI memperbaiki Bug, dan AI untuk membuat Bug baru, dan untuk mendaur ulang。

MEREKA YANG MAMPU LOLOS DARI SIKLUS BIASANYA MEMILIKI PENGETAHUAN DASAR YANG CUKUP. MEREKA TIDAK HANYA MENANGGAPI OUTPUT AI, TAPI MEREKA BISA MEMBACANYA DAN MEMBIMBINGNYA。

Kau tak perlu jadi programer. Anda hanya perlu memiliki landasan konsep yang cukup untuk dapat mengajukan pertanyaan cerdas dan menemukan kesalahan yang jelas。

Bagaimana cara kerja kita

Sebelum Anda membangun produk Web, Anda perlu memahami infrastruktur apa yang sedang Anda kembangkan. Produk kebanyakan Vibe Coding adalah aplikasi Web. Ini berarti Anda perlu tahu apa yang klien dasar -- model server, bagaimana peramban berkomunikasi dengan ujung belakang, apa yang URL lakukan, dan apa API itu。

Sumber Daya:

Dokumen Web MDN: Cara Kerja Web
Links:https://developer.mozilla.org/en-US/docs/Learn/Getting Start with web/How the Web works
Ini adalah salah satu yang paling jelas dan paling otoritatif interpretasi peramban, server dan HTTP, dipertahankan oleh Mozilla。

MDN: HTTP Overview (free of charge)
Links:https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
Terangkan perbedaan antara GET dan POST, kode negara (200 OK, 400 Permintaan Buruk, 401 Tidak Diizinkan, 404 Tidak Ditemukan, 500 Galat Server) dan mengapa tip ini muncul dalam aplikasi Anda。

Tutorial API RET (free of charge)
Links:https://restfulapi.net/
Ini singkat, praktis dan langsung sesuai. Setelah belajar, kau akan mengerti apa yang terjadi pada setiap backend yang ditulis melalui Vibe Coding ketika memanggil API。

Apa yang perlu kau mengerti:

DARI ANDA MEMASUKKAN URL KE TERJEMAHAN SELESAI HALAMAN, APA YANG TERJADI DI TENGAH

Distinksi antara ujung depan dan belakang: ujung depan adalah antarmuka yang dilihat pengguna dan ujung belakang adalah logika server dan basis data

API ADALAH APA, PERMINTAAN ADALAH APA, RESPON ADALAH APA

APA ARTI KODE NEGARA HTTP DAN APA YANG MEREKA WAKILI KETIKA APLIKASI DEBUG

Apa itu variabel "environmental" dan mengapa kunci tidak dapat ditulis secara langsung dalam kode。

Mesin waktu Anda

Ini adalah salah satu keterampilan praktis paling penting dari seluruh pemandu. Setiap Vibe Coder serius akan menggunakan Git。

Tanpa Git, petunjuk AI buruk bisa merusak jam kerja Anda dan tidak ada jalan kembali. Dengan Git, setiap keadaan normal akan menjadi titik pemeriksaan kau bisa kembali kapan saja。

Tak ada pilihan. Ini menentukan apakah Anda membangun produk secara efisien atau apakah Anda akan memulai dari awal setiap kali AI mengacaukan。

Cara belajar adalah dengan tidak mencoba menuliskan perintah, tetapi memahami model mereka terlebih dahulu. git akan melacak perubahan berkas dari waktu ke waktu dan memungkinkan Anda untuk bergerak maju atau kembali dalam sejarah ini. Setelah kau mengerti itu, perintah menjadi alami。

Sumber Daya:

Zit untuk Vibe Coders: Apa Sebenarnya Penting
Links:https://www.youtube.com/watch?v=ADEFvP5Gw5c
Untuk Koder Vibe. Melalui proyek Next.js yang nyata, berbicara tentang penambahan guit, bagian Git, git push, git pull, cabang dan roll back。

(Pedoman bebas, DeepakNess.com)
Links:https://deepakness.com/blog/git-for-vibe-coders/
Panduan tersebut ditujukan untuk pengembang AI auksilier pada akhir 2025, yang meliputi alur kerja harian Git dari Vibe Coder, termasuk penyerahan setiap 15-20 menit, dan memeriksa perubahan dengan diff git sebelum menerima perubahan generasi AI。

Belajar bahasa Git Blanching (bebas, interaktif)
Links:https://learkitbranching.js.org/
Salah satu alat visual terbaik untuk memahami percabangan dan penggabungan dapat dijalankan langsung di browser tanpa perlu mengatur lingkungan。

Keterampilan GitHub (bebas, interaktif)
Links:https://skills.github.com/
Kursus interaktif resmi GitHub, yang dilakukan langsung di GitHub。

Fokus pada:

ini bukan ide yang bagus, itu ide yang bagus, itu ide yang bagus

\") membuat cabang baru sebelum memulai fungsionalitas baru

view sejarah log menggunakan guit log dan unmodified dengan guit kembali

.gitignore file dan menambahkan file .env sebelum dorongan pertama

Gunakan cabang fungsional saat bereksperimen dengan AI: pertama membuat cabang, kemudian gabungkan dalam cabang。

Mulai sekarang, setiap proyek yang kau lakukan pasti ada di gudang GitHub tanpa kecuali。

HTML dasar, CSS dan melek huruf JavaScript

Kau tidak perlu menjadi pengembang terdepan. Anda hanya perlu dapat memahami komponen yang dihasilkan oleh AI dan memahami secara umum apa div, tombol, klik dan usestate。

INI AKAN MEMAKAN WAKTU SEKITAR SEMINGGU, TETAPI ANDA AKAN MENGHEMAT BANYAK WAKTU KETIKA ANDA PERLU MENGARAHKAN MODIFIKASI AI DARI BAGIAN SPESIFIK DARI ANTARMUKA。

Sumber Daya:

Proyek Odin: Yayasan (bebas, belajar sendiri)
Links:https://www.theodinproject.com/paths/foundations
Salah satu kursus dasar gratis terbaik di Internet. Anda hanya perlu mempelajari HTML Foundation, CSS Foundation dan JavaScript Basics. Kecepatan sederhananya sekitar 1-2 minggu。

freeCodecamp: Desain Web Bebas
Links:https://www.freecodecamp.org/learn/2022/responsif-web-design/
PARWN Tidak ada lingkungan yang perlu dikonfigurasi berdasarkan praktik peramban. Proyek Odin yang bisa melengkapi。

JavaScript.info (referensi bebas)
Links:https://javascript.info/
Saat ini salah satu dokumen JavaScript yang paling jelas. Bila AI menghasilkan kode yang tidak Anda mengerti, Anda dapat menggunakannya sebagai referensi. Ini setara dengan MDN dari interpretasi JavaScript。

Fokus pada:

UNSUR, ATRIBUT, HUBUNGAN TERTANAM, DAN STRUKTUR HALAMAN

Pemilih, Flexbox, dan mengapa antarmuka menampilkan gaya

JavaScript: arti dari variabel, fungsi, array, objek dan async/wait

Yayasan React Isabel: Apa itu komponen, apa itu prop dan negara。

Pilih teknologimu dan tetap pada itu

Salah satu kesalahan paling umum dari pemula adalah perubahan terus-menerus dari kerangka kerja。

MODEL AI DILATIH PADA KODE TERBUKA. MEREKA TAMPIL SECARA SIGNIFIKAN LEBIH BAIK PADA BAR TEKNOLOGI POPULER DAN TERDOKUMENTASI DENGAN BAIK DARIPADA TEKNOLOGI PINTU DINGIN. WASIT TEKNOLOGI YANG LEBIH POPULER ADALAH, KURIKULUM YANG LEBIH RELEVAN, KASUS DAN DATA PELATIHAN, SEMAKIN TINGGI KUALITAS OUTPUT AI。

Pada tahun 2026, gudang teknologi direkomendasikan ke Vibe Coder dimulai:

Frontend: React, digunakan melalui Next.js (App Router)

Ekor:

Pangkalan Data + Autentifikasi: Supabase (Postgres database, autentikasi, penyimpanan, semua digunakan melalui API)

Ledakan: Vercel

Bahasa: Lebih suka TipeScript atau JavaScript。

GUDANG TEKNOLOGI INI RAMAH UNTUK STARTER, SEPENUHNYA DIHOST, COCOK UNTUK PENGEMBANGAN DUKUNGAN AI, DAN MEMUNGKINKAN ANDA UNTUK PERGI ONLINE DARI DATABASE TANPA MENGELOLA INFRASTRUKTUR SERVER DAN MERILIS SELURUH PRODUK STACK。

Ini juga salah satu rumah teknologi paling umum di dunia, jadi alat AI sangat akrab dengan itu。

Sumber Daya:

Selanjutnya.js Kursus resmi: Pelajari Next.js (bebas, interaktif)
Links:https://nextjs.org/learn
Kursus interaktif resmi akan membangun sebuah aplikasi dashboard lengkap langkah demi langkah. Versi App Router diperbarui pada tahun 2024 dan masih dapat diterapkan。

Achiland CSS Docs (tanpa biaya)
Links:https://tailwindcs.com/docs
Khindar adalah kerangka CSS untuk kemerdekaan-pertama. Kualitasnya tinggi. Karena kepadatan data pelatihan yang tinggi, AI generasi kode tailwind biasanya bekerja lebih baik daripada kebanyakan sistem gaya lainnya。

Dok Supabese: Memulai
Links:https://subbase.com/docs/guides/getting-stard
Ia menyediakan basis data Postgres, kebijakan keamanan garis, identifikasi (mailbox, login sosial, password satu kali) dan penyimpanan berkas, yang semuanya dapat diakses melalui SDK JavaScript sederhana。

Vercel: Memulai
Links:https://vercel.com/docs/mendapat-bintang-dengan-vercel
Hubungkan gudang GitHub-mu ke Vercel, dan setiap kali kau mendorong. Seluruh konfigurasi akan memakan waktu sekitar lima menit。

Bulan - Bulan 1 tonggak sejarah

Pada akhir bulan, Anda harus dapat:

APA ITU API DAN APA YANG TERJADI KETIKA BROWSER MEMULAI PERMINTAAN

Tambahkan ke dalam repositori Git, masukkan kode, buat cabang dan dorong ke GitHub

Anda dapat membaca komponen React yang dihasilkan oleh AI dan memahami struktur perkiraannya

Buat proyek dasar Next.js dan jalankan secara lokal dengan npm jalankan dev

Sebuah halaman statik dikerahkan ke Vercel dengan menghubungkan repositori GitHub。

Bulan ke-2: penguasaan alat, Kursor 3.0, Claude Kode dan ekologi pembangun

Tujuan bulan ini adalah untuk benar-benar menguasai inti, memahami apa yang berbeda alat cocok dan menyelesaikan proyek pertama Anda lengkap。

Mulai bulan ini, Vibe Coding sebenarnya berada di tahap operasional. Alat-alat yang tersedia pada tahun 2026 sudah sangat kuat, tetapi mereka memberikan imbalan kepada mereka yang tahu cara menggunakannya, dan mereka menghukum mereka yang memperlakukan mereka sebagai "magic."。

Bagan perkakas lengkap untuk memahami (2026)

Pada tahun 2026, Vibe Coding sudah dewasa. Berikut ini adalah status dari semua alat utama yang layak dipahami pada Mei 2026。

IDE PROGRAMMING AI DARI FOG

Fits semi-teknologi untuk pembangun teknis。

Kursor Kursor 3.0
Full power AI-first editor. Free / Pro versi $ 20 per bulan. Sogodis Mendukung Agen Windows, Agen Awan Paralel, Komposer 2, Marketplace, Pelayar Internal。

Kode Claude
Aku ahli dalam pemrograman Agenic dan penalaran kode perpustakaan. Berdasarkan penggunaan, ia juga dapat digunakan melalui Claude Pro dengan biaya $20 per bulan. Saat ini Coundy mendukung plugin CLI, Kode VS, aplikasi desktop dan Webend。

Windsurf
Lebih cocok untuk pengguna bisnis dan pengembang dengan anggaran terbatas. Versi Free / Pro $15 per bulan. Agen Cascade diakuisisi oleh Google pada tahun 2025 dengan harga $2,4 miliar。

Andika GitHub Copilot
Pakaian untuk menyediakan dukungan harian di IDE manapun. Free / Pro versi $10 per bulan. Arondisemen Mendukung perkembangan lingkungan oleh VS Code, Jetbrains, Neovim, Xcode, dll。

- Cline
Untuk pengguna open-source canggih. Alat itu sendiri gratis, dibayar oleh Token API. Ini adalah plugin Kode VS yang menghubungkan Claude, GPT-5,5, Gemini atau model lokal。

Google Antigravitasi
Fiks untuk lebih Agen konstruksi paralel. Harga untuk ditentukan. Pada November 2025, menyusul Gemini 3, sebuah View "Manager" diluncurkan untuk mengelola Agen paralel。

Tidak ada kode / pembangun aplikasi penuh

Kemuatan untuk melengkapi pengguna basis nol dan pengembangan prototipe cepat。

♪ Loveable ♪
Keunggulan untuk pendiri latar belakang non-teknis dan membangun UI React. Free / Pro versi $ 25 per bulan. Anda dapat menghasilkan aplikasi rumah secara lengkap React + Supabase yang paling ramah terhadap non-programmer。

Baru
Kincir untuk dengan cepat menghasilkan aplikasi Web tanpa konfigurasi lokal. Free / Pro versi $29 per bulan. Ini sepenuhnya dijalankan di browser, dan itu baik untuk starter untuk memulai dengan cepat。

Vercel v0
Kepiawaian untuk menghasilkan komponen UI. Versi bebas / $ 20 per bulan. Lebih cocok digunakan oleh pengembang, mendukung sinkronisasi GitHub dan penyebaran langsung ke Vercel。

Koflit
Konstruksi set dan hosting terintegrasi. Versi bebas / $ 20 per bulan. Fitur yang paling lengkap, Agen 3 dapat membangun, menjalankan dan menyebarkan aplikasi secara langsung di browser。

Basis 44
SESUAI DENGAN PENGEMBANGAN ALAT INTERNAL TANPA KODE. VERSI BEBAS / $ 20 PER BULAN. UNTUK PEMBANGUN NON-TEKNIK, MENYEDIAKAN APLIKASI PEMBANTU AI DAN KEMAMPUAN BACK-END。

Saran Pilih Saran

Jika kau pemula tanpa latar belakang teknis, kau bisa mulai dengan Loveable atau Bolt.new。

Anda dapat memilih Kursor 3.0 atau GitHub Copilot jika ingin mengintegrasikan AI ke dalam alur kerja saat ini。

Anda dapat memilih Claude Code。

Anda bisa memilih 15 dolar per bulan untuk Windsurf。

Jika Anda akan membangun aplikasi level enterprise dengan tim, Anda dapat mempertimbangkan untuk diakuisisi oleh Google dan kemudian oleh Windsurf。

Sumber Daya Liar

readmap.sh: 10 Strategi Video Terbaik pada tahun 2026
Links:https://roadmap.sh/vibe-coding/best-tools
Ini adalah daftar yang dikelola komunitas alat terbaik untuk 2026。

BuildMVPFast: 10 Best
Links:https://www.bildmvpfast.com/blog/best-vibe-coding-tools-2026
Peruntukan pokok keputusan lengkap dan pembongkaran alat, informasi harga diverifikasi oleh 2026。

Perbandingan Alat Kerja Vibe (bebas, teknis.dev)
Links:https://technical.dev/posts/vibe-coding-tool-comparison
Reflit, V0, Loveable and Bolt dibandingkan dengan proyek tersebut。

Vibe Coding: Mengapa Kita Lebih Suka Angin Lebih Hidup dan Botol
Links:https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable
Berdasarkan proyek Web yang sebenarnya, penilaian tim atas empat alat dilakukan dan diterbitkan pada April 2026。

Kursor Kursor 3.0: Remodel lengkap

Kursor Kursor Kursor 3.0 dirilis pada 2 April 2026, pembaruan paling penting sejak Anyshe didasarkan pada Kode VS pada tahun 2023。

Ini bukan lagi hanya fungsi "AI yang diunggulkan pada editor berkas" alat, tetapi telah menjadi ruang kerja terpadu untuk membangun perangkat lunak dengan Agen。

Kefungsian baru Kursor 3.0.00

Jendela Agendas
Antarmuka stand-alone yang sama sekali baru dapat dibuka melalui Cmd/Ctrl+ Shifshiff+ →AgentsWindow untuk menjalankan multiple AIAgent secara paralel. Agensi zodiak dapat berjalan di mesin lokal, lingkungan awan, SSH atau Git workstream pada saat yang sama。

Penggubah 2
Kursor ' s belajar sendiri model pemrograman maju, didedikasikan untuk pengeditan kode multi dokumen dan pelatihan iteratif。

Abad Awan
Agen Runs di sebuah kotak pasir awan terpencil. Kau bisa memulai misi dan kembali lagi nanti dan memeriksa hasilnya. Perusahaan ini menjadi tuan rumah awan dan Agen datang online pada 25 Maret 2026。

Pelayar Internal Web
Peramban terintegrasi memungkinkan Agen untuk melihat penerapan aktual secara langsung dan untuk menguji perbaikan sendiri tanpa harus menggunakan cuplikan layar manual。

Kerusi Kursor
Barcelona menyiapkan plugin satu klik untuk membungkus Skills, Subagents, MCP Servers, Hooks dan Rules bersama-sama. Plugin yang tersedia antara lain AWS, Figma, Linear, Stripe, Vercel, Datadog, Snowflake, dll。

Moda Desain Hikmah
ANDA DAPAT KLIK DAN SERET LANGSUNG PADA ELEMEN UI YANG DIRENDER OLEH PERAMBAN SEHINGGA AI MENYUNTING BAGIAN YANG SESUAI DENGAN PRESISI. TAK PERLU LAGI MENGGAMBARKAN LOKASI SEBUAH KOMPONEN DALAM KATA-KATA。

Organisasi
Fungsi ini diterbitkan pada tanggal 5 Maret 2026. Ini adalah Agen permanen yang dapat dipicu oleh peristiwa eksternal seperti misi waktu, pesan Slack, isu Linear, insiden GitHub dan peringatan PagerDuty. Agen akan memulai kotak pasir awan dan menggunakan MCP yang telah kau atur untuk menjalankan misimu。

Pandangan Diff Baru Andika
Arondisemen Mendukung ulasan perubahan tingkat kata, penghematan sementara dan pembuatan Pull Request, dan seluruh proses dapat dilakukan di dalam Agenda Windows。

perintah /pekerja /pekerjaan
Biarkan tugas berjalan dalam fit worktree berdiri sendiri untuk menghindari Agen bekerja untuk mencemari cabang utama。

perintah /best-of-n
Walks, tugas yang sama berjalan dalam beberapa model dan mengembalikan hasil terbaik。

Sumber Daya Liar

Kursor Kursor Changelog: 3.0 (tidak resmi, bebas)
Links:https://cursor.com/changelog/3-0
Kursor 3.0。

Apa Kursor 3
Links:https://www.datacamp.com/blog/kursor-3
Untuk Kursor 3.0. Salah satu teks yang paling lengkap dari setiap fungsi baru, diterbitkan pada 7 April 2026。

Kursor 3 Perubahan Segalanya untuk Coding Ekonomi
Links:https://www.youtube.com/watch?v=HTKGyLar8AU
Sebuah demonstrasi lengkap dari Argentinas Windows, Composer 2, built-in browser, paralel Agen dan Marketplace oleh proyek nyata。

Kursor Kursor Tutorial 2026: Pelajari AI Coding in 15 Minutes
Links:https://www.nxcode.io/resources/news/cursor-tutorian-beginners-2026
Panduan langkah demi langkah untuk pemula yang meliputi Composer, Agen Mode dan Cloud Ages。

Build Fast with Alp: Kursor 3 vs Google Antigravitasi
Links:https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026
\"Abid Compances Cursor 3.0\" dengan \"AIDE Antigravitasi\" baru Google。

Claude Code: Alat Coding Aktitik yang memahami seluruh repositori

Claude Code adalah alat pemrograman endogene Agenika yang diluncurkan oleh Antropik。

Tak seperti alat IDE yang bekerja terutama di sekitar berkas terbuka, Claude Code dapat membaca seluruh perpustakaan kode, menyimpulkan melintasi beberapa berkas, menjalankan perintah, menangani operasi Git, dan melakukan tugas multilangkah secara otonom, meminta persetujuan Anda pada setiap langkah。

Kini sudah tersedia di empat lingkungan: terminal CLI, plugin Kode VS, IDE Jetbrains dan aplikasi desktop。

Bagaimana untuk memulai

Anda perlu langganan Claude Pro, $20 atau lebih per bulan, dan Anda perlu menggunakan terminal pada MacOS, Linux atau Windows 11。

pasang melalui npm:

code

Penyusun:

cd. cd ~/projects/my-app & claude

Mulai dengan tip tambahan:

Apa yang proyek ini lakukan?

Ini akan memungkinkan Claude untuk menganalisis perpustakaan kode Anda sebelum ia mengubah apa pun。

Core Core Workstream: Kode Rencana Excelre

Eksplorasi
Afficial Press Shift + Tab dua kali untuk memasukkan Plan Mode. Claude akan membaca dokumen dan menjawab pertanyaan, tetapi tidak akan mengubah apa pun. Model ini memungkinkan Anda untuk memahami struktur proyek, melacak aliran data, menyisir struktur perpustakaan kode。

Perencanaan
Dalam Plan Mode, biarkan Claude membuat rencana realisasi. Kau harus meninjaunya, baik-baik saja dan melawan bagian-bagian yang tidak setuju. Pergi ke depan" hanya setelah konfirmasi。

Kode kode:
Potong kembali ke Normal Mode. Claude akan berfungsi seperti yang direncanakan, menampilkan diff dan meminta persetujuan Anda di setiap langkah。

Panitia Zeki: Serahkan
tinjau diff, jalankan tes, kemudian selesaikan dengan penyerahan yang jelas。

Apa itu CLUDE.md

CLUDE.md adalah berkas Markdown dalam direktori root proyek untuk memberitahu Claude Code:

Bagaimana proyek Anda bekerja

Perjanjian yang harus diikuti

Perintah mana yang harus dijalankan

Tak ada yang bisa diubah。

Kau bisa lari

@claude /init

Kocherford untuk menghasilkan versi awal dan kemudian menyesuaikannya sesuai dengan konteks proyek。

Sumber Daya Liar

silder.io: Cara Menggunakan Kode Claude
Links:https://www.bilder.io/blog/how-to-use-claude-code
Saat ini merupakan salah satu kursus Claude Code Presbyterians yang paling lengkap yang meliputi instalasi, alur kerja Plan Mode, pengaturan CLADE.md dan praktik terbaik, diterbitkan pada April 2026。

Kode Claude lengkap Tutorial untuk Pemula Non-Technical (YouTube, gratis)
Links:https://www.youtube.com/watch?v=bqJziWAEn40
tutorial video langkah demi langkah untuk membangun aplikasi dari Claude Code, tanpa pengalaman pemrograman, diterbitkan pada April 2026。

Claude Code Full Courage; 4 Jam
Links:https://www.youtube.com/watch?v=QoQBzR1NIqi
Saat ini merupakan salah satu kursus video Claude Code yang paling lengkap, meliputi proses penuh dari konfigurasi ke rilis produk dan penjualan。

Claude Code Tutorian for Beginners 2026 (pedoman bebas, Dev.to)
Links:https://dev.to/ayyazzafar/claude-code-tutorian-untuk-pemula-2026-dari-pembangun-ke-membangun-mu-pertama-proyek-1ma
Sesi teks, meliputi instalasi, konfigurasi akhir, dan konstruksi proyek pertama。

Diterjemahkan oleh :
Links:https://paulgp.substack.com/p/mendapat-bintang-dengan-claude
Hal ini khususnya tepat untuk memahami prinsip menjadi cukup spesifik, konteks manajemen jendela, dan pengingat yang iteratif。

OpenSaaS.sh: Cara Terbaik untuk Mengadakan Kode Saas pada tahun 2026
Links:https://docs.opensaas.sh/blog/2026-03-16-terbaik-jalan-ke-vibe-kode-saas-2026/
Pengantar Saas Vibe Coding: Claude Code + Structed SaaS Template + LLM dokumen ramah (llms.txt). Ini juga mencakup bagaimana menjalankan server pengembangan backstage sehingga Claude dapat melihat log real-time dan bagaimana mengotomatisasi peramban melalui Chrome DevTools MCP。

2 tonggak sejarah bulan

Pada akhir bulan, Anda harus dapat:

Pemilihan alat yang sesuai untuk jenis proyek yang berbeda

Gunakan Kursor 3.0. , Jendela Genents untuk melaksanakan tugas melalui Agen Awan

Sebelum menulis kode apapun, rencana dengan Claude Code's Plan Mode

----- ---------------------------------------------------------------------------------------------------------

Membangun dan mengerahkan setidaknya satu proyek yang lengkap, sebuah aplikasi Web yang dapat berjalan dengan baik dan memiliki URL nyata pada baris。

Bulan/bulan/bulan/bulan/bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Bulan/ Seni petunjuk, konteks, struktur dan output stabil

Tujuan bulan ini adalah untuk memiliki kemampuan inti dari Vibe Coding, yaitu menulis petunjuk, mengatur konteks, dan memungkinkan AI untuk melakukan apa yang benar-benar Anda inginkan dalam upaya pertama yang mantap。

Dalam seluruh teknologi Vibe Coding, petunjuk adalah keahlian yang paling berpengaruh. Jika petunjuk Anda tidak jelas, alat itu sendiri hampir tidak relevan. Alat biasa dengan petunjuk yang baik selalu lebih baik daripada alat top dengan petunjuk yang samar。

Oke, Vibe Coding, bagaimana petunjuknya bekerja

Perbedaan antara yang baru dan petunjuk yang baik terletak hampir seluruhnya dalam struktur。

Para pendatang baru akan berkata:

2013 adds a login page。

Tuan akan berkata:

2011 Create Membuat halaman log masuk di app/login/page. tsux, menggunakan saluran selatan Supabase yang ada di lib/subabase.ts. Gaya formulir mengikuti aplikasi/signup/page.tsx. Mailbox dan kotak masukan password, tombol kirim, dan menangani tip kesalahan untuk voucher log masuk tidak sah. Tidak mengubah dokumen lain。

Nama yang terdahulu mungkin menghasilkan komponen yang dapat digunakan, dapat menghancurkan dokumen lain, atau memperkenalkan model yang tidak konsisten dengan perpustakaan kode saat ini. Yang terakhir lebih mungkin menghasilkan komponen yang benar-benar operasional yang konsisten dengan struktur proyek。

Petunjuk yang baik biasanya terdiri dari empat bagian:

Target: Apa fungsi ini
Dokumen mana yang relevan? Apa yang ada di proyek saat ini
Kekangan: Di mana tidak bisa diubah? Model model apa yang harus diikuti
Format keluaran: Apa yang seharusnya menjadi hasil akhirnya

Sumber Daya Liar

Antropika: Tutorik Teknik Prompt Interaktif (bebas biaya, GitHub)
Links:https://github.com/antropis/prompt-eng-interaktif-tutorian
Ini adalah kursus interaktif sembilan-chapter yang termasuk latihan yang dirancang untuk berjalan melalui Claude API di notebook Jupyter. Ini adalah salah satu yang terbaik tangan-on kursus teknik petunjuk tersedia。

ProptingGuide.ai (tanpa biaya)
Links:https://www.promptingguide.ai/
Copends konten penuh dari teknologi dari tip dasar, rantai pemikiran, beberapa-shot contoh, untuk peringatan Agenik, dan memperbaruinya pada dasar yang sedang berlangsung。

panduan Coding Vibe Ultimate (free of charge, Reddit)
Links:https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the multimate vibe coding guide/
Kedelapan belas pengalaman operasional dari Vibe Code, termasuk bagaimana menangani penyimpangan AI, bagaimana mempertahankan konsistensi antara berbagai fungsi, dan bagaimana menciptakan dokumen "Common AI Mistakes"。

Roadmap.sh: Praktek Terbaik Pengkodan Vibe
Links:https://roadmap.sh/vibe-coding/best-praktik
Sediakan 10 aturan praktik untuk membantu Anda mendapatkan hasil tetap dari alat Vibe Coding, yang telah diperbarui menjadi 2026。

Parameter first1= tanpa last1= di Authors list (bantuan) ^ (Inggris) Complete Vibe Working Guide 2026 (free guide)
Links:https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025
Melengkapi deskripsi mengenai penumpang yang Vibe Coding, cara menulis pesan yang jelas dan cara mempertahankan kontrol sebagai pembangun daripada sebagai alat。

RENCANA, KEMUDIAN TIP

Penyebab paling umum dari "cycle of death" adalah permulaan langsung dari pembangunan fungsi tanpa perencanaan apapun。

AI MENULIS KODE YANG RUSAK SESUATU, ANDA MEMPERBAIKINYA, DAN RUSAK SESUATU YANG LAIN, DAN KEMUDIAN SELURUH PROSES TURUN。

Solusinya benar-benar sederhana: menulis rencana sebelum menulis kata sandi。

Rangka kerja PRP:

Sebelum membuka alat Vibe Coding, jawablah tiga pertanyaan dalam satu dokumen:

Untuk siapa
Siapa pengguna targetnya? Bagaimana nyamannya mereka

Apa solusinya
Kosongkan nilai inti dalam satu kalimat。

Seperti apa kesuksesan
Kata khusus, kriteria yang dapat diuji。

Kemudian, ia menyerahkan dokumen ini kepada Claude atau ChatGPT, dan mengembangkannya menjadi dokumen permintaan produk penuh, atau PRD. PRD ini akan menjadi frasa pembuka Anda di Kursor atau Claude Code。

Kebiasaan ini adalah air di antara "orang yang benar-benar dapat menerbitkan produk mereka" dan "orang yang terjebak dalam siklus kematian."。

Terutama di Claude Code, Anda harus menekan Shift + Tab dua kali ke Plan Mode sebelum sesuatu terjadi. Biar Claude menunjukkan dokumen mana yang akan dibuat atau diubah, yang berfungsi akan memperkenalkan, situasi batas atau struktur mana yang perlu dipertimbangkan untuk keputusan. Anda harus meninjau rencana untuk membantah unsur mencurigakan dan kemudian mengatakan " maju" hanya setelah konfirmasi。

llms.txt: Standar untuk dokumen yang dapat dibaca AI

Salah satu teknik yang paling dinilai rendah di Vibe Coding adalah llms.txt。

Ini adalah berkas Markdown teks biasa yang ditempatkan di bawah sebuah perpustakaan, frame atau direktori root projek untuk menyediakan alat AI dengan konteks yang tepat diperlukan untuk menggunakan proyek dengan benar。

Hal ini memecahkan masalah sebagian besar dokumen perpustakaan yang dibuat dapat diakses dan dioptimalkan untuk pembacaan peramban. Model AI tidak bekerja dengan baik dengan HTML, atau halaman dokumen dan menu navigasi JavaScript. Kesemuanya.txt menghapus semua gangguan ini dan menyediakan model dengan referensi API yang bersih, terstruktur, terfokus yang dapat ditempatkan dalam jendela konteks。

dimana allms.txt dan bagaimana menggunakannya

kebanyakan perpustakaan arus utama kini menerbitkan llms.txt. misalnya:

https://docs.subabase.com/llms.txt

Anda dapat menempelkan URL ini ke Claude Code, Kursor atau ChatGPT, dan mengatakan: Baca dokumen ini terlebih dahulu, lalu bantu saya membangun fungsionalitas dengan perpustakaan ini。

Untuk pustaka yang tidak memiliki llms.txt, anda dapat menghasilkan salah satu dari anda sendiri: salinan dokumen API perpustakaan, menempelkannya ke Claude, dan kemudian mengatakan: Silakan atur dokumen tersebut menjadi format llms.txt yang jelas, yang mencakup kategori, metode, parameter dan contoh yang diperlukan. Dikendalikan dalam 5.000 token。

Brankas teknologi OpenSaaS, yaitu Claude Code + Open SaaS Boilerplate, menggunakan llms.txt untuk kedua rangka kerja Boilerplate dan Wasp. Dan itulah salah satu alasan mengapa Claude Code dapat menghasilkan kode yang jauh lebih stabil di bawah konfigurasi ini daripada gudang teknologi manapun。

Sumber Daya Liar

llms.txt Standar tanpa batas
Links:https://llmstxt.org/
peraturan resmi, yang mencantumkan perpustakaan dan kerangka kerja dari semua dokumen llms.txt yang dikeluarkan。

OpenSaas: Jalan Terbaik menuju Vibe Code a Saas pada tahun 2026
Links:https://docs.opensaas.sh/blog/2026-03-16-terbaik-jalan-ke-vibe-kode-saas-2026/
Ini adalah kasus nyata bagaimana menggabungkan llms.txt, SaaS boilerplate dan Claude Code menjadi salah satu konfigurasi Vibe Coding yang paling stabil pada tahun 2026。

Aturan Kursor dan CLAUDE.md: Perintah jangka panjang ke AI

Dokumen Kursor dan CLAUDE.md adalah salah satu praktik dengan tingkat penggunaan terendah dalam Vibe Coding tetapi output tertinggi。

INI ADALAH BERKAS PERINTAH KEAWETAN YANG AKAN AI BACA DI AWAL SETIAP SESI. MEREKA MENDEFINISIKAN PROYEKMU, KONTRAKMU, BRANKAS TEKNOLOGIMU, DAN APA YANG TAK BISA DILAKUKAN AI。

Seting Kursor Kursor untuk 2026

Kursor kini menggantikan berkas .cursorrus tunggal sebelumnya dengan .cursor/rules/katalog dan mengadopsi aturan manajemen berkas .mdc terpisah。

Aturan memiliki empat mode aktif:

Selalu Terapkan
Setiap dialog dimuat, tidak soal konteksnya。

Terlampir Otomatis (global)
otomatis diaktifkan ketika mengacu pada mode pencocokan berkas, misalnya berkas *.tsx。

Agen Yang Diminta (berdasarkan deskripsi)
AI AI DINILAI KETIKA UNTUK DITERAPKAN BERDASARKAN DESKRIPSI MISI。

Manual (nama-baru)
Hanya jika Anda secara eksplisit mengutipnya dalam petunjuk。

Apa yang hendaknya diikutsertakan oleh aturan yang baik

dokumen .cursor/index.mdc untuk menggambarkan profil proyek, gudang teknologi dan perjanjian umum, yang diusulkan untuk dimuat dalam 100 baris

Buat beberapa berkas .mdc terpisah dalam .cursor/rules/, sesuai dengan konteks spesifik, seperti autentikasi, mode basis data, komponen UI, dll

Anda menempatkan berkas CLUDE.md di root direktori untuk menulis informasi yang sama untuk Claude Code。

Sumber Daya Liar

Akademi Coding Vibe: Panduan Lengkap Peraturan Kursor + 15 Templat
Links:https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide
Ini adalah salah satu panduan yang paling rinci 2026 tentang Peraturan Kursor, yang meliputi format .mdc, empat mode pengaktifan dan sebuah template replika untuk 15 tumpukan teknologi umum。

(YouTube, gratis)
Links:https://www.youtube.com/watch?v=Ia54BXaci5o
Diskusi mendalam tentang bagaimana menetapkan aturan multilayer untuk Kursor dan Claude Code, berisi kasus nyata. Video tersebut dirilis pada pertengahan 2025, tetapi masih sepenuhnya dapat diterapkan。

Cara Membuat dan Menggunakan SKILLS.md di Kursor (YouTube, gratis)
Links:https://www.youtube.com/watch?v=DfL5 zbWGc
Pengantar ke sistem keterampilan Kursor, diterbitkan pada Februari 2026. Konten-kontennya menulis-ganti cara membuat. Kursor/pembunuhan/berkas yang dapat disebut Agen dengan perintah miring。

Direktori Kursor (bebas, komunitas)
Links:https://cursor.directory/
Katalog katalog dokumen aturan untuk kontribusi komunitas, meliputi sejumlah besar toko teknologi. Pilih sebuah berkas aturan yang cocok dengan tumpukan teknologi Anda dan kemudian menyesuaikannya。

Peraturan Kursor Luar Biasa (bebas, GitHub)
Links:https://github.com/PatrickJS/awesome-cursorrules
Repositori dari dokumen aturan berkualitas tinggi yang dipilih, diklasifikasikan oleh kerangka kerja dan terus diperbarui。

Peraturan Pencak Silat: Kursor, Claude Code, dan Windsurf
Links:https://www.concret.io/blog/sync-coding-standard-across-cursor-agentforce-vibes-claude
PENDEKATAN YANG LEBIH MAJU: OTOMATIS MENSINKRONKAN BERKAS ATURAN MASTER KE DALAM SEMUA ALAT AI MELALUI HARD LINK。

Pengembangan Spec-Driven: Vibe Coding Profesional meningkat

Pengembangan Spec-Driven Spec-Driven, sebuah pengembangan yang dispesialisasi yang disebut SDD, adalah pendekatan terspesialisasi yang muncul ketika Vibe Coding memasuki proyek nyata dan perlu diperluas。

Pendekatan ini secara resmi diperkenalkan oleh Jetbrains in the DeepLearning. AI kursus di 2026. Ia menekankan apa yang harus dilakukan melalui sistem definisi dokumen spesifikasi terstruktur sebelum Agen manapun diizinkan untuk menulis kode dan memasukkannya langsung ke dalam repositori kode。

Vibe Coding biasanya menabrak dinding sekitar bulan ketiga proyek. Model-model codes mulai menghasilkan kode-kode yang bertentangan dengan keputusan sebelumnya; konteks terkumpul; pola konflik mulai muncul; dan siklus kematian mengikuti。

Eksekusi Spec-Driven Development mencoba memecahkan masalah ini dengan mengizinkan spesifikasi, misalnya dokumen spesifikasi, daripada satu pengingat, untuk menjadi sumber faktual proyek。

ALIRAN KERJA SSD

Dokumen spesifikasi penulisan dokumen
Sebelum kode apapun muncul, jelaskan perilaku sistem dengan tepat: apa fungsi ini lakukan dari luar, apa yang masuk, ekspor, batasan dan batasan. Ini bukan tentang rincian, ini tentang perilaku yang dapat diamati。

Genap permintaan
Memberi dokumen spesifikasi kepada AI Agen untuk menghasilkan dokumen permintaan terstruktur. Apa itu menutupi segalanya? Apakah ratifikasi atau amandemen diperlukan

Cipta Dokumen Desain Baru
AI MENERJEMAHKAN PERSYARATAN YANG DISETUJUI KE DALAM RENCANA TEKNIS YANG MENGANDUNG KODE, TES, DAN TUGAS DOKUMENTASI TERTENTU. ANDA PERLU MENINJAU RENCANA SEBELUM ANDA MENULISKAN BARIS PERTAMA。

Dicapai
AI MENULIS KODE BERDASARKAN DOKUMEN SPESIFIKASI, BUKAN BERDASARKAN PETUNJUK SAMAR. LOGIKA, PEMROSESAN, DLL, DAN PERILAKU LEMBUR HARUS DIPUTUSKAN DALAM DOKUMEN SPESIFIKASI DARIPADA DALAM MODEL IMAJINASI。

Lulus dan jalankan tes
Karena dokumen spesifikasi sudah mengidentifikasi input, output dan batasan, contoh uji juga dapat dihasilkan langsung dari dokumen spesifikasi。

BUAT SSD STRUKTUR DOKUMEN YANG SANGAT EFEKTIF

maafkan aku, nona
Jelaskan apa yang kau bangun dan mengapa kau membangunnya。

.md
Pembuatan keputusan teknis terdokumentasi。

aku tidak tahu
Dia membongkar fase subproyek demi pencapaian。

specs/[nama-fitur]/plan.md
gugus tugas penomoran untuk fungsi ini。

specs/[nama-fitur]/requirements.md
Skop, pengambilan keputusan kunci dan konteks fungsi ini。

specs/[nama-fitur]/validasi.md
Kekriteriaan untuk keberhasilan dan kondisi untuk konsolidasi。

Ketika menggunakan SSD, ketika menggunakan Vibe Coding murni

Vibe Coding dapat digunakan jika itu adalah prototipe, percobaan, bukti konsep, atau arah dieksplorasi dalam 3-4 bulan peta jalan。

JIKA SUATU FUNGSI MEMERLUKAN PEMELIHARAAN JANGKA PANJANG, PROYEK MELIBATKAN PENYUMBANG KEDUA, ATAU JIKA TINDAKAN FUNGSIONAL MELIBATKAN PENGARUH KOMERSIAL ATAU HUKUM, SDD HARUS DIGUNAKAN。

Jalur kompromis adalah menjalankan "konstitusi" dengan SDD, misi, teknologi dan arsitektur; di dalam perbatasan ini, tugas spesifik dilakukan dengan Vibe Coding。

Sumber Daya Liar

Ke arah Keilmuan Data: Dari Vibe Berkoding ke Pengembangan Spec-Driven
Links:https://towardsdatascience.com/frum-vibe-coding-to-spec-diven-development/
Salah satu panduan praktisi SSD yang paling rinci saat ini berisi struktur dokumen lengkap, rencana →implement →validate loop, dan bagaimana mengotomatisasi alur kerja spesifikasi ke dalam keterampilan Claude Code。

(bebas, sumber terbuka)
Links:https://github.com/github/spec-kit
Situs web resmi gitHub Open Source Specification Driving Toolkit. Kesediaan template, spesifikasikan CLI, dan perintah terstruktur yang dapat digunakan bersama dengan Claude Code, GitHub Copilot dan Gemini CLI, termasuk /specify, /plan dan /tasks. Dia mendukung 30 pengkodean ganda。

Blog GitHub: Mulai dari Pengembangan Spec-Driven
Links:https://github.blog/ai-dan-ml/generative-ai/detik-didorong-pembangunan-dengan-ai-mendapat-dibintang-dengan-baru-membuka-sumber-alat/
Perkenalan resmi gitHub terhadap penggunaan Spec Kit mencakup empat fase: Spectify Plan Tasks Implementasi, cara memasang CLI tertentu, dan cara membangun prinsip governance proyek dengan /speckit.constitusi。

Kursus Jetbrains: Pengembangan Spec-Driving dengan Coding Agencies
Links:https://www.deplearning.ai/courts/spec-driven-development-with-coding-agents/
Formulaisasi rentalisasi kurikulum metodologi. Meliputi rencana lengkap, realisasi, siklus validasi, dan bagaimana mengotomatiskan SSD alur kerja menjadi kemampuan yang dapat digunakan kembali dalam Claude Code。

Kolab Pengujian: Dari Vibe Coding ke Pengembangan Spec-Driven (panduan bebas)
Links:https://testcollab.com/blog/dari-vibe-coding-ke-spec-diven-development
Artikel tafsiran SDD, yang tidak mengikat alat-alat spesifik, memuat kasus-kasus nyata dan menggambarkan bagaimana CLUDE.md, Peraturan Kursor dan aliran kerja GitHub Copilot PRD mencapai pola dasar yang sama。

Topi Merah: Vibes, Spec, Keterampilan, dan Zaman; Empat Rancangan AI
Links:https://pengembang.redhat.com/articles/226/03/30/vibes-specs-kills-agents-ai-coding
kerangka kerja yang lebih maju: mengeksplorasi dengan vibe, menggunakan spesifikasi untuk memastikan akurasi, segel kemampuan Agen yang dapat digunakan kembali dengan keterampilan, dan melaksanakan tugas dengan agen. Ini adalah salah satu profesi pemahaman AI mendukung pengembangan model mental yang lebih lengkap。

Praktek praktik 18 digunakan oleh masing-masing Vibe Coder tingkat ahli

Praktik-praktik ini berasal langsung dari komunitas r/ClaudeAI dan r/PromptEngineering dan divalidasi dengan pengalaman para praktisi dari tahun 2025 hingga 2026。

Mulai dengan penglihatan terperinci
Tulis semua yang kau mau sebelum kau membuka alat apapun。

Penggunaan Git dan cabang secara besar - besaran
Setiap eksperimen fungsional menciptakan cabang baru。

folder mesej dihantar:
COFFIS Membuat direktori /docs atau /interdictions untuk merekam arsitektur, komponen dan pengambilan keputusan dengan berkas Markdown。

Takrifan pembongkaran fungsionalitas ke dalam beberapa tahap
JANGAN MEMINTA AI SEKALIGUS UNTUK MELAKUKAN FUNGSIONALITAS PENUH. DISTINK MENJADI TIGA SAMPAI LIMA PETUNJUK。

Mulailah percakapan baru ketika konteks terlalu panjang
Dialog jangka panjang angois mengurangi kualitas output. Bila mengembangkan fitur baru, disarankan untuk memulai ulang sesi。

Setiap hint mengutip berkas spesifik
BERITAHU AI PERSIS FILE MANA YANG HARUS DICARI。

Jangan terlalu banyak bicara
Hanya menyebutkan dokumen yang paling relevan dan tidak meninggalkan semuanya di belakang。

Rujukan ke komponen yang ada
KETIKA ANDA MEMINTA AI UNTUK MEMBUAT KOMPONEN BARU, MENUNJUK KE KOMPONEN YANG ADA SEBAGAI REFERENSI GAYA。

Pemeriksa kedua dengan Gemini 3.5 Pro
Salin kode generasi ke Gemini untuk memeriksa celah keamanan atau pola buruk。

Selalu periksa dan bersihkan data di level layanan
Jangan pernah percaya data yang diserahkan oleh klien。

Kekunci key pada server
Gunakan variabel lingkungan untuk tidak pernah menempatkan API Key ke dalam kode depan-end。

Kesalahan pemrosesan yang dapat dilihat
SALIN INFORMASI KESALAHAN DARI KONSOL DAN TEMPELKAN KE AI。

Jika perbaikan gagal tiga kali, periksa kembali petunjukmu
JANGAN MENGGUNAKAN PETUNJUK PROBLEMATIK YANG SAMA UNTUK MEMINTA AI UNTUK MENCOBA KEEMPAT KALINYA。

AI AI AI TAMBAHKAN LOG
Ketika debugging, jangan menebak. Permintaan AI untuk menambahkan console.log ke titik kunci。

Skop objek
Jangan mengubah apapun yang tidak kuminta

Kekekalan Kesilapan Umum " berkas
CATATAN DVDO MENGULANGI KESALAHAN YANG DIBUAT OLEH AI DAN MENGUTIPNYA KETIKA MEMULAI FUNGSI BARU。

Rencana pertama, bukan kode
SELALU MEMBIARKAN AI MEMBERIKAN RENCANA DAN KEMUDIAN ANDA MENYETUJUINYA。

MARI KITA MENJELASKAN KODE ANEH
JANGAN TERIMA KODE YANG TIDAK KAU MENGERTI SAMA SEKALI. SEBELUM MELANJUTKAN, BIARKAN AI MENJELASKAN。

Milestone 3

Pada akhir bulan, Anda harus dapat:

(b) Tulis petunjuk terstruktur dan mendapatkan output stabil pada percobaan pertama

GUNA KERANGKA KERJA PRP UNTUK MENYELESAIKAN PERENCANAAN SEBELUM MEMBANGUN APLIKASI APAPUN

KLAUDE.md untuk setiap item

(b) Penerapan kebiasaan di atas 18 praktek ahli

Berkas AI Mistakes umum tersedia untuk proyek Anda。

Bulan Kerja 4: Membangun proyek nyata, dari ide ke produk online

TUJUAN UNTUK BULAN INI ADALAH MEMBANGUN 2-3 PROYEK LENGKAP DARI IDE KE URL NYATA. PROYEK-PROYEK INI AKAN MENJADI KOLEKSIMU。

Kesenjangan antara kurikulum, Demo, dan produk sebenarnya adalah di mana kebanyakan Vibe Coder secara permanen berhenti. Produk-produk Real ubuntu memiliki pengguna yang menimbulkan masalah dengan cara yang tidak terduga, membutuhkan basis data dan autentikasi, dan harus fungsional di ujung mobile. Fokus pada bulan itu adalah mengisi celah itu。

1. Proyek nilai nyata

Lupakan pelacak, lupakan aplikasi cuaca. Proyek Vibe Coding terbaik sering kali adalah produk yang sempit dan sangat vertikal yang dapat mengatasi titik nyeri yang berbeda bagi sekelompok orang tertentu。

Ini adalah ide-ide nyata: beberapa dari mereka telah dikonversi oleh pengembang independen pada tahun 2026, beberapa dari mereka telah benar-benar dibuat. Tak satu pun dari mereka adalah satu butir templat。

(bulan 3-4)

Proyek-proyek ini tunggal, jelas-jalan, dengan skenario nyata-guna yang biasanya dapat dibuat selama akhir pekan dan bukan hanya Demo, tetapi benar-benar berguna。

Penjana Pelacakan Diss Reddit

Alat ini menghubungkan Reddit API melalui PraW (Python Reddit API Balutper), mengekstrak komentar dari salah satu posting, mengidentifikasi sarkasme terbaik dan ekspresi ofensif, menghubungkannya dengan LLM, dan akhirnya mengeluarkan berkas .wav melalui transliterasi teks dan penyuntingan audio dasar。

Ini aneh, lucu, bagus untuk penyebaran, ini adalah jenis proyek yang mendapat perhatian di Twitter。

ANDA DAPAT BELAJAR: INTEGRASI API PIHAK KETIGA, PANGGILAN RANTAI LLM, PEMBUATAN BERKAS AUDIO。

Penjana Singkat Pertemuan AI

Sebelum pertemuan dimulai, pengguna memasukkan nama perusahaan dan tujuan pertemuan. Alat-alat yang menangkap jaringan perusahaan pejabat dan informasi LinkedIn, membaca pertukaran e-mail baru-baru ini antara Anda dan satu sama lain (via Gmail API) dan kemudian menghasilkan singkat pertemuan satu halaman yang mencakup poin berbicara, risiko kunci dan rekomendasi。

ANDA DAPAT BELAJAR: PENANGKAPAN DATA SUMBER BERBILANG, LINK PETUNJUK, OTENTIKASI API。

Liquidity: untuk konsultan dan manajer klien, $19 per bulan. Hal ini khususnya cocok bagi orang yang memiliki lebih dari lima panggilan pelanggan per minggu。

Ini pertama kalinya aku mendengar ini

Alat ini menghubungkan repositori GitHub dengan API GitHub. Apa perubahan yang telah dilakukan dalam ekstraksi dan secara otomatis menyiapkan log pembaruan yang jelas dan berorientasi klien。

pembangun pesohor biasanya tidak suka menulis log perubahan, dan alat ini dapat mengotomatiskan ini。

Anda dapat belajar: API GitHub, output LLM terstruktur, tugas yang telah ditentukan waktunya。

Pengguna sasaran sangat jelas: pendiri independen dan tim pengembangan。

Pengejar Freelance

Ini adalah alat yang dirancang bagi pekerja lepas untuk mengatasi kegagalan mereka untuk memulihkan pembayaran yang terlambat。

Ini dapat mengintegrasikan Stripe atau menggunakan data invoice yang direkam secara manual. Secara otomatis sistem mengirimkan peringatan pembayaran yang sopan namun progresif sesuai dengan jadwal pra-set. Semakin lama lagi suara yang terlambat, semakin kuat nada dan rekaman semua operasi。

Anda dapat belajar mengirim surat melalui Resend/Nodemailer, cron time job, Stripe webbook processing。

Ini adalah alat yang ingin dilihat oleh orang liberal。

Tool Buku Catatan Tidak Seperti Notion

Ini adalah proyek nyata yang digunakan para pencipta setiap hari。

Ini adalah kanvas yang sangat singkat, dan pengguna bebas menyeret dan stiker. Tidak boleh mendapatkan folder: %s: %s Proposisi nilai penuhnya cukup sederhana。

Tidak ada menu, tidak ada perintah, tidak ada gagasan semacam kompleksitas. Hanya sebuah kanvas dan beberapa catatan。

Anda dapat belajar: seret dan seret, kanvas dan penyimpanan lokal。

Proyek ini dapat online dalam satu akhir pekan。

Sekunder: Kelompok kerja proyek yang menarik perhatian (4-5 bulan)

Proyek-proyek ini membutuhkan basis data, otentikasi pengguna dan desain nyata untuk mendemonstrasikan pemikiran produk anda。

MESIN OBROLAN AI VERTIKAL UNTUK INDUSTRI TERTENTU ORANG

Ini bukan robot obrolan universal, tetapi robot chat yang dilatih untuk basis pengetahuan bisnis tertentu。

Pilih area vertikal: klinik gigi, bengkel perbaikan mobil, broker real estate, galeri yoga. Salah satu robot chat yang dapat menjawab pemesanan, pertanyaan harga dan pertanyaan yang sering diajukan, dan menjual layanan penyebaran ke bisnis tersebut。

Beberapa pengembang independen bertransparan menanggapi bahwa proyek vertikal semacam itu dapat menghasilkan $850-3200 per bulan dalam sebuah sub-market tunggal。

Anda dapat belajar: pipa RAG, pencarian vektor Suprabese, widget tertanam, struktur multi-tenan。

Pelacak Versi Cadangan

Ini adalah alat bagi freelancer dan agen untuk melacak setiap versi proposal penjualan yang dikirim ke klien。

Ini dapat menunjukkan edisi mana yang telah dibuka, berapa lama klien telah menonton, dan mengirim pemberitahuan ketika klien membuka kembali proposal. Membuka kembali proposal oleh klien biasanya berarti bahwa mereka mulai berpikir serius lagi。

Anda dapat menafsirkannya sebagai: analtik Docuign, dibuat khusus untuk proposal。

Anda dapat mempelajari: PDF upload dan penyimpanan, pelacakan pembukaan email, pemberitahuan real-time, desain basis data Supabase。

Kanta Cekupan Cekupan Skrin-ke-Kenalan

Pengguna upload screenshot UI acak, seperti halaman pendaratan, antarmuka aplikasi kompetitif, atau desain Figma yang mereka cegat。

Alat tersebut mengirimkan cuplikan layar ke model visual seperti GPT-5,5 atau Claude, dan kemudian menghasilkan komponen React +Tailwind bersih yang sesuai dengan tata letak dan gaya asli sebanyak mungkin。

ANDA DAPAT BELAJAR: MODEL VISUAL API, UPLOAD GAMBAR, OUTPUT TERSTRUKTUR DARI MODEL MULTI-MODUL。

Alat ini sangat berguna bagi pengembang dan dapat dengan mudah mendukung harga 25 dolar per bulan。

Alat Peta Infrastruktur

Ini adalah proyek nyata pada subreddit Vibe Coding: alat pemetaan interaktif yang memungkinkan municipalities atau tim utilitas untuk menarik pipa dan air, menambahkan riwayat pemeliharaan, biaya dan log pemeliharaan, dan pencarian dan layar menurut tanggal atau lokasi。

PERALATAN OPERASIONAL YANG DISESUAIKAN SEPERTI ITU SERING KALI MEMILIKI BEBERAPA KARAKTERISTIK: VERTIKAL, AGAK MEMBOSANKAN, TETAPI SANGAT BERGUNA. PEMBELI DARI B2B TIDAK AKAN RAGU-RAGU UNTUK MEMBAYAR ALAT TERSEBUT。

Anda dapat belajar menggunakan Mapbox atau Leaflet untuk membuat peta, menyimpan data geospasial di Supabase, bentuk berat UI, upload file。

Aplikasi Pemerasan Keluarga yang Diperankan

Para pencipta proyek tersebut awalnya tidak berniat menerbitkannya, hanya karena mereka membutuhkannya di rumah, dan melakukannya pada akhir pekan. Satu bulan kemudian, lebih dari 100 keluarga sudah digunakan。

Aplikasi tersebut mengalokasikan pekerjaan rumah tangga kepada anggota keluarga, memperoleh poin setelah penyelesaian misi, yang dapat membuka insentif yang ditetapkan oleh orang tua. Gudang teknologinya adalah FastAPI + PostgreSQL + PWA。

Ini adalah pengalaman sederhana: untuk membangun produk untuk masalah yang sebenarnya Anda hadapi。

Ini lebih cepat dan lebih nyata. Karena Anda adalah salah satu pengguna, pengguna nyata lainnya lebih mudah ditemukan。

Lanjutan: proyek kompleks untuk membuktikan kapasitas nyata (5-6 bulan)

Proyek-proyek ini cukup kompleks untuk membutuhkan struktur yang masuk akal, teknik konteks dan konstruksi multi-konferensi. Setiap orang bisa menjadi produk nyata, bukan Demo。

VC Invester CRM

INI ADALAH JALUR TRANSAKSI YANG DIRANCANG UNTUK INVESTOR USAHA ATAU INVESTOR MALAIKAT。

Ia melacak transaksi proyek pengusaha, sejarah hubungan manajemen, dialog pembungkus otomatis, dan menunjuk perusahaan dengan investasi LLM berdasarkan definisi tesis。

Wawasan kunci adalah bahwa CRM yang ada, seperti Salesforce, HubSpot, dirancang untuk tim pemasaran, bukan untuk investor. Model mentalnya sangat berbeda。

Pembinaan produk untuk sekelompok pengguna tertentu yang diabaikan oleh alat yang ada adalah salah satu jalur penghasil pendapatan yang paling mungkin。

Permainan Simulasi Manajemen Basket Basket Basket

sebuah permainan simulasi bisnis bola basket layar penuh, proyek yang sebenarnya adalah azario.floot.app。

Pemain woulder dapat mendirikan tim basket mereka sendiri, mengupgrade pemain mereka melalui program pelatihan, berdagang dengan pemain lain di pasar real-time dan mensimulasikan permainan melalui poin real-time。

Anda dapat mempelajari: kompleks manajemen negara, simulasi permainan, multi-pengguna data real-time, peringkat。

Proyek - proyek semacam itu dapat mempertunjukkan ambisi teknik yang nyata。

AI-Powered Speech Therapy App (Afasio)

Ini adalah aplikasi iPhone yang menggunakan kursor untuk membangun bagi orang-orang dengan post-traumasis。

Aplikasi AI menyediakan pelatihan bahasa yang dijanakan AI, pengguna berlatih membaca kata dan kalimat, dan App mendengarkan dan mengevaluasi pengucapan, dan kemudian menyesuaikan kesulitan dalam dinamika kinerja。

Penciptanya melakukan ini karena keluarga sangat membutuhkannya。

Anda dapat belajar: API pengenalan suara, generasi praktik pengembangan diri, konstruksi akhir bergerak, proses pelacakan penyimpanan awan。

Ini semacam proyek yang sangat berarti。

Tool Kebolehcapaian Kebolehcapaian Tool for Vital Impairments

INI ADALAH ALAT AI UNTUK MENGUBAH PDF APAPUN MENJADI VERSI YANG BENAR-BENAR DAPAT DIAKSES UNTUK ORANG CACAT VISUAL。

Ini bukan hanya ekstraksi teks dasar, tetapi merupakan terjemahan tabel kompleks dan bagan ke dalam deskripsi bahasa populer, menghasilkan teks att untuk gambar tertanam, menambahkan urutan bacaan yang masuk akal dan mengekspor versi HTML atau EPUB yang dapat diakses。

Anda dapat belajar: parsing PDF (PyMUPDF atau pdfplumber), AI multi-modular untuk deskripsi grafis, akses ke output HTML。

Arah ini tidak hanya memiliki potensi likuiditas SaaS, tetapi juga dapat menerima pendanaan atau perolehan institusi。

Sumber daya untuk penemuan proyek

ra/vibecoding: Tunjukkan Proyek Luar Biasamu (bebas biaya, Reddit)
Links:https://www.reddit.com/r/vibecoding/comments/irl5ccj/tunjukkan padaku proyek-proyek dialog kerenmu/
Pertunjukan komunitas nyata yang sudah online proyek Vibe Coding. Hal itu tepat untuk mencari inspirasi dan melihat gambaran sebenarnya dari ruang lingkup dan kesulitan proyek。

pengkoding r/vibe: Apa Proyek Video Paling Unik Anda? (bebas dari tuduhan, Reddit)
Links:https://www.reddit.com/r/vibecoding/comments/1rxjc3u/what is your host unik vibecoded project/
Ada beberapa proyek yang aneh dan inovatif di sini, termasuk basis data track Diss, alat aksesibilitas PDF, dan basis data geospasial yang diproduksi dalam waktu 30 hari。

DododoPaments: 30 Rancangan Saas Mikro yang Bermanfaat untuk 2026 (panduan bebas)
Links:https://dodopayments.com/blogs/micro-saas-ideas-2026
Diaquids 30 sertifikasi ide Micro SaaS, termasuk ukuran pasar, potensi MRR, biaya start-up dan jalur likuiditas. Proyek masing-masing sesuai untuk pengembang independen。

SuperFrameworks: Vibe Coding Hits a Tipping Point
Links:https://subskripsiworks.com/articles/vibe-coding-pint-what-founders-perlu-mengetahui
Daftar 7 sub-market khusus, pengembang independen telah memperoleh $ 500-3200 per bulan melalui produk Vibe Coding, dengan angka pendapatan sebenarnya。

Idea Ideosis: 50 Gagasan Mikro-Saas untuk Yayasan Solo tahun 2026 (bebas biaya)
Links:https://ideaproof.io/lists/micro-saas-ideas
Setiap ide termasuk peringkat kesulitan teknis, perkiraan biaya start-up (US$ 1000-15000) dan analisis kesenjangan spesifik pasar. Ini adalah salah satu ide paling operasional yang tersedia hari ini。

Kursor Kursor Forum: Dibangun dengan Kursor pada tahun 2025 (bebas biaya, komunitas)
Links:https://forum.cursor.com/t/bilt-with-cursor-in-2025-share-your-projects/147737
Pameran proyek di forum resmi kursor. Mereka proyek nyata, pembangun nyata, dan mereka jujur tentang di mana mereka berada。

Siklus Perencanaan-Review-Fix: Pendekatan konstruksi profesional

Sebagian besar pendatang baru Vibe Coder menggunakan loop dari "tips, picks, take."。

Ini bisa berguna untuk 20 baris, tetapi jika itu fungsi nyata dalam produk nyata, itu adalah kegagalan bencana。

Professionals Professionals menggunakan loop Plan-Review-Fix, dengan tiga peran yang berbeda: Anda, kode Agen, dan sebuah reviewer AI independen。

Sungai kerja

Perencanaan pertama。
SEBELUM MENULIS KODE APAPUN, BIARKAN DAFTAR AI MANA YANG AKAN DIBUAT ATAU DIUBAH, YANG BERFUNGSI AKAN DITAMBAHKAN, APA DEPENDENSI YANG DIBUTUHKAN, DAN APA BATASAN YANG MUNGKIN DIMILIKINYA。

Katakan dengan jelas: tidak menulis apa-apa, hanya menunjukkan rencana。

Kemudian Anda meninjau rencana dan membuat perubahan。

Dicapai。
SETELAH RENCANA DISETUJUI, BIARKAN AI MENULIS KODE。

Review (dalam bahasa Inggris)。
Salin kode yang dihasilkan dan tempelkan ke sesi Gemini 3,5 Pro baru. Pilih karena memiliki jendela konteks yang sangat besar. Ini bertindak sebagai insinyur keamanan senior dan pemeriksa kode, memeriksa Bug, pelanggaran keamanan, berhalusinasi nama paket, dan pola buruk。

Baiki itu。
Feedback dari peninjau 'temuan ke kode Agen berlanjut dengan cara yang iteratif sampai hasil bersih。

Sumber Daya Liar

LAG: Vibe Coding Praktek Terbaik; Hindari Gelung Kiamat
Links:https://www.projecttalk.org/vibe-coding-best-praktik/
Salah satu panduan yang paling terperinci tentang "Circle of Death" dan siklus Plan-Renew-Fix, berisi contoh-contoh praktis。

5 Vibe Membuat Aliran Kerja Kode Produksi Kapal pada tahun 2026
Links:https://dev.to/dohkoai/5-vibe-workflows-that-aktual-ship-project-code-in-2026-1 nmn
Keterangan dari proses praktis menggunakan Claude Code, Cursor dan Windsurf untuk menyampaikan kode produksi nyata, bukan Demo. Konten Konten mencakup driver tes, konteks memuat pola dan data biaya nyata。

Tiga. Setiap Vibe Coder harus memiliki basis aman

KODE - KODE YANG DIHASILKAN OLEH AI ADALAH MASALAH KEAMANAN YANG BERULANG DAN DAPAT DIPREDIKSI. ANDA TIDAK PERLU MENJADI AHLI KESELAMATAN, TETAPI ANDA PERLU TAHU BAHWA MODEL INI ADA DAN MENGEMBANGKAN KEBIASAAN PEMERIKSAAN SEBELUM PRODUK PERGI ONLINE。

Parameter url-status= yang tidak diketahui akan diabaikan (bantuan)Pemeliharaan CS1: Banyak nama: authors list

Kunci dan kunci API
semua kunci harus berada di .env.local. berkas ini harus ditambahkan .gitignore sebelum dorongan pertama. tak ada pengecualian。

Validasi Layanan Kogatif
SELALU OTENTIFIKASI DAN BERSIHKAN SEMUA MASUKAN PENGGUNA DI AKHIR LAYANAN. AIA SERING MELEWATI LANGKAH INI。

Mod Autentikasi Yobel
ATPA Supabase dapat menangani autentikasi dengan benar secara default. Jika Anda ingin menyesuaikan otentikasi, gunakan perpustakaan yang sepenuhnya divalidasi。

KONFIGURASI CORS
BIAR AI MENJELASKAN PENGATURAN CORS APA YANG DIHASILKANNYA, DAN MENGAPA. KONFIGURASI CORS SALAH ADALAH MASALAH AI UMUM。

Reliance pada audit
PRIOR TO DEPLOYMENT, AI DIIZINKAN UNTUK MEMERIKSA APAKAH ADA KETERGANTUNGAN CELAH DIKETAHUI ATAU APAKAH ADA NAMA PAKET YANG DIREGENERASI ILUSI. AI SESEKALI MENCIPTAKAN NAMA PAKET YANG TIDAK ADA。

Injeksi Segerak
JIKA APLIKASI ANDA MELEWATI MASUKAN PENGGUNA KE LLM, PENGGUNA MUNGKIN MENCOBA UNTUK MEMBAJAK PETUNJUK SISTEM. KAU HARUS MEMBACA PANDUAN OWASP。

Sumber Daya Liar

OWASP Top 10 untuk Aplikasi LLM: Partisipasi Pemakluman
Links:https://genai.owasp.org/llmrisk/llm01-prompt-injection/
Ini adalah referensi berwibawa untuk Prompt Injection dan merupakan risiko keamanan pertama dalam aplikasi LLM. Ini meliputi baik langsung maupun tidak langsung suntikan serangan dan model pertahanan。

OWASP API Keamanan Top 10 (bebas)
Links:https://owasp.org/API-Keamanan/
DAFTAR RISIKO KEAMANAN. UNSUR-UNSUR INI HARUS DIPAHAMI SEBELUM SETIAP PRODUK YANG MENERIMA DATA PENGGUNA BERADA PADA BARIS。

(Inggris) Vibe Coding Best Praktek dan Keamanan
Links:https://www.clarifai.com/blog/vibe-coding-explained
DAFTAR KEAMANAN LANGKAH DEMI LANGKAH UNTUK GENERASI AI, DENGAN TIP SPESIFIK UNTUK MEMBANTU ANDA MEMBUAT AI LEBIH AMAN。

Parameter Sycode MCP Server: Kode AI Aman dalam Waktu Nyata
Links:https://cycode.com/blog/international-cycodes-mcp-server/
Server MCP milik Cycode ini dapat diintegrasikan secara langsung ke Cursor dan Windsurf, sebagai pemindai aman waktu-nyata, untuk memeriksa kode generasi AI tanpa meninggalkan alur kerja Vibe Coding。

4 Supabese: Ujung belakangmu

Łaž Supabese layak dipilih tunggal karena merupakan salah satu infrastruktur terpenting bagi Vibe Coder untuk membangun produk nyata。

Ia menyediakan basis data Postgres, autentikasi, penyimpanan berkas dan langganan real-time, yang semuanya dapat dipanggil melalui JavaScript SDK dan tidak memerlukan manajemen server。

Sumber Daya Liar

Supabese: Panduan Koder Vibe untuk Lingkungan Hidup
Links:https://subbase.com/blog/the-vibe-coders-guide-to-subbase-environments
Artikel ini didedikasikan untuk Vibe Coder. Konten yang meliputi pengaturan lingkungan pengembangan dan produksi, migrasi basis data, dan kesalahan paling serius dari pemula: pengujian data nyata secara langsung online。

Saluran YouTube Sofabese: Panduan Quickstart (free of charge)
Links:https://www.youtube.com/@Supabase
Setiap fungsi utama memiliki panduan video yang singkat dan praktis seperti autentikasi, basis data, penyimpanan, fungsi real-time. Setiap video sekitar 5-10 menit。

Dok Minoritas Supabese
Links:https://supabase.com/docs/guides/development/database-migrasi
ia mempertimbangkan setiap perubahan skema database sebagai migrasi daripada menyunting database secara langsung. ini adalah kunci untuk menghindari hilangnya data bencana. panduan ini juga berisi skrip rollback。

Lima, sembilan model gagal untuk Entrent: mana proyek Anda akan salah

Universitas peneliti DAPLAb Kolombia telah menerbitkan penelitian model kegagalan Vibe Coding yang paling ketat hingga saat ini. Dalam misi yang sama, mereka menganalisis Cline, Claude, Cursor, Refrit dan v0, dan akhirnya menemukan sembilan pola kegagalan kunci。

Dua yang paling umum dan berbahaya adalah:

Silence gagal
Kode tampaknya bekerja dan itu tidak salah, tapi itu tidak persis apa yang Anda minta. Terminal - Terminal tidak melaporkan kesalahan merah, prosedur tidak runtuh, itu adalah kesalahan perilaku dan biasanya ditemukan lama setelahnya, dan bahkan mungkin telah memasuki lingkungan produksi。

Logika logika logika logika log
Model tersebut dengan benar mencapai suatu mekanisme, tetapi salah mengartikan maksud yang sebenarnya. Sebagai contoh, konter kartu seri diganti dengan syarat Anda lupa untuk menyatakan; total faktur tidak termasuk pajak yang seharusnya dimasukkan. Kesalahan semacam itu bisa menjadi bencana bagi produk nyata。

Ada tujuh model lain yang diidentifikasi oleh para peneliti antara lain:

Gap Pemrosesan Kesalahan Bekal Pemrosesan
teks mirip dengan percobaan {...} tangkapan(e){} muncul, menelan sepenuhnya kesalahan dan merekam tidak ada log。

Skop over-scred
Agence memodifikasi file yang tidak kau minta untuk dipindahkan, menyebabkan kerusakan lainnya。

Konteks lama terapung
Saat percakapan semakin lama, model itu secara bertahap melupakan keterlibatan proyekmu。

mencegah diri sendiri tanda uji etik
Tes ini hanya menguji olok-olok AI sendiri, bukan menguji perilaku nyata. Hasil yang dihasilkan adalah nilai pass 100%, tetapi cakupan sebenarnya adalah nol。

Komponen ajaib menyebar
Sebuah berkas yang terdiri dari lebih dari 600 baris, berisi lebih dari 10 penggunaan State, hampir tidak dapat dipertahankan。

Aturan buta
Agen Agen melihat pengendalian diri Anda sebagai preferensi, bukan aturan. Ini akan mematuhi batasan tersebut sampai menemukan alasan untuk ketidakpatuhan。

gap transparansi gontacity
Ketika hal-hal gagal, alat saat ini hampir tidak bisa membuat Anda melihat apa yang Agen coba lakukan, di mana ia salah。

Untuk area buta aturan, studi menawarkan cara memperbaiki CLAUDE.md Anda dan dokumen aturan sebagai kontrak wajib, bukan rekomendasi。

Sebagai contoh, Anda perlu menambahkan kondisi yang jelas untuk kegagalan:

Jika tabel ini tidak memiliki kebijakan RLS, berhenti dan meminta saya untuk tidak melanjutkan。

Test Test 6: Sebagian besar kemampuan Vibe Coder akan menyesal setelah bolos

Tanpa proses QA terstruktur, aplikasi Vibe Coding menumpuk utang teknis sekitar tiga kali lipat tingkat pengembangan perangkat lunak tradisional. Kesimpulan ini diambil dari meta-analisis 101 AI yang mendukung sumber-sumber pembangunan。

Hasil sebenarnya adalah aplikasi Vibe Coding yang terlihat "bekerja" biasanya menghabiskan biaya $ 5.000-$30.000 jika membutuhkan rekayasa ulang profesional。

SOLUSINYA BUKAN UNTUK BERHENTI MENGGUNAKAN AI, TETAPI UNTUK MEMUNGKINKAN AI UNTUK MENULIS TES SAAT MENULIS。

Metode Penasehatan Koding Vibe Pengujian Prioritas

WINC sebelum menulis kode fungsional, biarkan AI menulis tes untuk perilaku yang diharapkan. Ini akan memaksa Anda untuk mendefinisikan perilaku fungsional lebih tepat, dan akan segera meningkatkan kualitas kode fungsional. Jalankan tes, menonton gagal. Kemudian biarkan AI menulis kode yang memungkinkan tes lulus. Setelah setiap perubahan besar, biarkan AI menjalankan tes npm. Tes kegagalan adalah umpan balik loop yang mencegah kembali。

Peraturan No. 70/30

INI ADALAH PANDUAN PRAKTIS UNTUK MENENTUKAN PEKERJAAN MANA YANG PALING COCOK UNTUK AI。

70% UNTUK DUKUNGAN AI:
Kode Template, operasi CRUD, validasi bentuk, tes penulisan untuk kode yang sudah ada, dokumen penulisan, renovasi berdasarkan mode yang jelas, konversi format (JSON → TypeScript), ekspresi regular, one-off script。

30 persen seharusnya manusia:
Pembuatan keputusan arsitektur sistem historiografi sistem, kode kunci keamanan (sertifikasi, enkripsi, pembayaran), kondisi kompetitif kompleks, area masalah baru, algoritme kritis kinerja, logika hukum dan kepatuhan。

Jika Anda memberikan 95% untuk AI, mungkin Bug. Jika Anda hanya menyelesaikan 20% dengan AI, itu berarti Anda membuang banyak produktivitas。

Sumber Daya Liar

Testemat: 8 Alat Pengujian AI Terbaik untuk Kode Vibe
Links:https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/
Ini adalah salah satu pedoman paling lengkap 2026 untuk alat Vibe Testing, yang meliputi alat Vitest, Playwright dan AI asli QA。

Vibe Testing dengan Playwright + MCP (petunjuk bebas, Tim Deschryver)
Links:https://timdeschryver.dev/blog/vibe-testing-with-playwright
Uraikan bagaimana server Playwright MCP digunakan dalam kursor atau VS Code Copilot untuk menulis dan menjalankan tes peramban dalam bahasa alami. Couple Playwright's "copy sebagai masalah" tombol di tab yang salah memungkinkan anda untuk menepek tes gagal secara langsung ke AI Agen。

AI Vibe Coding Notes from the Basement
Links:https://www.awasome-testing.com/2025/04/ai-vibe-coding-notes-fe-the-basement
Ini adalah salah satu panduan praktisi yang paling rinci pada TDD Vibe Coding pertama. Element termasuk penggunaan perencanaan o1, penggunaan kursor + Sonnet 4.6, tes berjalan terus-menerus sebagai loop umpan balik, dan penggunaan gingest untuk meratakan perpustakaan coding ke dalam berkas tunggal untuk penalaran dalam model berpikir。

Kodegen Playwright
Links:https://playwright.dev/docs/codegen
Lari:

tidak, tidak

Lalu klik aplikasi Anda di browser seperti pengguna normal. Diarsipkan Playwright merekam setiap klik dan secara otomatis menghasilkan berkas pengujian Playwright. Ini adalah salah satu cara tercepat untuk menulis tes peramban。

Vitaine Vitaest Official Docs (bebas)
Links:https://vitest.dev/
Ini adalah kerangka kerja pengujian modul standar untuk Vite 2026 adalah proyek Next.js. Ini cepat, kompatibel dengan Jest, dan keturunan mendukung TypeScript。

Bulan Bulan 4 tonggak sejarah

Pada akhir bulan, Anda harus memiliki:

2–3 LENGKAP DAN PROYEK-PROYEK YANG DIKERAHKAN, YANG SEMUANYA MEMILIKI URL REAL-LINE

Setidaknya satu proyek memiliki basis data pengguna-disertifikasi dan Supabese

Setiap fitur kunci sinkron atau pra-tulis

Fix Workstream Rencana-Review-Fix tertanam dalam kebiasaan konstruksi Anda

Izin keamanan menjadi langkah standar untuk setiap persiapan

GitHub memiliki setidaknya tiga gudang nyata di halaman utama。

BULAN-BULAN 5: TEKNIK KONTEKS DAN MCP, MEMBEDAKAN ANTARA "BAIK" DAN "ATAS" META-SKILLS

TUJUAN UNTUK BULAN INI ADALAH UNTUK MENANGKAP KONTEKS KERJA, MISALNYA PADA WAKTU YANG TEPAT, DAN MENYEDIAKAN AI DENGAN INFORMASI YANG TEPAT UNTUK MEMUNGKINKAN UNTUK MENGHASILKAN KUALITAS TINGGI, TERSTRUKTUR DAN BERKELANJUTAN HASIL。

Contextwork adalah kunci untuk membedakan antara Kode Vibe yang umum dan sangat baik. Coding pool yang sebelumnya sering menciptakan kolam yang membingungkan dan tidak konsisten, sementara yang terakhir membangun produk yang bersih dan berkelanjutan. Sebagai lingkup proyek diperluas, manajemen konteks akan menjadi kemampuan paling penting Anda。

Apakah proyek konteksnya

PROYEK KONTEKS KONTEKS ADALAH PEMBENTUKAN INFORMASI SECARA SADAR MEMASUKI JENDELA KONTEKS AI SEBELUM DAN SELAMA SETIAP PENGINGAT。

INI BUKAN TEKNIK TUNGGAL, TAPI SISTEM. SISTEM INI MENCAKUP BERKAS ATURAN ANDA, STRUKTUR DOKUMEN PROYEK, BERKAS YANG DIKUTIP DALAM PETUNJUK, BAGAIMANA PERPUSTAKAAN KODE DIATUR, DAN BAGAIMANA ANDA MENANGANI BATASAN PANJANG KONTEKS AI。

DALAM KASUS-KASUS DI MANA KONTEKSNYA TIDAK MEMADAI AI, TIDAK KONSISTEN, KETINGGALAN ZAMAN DAN BAHKAN KODE YANG BERTENTANGAN DIHASILKAN. SEBUAH AI DENGAN KONTEKS YANG BAIK MENGHASILKAN KODE YANG SESUAI DENGAN MODEL PROYEK, MEMAHAMI ARSITEKTUR ANDA DAN MENGHINDARI KESALAHAN YANG DIKETAHUI。

23226 Jubin Teknik Konteks

.cursor/rules/+CLAUDE.md
Project Level Long-Term Direktif, 3 bulan sudah。

pensegerakan "%s
Dokumen-dokumen markdown markdown mencatat keputusan arsitektur kunci, modul dan integrasi pihak ketiga。

Berkas spesifikasi fungsional
Setiap fungsi kunci sesuai dengan dokumen Markdown yang menjelaskan apa yang dilakukannya, bagaimana itu terhubung dengan seluruh sistem, dan apa batasannya。

Berkas contoh
Gunakan komponen yang ada sebagai referensi gaya dalam petunjuk。

Bangunkan server di belakang panggung
Dia menjalankan npm menjalankan dev sebagai tugas belakang panggung, memungkinkan AI untuk melihat kesalahan terkompilasi dan layanan akhir log dalam waktu nyata selama membangun。

AUTOMASI PERAMBAN MELALUI MCP
Sebagai contoh, dalam kasus Chrome DevTools MCP atau Vercel, anent Browner memungkinkan AI untuk melihat rendering nyata, kesalahan konsol dan permintaan web tanpa screenshot。

Sumber Daya Liar

Code NXCode: Agency Engineering; The Complete Guide to AI-First Software Development (pedoman bebas)
Links:https://www.nxcode.io/resources/news/regional-english-complete-guide-vibe-coding-ai-agendas-2026
Pada awal tahun 2026, Karpati memperkenalkan istilah "agentic engineering" untuk menggambarkan evolusi dari evolusi kasual Vibe Coding ke pengembangan AI-aided profesional. Panduan ini meliputi siklus PEV penuh, yaitu Plan →Execute → Verifikasi, struktur konteks dan pintu kualitas. Diterbitkan pada Maret 2026。

Profil 10 GitHub untuk Master Vibe Coding (penuntun bebas, KDnugets)
Links:https://www.kdnuggets.com/10-github-repositori-ke-master-vibe-coding
Pemilihan gudang GitHub yang paling berguna dibuat, meliputi proyek konteks, templat alur kerja, konfigurasi buku aturan, dll。

Vibe Coding yang Mengagumkan (bebas, GitHub)
Links:https://github.com/filipecalegiario/mana-mana-ada-vibe-coding
Salah satu daftar pemilihan paling lengkap dari referensi Vibe Coding, alat, panduan dan sumber daya。

MCP: Protokol Konteks Model

Wacana MCP, nama lengkap Model Context Protocol, adalah standar terbuka yang dibuat oleh Anthropic untuk menghubungkan alat AI ke sumber data eksternal seperti database, API, data real-time, dokumen eksternal dan layanan pihak ketiga。

Sekarang ini, OFMCP didukung oleh Cursor 3.0, Claude Code dan Windsurf. Di mana kursor 3.0 dapat digunakan oleh Marketplace。

Infeksi MCP berarti Anda akan ke tingkat bawah Vibe Coding: Agen tidak lagi hanya menulis kode, tetapi dapat mencari data asli Anda, menemukan dokumen dalam waktu nyata, berinteraksi dengan layanan pihak ketiga dan melakukan operasi pada sistem eksternal。

APA MCP SEPERTI DALAM PRAKTEK

Server MCP Jalur Jalur
Biarkan Agenmu membaca dan membuat tagihan Stripe。

Name
Suruh Agenmu berkonsultasi dengan database real-time dalam proses pengembangan。

Figma Figma MCP
Agen kursor biarkan Agen kursor membaca file desain Anda dan mendapatkan komponen di sana。

GitHub MCP
Agen membiarkan Agen menciptakan isu, PR terbuka, mengelola aliran。

Qdrant MCP
Agen Memungkinkan untuk mengakses database vektor untuk membangun aplikasi yang mendukung RAG。

Sumber Daya Liar

Dokumentasi Resmi MCP
Links:https://modelcontextprotocol.io/internasional
Dokumen resmi dan spesifikasi Protokol Konteks Mode。

Membina Server MCP Pertama Anda dengan Coding Vibe
Links:https://www.qpython.com/bangun-mu-pertama-mcp-server-dengan-python-dan-vibe-coding-pk/
Bina tutorial praktis server MCP pertama dengan Cursor, memungkinkan AI untuk menarik konteks real-time dari sumber luar。

Bangun Server MCP Anda dalam 5 Winters with Vibe Coding
Links:https://www.claranet.com/uk/blog/bild-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/
Salah satu program server MCP tercepat。

Vibe Coding RAG dengan Server MCP Qdrant (bebas biaya, Qdrant)
Links:https://qdrant.tech/blog/webinar-vibe-coding-rag/
Terangkan bagaimana menggunakan server MCP Qdrant untuk memungkinkan Kursor dan Claude Code mengakses basis data vektor secara langsung selama konstruksi。

Kursor Marketplace (aplikasi)
Links:https://cursor.com/markplace
Anda dapat melihat dan memasang plugin server MCP prabuild, termasuk AWS, Figma, Linear, Stripe, Vercel, Datadog, dll, dan memasangnya di Cursor 3.0。

3; Figma ke Kode: Reka kerja untuk Kode Vibe

Jika Anda ingin produk tidak dapat "bekerja," tetapi terlihat cukup canggih, Figma →Code workflow adalah kemampuan desain yang paling dipengaruhi dalam kotak alat Vibe Coder。

Ketimbang menggambarkan antarmuka oleh teks, membuat desain visual dalam Figma dan kemudian menggunakan Figma MCP untuk memungkinkan AI untuk menghasilkan kode yang cocok secara langsung dari berkas desain。

Sungai kerja

Menghubungkan Figma MCP ke Cursor atau Claude Code terlebih dahulu. Plugin Frigma A Figma dapat dipasang di Cursor Marketplace。

Lalu kutip berkas Figma dalam petunjuk:

Pelajari token desain dalam berkas Figma ini. Ekstraksi palet, nomor font dan spasi dan mengaturnya menjadi konfigurasi tailwind. Jangan tulis komponen terlebih dahulu。

, dan kemudian mengacu pada komponen spesifik:

Arondisemen membuat komponen Navbar berdasarkan desain Figma. Ketepatan yang tepat, tata letak font, dan status yang lebih. 297 menggunakan Taylor CSS, hanya TypeScript。

Secara bertahap dibangun oleh blok, selalu mengutip ukuran dan logika tata letak dalam berkas Figma。

Saran kunci

Bahkan tanpa Figma MCP, pemula dapat menggunakan alternatif yang lebih cepat: membuat sketsa halaman dengan Canva。

Sebelum membuka alat konstruksi apapun, 30 menit untuk menggambar tata letak di Canva. Ini akan memaksa Anda menjawab beberapa pertanyaan: apa yang ada di setiap halaman? Dimana navigasinya? Apa yang dikandung setiap blok

Ini akan menghapus sejumlah besar ketidakpastian baik di awal petunjuk pertama dan menyimpan beberapa jam koreksi。

Sumber Daya Liar

Figma Figma MCP + Kursor: Sistem Desain AI Baru Kerja
Links:https://www.youtube.com/watch?v=09VgyFFLraw
Kekhalifahan demonstrasi lengkap tentang bagaimana menghubungkan Figma dengan Cursor, token desain impor, dan menghasilkan komponen yang secara akurat memenuhi spesifikasi Figma. Diterbitkan pada November 2025。

Kode Claude Kode x Figma MCP: Buku Bermain Perancang
Links:https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers
Penulisnya, dalam kapasitasnya sebagai desainer, melakukan 100 hari Vibe Coding dan meringkas versi yang lebih halus dari Figma → Claude Code → Komponen Production React. Di dalamnya terdapat templat petunjuk yang dapat disalin secara langsung, untuk mengekstrak token standar dan untuk menghasilkan blok respon。

Figma Buat (tingkat bebas, tidak resmi)
Links:https://www.figma.com/laws/vibe-coding-tool/
Alat Coding Figma Asli Vibe. Anda dapat menggambarkan UI atau prototipe dalam bahasa alami secara langsung dalam Figma, menghasilkan prototipe interaktif dan mengekspor kode bersih. Ini dapat diintegrasikan dengan Figma MCP untuk Agen eksternal。

Anima: Kode Vibe dengan Sistem Desain Figma Anda
Links:https://www.animaapp.com/blog/design-systems/vibe-code-your-figma-design-system/
Ia mengimpor sistem desain Figma menjadi Anima, dan kemudian menghasilkan komponen React yang mengikuti token desain. Outout dapat dikirim ke Claude Code atau Cursor untuk melanjutkan pengolahan melalui Anima MCP。

Vezli: Panduan Kerja Vibe Lengkap untuk Perancang
Links:https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/
Keanfan membangun panduan lengkap untuk non-pengembang untuk produk-produk yang dihasilkan AI, meliputi petunjuk sistem desain, referensi visual dalam petunjuk, dan bagaimana mempertahankan konsistensi merek dalam komponen Vibe Coding。

4. Tambahkan fungsi AI ke produk: Vercel AI SDK

Jika Anda ingin membangun produk berbasis "AI" dan bukan hanya produk berbasis "AI", maka Vercel AI SDK adalah salah satu pilihan tercepat dan lebih bersih dalam lemari besi teknologi Next.js。

Sumber Daya Liar

Dokumentasi AI SDK ULDA (dokumen resmi gratis)
Links:https://sdk.vercel.ai/docs
Dokumen referensi resmi. Ini mendukung lebih dari 20 penyedia AI melalui antarmuka terpadu, termasuk OpenAI, Antropik, Google, Mistral, Groq, dll. , dan mendukung keluaran saat ini, panggilan alat dan generasi terstruktur。

AI SDK V5 Seri Tutorial (Youtube, gratis)
Links:https://www.youtube.com/playlist?list=PL4cxeGkcC9h2NkvFCBO4kvA4Y9wiDriO
Tutorial multi-pool menggunakan Vercel AI SDK untuk mengkonstruksi aplikasi AI Next.js. Final presentasi pertama dan set kedua konfigurasi proyek diterbitkan pada Agustus 2025, meliputi proses set-up penuh。

Bangun AI Chat App Freeing dengan Vercel AI SDK dan Berikutnya.js
Links:https://dev.to/nikolasbarwicki/bild-a-streaming-ai-chat-app-dengan-vercel-ai-sdk-dan-textjs-10f6
BANGUN TUTORIAL KODE LANGKAH- DEMI LANGKAH UNTUK STREAMING APLIKASI OBROLAN AI DARI AWAL。

Apa yang bisa kita lakukan bulan ini

Pilih salah satu proyek 4 bulan Anda untuk menambahkan fungsi AI ke Vercel AID SDK. Sebagai contoh: Tambahkan AI Auto-label ke aplikasi catatan; tambahkan pembantu AI ke pelacak custom "Query data custom Anda"; secara otomatis menghasilkan kartu flash AI berdasarkan teks yang ditempel pengguna。

BIARKAN AI MENJAWAB PERTANYAAN BERDASARKAN DOKUMEN ANDA

RAG, nama lengkap Retrief-Augmented General, adalah Retrietal Peningkatan. Ini adalah kompetensi inti di balik aplikasi AI paling serius tingkat perusahaan, seperti robot penumpang, bank pengetahuan internal, pertanyaan dokumen dan alat jawaban。

ÇAI PRODUCT ENGINEER" RUTE。

KONSEP INTI ADALAH SEDERHANA: BIARKAN LLM MENJAWAB PERTANYAAN DENGAN DATA PELATIHAN SAJA, TETAPI PERTAMA-TAMA MENGAMBIL KEMBALI KLIP YANG RELEVAN DARI BERKAS ANDA SENDIRI, KEMUDIAN MEMASUKKANNYA KE DALAM PETUNJUK, DAN BIARKAN JAWABAN MODEL ATAS DASAR INFORMASI YANG ANDA SEDIAKAN。

Sumber Daya Liar

CamaIndex: Pengantar kepada RAG (berkas bebas resmi)
Links:name
Kover lima tahap kunci: pemuatan, pengindeksan, penyimpanan, pencarian dan penilaian。

♪LlamaIndex Starter Tutorial♪
Links:https://pengembang.llamaindex.ai/python/framework/mendapatkan stard/starter example/
BANGUN SISTEM RAG BERJALAN TANPA KODE KURANG DARI 30 BARIS。

(Youtube, gratis)
Links:https://www.youtube.com/watch?v=AOQyRiwydyo
Sebuah kursus LangChain 2026 lengkap meliputi Agen, RAG dan Framework RectAgent untuk Konstruksi berbasis data AI Act。

Aplikasi Efficial RAG Building dengan Langchain dan LlamaIndex (Youtube, gratis)
Links:https://www.youtube.com/watch?v=D7YwcDJ75lQ
Perbandingan horizontal perbandingan penggunaan Langchain dan LlamaIndex dalam adegan RAG oleh kasus kode nyata。

Cara Memilih Framework Argentina AI (LlamaIndex)
Links:https://workforcenext.in/blog/how-to-choose-ai-agent-framework/
Diterbitkan pada April 2026. Usulan ini adalah untuk menggunakan LlamaIndex jika yang paling sulit adalah untuk mengambil kembali; dan Langchain / LangGraph jika Anda membutuhkan kemampuan organisasi tingkat ekologi dan produksi yang lebih luas。

Tidak ada yang akan memberitahumu apapun sampai tagihan tiba

Di tingkat panggilan tunggal, mungkin ada celah biaya 30 kali lipat antara model berbiaya rendah dan model garis depan。

Jika Anda memanggil GPT-5,5 atau Claude Sonet 4,6 untuk setiap aplikasi produksi, tagihannya kemungkinan akan diperluas dari $20 hingga ratusan dolar per bulan sebelum Anda menyadarinya。

Ada dugaan bahwa Uber hanya menghabiskan empat bulan pada tahun 2026, menghabiskan anggaran AI selama setahun karena penggunaan sesi Claude Code yang luas。

Logika matematika secara sederhana: panjang konteks meningkatkan biaya secara linear. Dan jika Claude Code diberi perpustakaan kode lengkap, itu akan segera terkumpul menjadi 250.000 sampai 500.000 token。

Aturan manajemen biaya praktis

♪ Set topi pengeluaran keras pertama ♪
Dia menetapkan batas bulanan di OpenAI dan Antropik di belakang panggung sebelum fungsionalitas AI apapun online untuk publik. Lakukan sebelum kau online, tidak setelah kau online。

Model Diversion oleh kompleksitas tugas
Pengklasifikasian, pelabelan, ringkasan dan pemformatan tugas dapat dilakukan dengan menggunakan claude-haiku atau gpt-5-55-mini. Hanya tugas-tugas dengan penalaran yang lebih sulit yang disediakan untuk Sonnet 4.6, Opus 4.6 atau GPT-5.5。

Untuk tugas sederhana, model murah cenderung memberikan keluaran dari kualitas yang hampir sama, tetapi biayanya mungkin 10 kali berbeda。

Guna perintah /kompact dalam Claude Code
Secara manual menjalankan /compact sebelum tugas besar dimulai ketika konteks menjadi lebih panjang. Kode Claude Claude secara otomatis memampatkan sejarah konteks, biasanya sebesar 60%-80%, secara signifikan mengurangi jumlah token yang akan disebut lain kali。

Jagalah Jendela Konteks Pendek
Biaya untuk menggandakan panjang konteks juga akan kira - kira dua kali lipat. Dalam mengembangkan fungsi baru, lebih baik membuka dialog baru daripada melanjutkan yang lama。

Kata-kata Cache Sama yang Diulangi
Promo Anthropic yang caping hanya 10% harga dibebankan untuk input ke dalam cache. Ini akan menyebabkan penghematan signifikan dalam jangka waktu yang lama untuk petunjuk sistem atau berkas CLAUDE.md yang diulang setiap panggilan。

Organisasi
anda harus mengatur alarm penagihan ketika 50% dan 80% skala bulanan dicapai untuk menghindari bug atau panggilan loop untuk menjalankan tagihan yang tidak terduga sebelum anda menemukannya。

Sumber Daya Liar

MaddyStudio: AI Agent Token Budget Management in Claude Code
Links:https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/
Terperinci pembongkaran Claude Code ' s penanganan anggaran token, termasuk keterbatasan konteks kaku, kompresi otomatis di ambang konfigurasi dan pemeriksaan anggaran pre-impelmentasi untuk operasi mahal. Model-model ini juga dapat diterapkan pada produk LLM manapun。

HackerNews: The Real Cost of Claude Code
Links:https://news.ycombinator.com/item?id=47976415
Proyek yang sebenarnya membahas bagaimana panjang jendela konteks dalam sesi Claude Code hampir secara linear didorong naik biaya dan memberikan jumlah yang tepat。

HatchWorks: The Real Costa of Vibe Coding pada tahun 2026
Links:https://chatchworks.com/blog/gendd/cost-of-vibe-coding/
Sebuah perkiraan yang lebih candid dari total biaya Vibe Coding: Biaya berlangganan yang jelas bisa $20-200 per bulan, tetapi biaya bisa $5.000-$30.000 jika perbaikan keamanan, utang teknis dan rekayasa ulang profesional diambil ke dalam rekening. Untuk memahami itu, kita bisa menilai berapa banyak QA dan proses struktur yang layak diinvestasikan。

Papan dash penggunaan OpendomainAI (tanpa resmi)
Links:https://platform.openai.com/usage
Buat batas bulanan di sini sebelum akses terbuka. Jalur masuk ke Billing, Terbatas Penggunaan。

Konsol Antropis
Links:https://konsol.antropik.com/
Halifo Claude API juga perlu diatur di sini。

Bulan - Bulan 5 tonggak sejarah

Pada akhir bulan, Anda harus dapat:

MEMBENTUK PROYEK DARI AWAL SEHINGGA AI SELALU MENDAPATKAN KONTEKS YANG TEPAT

Kursor Penyambungan atau Kode Claude ke sumber data eksternal menggunakan MCP

Fungsi AI terintegrasi untuk produk daring menggunakan Vercel AI SDK

BINA PIPA DASAR RAG YANG MEMUNGKINKAN AI MENJAWAB PERTANYAAN BERDASARKAN DOKUMEN

MERENCANAKAN PEMANTAUAN DAN PENGELUARAN BIAYA AKTIF TUTUP UNTUK SETIAP AKUN AI API

Pertahankan struktur /docs yang bersih agar setiap alat AI dapat langsung memahami proyek tersebut。

Bulan 6: menyebar seperti profesional dan memilih orientasi profesional Anda

Tujuan untuk bulan ini adalah untuk memungkinkan proyek Anda untuk mencapai tingkat ketersediaan produksi dan untuk memilih arah mereka sendiri. Pengerahan nyata, pengawasan nyata, generasi pendapatan nyata, sementara menemukan jalan profesional yang cocok dengan tujuan Anda。

1. Pengerahan produksi dan konfigurasi lingkungan

Celah penyebaran antara Demo dan produk tingkat produksi sangat besar. Kepentingan ini adalah pemisahan lingkungan pembangunan dan produksi。

Disarankan untuk menyebarkan gudang teknologi pada tahun 2026

Situs web atau halaman pendaratan Statik Statik
Bagian ujung depannya dikerahkan dalam Vercel atau Netlifty dan tidak ada ujung belakang yang diperlukan. Ini dapat dikerahkan dari GitHub satu kunci。

Aplikasi stack penuh dengan otentikasi dan basis data
Frontend, Vercel, backend, Supabase. Ini gudang teknologi yang paling disarankan untuk pemula。

Logika back-end yang rumit
Frontend borough menggunakan Vercel, backend menggunakan Supabase, dan tugas perhitungan diproses melalui EdgeFunctions. Ini akan memungkinkan ekspansi tanpa menyewa server。

Kendali penuh server
Bagian belakang menggunakan Fly.io atau Railway, dan ujung depan dapat sesuai dengan pilihan apapun. Pengendalian lebih kuat, tapi lebih kompleks。

Sumber Daya Liar

Supabese: Panduan Koder Vibe Lingkungan Hidup
Links:https://subbase.com/blog/the-vibe-coders-guide-to-subbase-environments
Konten wajib mandatori untuk penyebaran produksi secara aman meliputi pembedaan antara lingkungan pengembangan dan lingkungan produksi, migrasi basis data dan strategi rollback。

(Inggris) Add Jam: How to Deploy Your Vibe Code Project
Links:https://addjam.com/blog/2026-04-07/bagaimana-ke-deploy-your-vibe-coded-project/
Panduan penyebaran untuk pengguna non-teknik akan membantu Anda memilih penyebaran yang sesuai menurut jenis proyek dan akan diterbitkan pada April 2026。

Meledakkan Proyek Kerja Vibe Anda untuk Bebas dengan Vercel dan Netlifty (YouTube, gratis biaya)
Links:https://www.youtube.com/watch?v=85JVKjW-uG0
Dari GitHub ke kursus langkah demi langkah di Vercel dan Netlifty。

Pertahanan Pertahanan Dok Vercel
Links:https://vercel.com/docs/deproves/overview
Dokumen Deployment Resmi Berencana Vercel, berisi penyebaran pratinjau, manajemen variabel lingkungan dan konfigurasi nama domain。

Kau bisa mengendalikan produk onlinemu

Di lingkungan produksi, masalah tak terlihat tidak dapat diperbaiki. Tiga alat berikut ini akan memberikan gambaran lengkap tentang apa yang sedang dilakukan pengguna dan apa yang dilakukan aplikasi Anda。

Sumber Daya Liar

Langfuse (sumber terbuka, tingkat bebas)
Links:https://langfuse.com/
LLM LLM Platform. Ini melacak setiap panggilan AI: apa yang dikirim, apa yang diterima, penggunaan token, penundaan, biaya dan kesalahan. Dukungan untuk OpenAI, Anthropic dan Langchain. Pada 2026, itu telah menjadi salah satu alat standar untuk memantau aplikasi AI。

Cara Memantau Aplikasi AI Anda dengan Langfus
Links:https://www.youtube.com/watch?v=V7nutySdrgw
Kursus full outfine pada penggunaan OpenTelemetry untuk mengkonfigurasi Langfuse di lingkungan lokal dan produktif, yang diterbitkan pada Maret 2025。

Langfuse + Panduan Resmi Bebas
Links:https://langfuse.com/docs/observability/sdk/advanced-features
Keterangan bagaimana mengirim data pengawasan bug ke Sentry dan menangkap data LLM-observable menggunakan Langfus. Konfigurasi tunggal dapat membentuk gudang teknologi pemantauan produksi yang lengkap。

(tingkat bebas, tidak resmi)
Links:https://sentry.io/
Terapkan alat standar untuk pelacakan bug. Hal ini dapat digunakan secara online untuk memberitahu Anda tentang kesalahan pada awalnya, daripada menunggu umpan balik dari pengguna。

Analisis Vercel (tidak resmi, bebas biaya)
Links:https://vercel.com/docs/analitik
Alat analisis situs web terbina-dalam milik MacAvercel, diaktifkan dengan satu kunci. Anda dapat melihat tampilan halaman, indikator kinerja dan Vital Web Inti。

Pilih arahmu

Pada bulan ke-6, Anda telah memiliki keterampilan dasar. Pertanyaan berikutnya adalah, arah mana yang kau tuju

Ada tiga jalan yang layak, dan kau harus memilih yang terbaik sesuai dengan tujuanmu。

Pembangun Produk, i.e. Indie Hacker

Kesesuaian untuk orang-orang: pendiri independen, pengusaha, pengembang independen, dan orang-orang yang ingin membangun dan menjual produk mereka sendiri。

Ini jalan paling umum Vibe Code. Kau tidak mencari pekerjaan, tapi kau menerbitkan produk yang menghasilkan pendapatan。

Politeknik Hacker Indie 2026

Melibatkan atau Bolt: untuk pengembangan prototipe dan validasi awal yang cepat

Kursor Kursor 3.0 + Kode Claude: untuk konstruksi formal dan kustomisasi kedalaman

Pangkalan data dan akreditasi

Pembayaran

Vercel: penyebaran

User analysis。

Types dari variabel aplikasi kekhawatiran pada tahun 2026

Mikrotool
Hanya satu masalah yang sangat spesifik diselesaikan, dengan langganan $ 5-25 per bulan。

Wrapper AI mifine
KEMAMPUAN LLM TERTENTU DIRANGKUM DALAM UI YANG JELAS, SPESIFIK, SUB-PASAR。

Direktori atau platform pasar
Tidak dapat menyimpan dalam `%s'。

Perusahaan di rumah peralatan
Otomimasi sebuah pekerjaan yang saat ini dilakukan secara manual oleh perusahaan menggunakan formulir。

Sumber Daya Liar

(Komunikasi bebas)
Links:https://www.indiehackers.com/
Pendiri yang nyata memiliki data pendapatan, membangun catatan dan pelajaran yang dipelajari. Ini adalah salah satu sumber informasi sinyal tinggi tentang apa yang benar-benar dijual dan apa yang dibayar。

Dok Jalur: Pembayaran Quickstart
Links:https://stripe.com/docs/payments/quickstart
Panduan resmi tentang bagaimana menambahkan Stripe Checkout untuk pembayaran dan langganan satu kali. Anda dapat memiliki AI " langganan ke integrasi X dolar per bulan" dan kemudian gunakan panduan ini untuk memverifikasi apa yang dihasilkannya。

PostHog Mulai Dimulai
Links:https://posthog.com/docs
Alat analisis produk sumber terbuka. Anda dapat melacak perilaku pengguna, mengubah corong, mempertahankan dan fungsi switch, sehingga Anda tahu apa yang benar-benar bekerja。

PESAWAT 2: INSINYUR PRODUK AI

BASKETING YANG COCOK UNTUK POPULASI: ORANG YANG INGIN MEMASUKI PERUSAHAAN START-UP ATAU PERUSAHAAN TEKNOLOGI UNTUK PENGEMBANGAN PRODUK AI。

Koleksi karya ke arah sini

binalah sebuah "chat dengan produk doc" anda。

PENGGUNA PDF DAPAT MENGUNGGAH 10-20 BERKAS PDF DAN MENGAJUKAN IZIN UNTUK MENGAJUKAN PERTANYAAN BERDASARKAN DOKUMEN-DOKUMEN INI DAN MENDAPATKAN JAWABAN DENGAN SUMBER YANG DIKUTIP. INI HARUS MENJADI APLIKASI SKALA PENUH, DIKERAHKAN DAN DIBAGIKAN。

Pada 2026, ini adalah salah satu koleksi sinyal tertinggi Anda dapat menunjukkan majikan atau klien。

Sumber Daya Liar

Alfamindex: Investasi RAG
Links:name
Bina salah satu jalan tercepat untuk pertanyaan dokumen dan sistem jawaban。

Akademi LangChain: Pengantar ke LangGraph
Links:https://academy.langchain.com/courses/intro-ke-langgrap
Cairo LangGraph secara resmi bebas dari tuduhan. Diaz LangGraph adalah salah satu kerangka pemrograman Agen arus utama, meliputi manajemen negara, memori, loop partisipasi manusia dan kolaborasi Agen ganda。

AI SDK Vercel AI (dokumen resmi gratis)
Links:https://sdk.vercel.ai/docs
Beberapa kode dapat digunakan untuk aplikasi Next.js untuk menambahkan streaming chat, generasi terstruktur dan kemampuan panggilan alat. Dukungan untuk lebih dari 20 penyedia AI。

Vibe Coding to Agency AI: Program Evolusi Berikutnya
Links:https://www.youtube.com/watch?v=LHAvPwolz8U
Onderview tentang bagaimana daerah ini bergerak dari Vibe Coding acak ke sistem terstruktur yang mampu melakukan perencanaan otonom, implementasi dan validasi. Ini juga arah di mana pasar pekerjaan bergerak。

What Is Agency Engineering
Links:https://www.mindstudio.ai/blog/apa-adalah-attic-engineering/
Penjelasan yang jelas tentang peralihan dari Vibe Coding ke Agency Engineering. Pada tahun 2026, inilah paradigma kompetensi di mana banyak majikan merekrut。

ARAH III: PENASIHAT OTOMASI AI

Kesesuaian untuk penduduk: orang yang ingin melayani perusahaan segera, termasuk pekerja lepas, konsultan atau orang yang ingin mendirikan perusahaan jasa agensi。

Enterprises bersedia membayar uang real untuk otomatisasi AI karena dapat menggantikan proses yang mahal, berulang, manual. Ini adalah salah satu jalur pembayaran tercepat untuk keterampilan Vibe Coding。

Adegan otomasi paling umum dan berharga

PENYORTIRAN AI MAIL DAN RESPON OTOMATIS

Penyaringan klien potensial potensial dan individuisasi outreach

Pengekstrakan dan pengolahan Dokumen Eksplorasi

Sebuah robot pelanggan berdasarkan dasar pengetahuan

PEMBERSIHAN DAN PEMBERSIHAN DATA CRM

Faktur dan pengolahan kontrak。

Sumber Daya Liar

dokumentasi ny8n (bebas, sumber terbuka)
Links:https://docs.n8.io/
Alat otomasi aliran kerja tervisualisasi, aslinya mendukung node AI. Anda dapat menghubungkan LLM ke lebih dari 400 integrasi, termasuk Slack, Gmail, Notion, HubSpot, Airtable, dll. Versi hosting sepenuhnya gratis。

[YouTube, bebas biaya]
Links:https://www.youtube.com/watch?v=QoQBzR1NIqi
Otomasi aliran kerja AI dari primer ke canggih。

Make
Links:https://www.make.com/
Visualisasi platform otomatis. Untuk alur kerja multi-langkah kompleks, itu lebih kuat daripada Zapier。

Pembuat Otomosi: Vibe Coding to Agency AI (YouTube, gratis)
Links:https://www.youtube.com/watch?v=LHAvPwolz8U
Keterangan dari bagaimana pembina otomatis menggabungkan alat automasi n8n, OpenAI dan Vibe Coding dengan proses otomatisasi end-to-end enterprise。

Koleksi karya ke arah sini

Bina proses otomatis akhir-ke-akhir untuk potensi pelanggan skrining dan outreach:

Impor dari CSV atau Airtable

DENGAN MENGGUNAKAN LLM UNTUK MEMPELAJARI SETIAP CALON PELANGGAN DAN MENENTUKAN PADANAN SESUAI DENGAN CITRA PELANGGAN YANG DIINGINKAN

penambangan dan penyortiran untuk memimpin

Drafting personalisasi outreach pesan dalam satu sama lain 's nada

Diarsipkan semua hasil dan status, catatan kembali ke tabel asli。

Ini adalah proyek otomasi yang nyata dan dapat biaya untuk bisnis mana yang membayar。

Feeding: mengembangkan aplikasi seluler dengan Vibe Coding

Semua isi terdahulu di defaultkan pada Anda membangun aplikasi Web. Koder Paling Vibe melakukan hal yang sama。

Tetapi jika ide Anda adalah aplikasi mobile, yang merupakan produk yang perlu di pasang oleh pengguna pada ponsel, itu berbeda. Sebelum awal bulan pertama, patut dipahami ekologi ini。

Status nyata dari 2026 langkah akhir

Pengembangan bergerak jelajah lebih sulit daripada pengembangan Web. Alasannya sangat spesifik: React Nature bergantung pada pohon yang lebih besar dan lebih rentan. AI sesekali menghasilkan kode yang menganggap bahwa beberapa versi paket kompatibel, tetapi versi aktual mungkin konflik; iOS dan simulator Android membutuhkan konfigurasi lokal dan AI tidak dapat dikelola sepenuhnya untuk Anda; pengujian UI mobile baik membutuhkan mesin nyata atau simulator tidak dapat dipratinjau langsung dalam peramban seperti Web; Expo secara signifikan menyederhanakan proses tetapi memperkenalkan keterbatasannya sendiri。

Jika Anda ingin membangun aplikasi mobile, konfigurasi yang disarankan adalah:

Frame: React Nature + Express, pekerjaan

Rantai Alat: Expo Router untuk navigasi, berdasarkan rute berkas, mirip dengan model Next.js App Router

Alat AI: Claude Code + Cursor, alat yang sama dengan Web, yang mendukung React Nature dengan baik

templat awal: npx buat-expo-app atau buat-rn-baru untuk hasilkan perancah dikonfigurasi

Preview: Gelung umpan balik tercepat adalah pratinjau Express Go App pada telepon fisik melalui kode dua dimensi。

Sumber Daya Liar

Vibe Coding Aplikasi Mobile dari 0 ke Pasar
Links:https://www.youtube.com/watch?v=SzmXEOozpFg
Eksmonstrasi lengkap tentang bagaimana membangun aplikasi pelacakan kebugaran dari nol menggunakan Claude Code + Cursor + React Nature + Express Router. Kandungannya meliputi aliran kerja Figma-to-spec, fasa Claude Code, dan bagaimana menangani ketergantungan Expo secara real time。

Menciptakan Aplikasi Alam yang Reakta dengan Coding Vibe pada tahun 2026
Links:https://blog.vibecoder.me/bild-react-nate-app-vibe-coding
Pameran langkah demi langkah untuk mendirikan proyek Expo, menulis proyek singkat dan menggunakan Claude Code untuk mengimplementasikan rencana build aplikasi mobile fasad。

SDK Kode Vibe Alam (bebas, sumber terbuka)
Links:https://github.com/react-native-vibe-code/react-native-vibe-code-sdk
IDE sumber terbuka yang dirancang untuk pembangunan aplikasi React Nature and Expo melalui tips bahasa alami. Ia dapat dipahami sebagai alat terdekat untuk Loveable dalam pengembangan mobile-end。

Dokumentasi Dokumentasi Dokumentasi Dokumentasi Dokumentasi Dokumentasi Dokumentasi Dokumentasi Dokumentasi Dokumentasi
Links:https://docs.expo.dev/
Konfigurasi Expo, Router dan peralatan referensi inti API. Disarankan agar dokumen ini dibuka di peramban saat menggunakan alat AI。

Saran yang paling penting adalah untuk menempelkan folder contoh perpustakaan Expo ke Google AI Studio setiap kali Anda mulai memindahkan sesi AI sehingga Gemini dapat menggunakan jendela konteks untuk menghasilkan dokumen berdasarkan contoh-contoh ini. Kemudian menggunakan dokumen dalam petunjuk, daripada mengharapkan model mengetahui API saat ini。

API DARI TERMINAL MOBILE BERUBAH DENGAN CEPAT, DAN DATA PELATIHAN BIASANYA TERTINGGAL DI BALIK KENYATAAN。

Feeding: peta alat lengkap — semua alat utama yang ada pada tahun 2026

Pedoman ini menyarankan Kursor 3.0 dan Claude Code sebagai alat utama. Namun, pada tahun 2026, bagan alat lengkap telah diperluas secara signifikan dan alat yang berbeda cocok untuk skenario yang berbeda. Ini gambar yang lebih lengkap。

Agen Terminal/ CLI

Kode Claude
Progent terminal Anthropic. Ini yang terbaik untuk repositori kode penuh dari penalaran dan tugas tingkat gudang。

Gemini CLI
Terminal sumber terbuka untuk Google. Sebuah alternatif bebas untuk Claude Code memiliki jendela konteks yang besar。

OpenCode
Agen CLI Sumber Terbuka Komunitas. Model yang bisa dipantau, biaya yang lebih fleksibel。

Droid PabrikName
Agen rekayasa perangkat lunak Autonomous, untuk perusahaan otomatisasi CI/CD。

Di antara mereka, Gemini CLI layak disebutkan khusus karena benar-benar bebas dan terbuka. Ini menggunakan jendela konteks 1 juta token Gemini 3.5 Pro, yang lebih besar dari Claude Code。

Pemasangan:

@google/gemini-cli

Kemudian lari:

gemini

Kita bisa digunakan. Anda dapat menggunakannya sebagai alternatif bebas untuk misi berbasis konteks, atau Anda dapat menggunakannya sebagai peninjau kedua alih-alih langkah "tangan menempel ke Gemini" pada bulan keempat aliran kerja。

Codex OpenAI, agen penyandi awan baru, bukan model lama, sekarang tersedia sebagai cloud encoded Agent dalam ChatGPT dan melakukan tugas yang berbeda. Kodeks berjalan di awan, bukan secara lokal. Anda dapat mengakses melalui bar sisi ChatGPT。

SENARAI SAMBUNGAN IDE PENGATURCARAAN AGI AGI AGI AI

Kursor Kursor 3.0
Cogodis Supports Agens Windows dan awan paralelAgent. Versi bebas / $ 20 per bulan。

Windsurf
Agen Cascade, yang diakuisisi oleh Google, lebih berwirausaha. Versi bebas / 15 dolar per bulan。

Andika GitHub Copilot
Hampir di mana-mana, VS Code, Jetbrains, Xcode, Neovim. Versi gratis / $10 per bulan。

- Cline
Sumber terbuka, bawa modelmu sendiri. Bebas biaya dan dibayar oleh token API。

Google Antigravitasi
Ada beberapa Agen Manager View, yang dapat dibangun secara paralel. Harga untuk ditentukan。

Ved
PRESTASI PERTAMA, ASLI DARI AI DARI AWAL. BEBAS。

Kode voice Kilo
Plugin Kode VS, sumber terbuka, mendukung semua penyedia utama. Bebas。

Lanjutkan
Alternatif Copilot Sumber Terbuka, Dukungan Kode VS dan Jetbrains. Bebas。

Sumber Daya Liar

Kecamp: 15 Alat Bangunan Teratas untuk Membangun Master pada tahun 2026
Links:https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster
Salah satu alat paling lengkap pada tahun 2026, yang meliputi Agen CLI, AI IDE, pembuat peramban dan alat khusus. Ini memberikan saran ringkas bahwa browser harus memprioritaskan v0, editor untuk Codex, skenario penuh daya ke Cursor, dan terminal ke Claude Code。

Panduan Coding Vibe Ultimate (Pengadilan Penuh Tutorial 2026) (Youtube, bebas biaya)
Links:https://www.youtube.com/watch?v=KO vCL1Zhpi
Master 3 Jam 'S tentu saja, satu kali cakupan kursor, Codex, Antigravitasi, Claude Code, Loveable, Bolt, Suprabese, Vercel, Figma Stitch, V0 dan MCP server. Pada Mei 2026, itu adalah salah satu sumber daya video tunggal yang paling lengkap。

Padang Penuh 2026 (Youtube, bebas)
Links:https://www.youtube.com/watch?v=BpOsHF5Oj I
uraikan bagaimana membangun aplikasi Web, aplikasi desktop dan aplikasi iOS dari pustaka kode yang sama menggunakan Codex dan Firebase. Diterbitkan pada Mei 2026. Mereka cocok untuk pemula yang ingin mencakup berbagai platform, tetapi tidak ingin beralih toko teknologi sering。

Feeding: komunitas layak bergabung

Pembelajaran tercepat sering kali terjadi di komunitas - komunitas tempat orang - orang berbagi secara langsung apa yang mereka bangun. Berikut ini adalah komunitas yang masih aktif pada pertengahan tahun 2026。

Tak Terikat Cinta (bebas dari tuduhan)
Links:https://lovable.dev/community
Vibe Coding dengan lebih dari 160.000 anggota, meliputi semua zona waktu, adalah salah satu komunitas Vibe Coding paling aktif pada tahun 2026. Bantuan real-time, kegiatan mingguan, dan saluran tampilan proyek online。

r/vibecoding (free of charge, Reddit)
Links:https://www.reddit.com/r/vibecoding/
Vibe Coding Komunitas berkumpul. Ini adalah presentasi proyek, perbandingan alat, bantuan debugging, dan kisah nyata kegagalan yang tidak dapat Anda lihat di YouTube。

Forum Kursor (komunitas bebas resmi)
Links:https://forum.cursor.com/
Komunitas resmi Kursor, di mana tim teknik akan membaca dan merespon. Ogos "Built with Cursor" poster adalah salah satu sumber terbaik untuk menemukan kasus proyek nyata dan memahami kesulitan praktis。

Bina dalam Strategi Publik untuk Para Pengekod Vibe
Links:https://www.youtube.com/watch?v=ke6oxy8Z7C4
Panduan Strategi Bangunan Terbuka untuk Kode Vibe: Apa yang harus diposting, ketika, bagaimana mengubah proses konstruksi proyek menjadi penonton target, dan bagaimana mempercepat rilis berikutnya。

Postariv AI: Vibe Coding to SaaS Pipeline
Links:https://postiv.ai/blog/vibe-coding-marking
Kover proses lengkap setelah produk selesai: memvalidasi model bisnis, mengembangkan strategi persinyalan, dan menggunakan LinkedIn dan X untuk mendistribusikan produk yang sudah Anda miliki secara online。

(tanpa biaya, Substack)
Links:https://karozieminski.substack.com/p/vibecoding-resources-hub
AI merekam lebih dari 15 panduan tangan-on yang meliputi Vibe Coding, spesifikasi-driven pengembangan dan AI mendukung konstruksi produk, jalur pembangun lengkap: dasar, produksi, keselamatan, debugging dan pemilihan alat. Ini adalah salah satu yang lebih lengkap satu halaman pusat sumber daya di Substack。

OxMinds: Panduan Lengkap Pembangunan Berkuasa AI
Links:https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026
Sebuah panduan lengkap 2026 yang meliputi penggunaan data, enam tahap alur kerja konstruksi, yaitu konseptualisasi generasi konteks, tinjauan publikasi yang dioptimalkan, dan tata letak Agen ganda dan akses langsung ke daftar konfigurasi dasar。

Kode Augment: Vibe Coding vs Spec-Driven Development (pedoman bebas)
Links:https://www.augmentcode.com/guides/vibe-coding-vs-spec-diven-development
Untuk memberikan kerangka pengambilan keputusan yang jelas untuk membantu hakim ketika tepat untuk Vibe Coding murni dan ketika spesifikasi harus digunakan untuk mendorong pengembangan. Artikel tersebut juga menggambarkan tembok "3 bulan" yang umum digunakan dalam proyek Vibe Coding dan bagaimana mengidentifikasi kapan berganti mode。

Bagaimana cara menggunakan peta jalan ini

Kebanyakan orang yang membaca artikel ini tidak akan menyelesaikannya. Bukan karena isinya terlalu sulit, tetapi karena mereka menganggapnya sebagai daftar bacaan daripada sebagai rencana pembangunan。

Voder Vibe, sukses sejati pada tahun 2026, biasanya memiliki tiga kebiasaan umum:

Mereka menerbitkan produk, bukan hanya belajar。
TEMPAT BERSEJARAH SETIAP BULAN HARUS DIAKHIRI DENGAN PROYEK YANG DIKERAHKAN, URL YANG NYATA DAN DAPAT DIAKSES, DARIPADA KURSUS YANG SELESAI. VOVE 6 TIDAK SEMPURNA TETAPI MENERBITKAN PRODUK - PRODUK YANG MELEBIHI 20 KURSUS YANG TELAH SELESAI。

Mereka dibangun di depan umum。
515 menerbitkan proses pembentukan Anda pada X, LinkedIn atau platform pengguna target manapun. Sebagai contoh, "Hari pertama pembangunan X" dan "saya di X, inilah yang saya pelajari." peluang terbaik di daerah ini biasanya berasal dari visibilitas daripada dari CV。

Mereka menyusut pertama, kemudian melebar。
Hanya satu alat yang dipilih dalam enam bulan pertama, seperti Cursor atau Claude Code; gudang teknologi, seperti Next.js + Suprabese + Vercel; dan sebuah arah, seperti pembangun produk, insinyur AI atau konsultan otomatis. Lebih dalam dari lebar. Ketika Anda benar-benar menerbitkan tiga hal, Anda memperluas ruang lingkup。

Artikel tersebut disusun oleh penulis berdasarkan catatan enam bulan dan jalur praktik pribadi dan disunting oleh AI Model Minimax dan Opus 4.6。

[Terkekeh]Bahasa Asli]