Autonome Entwickler-Pipelines mit agents.md und skills.md in Antigravity erstellen

1. Einführung

In diesem Codelab zeigen wir Ihnen, wie Sie mit der Antigravity IDE ein KI-basiertes autonomes KI-Entwicklerteam auf Ihrem Computer einrichten. Sie entwickeln eine funktionierende Anwendung, indem Sie eine Anforderung mithilfe eines leistungsstarken skills.md- und agents.md-Workflows durch den gesamten Lebenszyklus führen, von der technischen Spezifikation bis zur endgültigen Bereitstellung.

Statt auf einen bestimmten Technologie-Stack beschränkt zu sein oder komplexe Python-Orchestrierungsskripts zu schreiben, verwenden wir einen benutzerfreundlichen Zero-Code-Ansatz, bei dem Ihre Anforderungen in einem automatisierten Zyklus durchlaufen werden, der auf drei Antigravity-Kernprinzipien basiert:

  1. agents.md: Hier können Sie genau festlegen, wer zu Ihrem KI-Team gehört (Produktmanager, Frontend, QA, DevOps).
  2. Skills und skills.md: Ein separates Verzeichnis, in dem Sie robuste technische Fähigkeiten und Regeln für die Übergabe von Artefakten als modulare .md-Dateien definieren.
  3. Workflows (workflows/): Hier können Sie benutzerdefinierte Schrägstrichbefehle definieren, mit denen Sie Ihre KI-Teammitglieder nahtlos in einer autonomen Pipeline verketten können.

Wenn Sie diese drei Elemente nativ in Antigravity kombinieren, weisen Sie Gemini an, die Entwicklung einer produktionsreifen Anwendung von Anfang bis Ende vollständig zu automatisieren.

Lerninhalte

  • Arbeitsbereich initialisieren: Richten Sie Ihr Projekt so ein, dass Antigravity es genau analysieren kann.
  • Team definieren: Erstellen Sie eine agents.md-Datei, um Ihre spezialisierten KI-Personas zu erstellen.
  • Skills programmieren: Erstellen Sie detaillierte .md-Dateien in einem skills/-Verzeichnis, um strenge technische Regeln und iterative Überarbeitungszyklen zu definieren.
  • Benutzerdefinierte Workflows definieren: Erstellen Sie einen /startcycle-Slash-Befehl, um den Workflow des Studios zu automatisieren.
  • Chain Reaction starten: Mit einem einzigen Befehl kann die gesamte Multi-Agent-Pipeline automatisch und effizient ausgeführt werden.

Das probieren Sie aus

  • KI-Prompt-Engineering vom Anwendungscode trennen
  • So erstellen Sie einen Agent, der aktiv pausiert, um Nutzerkommentare und ‑bearbeitungen in den generierten Markdown-Dateien zu interpretieren.
  • So entwickeln Sie dynamische, sprachunabhängige Fähigkeiten zur Codegenerierung und ‑bereitstellung.
  • Benutzerdefinierte Makrobefehle (Workflows) in einer agentenbasierten IDE erstellen

Voraussetzungen

Hinweis

Google Cloud-Guthaben: Wenn Sie Antigravity mit Google Cloud-Projekten verwenden möchten, können Sie Ihr kostenloses Google Cloud-Guthaben über diesen Link einlösen. Folgen Sie dieser Anleitung, um das Guthaben zu aktivieren und ein neues Projekt zu erstellen.

  1. Prüfen Sie, ob die Antigravity IDE installiert ist (verfügbar unter antigravity.google).
  2. Öffnen Sie Ihre Antigravity IDE und achten Sie darauf, dass Sie einen neuen, dedizierten Arbeitsbereich initialisiert haben.
  3. Lassen Sie ein Terminal geöffnet, während Sie im Editormodus arbeiten.

2. Arbeitsbereich initialisieren

Da Antigravity Workflow-Dateien im Verzeichnis .agents nativ unterstützt, ist die Einrichtung Ihrer autonomen Entwickler-Pipeline so einfach wie das Erstellen einiger Standardordner.

Sie können Ihren Arbeitsbereich so einrichten:

  1. Öffnen Sie die Antigravity-IDE.
  2. Agent Manager öffnen – Sie können jederzeit zwischen dem Agent Manager und dem Editor wechseln, indem Sie CMD+E (Mac) oder STRG+E (Windows) drücken oder die Schaltflächen „Editor öffnen“ und „Agent Manager öffnen“ oben rechts in der Menüleiste verwenden. .
  3. Klicken Sie auf + Arbeitsbereich öffnen.

