โ† Kembali ke Pintar dengan AI
Hands-On Workshop ยท Komunitas Shevibes

Vibe Coding untuk Semua, Bersama Kiro AI

Dari non-tech ke tech โ€” belajar membangun aplikasi web nyata bersama AI, tanpa perlu latar belakang programming sama sekali. Seluruh materi workshop komunitas Shevibes kami rangkum lengkap di halaman ini.

๐Ÿ‘ฉโ€๐Ÿ’ป Komunitas Perempuan โšก Powered by Kiro ๐Ÿšซ No Code Required
Tentang Workshop

Satu Ruang, Banyak Kemungkinan

Workshop komunitas untuk perempuan yang ingin merasakan langsung bagaimana AI mengubah cara orang membangun teknologi โ€” dipandu, kolaboratif, dan penuh eksplorasi.

Untuk Siapa

Peserta non-tech maupun yang ingin naik level ke tech โ€” tidak perlu pengalaman coding sama sekali.

Format

Dipandu langsung, kolaboratif, dan penuh eksplorasi โ€” belajar sambil membuat sesuatu yang nyata.

Hasil Akhir

Peserta pulang dengan aplikasi web yang benar-benar mereka buat sendiri bersama AI.

Durasi Praktik

60 menit membangun aplikasi pertama, dilanjutkan sesi lomba kreativitas 1โ€“1.5 jam.

Sebelum Mulai ยท Fondasi

๐ŸŒฑ Kenalan Dulu dengan Dunia AI

Sebelum masuk ke Agentic AI dan Kiro, mari pahami dasarnya dulu โ€” dari Machine Learning, Deep Learning, sampai Generative AI dan Foundation Model yang menjadi "otak" di balik Kiro.

Generative AI Adalah Bagian dari AI

Semua ini saling bersarang โ€” Generative AI ada di dalam Deep Learning, yang ada di dalam Machine Learning, yang ada di dalam AI.

Artificial Intelligence (AI)

Segala teknik yang membuat komputer bisa meniru kecerdasan manusia โ€” lewat logika, aturan if-then, dan machine learning.

Machine Learning (ML)

Bagian dari AI yang menggunakan mesin untuk mencari pola dalam data, lalu membangun model logika secara otomatis.

Deep Learning (DL)

Bagian dari ML yang tersusun dari neural network berlapis-lapis dalam โ€” untuk tugas seperti pengenalan suara dan gambar.

Generative AI

Ditenagai oleh model besar yang dilatih (pretrained) pada data dalam jumlah sangat besar โ€” biasa disebut Foundation Model (FM).

Apa itu Machine Learning?

"Bidang studi yang memberi komputer kemampuan untuk belajar tanpa diprogram secara eksplisit." โ€” Arthur Samuel (1959)

Pemrograman Klasik (if/else)

Manusia menuliskan aturannya sendiri.

Aturan+Soalโ†’Jawaban

Machine Learning

Mesin menemukan aturannya sendiri dari contoh.

Soal+Jawabanโ†’Model Terlatih
Soal Baru yang Miripโ†’Jawaban

Butuh data berlabel ยท Melatih model ยท Fine-tuning & evaluasi ยท Satu model untuk satu tugas.

๐ŸŽฎ Coba Sendiri

Ajari Mesin Menilai Apel: Segar atau Busuk?

Model ini dilatih dari contoh berlabel untuk satu tugas saja. Geser slider kesegaran apel, lalu lihat jawaban mesin โ€” hasilnya cuma berupa satu label.

๐Ÿ

Kesegaran apel: 62%

Segar โœ…

Aturan hasil belajar: skor โ‰ฅ 55% = Segar. Output hanya berupa label.
๐Ÿ”’ Model ini hanya tahu cara membedakan segar vs busuk โ€” beda dengan Generative AI di bawah ๐Ÿ‘‡

Contoh Tugas Machine Learning

ML dipakai untuk berbagai jenis masalah yang berbeda-beda.

๐Ÿ”Ž Ranking

Membantu pengguna menemukan hal yang paling relevan.

๐Ÿ’ก Recommendation

Memberi pengguna hal yang mungkin paling mereka minati.

๐Ÿท๏ธ Classification

Menentukan sesuatu itu termasuk jenis apa. Contoh: kesegaran buah.

๐Ÿ“ˆ Regression

Memprediksi sebuah nilai numerik dari suatu hal.

๐Ÿงฉ Clustering

Mengelompokkan hal-hal yang serupa jadi satu.

โš ๏ธ Anomaly Detection

Menemukan hal-hal yang tidak biasa / langka.

Konsep Inti

Apa itu Generative AI?

Menciptakan Hal Baru

Membuat konten dan ide baru โ€” mulai dari percakapan, cerita, gambar, video, sampai musik.

Ditenagai Model Besar

Dijalankan oleh model besar yang dilatih pada data dalam jumlah sangat besar โ€” dikenal sebagai Foundation Model (FM).

Bedanya dengan Model ML Tradisional

Inilah lompatan besarnya: dari satu model untuk satu tugas, menjadi satu model untuk banyak tugas.

ML Tradisional

Data Berlabelโ†’Trainโ†’Deployโ†’Tugas

Butuh model sendiri untuk tiap masalah bisnis โ€” dibangun dari nol, pakai data berlabel, dan di-deploy terpisah.

Foundation Model

Data Tak Berlabelโ†’Pretrainโ†’FMโ†’Adaptโ†’Banyak Tugas

