Setiap Level Pemrograman Perulangan Claude Code

AAI LABS
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00Rekayasa perulangan (loop engineering) pada dasarnya telah menjadi hal yang esensial dalam cara kita menggunakan agen AI saat ini, dan itu karena
00:00:04agen kini benar-benar dapat berjalan sendiri untuk waktu yang jauh lebih lama dan terus berlanjut. Jadi kita akan
00:00:09menunjukkan tiga perulangan berbeda kepada Anda dan kami telah mengaturnya ke dalam beberapa level agar lebih mudah.
00:00:13Level satu menunjukkan unit dasar dan cara menggunakannya secara efisien. Level dua menunjukkan cara membangun
00:00:18unit tersebut menjadi sebuah pabrik, dan level tiga akhirnya membebaskan sebagian besar waktu Anda dan membuatnya benar-benar
00:00:23bersifat agen. Karena video ini dipadati dengan banyak informasi, kami telah menyertakan stempel waktu di bawah agar
00:00:28Anda dapat melompat kembali ke momen apa pun jika sewaktu-waktu perlu kembali ke video ini. Selain itu, kita akan
00:00:33menggunakan Claude Code dalam video ini, tetapi sistem yang akan kami tunjukkan juga akan berfungsi dengan Codex
00:00:38serta untuk alat-alatnya, kami menggunakan warp dan VS Code. Keduanya mudah dipasang dan Anda hanya perlu
00:00:43membuka satu folder yang sama di keduanya dan mulai mengikuti kami. Sebelum kita benar-benar beralih ke cara Anda
00:00:48menerapkan rekayasa perulangan dalam Vibe Coding, kita perlu menjelaskan apa itu perulangan. Jadi sebelumnya, saat Anda
00:00:53sedang membangun sesuatu, Anda sebenarnya sudah berada dalam sebuah perulangan. Anda memberikan sebuah perintah kepada agen dan ia mulai
00:00:57membangun. Kemudian setelah selesai, ia pada dasarnya meminta Anda untuk memverifikasinya dan jika salah, Anda memberikan
00:01:02perintah lain kepada agen tersebut dan ia mulai membangun lagi. Anda sudah berada dalam sebuah perulangan. Nah, perulangan agen adalah
00:01:07ketika Anda mengeluarkan diri dari proses ini dan bagian verifikasi tersebut beralih ke agen juga. Dan
00:01:12ini secara alami adalah arah tujuan kita karena jika dipikir-pikir, membangun dengan agen bukanlah hal yang
00:01:17paling banyak menghabiskan waktu. Mereka melakukannya secara otonom di latar belakang. Apa yang sebenarnya membutuhkan
00:01:21perhatian Anda adalah memeriksa apakah agen tersebut berhasil atau tidak. Tetapi agen Anda hanya dapat melakukan
00:01:26verifikasi jika ia tahu seperti apa keluaran yang benar. Itulah bagian inti dari perulangan. Namun ada
00:01:30bagian-bagian lain juga. Pertama, ada sesuatu yang perlu memulai perulangan. Lalu ada perulangan itu sendiri.
00:01:35Dan di akhir setiap perulangan, pada dasarnya harus ada pemeriksaan verifikasi, yang memutuskan apakah
00:01:41agen sudah selesai atau belum. Dan pemeriksaan verifikasi itu harus ditentukan oleh Anda. Jadi dalam perulangan agen,
00:01:46bagian yang Anda pegang adalah bagian yang memang selalu menjadi milik Anda. Itulah bagian yang memutuskan
00:01:50apakah Anda mematikan agen atau Anda membutuhkannya untuk bekerja lebih banyak. Anda tidak bisa benar-benar menyerahkan ini. Nah,
00:01:55Anda mungkin berpikir, mengapa kita tiba-tiba beralih ke rekayasa perulangan dan mengapa ini tidak berhasil
00:01:59setahun yang lalu? Jawabannya adalah model-model saat itu belum benar-benar bisa berjalan selama ini. Dan sekarang dengan model-model baru
00:02:04yang bermunculan, mereka pada dasarnya dapat bekerja tanpa Anda selama berjam-jam. Jadi inilah yang kita gunakan
00:02:08untuk menjalankan semua ini. Ini adalah aplikasi janji temu untuk sebuah salon. Seseorang datang ke situs,
00:02:13memilih seorang penata rambut, dan kemudian mereka dapat melihat waktu luang penata rambut tersebut di berbagai hari dan memesan
00:02:17janji temu. Dan kemudian ada login staf karena setiap salon yang menggunakan ini akan memiliki
00:02:22resepsionis yang mengoperasikannya. Mereka menyetujui atau menolak permintaan yang masuk dan mereka mengelola kalender
00:02:27untuk berbagai penata rambut di salon tersebut. Saat ini ada banyak hal yang kurang di sini. Tidak ada halaman
00:02:31landing dan ada fitur-fitur penting lainnya yang masih harus kita tambahkan. Ini adalah sesi Claude Code
00:02:36tempat kami membangunnya. Kami membuat folder rekayasa perulangan ini dan di dalamnya kami meminta Claude
00:02:41Code untuk menyiapkan proyeknya. Aplikasinya sendiri berada di dalam folder loop salon ini dan itu hanyalah aplikasi Next.js.
00:02:46Jika ini adalah pertama kalinya Anda mendengarnya, jangan khawatir. Anda cukup memberi tahu model bahwa Anda ingin
00:02:51membuat aplikasi Next.js dan mulai membangun dari sana dan ia akan menangani hal itu untuk Anda. Ini adalah
00:02:55salah satu cara paling populer untuk membangun situs web aktual seperti yang kita bangun di sini. Sekarang ada
00:03:00beberapa hal yang harus Anda miliki di dalam folder Anda. Pertama, kita memiliki file Claude.md kita dan yang tertulis di dalamnya hanyalah untuk pergi
00:03:04dan melihat Agents.md. Itu karena kita mungkin perlu menjalankan lebih dari satu agen di repo ini,
00:03:09bukan hanya Claude Code. Kami menggunakan file ini karena hampir setiap agen lain menggunakan instruksi di dalam
00:03:14Agent.md sebagai aturan tentang apa yang harus dilakukan setiap kali sesi baru dibuka. Hanya Claude Code yang menggunakan Claude.md.
00:03:21Dan di dalam Agent.md, kita sebenarnya tidak perlu menulis apa pun sendiri. Kemudian kita memiliki file ini
00:03:27bernama design.functional.md yang mencakup semua bagian aplikasi yang dapat diklik yang sebenarnya harus
00:03:33dikerjakan oleh pengguna. Dan desain untuk bagian-bagian itu berasal dari file ini. Dan jika Anda perhatikan,
00:03:36aplikasinya terlihat seperti Duolingo. Itu karena kita menyalin desain Duolingo ke dalamnya.
00:03:41Kemudian ada beberapa keterampilan yang harus Anda ketahui. Yang pertama adalah Grill Me, yang kami gunakan saat
00:03:45kami membangun versi pertama ini. Fitur ini terus menanyakan berbagai hal kepada Anda sampai agen benar-benar jelas tentang
00:03:50apa yang Anda inginkan. Ada keterampilan lain di sini juga, dan kita akan membahasnya nanti. Dan Anda akan melihat
00:03:55bahwa proyek ini sudah jadi. Kami melakukannya dengan sengaja. Ketika Anda memulai sesuatu yang baru,
00:03:59hal pertama yang Anda buat adalah MVP, yang pada dasarnya adalah versi kerja paling kasar dari
00:04:04produk Anda yang hanya melakukan hal utama dan tidak ada yang lain. Dan Anda tidak ingin membangun itu dengan perulangan.
00:04:08MVP toh cepat untuk dibangun. Tetapi untuk memasang perulangan padanya, Anda harus memutuskan seperti apa bentuk kata selesai
00:04:13sebelum agen bahkan mulai. Dan pada titik itu, Anda belum benar-benar tahu ke mana arah produk tersebut
00:04:18nantinya. Jadi mencari tahu hal itu akhirnya memakan waktu lebih lama daripada sekadar membangun versi pertama sendiri.
00:04:23Tetapi sebelum kita mulai dengan level satu, alangkah baiknya jika Anda berlangganan ke saluran ini dan menekan
00:04:27tombol suka. Gestur dukungan kecil ini sangat berarti bagi kami. Jadi itu membawa kita ke level satu dari
00:04:33rekayasa perulangan. Di sini kita bekerja dengan satu perulangan yang memiliki satu tujuan dan pemeriksaan
00:04:37pada dasarnya beralih dari Anda ke agen. Dan tempat di mana kita melakukan ini adalah halaman landing,
00:04:42yang sebenarnya terdengar seperti tempat yang salah untuk itu karena halaman landing hanyalah satu layar.
00:04:47Agen pada dasarnya dapat membangunnya dalam satu kali jalan dan jika ada yang salah, itu dapat diperbaiki dengan satu
00:04:51perintah saja dan bukan beberapa perintah. Menempatkan perulangan di sekitar halaman landing akan menjadi lebih banyak pekerjaan daripada halaman itu sendiri.
00:04:57Tetapi di sini kita ingin halaman landing yang kaya gerakan menggunakan keterampilan GSAP. Semuanya beranimasi masuk,
00:05:02dan jika dipikir-pikir, itulah bagian yang tidak bisa benar-benar Anda periksa hanya dengan melihatnya sekali. Dengan animasi,
00:05:07ada begitu banyak hal yang dapat salah dilakukan oleh agen dan itu membutuhkan banyak proses bolak-balik. Ini
00:05:12sebenarnya adalah cara yang sangat baik untuk memeriksa apakah sesuatu perlu diulang, yaitu jika hal itu memerlukan banyak proses
00:05:16bolak-balik dengan agen. Sekarang, sebelum kita menyiapkan satu perulangan, ada masalah penamaan yang membingungkan orang dan
00:05:21Anda akan menemukannya begitu Anda membuka menu garis miring di Claude code. Ada perintah bernama
00:05:25loop dan ada perintah bernama goal, dan rekayasa perulangan pada dasarnya menggunakan perintah goal. Perintah loop
00:05:30menjalankan sebuah perintah berdasarkan pengatur waktu, jadi setiap lima menit atau setiap jam perintah itu berjalan lagi apakah ada yang berubah
00:05:35atau tidak. Tetapi perintah goal adalah perintah yang terus bekerja sampai hal yang Anda minta benar-benar
00:05:40selesai. Jadi ketika kita mengatakan rekayasa perulangan, kita menggunakan perintah goal. Perintah loop juga digunakan dalam
00:05:45beberapa bentuk atau alur kerja rekayasa perulangan, tetapi kita tidak akan menggunakannya di sini. Perintah goal itu sendiri cukup
00:05:51sederhana. Anda mengetik slash goal lalu Anda menulis tujuan yang ingin dicapai dan Anda juga memberi tahu
00:05:56model cara memverifikasi apakah ia telah mencapainya atau tidak. Kemudian di akhir setiap giliran, model yang lebih kecil membaca
00:06:00percakapan tersebut dan memutuskan apakah agen perlu mengerjakan ini lagi atau apakah kondisinya
00:06:05sudah terpenuhi atau belum. Jadi untuk memulai halaman landing, kita menggunakan keterampilan grill me lagi dan kita memberitahunya bahwa kita memerlukan
00:06:11file spesifikasi untuk fitur ini. Sekarang, sebelum kita masuk ke apa yang kita katakan padanya, Anda perlu melihat folder
00:06:16features di dalam proyek. Setiap folder di sana adalah satu fitur yang harus diselesaikan oleh agen dan
00:06:21masing-masing folder tersebut menampung dua hal. Ada file spesifikasi, yang merupakan tempat di mana segala hal tentang
00:06:25fitur tersebut dicatat, dan ada folder verifikasi yang awalnya kosong dan terisi saat
00:06:31agen menjalankan perulangan untuk fitur tersebut. Kemudian kita memberitahunya keterampilan mana yang harus digunakan. Yang pertama adalah
00:06:35keterampilan GSAP dan itulah yang memberi Anda halaman landing dengan animasi yang indah ini, tetapi animasi
00:06:41yang seberat itu sangat memperlambat halaman. Jadi kita menyuruhnya untuk menggunakan keterampilan optimize juga, yang meninjau kembali
00:06:45halaman tersebut dan mengembalikan kecepatannya tanpa menghilangkan animasinya. Kita juga memberikannya referensi gambar
00:06:50untuk diikuti, yaitu halaman landing dengan ilustrasi di atasnya. Dan hal terakhir yang kita
00:06:55sampaikan adalah tentang pemeriksaan. Biasanya, ini adalah bagian di mana Anda dan agen bolak-balik,
00:06:59di mana Anda melihat halaman tersebut, Anda memberi tahu apa yang salah dan agen pergi memperbaikinya. Jadi kita memberitahunya bahwa untuk
00:07:04benar-benar memeriksa desain, ia harus menggunakan alat khusus yang disebutkan dalam Claude.MD global kita, yaitu
00:07:11alat yang berlaku untuk setiap proyek di komputer alih-alih hanya untuk proyek ini saja. Jadi apa yang ditulisnya adalah
00:07:15kedua hal tersebut sekaligus. Itu adalah spesifikasi untuk membangun halaman dan itu adalah daftar centang verifikasi yang
00:07:20dijalankan terhadap halaman tersebut. Dan itulah mengapa alat tangkapan layar dari file global berakhir di sana,
00:07:25karena alat itu mengambil tangkapan layar jauh lebih cepat daripada membuka browser penuh setiap saat.
00:07:30Anda dapat menjeda di sini dan membaca seluruh perintah jika mau. Itu membuat semua ini jauh lebih jelas.
00:07:34Setelah itu, Grill.me mulai mengajukan pertanyaannya dan menanyakan serangkaian pertanyaan kepada kita tentang halaman landing tersebut.
00:07:39Kemudian kita memberitahunya satu hal lagi dan inilah hal yang mengubah spesifikasi menjadi sebuah tujuan. Kita menyuruhnya untuk menulis file
00:07:45spesifikasi sebagai tujuan sehingga kita dapat menjalankannya dengan perintah goal dan ia membuat beberapa perubahan lain berdasarkan
00:07:50hal itu, yang berarti mulai saat itu, yang harus kita lakukan adalah menjalankan perintah goal dan memberikannya file
00:07:55spesifikasi halaman landing. Dan melakukan semua itu lagi untuk setiap fitur adalah pekerjaan yang tidak ingin Anda ulangi.
00:08:00Jadi kita membuat keterampilan goal writer. Di dalamnya sudah ada semua hal yang baru saja kita bahas, termasuk baris itu.
00:08:06Dan apa yang dilakukannya adalah membuat folder di dalam folder features dengan file spesifikasi yang sudah ditulis sebagai tujuan.
00:08:11Kemudian ia mulai bekerja dan melewati putaran pertama lalu putaran kedua di mana ia memiliki
00:08:16daftar centang lagi dan menilai kinerjanya sendiri berdasarkan daftar tersebut secara berulang-ulang. Setelah itu, proses berhenti dan saat itu
00:08:21prosesnya telah berjalan selama 38 menit dan menghasilkan satu kesalahan, yaitu kedipan pada salah satu maskot.
00:08:26Jadi, inilah hasil akhirnya. Setelah memberikan satu instruksi koreksi lagi, para maskot berkedip sesuai
00:08:31dengan yang kita inginkan dan satu kesalahan tersebut adalah hal yang tidak akan pernah bisa ditangkap oleh verifikasi karena
00:08:36tangkapan layar hanya menangkap satu momen tunggal dan jeda antara satu kedipan dengan kedipan berikutnya terlalu singkat untuk
00:08:42ditangkap oleh dua tangkapan layar. Selain itu, ilustrasinya keluar dengan sangat bagus dan
00:08:46sesuai dengan gaya Duolingo yang kita tuju, yang merupakan gaya yang sama yang sudah ada di
00:08:50aplikasi utama. Hasilnya juga mengikuti referensi dengan cermat dan mengklik pesan sekarang langsung membawa Anda masuk ke
00:08:55dalam aplikasi sehingga Anda dapat mulai menggunakannya. Sekarang ada beberapa penyiapan yang menjadi landasan bagi semua hal dari titik ini.
00:09:00Ada tiga hal yang dibutuhkan aplikasi ini yang tidak dapat dilakukan oleh komputer Anda sendiri dan Anda tidak akan
00:09:05mengoperasikan satupun dari hal tersebut sendiri, jadi jangan khawatir tentang bagian itu. Jadi saat ini semua yang telah Anda bangun
00:09:10berada di dalam satu folder di komputer Anda dan itu adalah satu-satunya salinan di mana pun. Komputer Anda rusak atau
00:09:15Anda menghapus hal yang salah dan seluruh proyek akan ikut hilang. Itulah hal pertama yang harus
00:09:20berubah dan GitHub adalah hal yang memperbaikinya. Claude menulis kode proyek di folder Anda dan GitHub mengambil kode
00:09:25tersebut secara daring dan menyimpannya di repositori, yang pada dasarnya adalah folder yang sama yang berada di situs mereka, bukan
00:09:31hanya di mesin Anda. Hal kedua adalah aplikasi ini belum mengingat apa pun. Orang sungguhan
00:09:36akan menggunakan ini sehingga pemesanan tersebut harus disimpan di suatu tempat, jika tidak seseorang memesan
00:09:41janji temu, mereka menyegarkan halaman dan semuanya hilang begitu saja. Jadi Anda memerlukan basis data dan yang kami
00:09:45gunakan adalah Supabase. Dan hal terakhir adalah tidak seorang pun yang dapat mengakses aplikasi Anda karena aplikasi ini hanya
00:09:50berjalan di komputer Anda sendiri. Jadi aplikasi ini harus diterapkan, yang artinya aplikasi tersebut diletakkan di suatu tempat di internet
00:09:55tempat orang lain dapat membukanya dan Vercel adalah yang melakukan itu. Sekarang yang sebenarnya Anda lakukan pada ketiga
00:09:59platform tersebut adalah membuat akun dan itu dilakukan dengan mengunjungi setiap situs web dan mengeklik masuk dengan Google.
00:10:04Tidak ada yang perlu dikonfigurasi dan tidak ada yang perlu disiapkan. Segala sesuatu setelah itu melalui agen dan
00:10:08alasan hal itu berhasil adalah karena ketiganya memiliki CLI. Agen Anda tidak dapat mengeklik di situs web
00:10:14seperti yang Anda lakukan. Jadi CLI adalah aplikasi yang digunakan agen untuk menggunakan platform tersebut. Biasanya Anda harus
00:10:20membuat repositori di GitHub serta proyek di Supabase dan Vercel, tetapi Claude dapat melakukannya menggunakan CLI.
00:10:26Jadi setelah Anda membuat akun di ketiga platform tersebut, Anda kembali ke agen dan memberi tahu bahwa Anda
00:10:31ingin agen menggunakan ketiganya menggunakan CLI. Agen akan memberi Anda satu perintah untuk masing-masing dan Anda perlu
00:10:37menjalankannya di terminal lain. Agen Anda sudah berada di terminal Anda, jadi Anda membuka
00:10:41terminal kedua dan menempelkan perintah tersebut di sana. Perintah itu akan menginstal CLI untuk Anda dan kemudian untuk
00:10:46masuk ke akun Anda, peramban akan membuka halaman di peramban Anda. Kemudian Anda menyetujuinya dan otentikasi
00:10:51pun selesai. Mulai saat itu agen Anda dapat melakukan segalanya di platform tersebut dan Anda tidak perlu
00:10:56membuka situs-situs itu lagi. Dan Anda tidak perlu benar-benar mengingat semua ini karena kami telah menyediakan
00:11:00file penyiapan gratis di deskripsi. Anda tinggal menyerahkan file tersebut kepada agen dan pada dasarnya file itu menyiapkan
00:11:05aplikasi Next.js untuk Anda lalu memandu Anda melalui segala hal lain yang Anda perlukan agar ketiga hal ini
00:11:10terhubung. Selain itu, karena aturan pada platform ini selalu berubah, platform-platform ini telah merilis
00:11:16keterampilan untuk agen. GitHub tidak terlalu membutuhkan keterampilan. GitHub tidak banyak berubah dan
00:11:21masih belum banyak berubah jadi kami tidak memilikinya untuk itu. Namun kami memiliki keterampilan penerapan ke Vercel ini yang pada dasarnya
00:11:26memberitahu agen cara menggunakan CLI Vercel untuk menerapkan proyek Anda secara otomatis. Dan kemudian kami memiliki
00:11:31keterampilan Supabase dan praktik terbaik Supabase. Dan sekali lagi ini dipicu secara otomatis sehingga kapan pun agen Anda
00:11:37perlu menggunakan salah satu dari kedua platform ini, agen akan menggunakannya sendiri dan Anda tidak
00:11:42perlu melakukan apa pun. Dan basis data Supabase ini akan terisi dengan data dan proyek Anda
00:11:47akan ditayangkan di Vercel. Kami akan menyertakan tautan ke keterampilan ini di deskripsi di bawah. Namun sebelum
00:11:52kita beralih ke tingkat berikutnya, mari kita dengarkan sepatah kata dari sponsor kita, Hedra. Dan sangat mudah untuk menyamakannya
00:11:57dengan agen seperti Manus yang meneliti sesuatu dan merencanakan sebuah proyek. Hedra juga melakukan itu. Perbedaannya adalah
00:12:02apa yang terjadi setelah memberikan video yang sudah selesai, bukan dokumen, bukan tumpukan salindia. Bayangkan Claude bertemu Canva.
00:12:08Anda berbicara dengannya dan ia membangun bersama Anda. Kami mencobanya di dalam sebuah ruang dan meminta video promo pendek
00:12:13untuk sebuah aplikasi. Bagian yang menarik bukanlah videonya, melainkan melihat bagaimana agen sampai di sana.
00:12:18Pertama muncul beberapa pertanyaan klarifikasi, lalu rencana yang diusulkan. Daripada menebak-nebak, Hedra meneliti
00:12:23topik tersebut sendiri dan membawa kembali temuan nyata. Dari sana, naskah lengkap mendarat di kanvas,
00:12:28agen memandu kita melaluinya dan keluarlah promo yang sudah selesai. Ini benar-benar ditujukan bagi siapa saja yang melakukan
00:12:33pemasaran mereka secara mandiri tanpa editor dan tanpa penulis di belakang mereka. Hedra pada dasarnya memungkinkan satu orang melakukan
00:12:38apa yang tadinya membutuhkan satu tim penuh. Anda dapat mencobanya secara gratis di Hedra.com dan menggunakan kode kami untuk diskon 50%
00:12:43untuk bulan pertama Anda. Tautan dan kodenya ada di deskripsi di bawah. Jadi itu membawa kita ke tingkat
00:12:48berikutnya. Tingkat dua disebut perulangan pabrik perangkat lunak. Pada tingkat ini, Anda merencanakan beberapa fitur secara kolektif
00:12:53dan mengaturnya dalam perulangan sehingga agen Anda dapat terus bekerja semalaman pada daftar fitur dan
00:12:59tidak berhenti setelah satu fitur selesai. Karena perulangan ini bisa sangat panjang, perulangan ini memerlukan pelacak untuk memberi tahu
00:13:04apakah daftar fitur yang diberikan telah selesai atau belum. Perulangan tujuannya selesai setelah
00:13:09semua fitur dalam daftar telah dicentang. Sekarang saat Anda merencanakan fitur baru,
00:13:13Anda tidak hanya harus menuliskan apa yang akan dibuat, tetapi Anda juga harus membuat antarmuka penggunanya. Ini disebut
00:13:18prototipe dan ini adalah versi aplikasi yang sepenuhnya dapat diklik tetapi sebenarnya tidak berfungsi. Ada dua alasan besar
00:13:23untuk membangun prototipe antarmuka sebelum Anda mulai membangun. Alasan pertama adalah dengan
00:13:28prototipe, Anda dapat mengetahui apakah hal yang Anda bayangkan untuk dibangun sebenarnya adalah hal
00:13:33yang ingin Anda bangun. Dan alasan kedua adalah prototipe ini menjadi cara bagi agen
00:13:37yang bekerja dalam perulangan untuk memverifikasi apakah hal yang dibangunnya sudah benar atau belum. Sekarang di dalam pabrik,
00:13:42Anda memiliki daftar dan agen menjalankan daftar tersebut dalam perulangan untuk mengerjakan setiap item satu per satu. Tapi bagaimana
00:13:48ia mengerjakan setiap item secara individual? Ketika agen utama memilih satu item, ia tidak melakukan pembangunan
00:13:53itu sendiri. Ia menyerahkan tugas tersebut kepada sub-agen dan sub-agen menyelesaikan fitur tersebut. Tapi bagaimana jika
00:13:58sub-agen mengacaukan pembangunan dan aplikasi Anda menjadi rusak? Inilah mengapa agen utama membuat salinan
00:14:03dari folder yang disebut cabang dan agen bekerja pada cabang tersebut. Ketika agen selesai, ia tidak memverifikasi
00:14:07dirinya sendiri. Ini membawa kita ke aturan lain yang sangat penting dalam rekayasa perulangan. Agen yang melakukan pekerjaan
00:14:13tidak boleh memverifikasinya. Verifikasi harus selalu diserahkan kepada agen lain dengan jendela konteks yang baru.
00:14:18Karena ini persis cara kerja sub-agen, agen utama menyerahkan cabang tersebut kepada agen peninjau
00:14:24musuh. Ini berarti bahwa agen harus selalu percaya bahwa ada beberapa kesalahan dalam pekerjaan yang dilakukan.
00:14:29Beginilah cara hal ini berguna dalam menangkap kutu atau bug. Jadi jika ada masalah dari agen peninjau
00:14:34musuh, agen utama harus memulai agen pembangun lagi dan ini terus berlanjut dalam perulangan sampai fitur
00:14:39tersebut telah dicentang dalam daftar. Setelah menyelesaikan fitur tersebut, ia harus memasukkan pekerjaan cabang tersebut
00:14:44ke aplikasi yang diterapkan sehingga pengguna dapat mulai menggunakan fitur baru tersebut. Jadi jika Anda belum tahu,
00:14:48versi utama kode di GitHub adalah apa yang sebenarnya ditampilkan pada aplikasi yang diterapkan di Vercel.
00:14:53Jadi jika cabang digabungkan dengan versi utama, fitur di cabang tersebut akan masuk ke aplikasi
00:14:58yang diterapkan. Di sinilah persetujuan akhir Anda masuk. Ketika sebuah fitur selesai, permintaan tarik dibuat.
00:15:03Permintaan tarik adalah permintaan untuk menggabungkan cabang fitur dengan cabang utama. Dalam permintaan tarik tersebut,
00:15:08agen juga akan melampirkan tangkapan layar. Tetapi jika Anda ingin lebih yakin, Anda dapat menguji apakah fitur
00:15:13tersebut benar-benar berfungsi di komputer Anda di dalam folder dengan meminta Claude beralih ke cabang tersebut lalu
00:15:18mengujinya. Jika sudah benar, Anda dapat menggabungkan permintaan tarik tersebut. Jadi jika kita melihat keterampilan kita lagi,
00:15:22Anda dapat melihat bahwa sekarang kita memiliki keterampilan fitur baru ini. Ketika Anda memanggil keterampilan ini, pada dasarnya keterampilan ini akan
00:15:27memberitahu agen bahwa sebuah folder perlu dibuat di sini dan setiap folder harus memiliki spec.md
00:15:33dan hal-hal lain untuk verifikasinya. Jadi seperti yang Anda lihat, kita pada dasarnya mendefinisikan dua fitur di sini.
00:15:38Satu fitur di mana sekarang harus ada halaman layanan dengan setiap orang di salon. Dan kemudian
00:15:43yang kedua adalah setiap kali seseorang memiliki sesi dengan penata rambut salon, mereka pada dasarnya dapat menambahkan
00:15:48ulasan melalui resepsionis, yaitu admin. Sekarang, alih-alih menggunakan keterampilan fitur baru di sini,
00:15:53kita secara langsung menggunakan keterampilan penulis tujuan. Sekarang, semua keterampilan ini saling terhubung. Jadi jika
00:15:58kita tidak ingin sebuah fitur menjadi tujuan, jika kita hanya ingin mengerjakan fitur tanpa perulangan,
00:16:03kita tidak menggunakan penulis tujuan. Tetapi jika kita menggunakan penulis tujuan, itu akan memicu keterampilan fitur baru ini dan
00:16:08itu akan menambahkan aturan untuk membuat file spesifikasi menjadi tujuan yang dapat dijalankan juga. Sekarang, seperti yang sudah
00:16:13kita bahas, Anda harus membuat antarmuka pengguna dari fitur tersebut sebelum Anda mulai mengimplementasikannya. Jadi inilah mengapa
00:16:18keterampilan fitur baru memanggil keterampilan antarmuka pengguna fungsional, yang pada dasarnya memberitahunya bahwa sebuah folder
00:16:23bernama mocks harus ada di dalam aplikasi dan bahwa file HTML di dalam folder mocks tersebut akan
00:16:29menjadi prototipe yang sepenuhnya fungsional dari seluruh aplikasi. Dan ini akan memiliki tampilan untuk
00:16:33resepsionis maupun pelanggan. Sekarang seharusnya hanya ada satu dari ini di setiap
00:16:37folder dan keterampilan antarmuka pengguna fungsional hanya akan membuat ini jika belum dibuat. Dan
00:16:42tentu saja, karena ini dipicu setiap kali fitur baru dibuat, di dalam setiap folder fitur,
00:16:47fitur ini juga akan menambahkan sebuah file HTML. Proses ini akan mengambil aplikasi yang sudah dikloning
00:16:53dan hanya mengambil bagian yang diubah oleh fitur tersebut serta menampilkannya saja. Sebagai contoh, kita memiliki fitur layanan
00:16:58di sini. Dan jika kita membuka tiruan tampilannya, Anda dapat melihat bahwa kita akan menambahkan halaman layanan penuh ke dalam aplikasi,
00:17:04dan halaman itu akan dapat diakses melalui tombol ini. Jika Anda mengklik pesan sekarang dan memilih penata rambut,
00:17:08aplikasi akan terlebih dahulu menanyakan layanan apa yang ingin Anda ambil dari penata rambut tersebut. Hal ini sebenarnya belum
00:17:13diimplementasikan di dalam aplikasi, dan juga tidak diterapkan di dalam klon, tetapi diimplementasikan dalam prototipe fitur ini.
00:17:19Jadi, ini membantu Anda memvisualisasikan apakah apa yang Anda buat benar-benar sesuai dengan yang Anda inginkan. Dan ini juga
00:17:24menjadi cara bagi perulangan untuk benar-benar memverifikasi apakah apa yang sedang dibangun sudah benar atau belum. Jadi setelah itu,
00:17:29kita menyuruhnya menulis kedua fitur tersebut, dan ia pada dasarnya menulis folder untuk ulasan sesi
00:17:33dan layanan. Jadi ini adalah antarmuka untuk ulasan sesi. Dan sekali lagi, Anda dapat melihatnya baik sebagai
00:17:38pelanggan maupun resepsionis. Resepsionis akan menambahkan ulasan atas nama pelanggan,
00:17:43karena begitulah cara kita membayangkan situs ini bekerja saat ini. Hal ini tidak akan terjadi pada situs web yang sebenarnya,
00:17:47tetapi karena ini adalah situs demo, kita hanya membuat fitur-fitur baru. Karena kita memiliki beberapa fitur untuk
00:17:52dikerjakan sekarang, kita pada dasarnya memerlukan sebuah daftar untuk melacaknya. Inilah sebabnya kita memiliki keterampilan batch fitur ini,
00:17:57yang pada dasarnya hanya menggunakan file markdown Q ini, yang berupa satu tabel tunggal tempat
00:18:02fitur-fitur tersebut dicantumkan. Sebagai contoh, saat ini perulangan masih berjalan dan sedang membangun
00:18:06fitur pertama sementara yang kedua masih dalam daftar tugas, dan ia akan menandainya satu per satu. Jadi Anda
00:18:11hanya perlu memanggil keterampilannya dan menyuruhnya menambahkan fitur yang Anda inginkan. Dan kemudian seperti yang Anda lihat,
00:18:16ia mengatakan bahwa ia sedang menulis kedua file tersebut dan menambahkan fitur-fitur itu. Kemudian setelah menambahkannya,
00:18:21ia pada dasarnya memberi Anda perintah tujuan untuk benar-benar dijalankan. Kita sedikit mengubahnya dan menjalankan file antrean
00:18:26di dalam sebuah tujuan dan itu hanya akan berhenti ketika tidak ada baris yang tersisa di daftar tugas atau dalam proses pembangunan, yang berarti
00:18:31semuanya telah selesai dan masuk ke status selesai. Dan pada dasarnya prosesnya mulai berjalan. Ini masih berlangsung
00:18:36pada fitur pertama dan seperti yang telah kami beritahukan kepada Anda, ia akan menggunakan agen pendukung untuk membangun
00:18:41berbagai hal tersebut dan kemudian untuk memeriksa serta memverifikasi pekerjaannya, ia akan meluncurkan agen penentang. Prosesnya masih berjalan,
00:18:46ini sudah sekitar tiga jam dan kami akan menunjukkan hasil akhirnya begitu selesai. Jadi seperti yang dapat
00:18:51Anda lihat, kita telah membuka GitHub dan kita memiliki proyek salon perulangan kita di sini. Jika Anda tidak dapat menemukannya,
00:18:55Anda dapat menyuruh agen tersebut untuk memberi Anda tautan ini dan Anda akan dapat membukanya. Jadi di sini,
00:19:00Anda akan melihat tab pull request ini dan setelah membukanya, Anda akan melihat pull request yang telah
00:19:04dibuat oleh agen untuk Anda tinjau. Jadi jika Anda melihat ini, ia telah memberikan keseluruhan ringkasan kepada kita dan kemudian
00:19:09benar-benar memberikan tangkapan layar dari halaman-halaman tersebut, yang memberikan bukti bahwa pekerjaan yang perlu
00:19:13diselesaikan benar-benar telah dikerjakan. Setelah kita meninjau semua ini, kita dapat langsung menggabungkan pull request tersebut. Dan seperti
00:19:18yang bisa Anda lihat, kita memiliki versi yang diunggah secara langsung di sini. Versi ini tidak memiliki domain khusus, itulah sebabnya ia diakhiri
00:19:23dengan Vercel. Namun seperti yang Anda lihat, kita ingin fitur layanan ini ditambahkan. Dan sekarang jika kita masuk
00:19:27ke dalam fitur layanan, kita mendapatkan semua layanan yang ditawarkan oleh salon. Dan jika kita masuk ke opsi pesan sekarang,
00:19:33kita benar-benar dapat melihat bahwa setiap penata rambut mendapatkan layanannya masing-masing. Dan sebelum Anda dapat memesannya,
00:19:37pada dasarnya Anda perlu memilih layanannya terlebih dahulu. Dan hal yang sama juga akan terjadi ketika kita menggabungkan pull request
00:19:42kedua ini. Dan segala sesuatu yang telah kita bahas di sini, pada dasarnya telah kita jelaskan
00:19:47sedemikian rupa sehingga Anda dapat pergi dan membangunnya sendiri. Keterampilan sebenarnya hanyalah instruksi tertulis yang berada
00:19:51di dalam sebuah file. Jadi tidak ada apa pun di sini yang tidak dapat Anda buat sendiri. Tetapi jika Anda tidak
00:19:56ingin melalui semua itu, seluruh repositori tersebut ada di AI Labs Pro, yang merupakan komunitas kita.
00:20:01Itu pada dasarnya adalah keseluruhan sistem, seperti yang baru saja Anda lihat dengan setiap keterampilan yang sudah ada
00:20:05di dalamnya. Jadi jika Anda menemukan nilai dari apa yang kita lakukan, dan Anda ingin mendukung saluran ini, maka itulah
00:20:10cara yang tepat untuk melakukannya. Tautannya akan ada di deskripsi. Jadi hanya ada dua hal yang tersisa bagi
00:20:14Anda untuk dilakukan dalam seluruh proses ini. Sekarang Anda hanya perlu merencanakan fitur tersebut dan memberikan izin
00:20:19terakhir sebelum fitur atau perubahan tersebut dikirimkan kepada pengguna Anda. Tidak satupun dari hal tersebut yang benar-benar membutuhkan
00:20:24Anda untuk berada di depan laptop Anda, terutama bagian perencanaannya. Anda mendeskripsikan apa yang Anda inginkan, ia akan menanyakan
00:20:28pertanyaan kepada Anda hingga ia mengerti dan ia akan membangunkan Anda prototipenya dan semuanya itu dapat dilakukan langsung dari
00:20:33ponsel Anda. Jika itu adalah perubahan kecil, maka Anda juga dapat memberikan izin akhir dari ponsel Anda.
00:20:37Di sinilah tingkat tiga masuk dan tujuan utamanya adalah untuk menghapus ketergantungan Anda pada laptop.
00:20:43Untuk tujuan ini, kami menemukan sebuah aplikasi yang sangat bagus bernama Paseo. Aplikasi ini menjalankan agen Anda di laptop Anda sendiri dan
00:20:48memberi Anda akses jendela ke dalamnya dari ponsel Anda. Jadi agen Anda masih tetap berada di mesin Anda dengan semua
00:20:52file Anda, semua keterampilan Anda, dan semua CLI Anda yang sudah masuk. Dan segala sesuatu yang Anda bangun di
00:20:57video ini terus berfungsi. Claude Code juga dapat melakukan ini menggunakan fitur kendali jarak jauh bawaan,
00:21:03tetapi banyak hal di dalamnya yang rusak. Seperti keterampilan, Anda tidak benar-benar mendapatkan menu untuk menjalankan
00:21:07keterampilan tersebut dalam fitur jarak jauh Claude. Jadi ini adalah aplikasi gratis dan kami akan menautkannya di
00:21:12bawah. Kami tidak akan membahas secara mendalam semua hal yang dilakukannya, hanya hal-hal penting agar Anda dapat mulai
00:21:17menggunakannya. Aplikasi ini memiliki sistem ruang kerja di mana setiap ruang kerja pada dasarnya adalah sebuah folder dan Anda membuka
00:21:22obrolan yang berbeda di dalamnya dan aplikasi ini menjalankan Claude Code itu sendiri sehingga Anda tidak memerlukan langganan terpisah
00:21:26lain untuk itu. Lalu ada bagian lain yang sangat menarik yaitu aplikasi ini tidak hanya
00:21:31berjalan di laptop Anda, tetapi juga dapat berjalan di Mac mini yang telah Anda hubungkan. Jadi dari laptop Anda dapat
00:21:35mengontrol Mac mini tersebut dan dari ponsel Anda dapat mengontrol Mac mini itu juga. Dan alih-alih
00:21:40antarmuka terminal secara keseluruhan, tampilannya jauh lebih dipoles. Tampilannya terlihat seperti Cursor tetapi semua fiturnya masih
00:21:45ada di sini. Perintah tujuan berfungsi begitu pula dengan semua perintah garis miring lainnya yang telah kita buat. Jadi kita telah membuka
00:21:49folder teknik perulangan di sini dan membuat sesi di dalamnya serta mendefinisikan fitur baru di dalamnya.
00:21:54Ada satu keterampilan baru di sini juga yaitu keterampilan pratinjau seluler dan kita akan membahasnya sebentar lagi.
00:21:59Sekarang untuk menunjukkan kepada Anda bagaimana tampilannya di ponsel, kita telah mencerminkan layar ponsel di sini dan ini adalah
00:22:03antarmuka persis sama yang Anda dapatkan di komputer Anda. Anda mendapatkan semua fitur Claude Code dan perintah garis miring
00:22:09Anda yang siap digunakan juga, jadi untuk memulai fitur baru Anda cukup menjalankan perintah garis miring fitur baru
00:22:14di sana langsung di ponsel Anda. Kita mengimplementasikan alur masuk untuk sisi pelanggan yang sebelumnya belum
00:22:18diimplementasikan. Kemudian ada bagian yang sangat menarik. Aplikasi ini tentu saja akan menuliskan
00:22:22seluruh file fitur tersebut tetapi untuk menunjukkan kepada Anda bagaimana bentuk tiruannya, ia dapat memberi kita gambar langsung di
00:22:27dalam antarmuka dan gambar-gambar tersebut muncul di ponsel Anda sehingga Anda dapat memverifikasi antarmuka pengguna langsung di
00:22:32ponsel Anda. Namun alasan mengapa kita menjalankan keterampilan pratinjau seluler tersebut adalah karena ia menerapkan tiruan HTML pada tautan dan
00:22:37itu adalah penerapan gratis di Vercel, dan keuntungannya adalah ketika Anda mengklik tautan tersebut,
00:22:42ia akan membawa Anda ke prototipe tiruan yang sebenarnya dan Anda dapat mengklik dan menggunakan aplikasi dengan benar alih-alih hanya melihat
00:22:47gambar-gambar saja dan itulah sebenarnya yang Anda inginkan ketika Anda menjalankan pabrik ini dari ponsel Anda.
00:22:51Hal itu membawa kita ke penghujung video ini. Jika Anda ingin mendukung saluran ini dan membantu kita terus membuat
00:22:56video seperti ini, Anda dapat melakukannya dengan menggunakan tombol super thanks di bawah. Seperti biasa, terima kasih telah menonton
00:23:01dan sampai jumpa di video berikutnya.