Wenn Sie eine neue Unterhaltung in einem Arbeitsbereich starten möchten, wählen Sie entweder den gewünschten Arbeitsbereich auf dem Tab „Unterhaltung starten“ aus oder klicken Sie in der Seitenleiste neben dem Namen des Arbeitsbereichs auf das Pluszeichen.

45e7241be5552e42.png

  1. Klicken Sie auf „Neuen Arbeitsbereich öffnen“, geben Sie dem Arbeitsbereich den Namen skills-codelab und wählen Sie ein lokales Verzeichnis aus. So hat der Agent einen bestimmten Stammordner, in dem Dateien erstellt werden können, ohne andere Projekte zu überladen. Gehen Sie dann zur Editoransicht und folgen Sie den Schritten 5, 6 und 7.

d84ba507939a5efc.png

  1. Klicken Sie mit der rechten Maustaste und erstellen Sie einen skills-codelab-Ordner.
  2. Erstellen Sie darin zwei Verzeichnisse: production_artifacts und app_build.
  3. Erstellen Sie ein .agents-Verzeichnis und darin die Ordner workflows und skills.

Alternativ können Sie diese Struktur auch sofort generieren, indem Sie im Terminal Folgendes ausführen:

mkdir skills-codelab && cd skills-codelab
mkdir -p .agents/workflows .agents/skills
mkdir production_artifacts app_build

Der Ordner sollte so aussehen:

7234ea48c2b175a7.png

Was ist der Zweck dieser neuen Ordner?

  • .agents/: Dies ist ein spezielles Verzeichnis, das von Antigravity nativ erkannt wird. Wenn Sie Dateien hier platzieren, erweitern Sie das integrierte KI-Verhalten von Antigravity.
  • skills/: In diesem Ordner werden spezifische technische Bedienungsanleitungen (.md-Dateien) für Ihre KI gespeichert. So wird der KI mitgeteilt, wie bestimmte Aufgaben wie das Schreiben von Code oder das Bereitstellen von Apps ausgeführt werden sollen. Ein großer, verwirrender Prompt wird durch modulare Schritte ersetzt.
  • production_artifacts/: Dies ist unser freigegebener Ordner, in dem unsere automatisierten Teammitglieder absichtlich Dateien für den nächsten Kundenservicemitarbeiter ablegen, damit er sie lesen kann.
  • app_build/: Der vorgesehene Arbeitsbereich für den eigentlichen Anwendungscode. Der Full-Stack-Engineer-Agent generiert den gesamten Code (z. B. package.json, app.py, React-Komponenten) und speichert ihn direkt in diesem Ordner. So wird der Anwendungsquellcode von den Anweisungen der KI isoliert.

3. Team definieren (agents.md)

Zuerst müssen wir Antigravity mitteilen, wer an diesem Projekt arbeitet. Anstatt Anleitungen in vier verschiedenen verschachtelten Projektordnern zu speichern, zentralisieren wir die Identität unseres Teams. Erstellen Sie eine Datei unter .agents/agents.md:

Warum brauchen wir verschiedene Personas?

Wenn Sie eine KI bitten, eine ganze Anwendung von Grund auf zu erstellen, kann sie leicht überfordert sein, wenn Sie sie zwingen, gleichzeitig Architekt, Programmierer, Tester und Bereitstellungsleiter zu sein. Wenn Sie diese Rollen in agents.md zentralisieren, wird die KI nicht verwirrt. Der PM konzentriert sich nur auf Anforderungen, der Engineer nur auf die Codegenerierung und der QA nur auf die Fehlerbehebung. Sie erhalten für jede Phase Ihrer Pipeline spezialisierte Experten.