Satu model untuk semua masalah โ€” lebih cepat, lebih murah, dibangun untuk skala besar. Contoh: text generation, summarization, information extraction, Q&A, chatbot.

Jenis-Jenis Inti Foundation Model

Sistem AI skala besar yang dilatih pada data yang sangat beragam โ€” dibangun sekali, dipakai di mana saja.

Teks โ†’ Teks

LLM

Memahami, menghasilkan, dan menalar bahasa manusia dalam skala besar. Contoh: GPT-4o, Claude, Llama 3.

Teks โ†’ Kode

Code Model

Memahami, menghasilkan, dan men-debug kode di berbagai bahasa pemrograman.

Gambar/Video โ†’ Teks

Vision Model

Mengenali objek, memahami suasana gambar, dan membuat gambar dari deskripsi.

Data Mentah โ†’ Vektor

Embedding Model

Menangkap makna dan hubungan antar data untuk pencarian dan pencocokan kemiripan.

Cara Kerja: Dari Input ke Output

Teks jadi Teks

"Ringkas artikel soal dampak jalan kaki untuk kesehatan jantung" โ†’ "Sepuluh ribu langkah per hari optimal untuk menjaga jantung sehat."

Teks jadi Gambar

"foto astronaut naik kuda di Mars" โ†’ gambar sesuai deskripsi.

Teks jadi Angka (Vektor)

"hand soap" โ†’ representasi numerik dari "hand soap refills, dispenser, antibacterial".

Para penyedia Foundation Model terkemuka โ€” banyak tersedia di Amazon Bedrock: Anthropic (Claude) ยท OpenAI (GPT) ยท Meta (Llama) ยท Mistral AI ยท Amazon (Titan/Nova) ยท Cohere ยท Stability AI. Kiro dibangun di atas foundation model seperti inilah.

Konsep Dasar

๐Ÿง  Apa itu Agentic AI?

Kiro adalah contoh dari Agentic AI โ€” AI yang tidak cuma menjawab pertanyaan, tapi bisa bertindak untuk mencapai tujuan Anda, langkah demi langkah, secara mandiri.

๐Ÿงฉ LLM "Otak"

Bagian yang berpikir โ€” memahami permintaan, menyusun rencana, dan memutuskan langkah selanjutnya.

๐Ÿ› ๏ธ Tools "Tangan"

Kemampuan bertindak โ€” menulis file, menjalankan terminal, browsing web.

๐ŸŽฏ Goal "Tujuan"

Hasil akhir yang ingin dicapai. Goal menuntun setiap keputusan LLM dan penggunaan tools.

๐Ÿ” Loop

Goal โ†’ Think โ†’ Act โ†’ Observe. Berulang sampai tujuan tercapai.

AI Biasa (Chatbot)

Anda tanya โ†’ AI jawab teks. Selesai. Tidak bisa membuat file, menjalankan program, atau memperbaiki error sendiri.

Agentic AI (seperti Kiro)

Anda beri tujuan โ†’ AI berpikir, bertindak dengan tools, melihat hasilnya, lalu mengulang sampai tujuan benar-benar tercapai โ€” tanpa Anda perlu mengawasi tiap langkah.

Evolusi Teknologi

๐Ÿš€ Evolusi Agentic AI

Dari chatbot sederhana hingga AI yang bisa bekerja mandiri.

Era 1 ยท 2010โ€“2015

๐Ÿค– Rule-Based AI

AI berdasarkan aturan yang ditulis manual โ€” seperti flowchart, jika A maka B. Contoh: "Jika kata 'harga', jawab 'lihat menu'".

โŒ Kaku & terbatasโœ… Predictable๐Ÿ“ Manual rules
Era 2 ยท 2016โ€“2021

๐Ÿ’ฌ Conversational AI (Chatbots)

AI yang bisa chat lebih natural menggunakan machine learning, tapi masih sebatas tanya-jawab.

โœ… Natural conversationโŒ Passive๐Ÿง  Pre-trained models
Era 3 ยท 2022โ€“2023

๐Ÿ”ง Function-Calling AI

LLM yang bisa "memanggil function" โ€” langkah pertama menuju action, tapi masih butuh developer untuk menghubungkan tools.

โœ… Can use APIsโš ๏ธ Manual integration๐Ÿ› ๏ธ Limited tools
Era 4 ยท 2024โ€“Kini

๐Ÿš€ Agentic AI (Autonomous) โ€” Kiro ada di sini!

AI yang benar-benar mandiri โ€” bisa berpikir, bertindak, melihat hasil, dan mengulang sampai tujuan tercapai.

โœ… Fully autonomous๐Ÿ” Self-correcting๐Ÿ› ๏ธ Rich tools๐ŸŽฏ Goal-driven

๐Ÿ“Š Perbandingan Kemampuan

KemampuanRule-BasedChatbotFunction-CallAgentic AI
Natural LanguageโŒโœ…โœ…โœ…
Take Actionsโš ๏ธโŒโš ๏ธโœ…
Self-CorrectionโŒโŒโŒโœ…
Multi-Step TasksโŒโŒโš ๏ธโœ…
Goal-DrivenโŒโŒโŒโœ…
Meet Your Partner

๐Ÿค” Apa itu Kiro?

Kiro adalah penerapan nyata dari Agentic AI โ€” lengkap dengan LLM, tools, dan kemampuan mengejar goal secara mandiri. Bayangkan Kiro seperti teman programmer yang selalu siap membantu.

Anda: "Bikinkan halaman toko online untuk jual kue"

