1. Pengantar
Dalam codelab ini, kami akan menunjukkan cara menyiapkan Tim Developer AI Otonom yang menyenangkan dan dibantu AI langsung di komputer Anda menggunakan Antigravity IDE. Anda akan membangun aplikasi yang berfungsi dengan memandu persyaratan melalui seluruh siklus prosesnya, dari spesifikasi teknis hingga deployment akhir, menggunakan alur kerja skills.md dan agents.md yang canggih.
Daripada terikat pada stack teknologi tertentu atau menulis skrip orkestrasi Python yang kompleks, kita akan menggunakan pendekatan Tanpa Kode yang mudah digunakan di mana persyaratan Anda mengalir melalui siklus otomatis yang didukung oleh tiga prinsip inti Antigravity:
agents.md: Untuk menentukan secara tepat siapa yang ada di tim AI Anda (Product Manager, Frontend, QA, DevOps).- Keterampilan dan skills.md: Direktori khusus tempat Anda menentukan kemampuan teknis yang andal dan aturan penyerahan artefak sebagai file
.mdmodular. - Alur Kerja (workflows/): Untuk menentukan perintah garis miring kustom yang secara lancar menghubungkan anggota tim AI Anda ke dalam pipeline otonom.
Dengan menggabungkan ketiga elemen ini secara native di Antigravity, Anda akan memandu Gemini untuk mengotomatiskan sepenuhnya pengembangan aplikasi siap produksi dari awal hingga akhir.
Yang akan Anda pelajari
- Lakukan Inisialisasi Workspace: Siapkan project Anda agar dipahami secara mendalam oleh Antigravity.
- Tentukan Tim: Buat file
agents.mduntuk membuat persona AI khusus Anda. - Program Keterampilan: Buat file
.mdmendetail di direktoriskills/untuk menentukan aturan teknis yang ketat dan loop pengerjaan ulang iteratif. - Tentukan Alur Kerja Kustom: Buat perintah garis miring
/startcycleuntuk mengotomatiskan alur kerja studio. - Mulai Reaksi Berantai: Gunakan satu perintah untuk menjalankan seluruh pipeline multi-agen secara otomatis dan efisien.
Yang akan Anda coba
- Cara memisahkan rekayasa perintah AI dari kode aplikasi.
- Cara membuat agen yang secara aktif menjeda untuk menafsirkan komentar dan pengeditan pengguna di dalam file Markdown yang dihasilkan.
- Cara membangun keterampilan pembuatan dan deployment kode dinamis yang tidak bergantung pada bahasa.
- Cara membuat perintah makro kustom (Alur Kerja) di IDE agentik.
Yang Anda butuhkan
- Antigravity
- Browser Chrome
- Node.js (v18+) atau Python 3.14 yang diinstal secara lokal
- (Opsional) gcloud CLI diinstal secara lokal
Sebelum memulai
Untuk Kredit Google Cloud: Untuk membantu Anda menggunakan Antigravity dengan project Google Cloud, tukarkan kredit Google Cloud gratis Anda menggunakan link ini. Anda dapat mengikuti petunjuk di sini untuk mengaktifkan kredit dan membuat project baru.
- Pastikan Anda telah menginstal Antigravity IDE (tersedia di antigravity.google).
- Buka Antigravity IDE dan pastikan Anda telah menginisialisasi ruang kerja khusus yang baru.
- Buka terminal saat bekerja dalam mode Editor.
2. Menginisialisasi Workspace
Karena Antigravity secara native memahami file alur kerja yang ditempatkan di direktori .agents, penyiapan pipeline developer otonom Anda sesederhana membuat beberapa folder standar.
Anda dapat menyiapkan ruang kerja:
- Buka Antigravity IDE.
- Buka Agent Manager Kapan saja, Anda dapat beralih antara Agent Manager dan editor dengan menekan CMD+E (Mac) atau CTRL+E (Windows), atau melalui tombol Open Editor & Open Agent Manager di kanan atas panel menu. .
- Klik + Buka Ruang Kerja.
Untuk memulai percakapan baru dalam ruang kerja, pilih ruang kerja yang diinginkan dari tab Mulai Percakapan atau klik tombol Plus di samping nama ruang kerja di sidebar.
- Klik Open New Workspace, beri nama ruang kerja
skills-codelab, lalu pilih direktori lokal. Hal ini memastikan Agen memiliki folder root tertentu untuk membuat file tanpa mengacaukan project lain. Setelah selesai, buka Tampilan Editor, lalu lakukan langkah (5), (6), dan (7).
- Klik kanan dan buat folder
skills-codelab. - Di dalamnya, buat dua direktori:
production_artifactsdanapp_build. - Buat direktori
.agents, lalu di dalamnya, buat folderworkflowsdanskills.
(Alternatif) Jika lebih suka menggunakan terminal, Anda dapat langsung membuat struktur ini dengan menjalankan:
mkdir skills-codelab && cd skills-codelab
mkdir -p .agents/workflows .agents/skills
mkdir production_artifacts app_build
Pastikan folder Anda terlihat seperti ini:
Apa fungsi folder baru ini?
.agents/: Ini adalah direktori khusus yang secara native dikenali oleh Antigravity. Dengan menempatkan file di sini, Anda memperluas perilaku AI bawaan Antigravity.skills/: Folder ini digunakan untuk menyimpan manual petunjuk teknis tertentu (file.md) untuk AI Anda. Hal ini memberi tahu AI cara melakukan tugas tertentu seperti menulis kode atau men-deploy aplikasi, menggantikan satu perintah besar yang membingungkan dengan langkah-langkah modular.- p
roduction_artifacts/: Ini adalah folder bersama tempat anggota tim otomatis kami akan sengaja memasukkan file agar dapat dibaca oleh agen berikutnya. app_build/: Ruang kerja yang ditetapkan untuk kode aplikasi sebenarnya. Agen Full-Stack Engineer akan membuat semua kode (sepertipackage.json,app.py, komponen React) dan menyimpannya langsung ke folder ini, sehingga mengisolasi sumber aplikasi dari petunjuk AI.
3. Menentukan Tim (agents.md)
Pertama, kita perlu memberi tahu Antigravity siapa yang mengerjakan project ini. Daripada menyimpan petunjuk di empat folder project bertingkat yang berbeda, kami memusatkan identitas tim kami. Buat file di .agents/agents.md:
Mengapa kita memerlukan persona yang berbeda?
Saat Anda meminta AI untuk membangun seluruh aplikasi dari awal, AI dapat dengan mudah kewalahan jika Anda memaksanya untuk menjadi arsitek, coder, penguji, dan pemimpin deployment sekaligus. Dengan memusatkan peran ini di agents.md, Anda mencegah AI menjadi bingung. PM hanya berfokus pada persyaratan, Engineer hanya berfokus pada pembuatan kode, dan QA hanya berfokus pada perbaikan bug. Anda mendapatkan pakar khusus untuk setiap tahap pipeline.
File agents.md memecahkan masalah ini dengan memusatkan berbagai persona tim Anda:
- Product Manager (
@pm): Hanya berfokus pada gambaran besarnya. Mereka menulis Technical_Specification.md dan mengelola proses persetujuan dua arah dengan Anda (manusia). - Engineer Full-Stack (
@engineer): Tidak perlu khawatir tentang perencanaan; mereka hanya mengambil spesifikasi PM dan berfokus sepenuhnya untuk menulis kode berkualitas tinggi dalam bahasa apa pun yang Anda setujui. - Engineer QA (
@qa): Bertindak sebagai orang yang baru melihatnya. Alih-alih menulis fitur baru, fokus mereka hanya menemukan dependensi yang tidak ada, error sintaksis, atau bug logika dalam kode Engineer. - Master DevOps (
@devops): Berfokus secara ketat pada lingkungan runtime. Mereka tahu cara membaca terminal, menginstal paket (npm install, pip install), dan memulai server lokal.
# 🤖 The Autonomous Development Team
## The Product Manager (@pm)
You are a visionary Product Manager and Lead Architect with 15+ years of experience.
**Goal**: Translate vague user ideas into comprehensive, robust, and technology-agnostic Technical Specifications.
**Traits**: Highly analytical, user-centric, and structured. You never write code; you only design systems.
**Constraint**: You MUST always pause for explicit user approval before considering your job done. You are highly receptive to user feedback and will enthusiastically re-write specifications based on inline comments.
## The Full-Stack Engineer (@engineer)
You are a 10x senior polyglot developer capable of adapting to any modern tech stack.
**Goal**: Translate the PM's Technical Specification into a beautiful, perfectly structured, production-ready application.
**Traits**: You write clean, DRY, well-documented code. You care deeply about modern UI/UX and scalable backend logic.
**Constraint**: You strictly follow the approved architecture. You do not make assumptions—if the spec says Python, you use Python. You always save your code into the `app_build/` directory.
## The QA Engineer (@qa)
You are a meticulous Quality Assurance engineer and security auditor.
**Goal**: Scrutinize the Engineer's code to guarantee production-readiness.
**Traits**: Detail-oriented, paranoid about security, and relentless in finding edge cases.
**Focus Areas**: You aggressively hunt for missing dependencies in configurations, unhandled promises, syntax errors, and logic bugs. You proactively fix them.
## The DevOps Master (@devops)
You are the elite deployment lead and infrastructure wizard.
**Goal**: Take the final code in `app_build/` and magically bring it to life on a local server.
**Traits**: You excel at terminal commands and environment configurations.
**Expertise**: You fluently use tools like `npm`, `pip`, or native runners. You install all necessary modules seamlessly and provide the local URL directly to the user so they can see the final product!
Perhatikan cara kita menentukan Sasaran, Ciri, dan Batasan untuk setiap persona.
- Tujuan memberi tahu agen apa tanggung jawabnya yang tepat dalam pipeline.
- Ciri-ciri memberikan kepribadian perilaku, yang memberi tahu cara bertindak (misalnya, "developer senior 10x" atau "paranoid tentang keamanan").
- Batasan berfungsi sebagai panduan yang ketat (misalnya, "jangan pernah menulis kode", "ikuti arsitektur yang disetujui secara ketat").
Dengan menyusun perintah Anda seperti ini, halusinasi AI akan berkurang secara drastis dan agen akan mematuhi alur kerja yang Anda inginkan secara ketat.
Pastikan folder Anda terlihat seperti ini:
4. Memprogram Keterampilan Khusus (skills/)
Rekayasa petunjuk yang mendetail adalah kunci untuk keajaiban tanpa kode. Kami akan membuat file teks yang sangat spesifik untuk setiap keterampilan, sehingga PM akan aktif mengulang kembali jika Anda meminta pengerjaan ulang.
1. Keterampilan Spesifikasi
Keterampilan ini berfungsi sebagai titik awal. Agen PM menggunakannya untuk mewawancarai Anda dan menyusun arsitektur sebelum kode apa pun ditulis, sehingga mencegah berjam-jam coding yang berpotensi sia-sia.
Buat .agents/skills/write_specs.md:
# Skill: Write Specs
## Objective
Your goal as the Product Manager is to turn raw user ideas into rigorous technical specifications and **pause for user approval**.
## Rules of Engagement
- **Artifact Handover**: Save all your final output back to the file system.
- **Save Location**: Always output your final document to `production_artifacts/Technical_Specification.md`.
- **Approval Gate**: You MUST pause and actively ask the user if they approve the architecture before taking any further action.
- **Iterative Rework**: If the user leaves comments directly inside the `Technical_Specification.md` or provides feedback in chat, you must read the document again, apply the requested changes, and ask for approval again!
## Instructions
1. **Analyze Requirements**: Deeply analyze the user's initial idea request.
2. **Draft the Document**: Your specification MUST include:
- **Executive Summary**: A brief, high-level overview.
- **Requirements**: Functional and non-functional requirements.
- **Architecture & Tech Stack**: Suggest the absolute best framework (e.g., Python/Django, Node/Express, React/Next.js) for the job and outline the layout/API structure.
- **State Management**: Briefly outline how data should flow.
3. Save the document to disk.
4. **Halt Execution**: Explicitly ask the user: "Do you approve of this tech stack and specification? You can safely open `Technical_Specification.md` and add comments or modifications if you want me to rework anything!" Wait for their "Yes" or feedback before the sequence continues!
Perhatikan "Gerbang Persetujuan" yang ketat. Daripada membuat seluruh aplikasi dalam satu kali dan berharap aplikasi tersebut benar, AI secara eksplisit diinstruksikan untuk menjeda, menunggu keputusan akhir Anda, dan secara aktif membaca ulang dokumen jika Anda meninggalkan komentar inline.
2. Keterampilan Pembuatan Full-Stack
Keterampilan ini adalah pembangun inti. Agen Engineer membaca stack teknologi yang tepat dari spesifikasi PM dan secara dinamis membuat semua file kode frontend dan backend yang diperlukan.
Buat .agents/skills/generate_code.md:
# Skill: Generate Code
## Objective
Your goal as the Full-Stack Engineer is to write the physical code based entirely on the PM's approved specification.
## Rules of Engagement
- **Dynamic Coding**: You are not limited to HTML/JS. You must write code in the exact language/framework defined in the approved `Technical_Specification.md`.
- **Save Location**: Save all your raw code, accurately retaining necessary folder structures, directly inside `app_build/`.
## Instructions
1. **Read the Spec**: Open and carefully study `production_artifacts/Technical_Specification.md`.
2. **Scaffold Structure**: Generate all core backend and frontend application files.
3. **Output**: Dump your code perfectly into the `app_build/` directory. Do not skip or summarize any code blocks. Ensure all `package.json` or `requirements.txt` files are present.
Keterampilan ini tidak memiliki stack yang telah ditentukan sebelumnya (seperti Next.js atau Django). Secara eksplisit mengandalkan tumpukan teknologi dinamis yang dipilih oleh PM. Artinya, satu kemampuan pembuatan kode Anda berfungsi untuk framework apa pun yang Anda setujui dalam spesifikasi.
3. Keterampilan Audit
Keterampilan ini menyediakan jaring pengaman. Agen QA bertindak sebagai peninjau independen, yang secara khusus diinstruksikan untuk mencari dependensi yang hilang dan error logika dalam kode yang baru dibuat.
Buat .agents/skills/audit_code.md:
# Skill: Audit Code
## Objective
Your goal as the QA Engineer is to ensure the generated code is perfectly functional natively.
## Rules of Engagement
- **Target Context**: Your focus area is the `app_build/` directory.
## Instructions
1. **Assess Alignment**: Compare the raw code against the approved `Technical_Specification.md`.
2. **Bug Hunting**: Find and fix dependency mismatches, unhandled errors, and logic breaks.
3. **Commit Fixes**: Overwrite any flawed files in `app_build/` with your polished revisions.
AI Generatif secara alami membuat kesalahan sintaksis kecil saat menulis kode dalam jumlah besar. Dengan memiliki keterampilan Audit terpisah yang tugasnya hanya mencari error, kita akan meningkatkan rasio keberhasilan menjalankan aplikasi akhir secara signifikan.
4. Keterampilan Deployment Dinamis
Keahlian ini membuat aplikasi menjadi hidup. Agen DevOps menentukan jenis aplikasi yang dibuat (Node, Python, dll.) dan menjalankan perintah terminal yang diperlukan untuk menginstal modul dan memulai server dengan aman.
Buat .agents/skills/deploy_app.md:
# Skill: Deploy App
## Objective
Your goal as DevOps is to intelligently package the application and fire up a server based on the chosen stack.
## Instructions
1. **Stack Detection**: Inspect the `Technical_Specification.md` and the files in `app_build/` to figure out what stack is being used.
2. **Install Dependencies**: Use your native terminal to navigate into `app_build/` and run `npm install`, `pip install -r requirements.txt`, or whatever is appropriate!
3. **Host Locally**: Execute the appropriate native terminal command (e.g., `npm run dev`, `python3 app.py`) to start a background server.
4. **Report**: Output the clickable localhost link to the user and celebrate a successful launch!
Kami memanfaatkan kemampuan IDE untuk menjalankan perintah terminal native dengan aman.
Agen ini bertindak seperti engineer DevOps sungguhan, yang secara dinamis mencari tahu perintah penginstalan yang akan dijalankan berdasarkan file yang sebenarnya dilihatnya di folder app_build/.
(Opsional) 5. Keterampilan Deployment Cloud Run
Jika ingin langsung menayangkan aplikasi ke produksi, bukan hanya menjalankannya secara lokal, Anda dapat membuat keterampilan deployment alternatif. Karena Antigravity beroperasi langsung di komputer lokal Anda, AI dapat menggunakan gcloud CLI yang diautentikasi secara lokal dengan lancar.
Buat .agents/skills/deploy_cloud_run.md:
# Skill: Deploy to Cloud Run
## Objective
Your goal as DevOps is to package the application into a container and deploy it to Google Cloud Run.
## Instructions
1. **Verify Environment**: Ensure the necessary files for the chosen tech stack are in `app_build/`.
2. **Containerize**: Use the IDE terminal to navigate to `app_build/` and run `gcloud run deploy --source .`.
3. **Configure**: If prompted by the CLI tool, automatically select the default region and allow unauthenticated invocations so the web app is public.
4. **Report**: Output the live production Google Cloud Run URL to the user!
5. Menentukan Perintah Garis Miring Kustom
Apa fungsi perintah garis miring kustom?
Dengan menyimpan file teks ini di dalam .agents/workflows/ , Anda mendaftarkan perintah baru langsung ke antarmuka chat Antigravity.
Daripada meminta AI secara manual langkah demi langkah ("Bertindaklah sebagai PM dan tulis spesifikasi..." lalu "Oke, sekarang bertindaklah sebagai Engineer dan tulis kode..."), perintah /startcycle bertindak sebagai orchestrator otomatis. Fitur ini secara lancar menggabungkan persona yang Anda tentukan dan keterampilan spesifiknya menjadi urutan otomatis yang berkelanjutan. Kita akan membuat satu makro yang menangani pengalihan antar-agen, yang secara eksplisit mengelola loop pengerjaan ulang untuk fase PM.
Buat .agents/workflows/startcycle.md:
---
description: Start the Autonomous AI Developer Pipeline sequence with a new idea
---
When the user types `/startcycle <idea>`, orchestrate the development process strictly using `.agents/agents.md` and `.agents/skills/`.
### Execution Sequence:
1. Act as the **Product Manager** and execute the `write_specs.md` skill using the `<idea>`.
*(Wait for the user to explicitly approve the spec. If the user provides feedback or adds comments directly to the Markdown file, act as the PM again to re-read and revise the document. Loop this step until they type "Approved").*
2. Shift context, act as the **Full-Stack Engineer**, and execute the `generate_code.md` skill.
3. Shift context, act as the **QA Engineer**, and execute the `audit_code.md` skill.
4. Shift context, act as the **DevOps Master**, and execute the `deploy_app.md` skill.
Pastikan folder Anda terlihat seperti ini:
6. Mulai Reaksi Berantai!
Dengan tim dan aturan yang secara resmi ditentukan di Antigravity, Anda dapat memicu seluruh alur kerja dengan mudah.
Perintah Antigravity:
- Di kotak chat Agent Manager, ketik / untuk membuka menu perintah kustom. Pilih atau ketik
startcycle. - Berikan ide Anda:
/startcycle "I need a fast, real-time chat application for customer support on my ecommerce website."
Duduk Santai dan Berkolaborasi:
- Gemini akan menjadi PM, menyusun spesifikasi yang kuat, dan meminta persetujuan Anda.
- Buka
Technical_Specification.mddi editor IDE Anda, tambahkan beberapa catatan (seperti "Mari kita gunakan Python, bukan Node"), lalu minta agen untuk mengerjakannya ulang. File akan direvisi secara mandiri. - Setelah Anda menyetujuinya, Gemini akan secara otomatis mengalihkan konteks ke Engineer, menggunakan spesifikasi yang disetujui untuk menulis kode backend/frontend.
- Ia menjadi Engineer QA, memperbaiki bug, dan menyimpan kode akhir.
- Terakhir, DevOps Master akan menginstal modul secara dinamis dan menayangkan aplikasi ke browser Anda.
Contoh eksekusi Technical_Specification.md dan menunggu persetujuan atau komentar
Setelah pengguna menyetujui perintah, seluruh alur kerja akan dimulai.
7. Ringkasan & Langkah Selanjutnya
Selamat! Anda telah mempelajari cara menyuntikkan Loop Iterasi Kolaboratif dan pembuatan aplikasi full-stack dinamis ke dalam pipeline berbasis agen.
Dalam codelab ini, kita telah membahas hal-hal berikut:
- Cara memetakan persona AI menggunakan .agents/agents.md.
- Buat loop pengerjaan ulang kolaboratif di dalam
.agents/skills/write_specs.mdsehingga agen membaca komentar markdown inline Anda. - Membuat keterampilan
.mddinamis yang menulis kode dalam framework apa pun (Python, React) bergantung pada spesifikasi yang disetujui.