Die agents.md-Datei bietet hier eine Lösung, indem sie die verschiedenen Personas Ihres Teams zentralisiert:

  1. Der Produktmanager (@pm): Konzentriert sich nur auf das große Ganze. Sie schreiben die Datei „Technical_Specification.md“ und verwalten den Genehmigungsprozess mit Ihnen (dem Menschen).
  2. Der Full-Stack-Engineer (@engineer): Er kümmert sich nicht um die Planung, sondern nimmt einfach die Spezifikation des PM entgegen und konzentriert sich ganz auf das Schreiben von hochwertigem Code in der von Ihnen genehmigten Sprache.
  3. Der QA-Engineer (@qa): Er fungiert als frischer Blick. Anstatt neue Funktionen zu schreiben, konzentrieren sie sich ausschließlich darauf, fehlende Abhängigkeiten, Syntaxfehler oder Logikfehler im Code des Entwicklers zu finden.
  4. DevOps Master (@devops): Konzentriert sich ausschließlich auf die Laufzeitumgebung. Sie wissen, wie man das Terminal liest, Pakete installiert (npm install, pip install) und den lokalen Server startet.
# 🤖 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!

Beachten Sie, wie wir Ziele, Merkmale und Einschränkungen für jede Persona definieren.

  • Ziele geben dem KI-Agenten an, welche genaue Verantwortung er in der Pipeline hat.
  • Mit Attributen wird ein Verhaltensprofil festgelegt, das beschreibt, wie sich der KI-Assistent verhalten soll (z.B. „10-facher Senior-Entwickler“ oder „paranoid in Bezug auf Sicherheit“).
  • Einschränkungen fungieren als strenge Leitplanken (z.B. „Schreibe niemals Code“, „Halte dich strikt an die genehmigte Architektur“).

Wenn Sie Ihre Prompts so strukturieren, werden KI-Halluzinationen drastisch reduziert und der Agent hält sich strikt an den von Ihnen geforderten Workflow.

Der Ordner sollte so aussehen:

4. Spezialisierte Skills programmieren (skills/)

Detaillierte Anweisungen sind der Schlüssel zu Zero-Code-Lösungen. Wir erstellen für jeden Skill sehr spezifische Textdateien, damit der PM bei einer Überarbeitung aktiv rückwärts durchläuft.

1. Spezifikationskompetenz

Diese Fähigkeit dient als Ausgangspunkt. Der PM-Agent verwendet sie, um Sie zu befragen und die Architektur zu konkretisieren, bevor Code geschrieben wird. So können Sie Stunden an potenziell verschwendeter Programmierung vermeiden.

.agents/skills/write_specs.md erstellen:

# 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!

Beachten Sie das strenge „Genehmigungstor“. Anstatt die gesamte App auf einmal zu erstellen und darauf zu hoffen, dass sie richtig ist, wird die KI explizit angewiesen, zu pausieren, auf Ihre endgültige Entscheidung zu warten und das Dokument aktiv neu zu lesen, wenn Sie Inline-Kommentare hinterlassen haben.

2. Die Fähigkeit zur Full-Stack-Generierung

Dieser Skill ist der Kern-Builder. Der Engineer-Agent liest den genauen Tech-Stack aus der Spezifikation des Produktmanagers und erstellt dynamisch alle erforderlichen Frontend- und Backend-Codedateien.

.agents/skills/generate_code.md erstellen:

# 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.

Für diesen Skill gibt es keinen vordefinierten Stack (wie Next.js oder Django). Sie basiert explizit auf dem dynamischen Technologie-Stack, der vom Produktmanager ausgewählt wurde. Das bedeutet, dass Ihr Skill zur Codegenerierung für jedes Framework funktioniert, das Sie in der Spezifikation genehmigt haben.

3. Die Kompetenz „Auditing“

Dieser Skill bietet ein Sicherheitsnetz. Der QA-Agent fungiert als unabhängiger Prüfer, der speziell darauf ausgerichtet ist, fehlende Abhängigkeiten und Logikfehler im neu generierten Code zu finden.

.agents/skills/audit_code.md erstellen:

# 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.

Bei der Erstellung großer Mengen an Code macht generative KI naturgemäß kleine syntaktische Fehler. Durch die Verwendung einer separaten Prüfungs-Skill, deren einzige Aufgabe darin besteht, nach Fehlern zu suchen, erhöhen wir die Erfolgsrate der Ausführung der endgültigen Anwendung erheblich.

4. Der Skill für die dynamische Bereitstellung

Dieser Skill erweckt die Anwendung zum Leben. Der DevOps-Agent ermittelt, welcher App-Typ erstellt wurde (Node, Python usw.), und führt die Terminalbefehle, die zum Installieren von Modulen und Starten des Servers erforderlich sind, sicher aus.

.agents/skills/deploy_app.md erstellen:

# 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!

Wir nutzen die Möglichkeit der IDE, native Terminalbefehle sicher auszuführen.