Kiro: Menulis kode, membuat file, menjalankannya untuk Anda.

5 Kemampuan Utama Kiro

Ngobrol Bahasa Manusia

Tulis permintaan seperti chat ke teman โ€” Bahasa Indonesia, English, atau campur, semua dipahami.

Menulis Kode & File Otomatis

Kiro membuat file, folder, dan struktur project untuk Anda โ€” tanpa Anda perlu mengetik satu baris kode.

Menjalankan Perintah Teknis

Install, build, jalankan aplikasi โ€” semua proses di balik layar dikerjakan Kiro secara otomatis.

Memperbaiki Error Sendiri

Kalau ada yang salah, Kiro mendeteksi dan memperbaikinya sendiri โ€” Anda tidak perlu tahu cara debug.

Anda tidak perlu menghafal kode. Cukup jelaskan apa yang Anda mau โ€” dalam bahasa apapun โ€” dan Kiro yang menulis kode-nya. Inilah yang membuat coding bisa diakses siapa saja.

Perjalanan Workshop

Lima Bagian, Satu Pengalaman

Dari membangun aplikasi pertama Anda, sampai bereksperimen bebas di lomba kreativitas penutup.

1

๐Ÿ›๏ธ Membuat Aplikasi Web

Studi kasus: membangun website e-commerce UMKM kerajinan bambu Jogja dari nol, bersama Kiro โ€” dari katalog produk sampai checkout.

2

๐Ÿงญ Kiro Steering

Bagaimana Kiro "mengingat" konteks project dan aturan bisnis secara otomatis โ€” tanpa harus diulang setiap prompt.

3

๐Ÿ“‹ Spec-Driven Development

Pendekatan terstruktur untuk membangun fitur bersama Kiro โ€” berpikir dulu lewat Requirements dan Design, baru eksekusi lewat Tasks.

4

๐Ÿ”Œ MCP & Playwright

Memperluas kemampuan Kiro dengan "plugin" โ€” dari sekadar membaca kode, menjadi bisa mengontrol browser sungguhan secara otomatis.

5

๐Ÿ† Lomba Kreativitas

Sesi penutup: peserta bebas membuat apapun dengan Kiro โ€” tanpa batasan tema atau teknologi. Kreativitas jadi bintang utama.

Requirements โ†’ Design โ†’ Tasks

Spec-Driven Development mengajak Anda berpikir terstruktur sebelum membangun โ€” hasilnya lebih tepat dan minim rework.

Panduan Lengkap

๐Ÿ“š Materi Tutorial Hands-On

Panduan lengkap untuk pemula hingga developer โ€” pilih topik di bawah untuk membaca detailnya.

๐Ÿค” Apa itu Kiro?

Kiro adalah AI-powered development environment yang dibuat oleh Amazon. Kiro berfungsi seperti partner programming yang bisa menulis kode dari instruksi bahasa sehari-hari, membuat file dan struktur project otomatis, menjalankan perintah terminal, menjelaskan konsep teknologi dengan mudah, serta memperbaiki error dan bug dalam kode.

Anda tidak perlu menghafal kode. Cukup jelaskan apa yang Anda mau dalam Bahasa Indonesia, Kiro yang akan menulis kode-nya.

๐Ÿ› ๏ธ Persiapan Sebelum Workshop

Software yang perlu diinstall:

1

Kiro IDE

Download gratis di kiro.dev

2

Node.js (versi 18+)

Download di nodejs.org

3

Browser modern

Chrome, Firefox, atau Edge.

Yang tidak perlu Anda ketahui: workshop ini dirancang agar pemula pun bisa mengikuti. Anda tidak harus pernah programming sebelumnya, tahu HTML/CSS/JavaScript, atau paham database dan server.

๐Ÿงฐ Teknologi yang Digunakan

Anda tidak perlu menghafal โ€” Kiro yang mengurus implementasinya.

TeknologiFungsiAnalogi
Next.jsFramework web full-stack"Mesin" website
ReactLibrary UI"Kanvas" tampilan
Tailwind CSSStyling/desain"Cat & dekorasi"
JSON FileDatabase lokal"Buku catatan" data
localStorageData di browser"Ingatan" browser
Node.jsRuntime JavaScript"Penerjemah" kode

๐Ÿ“ Langkah 1: Jelaskan Apa yang Anda Mau

Buka Kiro IDE, buat folder baru, lalu ketik prompt pertama di chat panel:

Prompt Anda Saya mau bikin website untuk UMKM jualan barang-barang kerajinan bambu Jogja. Saya mau user bisa beli tanpa login, dengan login, melihat barang yang dijual, keranjang belanja, dan bayar apa yang pengunjung mau beli. Saya gak tau mulai dari mana, jelaskan supaya saya ngerti cara buat website seperti itu.

Kiro akan menjawab dengan: penjelasan komponen utama website (Frontend, Backend, Database), alur belanja dari browsing sampai bayar, rekomendasi teknologi yang cocok, langkah-langkah memulai, dan pertanyaan balik untuk memperjelas kebutuhan Anda.

Panduan Membuat Website E-Commerce Kerajinan Bambu Jogja

Saya jelaskan gambaran besar dulu supaya Anda paham alurnya, lalu kita bisa mulai bangun bersama.

Komponen Utama:

  • 1. Frontend (tampilan): Halaman beranda & katalog, detail produk, keranjang, checkout, login/register
  • 2. Backend (logika bisnis): Manajemen produk & user, proses order, integrasi pembayaran
  • 3. Database: Data produk, user, order, keranjang