설명

Learn loop engineering in Claude Code across 3 levels, so AI agents build, verify and ship features while you sleep. Loop engineering explained: the next step past prompt engineering, and the base of real AI automation. Try Hedra at https://hedra.link/ailabs and use code AILABS50 for 50% off your first month. Free setup resources: https://drive.google.com/drive/folders/1pagLScBGfGXkfxYiqCpEkei9KDI8SdCs?usp=sharing Community with All Resources: ailabspro.io/?v=PLyRe6Zk--8 The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ PASEO: https://paseo.sh/ Open Source Skills in this video: Grill Me: https://github.com/mattpocock/skills GSAP: https://github.com/greensock/gsap-skills Vercel: https://github.com/vercel-labs/agent-skills Supabase: https://github.com/supabase/agent-skills You were already running a loop before you knew what one was. You prompt, the agent builds, you check it, you prompt again. So what is loop engineering? It is handing that checking step to the agent and keeping only the one decision that was always yours: whether the agent is done or needs to keep working. This is the full guide, built on a real salon appointment app that goes from missing a landing page to shipping features overnight. Everything runs in Claude Code, on Warp and VS Code. Before the loop * Why loop engineering did not work a year ago, and what changed with models that run for hours * Why you should never loop your MVP, and what to build by hand instead * CLAUDE.md pointing to AGENTS.md, so the repo is not locked to one agent * design.functional.md for every clickable part of the app * The Grill Me skill, which keeps asking questions until the spec is actually clear Level 1: one loop, one goal (loop engineering in Claude Code) * The naming trap in the slash menu: /loop runs on a timer, /goal runs until the thing is done. Loop engineering is the goal command * How the goal command verifies: a smaller model reads the turn and decides continue or stop * A features folder where each feature holds a spec file and an empty verification folder * The real signal that something needs a loop: it takes a lot of back and forth * A motion heavy landing page with the gsap skill, then the optimize skill to win the speed back * Screenshot based verification pulled from the global CLAUDE.md instead of a full browser every pass * The goal-writer skill, so you never write the "make this a goal" line twice * A loop engineering example: 38 minutes unattended, one error left, and why a screenshot could never catch a blinking mascot Setup: GitHub, Supabase, Vercel * Why your project needs a repo, a database and a deployment, explained for non developers * You make three accounts with Google login and configure nothing * The agent does the rest through each platform's CLI, including the auth step you paste into a second terminal * The Vercel deploy skill and the Supabase skills that auto invoke when the agent needs them Level 2: the software factory loop engineering workflow * Planning several features at once and running them as one queue instead of one feature at a time * Why you build a clickable prototype first: to find out if you wanted the thing you described, and to give the loop something to verify against * The new-feature and functional-ui skills, and the mocks folder that holds a working fake version of the app * The rule that matters most: the agent that does the work never verifies the work * Subagent builds on a branch, adversarial review agent assumes there is a bug, main agent loops until the row is ticked * feature-batch and a queue.md table, with the goal running until nothing is left in todo or building * Pull requests with screenshots attached, plus how to check the branch locally before you merge * Merge to main, Vercel picks it up, and the feature is live for users Level 3: get off the laptop * The only two jobs left: plan the feature, approve the merge. Neither needs a keyboard * Paseo, a free app that runs Claude Code on your own machine and gives you a window into it from your phone, so your skills and logged in CLIs keep working * Why we skipped Claude Code's built in remote control: no skills menu. In Paseo, /goal and every slash command still work * The mobile preview skill, which deploys the HTML mocks as free Vercel links so you can click through a prototype on your phone instead of squinting at images 00:00 Intro 00:46 What A Loop Is 02:08 The Project 04:32 Level 1 07:58 The Goal Writer Skill 08:57 Setup 11:11 Platform Skills 11:53 Sponsor 12:46 Level 2 16:14 The Functional UI Skill 17:51 The Feature Batch Skill 20:13 Level 3 22:34 Mobile Preview Skill Hashtags: #ai #claude #claudeCode #codex #chatgpt #claudeAi #aiAutomation #loopEngineering

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기