Der Agent verhält sich wie ein echter DevOps-Engineer und ermittelt dynamisch, welcher Installationsbefehl ausgeführt werden soll, basierend auf den Dateien, die er tatsächlich im Ordner app_build/ sieht.

(Optional) 5. Cloud Run Deployment Skill

Wenn Sie Ihre Anwendung direkt in der Produktionsumgebung bereitstellen möchten, anstatt sie nur lokal auszuführen, können Sie einen alternativen Bereitstellungs-Skill erstellen. Da Antigravity direkt auf Ihrem lokalen Computer ausgeführt wird, kann die KI nahtlos Ihre lokal authentifizierte gcloud CLI verwenden.

.agents/skills/deploy_cloud_run.md erstellen:

# 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. Benutzerdefinierten Slash-Befehl definieren

Was bewirkt ein benutzerdefinierter Slash-Befehl?

Wenn Sie diese Textdatei in .agents/workflows/ speichern , registrieren Sie einen neuen Befehl direkt in der Chatoberfläche von Antigravity.

Anstatt die KI manuell Schritt für Schritt zu bitten, bestimmte Aufgaben zu übernehmen („Sei der PM und schreibe eine Spezifikation…“ und dann „Okay, jetzt sei der Entwickler und schreibe Code…“), fungiert der /startcycle-Befehl als automatisierter Orchestrator. Dabei werden die von Ihnen definierten Identitäten und ihre spezifischen Fähigkeiten nahtlos in einer kontinuierlichen, automatisierten Sequenz verknüpft. Wir erstellen ein einzelnes Makro, das die Übergabe zwischen Kundenservicemitarbeitern übernimmt und den Überarbeitungszyklus für die PM-Phase explizit verwaltet.

.agents/workflows/startcycle.md erstellen:

---
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.

Der Ordner sollte so aussehen:

de21eeb6012ddbcd.png

6. Starten Sie die Kettenreaktion!

Nachdem Sie Ihr Team und Ihre Regeln offiziell in Antigravity definiert haben, können Sie den gesamten Workflow ganz einfach auslösen.

Prompt „Antigravity“:

  1. Geben Sie im Chatfeld des Agent Manager „/“ ein, um das Menü mit benutzerdefinierten Befehlen zu öffnen. Wählen Sie startcycle aus oder geben Sie den Wert ein.
  2. Geben Sie Ihre Idee ein:
/startcycle "I need a fast, real-time chat application for customer support on my ecommerce website."

Zurücklehnen und zusammenarbeiten:

  1. Gemini übernimmt die Rolle des Produktmanagers, entwirft eine detaillierte Spezifikation und bittet Sie um Genehmigung.
  2. Öffnen Sie Technical_Specification.md in Ihrem IDE-Editor, fügen Sie einige Notizen hinzu (z. B. „Wir verwenden Python anstelle von Node“) und bitten Sie den Agenten, den Code zu überarbeiten. Die Datei wird automatisch überarbeitet.
  3. Sobald Sie die Spezifikation genehmigt haben, wechselt Gemini den Kontext nativ zum Engineer und verwendet die genehmigte Spezifikation, um den Backend-/Frontend-Code zu schreiben.
  4. Er wird zum QA-Engineer, behebt alle Fehler und speichert den endgültigen Code.
  5. Schließlich installiert der DevOps Master dynamisch Module und stellt die Anwendung in Ihrem Browser bereit.

Ein Beispiel für die Ausführung von Technical_Specification.md und das Warten auf Genehmigungen oder Kommentare

11defe4c48e874cc.png

Nachdem der Nutzer die Aufforderung genehmigt hat, beginnt der gesamte Workflow.

b9af07291806ae60.png

7. Zusammenfassung und nächste Schritte

Glückwunsch! Sie haben gelernt, wie Sie Collaborative Iteration Loops und die dynamische Generierung von Full-Stack-Anwendungen in eine Agent-Pipeline einfügen.

In diesem Codelab haben wir Folgendes behandelt:

  • KI-Personas mit .agents/agents.md zuordnen
  • Erstellen Sie kollaborative Überarbeitungszyklen in .agents/skills/write_specs.md, damit der Agent Ihre Inline-Markdown-Kommentare liest.
  • Dynamische .md-Skills erstellt, die je nach genehmigter Spezifikation Code in einem beliebigen Framework (Python, React) schreiben.