Alur Belanja: Pengunjung โ†’ Lihat katalog โ†’ Tambah ke keranjang โ†’ Checkout โ†’ Bayar โ†’ Konfirmasi

Mau Mulai? Beritahu saya: nama brand, contoh produk, bahasa, dan payment gateway. Semakin detail kebutuhan Anda, semakin tepat hasilnya. Tapi tidak perlu sempurna โ€” bisa ditambah nanti.

๐Ÿ“ Langkah 2: Berikan Spesifikasi

Prompt Anda Nama brand: Jogja Kriya Bamboo Buat contoh produk Bilingual Simulasi dulu untuk payment gateway Saya mau aplikasi bisa dijalankan tanpa koneksi internet di laptop saya

Kiro langsung bekerja: membuat 15+ file project, menulis kode frontend & backend, membuat 8 contoh produk kerajinan bambu, install dependencies & verifikasi berjalan.

๐Ÿ’ก Di Balik Layar: File dibuat langsung oleh Kiro, terminal menjalankan npm install, dan jika terjadi error akan otomatis diperbaiki (problem solving).

๐Ÿ“ Langkah 3: Tambahkan Requirement Baru

Prompt Anda website juga harus bisa ditampilkan di hp dengan baik

Kiro menerapkan mobile-first layout, hamburger menu, dan grid fleksibel.

Prompt Anda Buat desain lebih elegan dan modern seperti website profesional

Kiro mengubah desain: navbar glass morphism + animasi, hero full-screen dengan card hover effects, tombol pill-shaped dengan warna warm & earthy, dan footer profesional 3 kolom.

๐Ÿ“ Langkah 4: Jalankan dan Lihat Hasilnya

Prompt Anda jalankan aplikasi, lalu buka di browser

Kiro menjalankan npm run dev, server berjalan di http://localhost:3000, dan browser terbuka otomatis.

๐ŸŽ‰ Hasil dalam <10 menit: Halaman utama elegan, katalog 8 produk + filter kategori, keranjang belanja berfungsi, checkout + form lengkap, login & register, responsive HP & desktop, bilingual (ID & EN), dan 100% offline.

๐Ÿ’ฌ Tips Menulis Prompt yang Efektif

โœ… Prompt yang Baik

  • Spesifik: "Buat halaman produk dengan grid 4 kolom dan tombol tambah ke keranjang"
  • Kontekstual: "Website ini untuk UMKM kerajinan bambu Jogja"
  • Bertahap: Mulai dari besar, detailkan satu per satu
  • Minta penjelasan: "Jelaskan dulu konsepnya"

โŒ Kurang Efektif

  • "Buatkan website" (terlalu vague)
  • 10 fitur kompleks sekaligus
  • "Buat simpel tapi lengkap seperti Tokopedia" (kontradiktif)

๐ŸŽฏ Contoh Prompt Eksplorasi

1

Pencarian produk

Tambahkan fitur search/pencarian di halaman produk supaya pengunjung bisa cari produk berdasarkan nama.

2

Detail produk

Buat halaman detail produk ketika user klik salah satu produk.

3

Halaman admin

Buat halaman admin di /admin untuk melihat daftar pesanan yang masuk.

4

Ubah tema warna

Ganti warna tema dari coklat bambu ke hijau emerald yang lebih segar.

5

Penjelasan kode

Jelaskan bagaimana keranjang belanja bekerja di CartContext.jsx.

6

Arsitektur diagram

Buatkan diagram arsitektur dan sequence diagram alur checkout dalam format Mermaid.

7

Problem teknis production

Jika aplikasi ini sudah di production dengan banyak pengunjung, apa masalah teknis yang mungkin muncul?

8

Rekomendasi improvement

Apa yang perlu di-improve supaya siap production? Prioritas keamanan, performa, skalabilitas.

๐Ÿ“š Yang Anda Pelajari

Pemula (Non-IT)

  • Cara kerja website modern (frontend vs backend)
  • Alur e-commerce (katalog โ†’ keranjang โ†’ checkout)
  • Responsive design
  • Bekerja dengan AI tanpa coding manual

Developer

  • AI-assisted development workflow
  • Next.js 14 App Router
  • React Context API
  • Tailwind CSS rapid UI dev
  • Iterasi cepat: requirement โ†’ prototype

โฑ๏ธ Alur Workshop (60 menit)

1

Pengenalan Kiro (10 menit)

Install, buka workspace, kenalan interface.

2

Buat Aplikasi Bersama (25 menit)

Ikuti langkah 1โ€“4 di atas.

3

Eksplorasi Mandiri (20 menit)

Tambah fitur sendiri dengan prompt.

4

Sharing & Tanya Jawab (5 menit)

Diskusi dan tips lanjutan.

โ“ FAQ

Ya, download gratis di kiro.dev.

Tidak. Kiro menulis kode dari instruksi bahasa sehari-hari.

Indonesia, English, atau campur keduanya.

Ini prototype. Untuk production: tambah hosting, payment gateway asli, dan keamanan โ€” semua bisa dibantu Kiro.

Tidak. Aplikasi 100% offline. Internet hanya untuk install awal.

1. ๐Ÿค” Apa itu Steering?

Steering adalah file Markdown di folder .kiro/steering/ yang Kiro baca otomatis setiap kali Anda berinteraksi dengan project. Seperti briefing tertulis untuk asisten baru โ€” sekali ditulis, Kiro selalu ingat tanpa perlu diulang.

  • Project ini tentang apa
  • Teknologi yang dipakai
  • Aturan desain dan coding
  • Yang boleh dan tidak boleh dilakukan

2. ๐ŸŽฏ Analogi Sederhana

Dunia NyataKiro Steering
SOP di kantorAturan coding & desain
Briefing karyawan baruKonteks project & bisnis
Style guide brandPanduan warna, font, UI
Checklist QAStandar kualitas kode

3. โš–๏ธ Tanpa vs Dengan Steering

โŒ Tanpa Steering

Harus selalu bilang: "Pakai Tailwind", "Bilingual ID & EN", "Harga Rupiah", "Mobile-first", "Warna bamboo-700".

Repot & sering lupa.

โœ… Dengan Steering

Cukup bilang: "Tambahkan halaman Tentang Kami" โ€” Kiro otomatis pakai Tailwind, bilingual, warna brand, dan mobile-first.

Simpel & konsisten.

4. ๐Ÿ› ๏ธ Cara Membuat Steering

Tidak perlu buat manual โ€” minta Kiro!

Alternatif 1: Serahkan ke Kiro (Simpel)

Prompt AndaBuatkan file steering untuk project ini

โ†’ Kiro analisis project lalu buatkan steering yang relevan.

Alternatif 2: Berikan Arahan Spesifik

Prompt Anda Buatkan steering file untuk project ini yang berisi: 1. Konteks bisnis (toko bambu Jogja, harga Rupiah, bilingual) 2. Panduan desain (warna brand, mobile-first) 3. Standar coding (Next.js, Tailwind, JavaScript)

5. ๐Ÿ“ Struktur File

project-anda/ โ”œโ”€โ”€ .kiro/ โ”‚ โ””โ”€โ”€ steering/ โ”‚ โ”œโ”€โ”€ project-context.md โ”‚ โ”œโ”€โ”€ design-guide.md โ”‚ โ””โ”€โ”€ coding-standards.md โ”œโ”€โ”€ src/ โ””โ”€โ”€ package.json

File steering = Markdown biasa. Bisa diedit manual atau minta Kiro update.

6. ๐Ÿ“„ Contoh Isi

project-context.md

# Konteks Project - E-commerce kerajinan bambu Yogyakarta - Target: pembeli 25-45 tahun - Harga dalam Rupiah - Bilingual ID & EN - Guest checkout tersedia

design-guide.md

# Panduan Desain - Primary: bamboo-700 (#6b5a3f) - Tombol: rounded-full, hover shadow - Card: rounded-2xl, hover translate-y - Mobile-first, minimalis, aksesibel

coding-standards.md

# Standar Coding - Next.js 14 App Router - Tailwind CSS (bukan CSS modules) - JSON file database - JavaScript (bukan TypeScript) - Teks bilingual di object {id, en}

7. ๐Ÿท๏ธ Jenis Steering

JenisKapan AktifContoh
Always (default)SelaluStandar coding, konteks bisnis
File MatchSaat file tertentu dibacaAturan khusus API
ManualDipanggil via # di chatPanduan deploy

Gunakan "always" untuk workshop โ€” paling mudah dan langsung terasa.

8. โœ๏ธ Latihan Praktik

A

Buat steering dari nol

"Buatkan file steering untuk project ini"

B

Verifikasi steering bekerja

"Tambahkan halaman Tentang Kami" โ†’ Kiro otomatis bilingual, Tailwind, warna brand tanpa disuruh.

C

Update steering

"Tambahkan di steering bahwa setiap halaman baru harus punya breadcrumb"

D

Aturan bisnis baru

"Update steering: produk di atas Rp 200.000 harus diberi label 'Premium'"

9. ๐Ÿ’ก Tips & Best Practices

โœ… Do

  • Tulis jelas dan ringkas
  • Pisahkan per topik (satu file per concern)
  • Update saat aturan berubah
  • Commit ke Git โ€” satu tim dapat aturan yang sama

โŒ Don't

  • Terlalu panjang (membingungkan Kiro)
  • Kontradiksi antar file
  • Simpan API key / password
  • Masukkan hal yang sering berubah

1. ๐ŸŽฏ Apa yang Akan Kita Pelajari?

Di bagian ini, Anda akan belajar tentang Spec-Driven Development โ€” cara Kiro membantu Anda membangun fitur secara terstruktur: mulai dari requirements, design, sampai tasks.

Yang unik: Anda tidak perlu membaca materi panjang. Anda akan minta Kiro menjelaskannya untuk Anda, sambil belajar teknik prompting yang lebih advanced.

2. ๐Ÿ’ก Konsep Singkat

๐Ÿ“‹ Requirementsโ†’๐ŸŽจ Designโ†’โœ… Tasks

Dari "apa yang mau dibuat" โ†’ "bagaimana cara membangunnya" โ†’ "langkah-langkah kerjanya". Daripada langsung coding, Kiro membantu Anda berpikir dulu โ€” lalu mengeksekusi langkah per langkah. Hasilnya lebih terstruktur dan minim rework.

3. ๐Ÿ†• Persiapan: Buka Workspace Baru

Untuk latihan ini, kita akan mulai dari workspace kosong yang fresh agar tidak tercampur dengan project sebelumnya.

1

Buka window Kiro baru

Klik File โ†’ New Window (atau Ctrl/Cmd + Shift + N)

2

Buat folder baru

Buat folder baru (misalnya belajar-spec) di lokasi mana pun yang mudah ditemukan.

3

Buka folder tersebut di Kiro

Klik File โ†’ Open Folder, lalu pilih folder belajar-spec.

4

Pilih Vibe chat

Pastikan Anda berada di mode Vibe (bukan Spec) di panel chat Kiro.

๐Ÿ’ก Kenapa Workspace Baru? Agar tidak ada steering atau file lama yang mempengaruhi output Kiro, Anda bisa melihat hasil murni dari prompt Anda, dan mensimulasikan pengalaman "mulai dari nol" yang realistis.

4. ๐Ÿ’ฌ Prompt 1: Minta Saran dari Kiro

Di Vibe chat workspace baru Anda, ketik prompt berikut. Perhatikan: Anda minta Kiro kasih saran dulu, bukan langsung eksekusi.

Prompt Anda Cari informasi tentang Spec-Driven Development dari dokumentasi resmi di website kiro.dev, lalu buatkan tutorial dalam format single page html yang bisa saya gunakan untuk berlatih (hands-on) dengan contoh nyata. Sebelum mulai menjelaskan apakah prompt ini sudah cukup baik? Beri saran

๐Ÿค” Kenapa Minta Saran Dulu? Hasil lebih berkualitas karena Kiro punya kesempatan memperjelas scope sebelum kerja, Anda belajar melihat apa yang Kiro anggap kurang dari prompt Anda, ini jadi kolaborasi bukan hanya menyuruh, dan ini teknik pro yang sering dipakai developer berpengalaman.

5. ๐Ÿค– Contoh Saran dari Kiro

Prompt Anda sudah bagus, tapi saya punya beberapa saran untuk memperkaya hasilnya:

  • Tentukan kedalaman konten โ€” overview singkat 5 menit baca, atau tutorial lengkap step-by-step?
  • Tentukan konteks penggunaan โ€” materi presentasi, dokumentasi tim, atau landing page edukatif?
  • Tentukan style/desain โ€” ada preferensi warna, layout, atau framework CSS?
  • Tentukan bahasa โ€” Bahasa Indonesia, English, atau bilingual?
  • Scope konten โ€” konsep saja, atau perlu contoh penggunaan nyata?

Mau saya lanjutkan dengan saran-saran ini, atau ada yang ingin Anda ubah?

Setiap orang bisa mendapat saran yang sedikit berbeda โ€” itu normal! Yang penting adalah Kiro membantu Anda memikirkan hal yang mungkin terlewat.

6. ๐Ÿ’ฌ Prompt 2: Eksekusi

Setelah melihat saran Kiro, buat session chat baru (klik ikon "+") dan tetap pilih mode Vibe. Lalu copy prompt yang disarankan Kiro, dan paste di session chat baru tersebut.

Contoh Prompt dari Instructor:

Prompt Anda Cari informasi tentang Spec-Driven Development dari kiro.dev. Buatkan tutorial single-page HTML dalam Bahasa Indonesia, target audience developer yang sudah familiar dengan VS Code tapi baru kenal Kiro. Gunakan contoh nyata: membangun fitur todo-list API (CRUD). Cakup seluruh flow dari requirements sampai implementation. Style clean & responsive, dark mode

โœ… Kenapa Prompt Ini Lebih Baik? Sumber jelas ("dari kiro.dev"), target audience spesifik, scope konten 3 poin jelas, arahan desain jelas, dan format output yang pasti (single page HTML).

7. ๐Ÿ“– Baca Hasil dari Kiro

Setelah Kiro selesai (biasanya 30-60 detik), Anda akan mendapat file HTML baru di workspace.

1

Buka file HTML yang dihasilkan

Klik file di sidebar Kiro, atau "Open with Live Server" / "Reveal in Finder" lalu buka di browser.

2

Baca isinya

File ini berisi penjelasan lengkap tentang Spec-Driven Development di Kiro.

3

Pahami flow-nya

Requirements โ†’ Design โ†’ Tasks.

โš ๏ธ Kalau Hasil Kurang Sesuai? Anda bisa lanjut iterasi di chat yang sama:

Prompt AndaBagian tentang "Design" kurang jelas, jelaskan lebih detail dengan contoh konkret

8. ๐Ÿ“š Pelajaran dari Latihan Ini

Prompt Langsung

"Buatkan materi tentang Spec" โ†’ Hasil generik, mungkin kurang relevan.

Minta Saran Dulu

"Buatkan materi... tapi kasih saran dulu" โ†’ Hasil spesifik, kontekstual, berkualitas.

Teknik yang Anda Pelajari: workspace fresh, minta Kiro cari dari sumber resmi, minta review prompt sebelum eksekusi, eksekusi dengan prompt spesifik, baca dan pelajari output, serta iterasi kalau kurang pas. Teknik "minta saran dulu" bisa dipakai untuk task apa pun โ€” menulis email, membuat desain, planning fitur, atau presentasi.

1. ๐Ÿ”Œ Apa itu MCP?

MCP (Model Context Protocol) adalah standar "plugin" yang memberi Kiro kemampuan baru di luar kemampuan bawaannya.

Kiro tanpa MCPOtak yang bisa berpikir, baca file, tulis kode
Kiro + MCPOtak + "tangan tambahan" yang bisa akses browser, database, API external

Contoh MCP yang tersedia: Playwright (kontrol browser), Gmail (baca/kirim email), Google Calendar (cek jadwal), Slack (kirim pesan), GitHub (akses repo/issues), Notion, dan SQLite/PostgreSQL (query database). Cari MCP yang Anda butuhkan di registry.modelcontextprotocol.io.

2. ๐ŸŽญ Apa itu Playwright?

Playwright adalah tool open-source untuk otomasi browser, biasa dipakai developer untuk automated testing. Dengan Playwright MCP, Kiro bisa membuka Chrome/Firefox/Safari, navigasi ke URL mana pun, klik tombol, isi form, scroll halaman, mengambil screenshot, dan membaca isi halaman yang sudah di-render JavaScript.

๐Ÿ‘ค Anda โ†’ ๐Ÿค– Kiro โ†’ ๐Ÿ”Œ Playwright MCP โ†’ ๐ŸŒ Browser โ†’ ๐Ÿ›’ Website

3. โš–๏ธ Playwright MCP vs Fetch (Built-in)

AspekFetch (built-in)Playwright MCP
Cara kerjaDownload HTML mentahBuka browser nyata, render lengkap
JavaScriptโŒ Tidak dijalankanโœ… Dijalankan seperti browser asli
InteraksiโŒ Hanya bacaโœ… Klik, ketik, scroll, isi form
VisualโŒ Tidak adaโœ… Bisa screenshot
Halaman dinamisโŒ Sering gagalโœ… Bisa handle SPA, lazy-load

Singkatnya: Fetch = baca buku. Playwright = masuk ke toko dan belanja sendiri.

4. ๐Ÿ› ๏ธ Setup Playwright MCP

1

Klik icon Kiro (๐Ÿ‘ป) di sidebar kiri

2

Cari section "MCP Servers"

3

Klik tombol "+" atau "Add MCP Server"

4

Pilih tipe "Command"

5

Isi konfigurasi

Name: playwright, Command: npx, Args: @playwright/mcp@latest

6

Save

Kiro akan otomatis membuat file .kiro/settings/mcp.json

๐Ÿ“„ Alternatif: Buat File Manual

{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } }

Pertama kali dijalankan, Playwright akan download browser otomatis (~1 menit). Requirement: Node.js 20+. Tidak perlu API key!

5. ๐ŸŒ Demo: Buka Amazon

Prompt AndaBuka https://amazon.com dan screenshot halaman utama

Browser Chrome terbuka otomatis, navigasi ke amazon.com, dan Kiro mengambil serta menampilkan screenshot di chat.

6. ๐Ÿ” Interaksi: Cari Produk

Prompt AndaDi halaman Amazon yang sudah terbuka, cari produk 'bamboo lamp' di search bar, lalu screenshot hasil pencariannya

Kiro membaca accessibility tree halaman โ€” struktur elemen yang sama digunakan oleh screen reader โ€” untuk menemukan dan mengklik elemen yang tepat.

7. ๐Ÿ“Š Analisis Halaman

Prompt AndaDari hasil pencarian tadi, klik produk pertama dan screenshot halaman detail produknya. Lalu jelaskan informasi apa saja yang terlihat di halaman tersebut (nama produk, harga, rating)

8. ๐ŸŽ Bonus: Bandingkan Harga

Prompt AndaKembali ke hasil pencarian 'bamboo lamp', list 5 produk pertama beserta nama dan harganya

๐Ÿ’ก Ide eksplorasi lainnya: test aplikasi sendiri, riset kompetitor, screenshot portfolio, atau form testing dengan data dummy.

9. ๐Ÿ“š Pelajaran

MCP memperluas kemampuan Kiro, setup-nya sederhana (1 file JSON, tanpa API key), Playwright memungkinkan browser otomatis, dan berbeda dari Fetch karena bisa berinteraksi penuh. Eksplor MCP lain di registry.modelcontextprotocol.io โ€” ada puluhan MCP siap pakai!

1. Tentang Lomba

Saatnya menunjukkan kreativitas Anda! Dalam lomba ini, Anda bebas membuat apapun menggunakan Kiro โ€” tidak ada batasan tema atau teknologi.

Durasi1 โ€” 1.5 jam
FormatIndividu
TemaBebas โ€” buat apapun yang Anda mau!
Hadiah3 pemenang terbaik akan mendapatkan hadiah
PenilaianJuri akan melihat hasil masing-masing peserta dan memberikan penilaian

Yang bisa Anda buat: Aplikasi Web (portfolio, calculator, quiz, landing page), Aplikasi Mobile (desain UI mobile-first), Game (snake, tic-tac-toe, memory card, trivia), Slide Presentasi (HTML-based), Materi Pembelajaran (tutorial interaktif, flashcard), Utilitas (to-do list, pomodoro, budget tracker), Kreasi Visual (animasi CSS, generative art), atau apapun lainnya.

2. Aturan

โœ… Yang Harus Dipatuhi & Boleh

  • Gunakan Kiro โ€” semua pembuatan harus menggunakan Kiro IDE
  • Project baru dari workspace kosong yang fresh
  • Kerjakan sendiri (boleh tanya ke Kiro, tidak boleh copy dari peserta lain)
  • Boleh minta Kiro mencari referensi & inspirasi dari internet
  • Boleh menggunakan MCP (Playwright, dll) jika sudah di-setup
  • Boleh iterasi berkali-kali sampai puas

โŒ Yang Tidak Boleh

  • Melanjutkan project dari sesi sebelumnya
  • Copy-paste kode dari luar (project lama, internet manual)
  • Menggunakan IDE lain selain Kiro

3. Inspirasi Ide

Bingung mau buat apa? Berikut beberapa contoh prompt untuk memulai โ€” ini hanya contoh, Anda bebas buat ide sendiri!

1

Game Sederhana

Buat game memory card matching dengan tema hewan lucu. Ada timer, score, dan efek animasi saat card cocok. Single page HTML.

2

Portfolio Personal

Buat website portfolio personal yang kreatif dan unik untuk seorang desainer. Animasi smooth, dark mode, responsive.

3

Aplikasi Produktivitas

Buat aplikasi Pomodoro Timer yang cantik dengan statistik belajar dan notifikasi suara.

4

Quiz Interaktif

Buat quiz interaktif tentang pengetahuan umum Indonesia dengan 10 soal, timer, dan leaderboard lokal.

5

Landing Page Produk

Buat landing page untuk produk fiktif: headphone wireless premium, dengan testimonial dan pricing.

6

Visualisasi Data

Buat dashboard visualisasi data cuaca kota-kota di Indonesia dengan chart dan prakiraan 5 hari.

4. Tips Menang

Kriteria yang dinilai juri: Kreativitas, Fungsionalitas, Desain/Visual, Kompleksitas, dan Prompt Skill.

1

Pilih ide yang Anda sukai

Passion terlihat di hasil.

2

Mulai dari MVP

Buat versi basic yang jalan dulu, baru tambah fitur.

3

Iterasi desain

Minta Kiro perbaiki visual setelah fungsionalitas jalan.

4

Tambah detail kecil

Animasi, hover effect, loading state โ€” hal kecil yang bikin beda.

5

Test hasilnya

Pastikan bisa dibuka dan berfungsi sebelum waktu habis.

5. Pengumpulan & Penilaian

Saat waktu habis: stop coding & simpan semua perubahan, pastikan project bisa ditampilkan (browser atau screenshot), tunggu instruksi juri, dan tunjukkan hasil saat diminta.

Pengumuman pemenang: juri melihat dan menilai setiap karya, lalu 3 pemenang terbaik diumumkan dan mendapatkan hadiah.

Yang terpenting bukan menang โ€” tapi Anda baru saja membuat sesuatu dari nol menggunakan AI. Itu sudah luar biasa!

โš ๏ธ Dokumen Internal Juri. Bagian ini hanya untuk juri. Jangan tampilkan ke peserta sebelum waktu pengerjaan lomba selesai.

๐Ÿ“Š Kriteria Penilaian

KriteriaBobotDeskripsi
Kreativitas30%Seberapa unik dan original idenya?
Fungsionalitas25%Apakah berjalan baik? Fitur bekerja?
Desain/Visual20%Tampilan rapi, menarik, user-friendly?
Kompleksitas15%Seberapa ambisius project?
Prompt Skill10%Efektivitas penggunaan Kiro/AI

๐ŸŽฏ Flow Penilaian

1

Waktu pengerjaan selesai โ†’ peserta stop coding

2

Juri tampilkan prompt scoring ke peserta (dari bagian ini)

3

Peserta diminta buka chat baru di Kiro (Vibe mode)

4

Peserta copy-paste prompt scoring ke chat Kiro mereka

5

Kiro menganalisis workspace dan generate score

6

Peserta tunjukkan score ke juri (screenshot atau layar)

7

Juri juga memberikan penilaian pribadi setelah melihat hasil langsung

8

Kombinasi score AI + penilaian juri โ†’ tentukan 3 pemenang

Juri memiliki keputusan final. Score AI adalah referensi, bukan satu-satunya penentu.

๐Ÿ“‹ Prompt Scoring

Tampilkan di layar / projector agar peserta bisa copy:

Kamu adalah juri lomba kreativitas. Analisis SELURUH file di workspace ini dan berikan penilaian objektif. Kriteria penilaian (score 1-10 untuk masing-masing): 1. KREATIVITAS (bobot 30%) โ€” Seberapa unik dan original ide project ini? 2. FUNGSIONALITAS (bobot 25%) โ€” Apakah project berjalan dengan baik tanpa error? 3. DESAIN/VISUAL (bobot 20%) โ€” Apakah tampilannya rapi, menarik, dan user-friendly? 4. KOMPLEKSITAS (bobot 15%) โ€” Seberapa ambisius dan teknis project ini? 5. PROMPT SKILL (bobot 10%) โ€” Seberapa efektif penggunaan AI, berdasarkan struktur project dan kode? Berikan penilaian yang JUJUR dan OBJEKTIF dalam format score card ringkas dengan total skor /100 dan 2-3 kalimat komentar juri yang positif dan konstruktif. Jangan inflate score โ€” gunakan range penuh 1-10.

๐Ÿ“ข Script Pengumuman

"Waktu sudah habis! Sekarang kita akan melakukan penilaian. Silakan buka chat baru di Kiro, pilih Vibe mode, lalu copy-paste prompt yang akan saya tampilkan di layar. Jalankan prompt tersebut, lalu tunjukkan score card yang muncul."

๐Ÿ’ก Tips untuk Juri

  • Lihat hasil di browser/layar peserta โ€” bukan hanya score AI
  • Perhatikan detail: animasi, responsiveness, error handling
  • Apresiasi ide unik meskipun eksekusi belum sempurna
  • Jika score AI terasa tidak adil, juri bisa adjust manual
  • Pertimbangkan effort โ€” peserta pemula yang buat sesuatu dari nol sudah luar biasa
  • Tiebreaker: jika score sama, pilih "mana yang paling ingin Anda pakai sendiri?"