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 unterhaltsames, KI-gestütztes autonomes KI-Entwicklungsteam direkt auf Ihrem Computer einrichten. Sie erstellen eine funktionierende Anwendung, indem Sie eine Anforderung durch ihren gesamten Lebenszyklus führen – von der technischen Spezifikation bis zur endgültigen Bereitstellung. Dabei verwenden Sie einen leistungsstarken skills.md- und agents.md-Workflow.

Anstatt an einen bestimmten Technologie-Stack gebunden zu sein oder komplexe Python-Orchestrierungsskripts zu schreiben, verwenden wir einen benutzerfreundlichen Zero-Code-Ansatz, bei dem Ihre Anforderungen einen automatisierten Zyklus durchlaufen, der auf drei grundlegenden Antigravity-Prinzipien basiert:

  1. agents.md: Hier definieren Sie genau, wer in Ihrem KI-Team ist (Produktmanager, Frontend, Qualitätssicherung, DevOps).
  2. Skills und skills.md: Ein dediziertes Verzeichnis, in dem Sie robuste technische Fähigkeiten und Regeln für die Artefaktübergabe als modulare .md Dateien definieren.
  3. Workflows (workflows/): Hier definieren Sie benutzerdefinierte Slash-Befehle, mit denen Sie Ihre KI-Teammitglieder nahtlos zu einer autonomen Pipeline zusammenfügen.

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

Lerninhalte

  • Arbeitsbereich initialisieren: Richten Sie Ihr Projekt so ein, dass es von Antigravity umfassend verstanden wird.
  • 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.
  • Kettenreaktion starten: Verwenden Sie einen einzigen Befehl, um die gesamte Multi-Agent-Pipeline automatisch und effizient auszuführen.

Das können Sie ausprobieren

  • Wie Sie KI-Prompt-Engineering von Anwendungscode trennen.
  • Wie Sie einen Agenten erstellen, der aktiv pausiert, um Nutzerkommentare und ‑bearbeitungen in den generierten Markdown-Dateien zu interpretieren.
  • Wie Sie dynamische, sprachunabhängige Skills für die Codegenerierung und ‑bereitstellung erstellen.
  • Wie Sie benutzerdefinierte Makrobefehle (Workflows) in einer agentengestützten IDE erstellen.

Voraussetzungen

Hinweis

  1. Prüfen Sie, ob die Antigravity IDE installiert ist (verfügbar unter antigravity.google).
  2. Öffnen Sie die Antigravity IDE und prüfen Sie, ob ein neuer, dedizierter Arbeitsbereich initialisiert wurde.
  3. Öffnen Sie ein Terminal, während Sie im Editor-Modus arbeiten.

2. Arbeitsbereich initialisieren

Da Antigravity Workflow-Dateien, die sich im Verzeichnis .agents befinden, nativ versteht, ist die Einrichtung Ihrer autonomen Entwicklungspipeline so einfach wie das Erstellen einiger Standardordner.

So richten Sie Ihren Arbeitsbereich ein:

  1. Öffnen Sie die Antigravity IDE.
  2. Öffnen Sie den KI-Agenten-Manager. Sie können jederzeit zwischen dem KI-Agenten-Manager und dem Editor wechseln, indem Sie CMD + E (Mac) oder STRG + E (Windows) drücken oder die Schaltflächen „Editor öffnen“ und „KI-Agenten-Manager öffnen“ rechts oben 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 auf die Schaltfläche „Plus“ neben dem Namen des Arbeitsbereichs.

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 er Dateien erstellen kann, ohne andere Projekte zu überladen. Gehen Sie dann zur Editoransicht und führen Sie die Schritte (5), (6) und (7) aus.

d84ba507939a5efc.png

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

(Alternativ) Wenn Sie das Terminal bevorzugen, können Sie diese Struktur sofort generieren, indem Sie Folgendes ausführen:

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

Ihr Ordner sollte so aussehen:

7234ea48c2b175a7.png

Was machen diese neuen Ordner?

  • .agents/: Dies ist ein spezielles Verzeichnis, das von Antigravity nativ erkannt wird. Wenn Sie hier Dateien platzieren, erweitern Sie das integrierte KI-Verhalten von Antigravity.
  • skills/: In diesem Ordner werden spezifische technische Anleitungen (.md-Dateien) für Ihre KI gespeichert. So erfährt die KI, wie bestimmte Aufgaben ausgeführt werden, z. B. Code schreiben oder Apps bereitstellen. Eine massive, verwirrende Prompt wird durch modulare Schritte ersetzt.
  • production_artifacts/: Dies ist unser freigegebener Ordner, in dem unsere automatisierten Teammitglieder absichtlich Dateien ablegen, damit der nächste Agent sie lesen kann.
  • app_build/: Der vorgesehene Arbeitsbereich für den eigentlichen Anwendungscode. Der Full-Stack-Entwickler-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 getrennt.

3. Team definieren (agents.md)

Zuerst müssen wir Antigravity mitteilen, wer an diesem Projekt arbeitet. Anstatt Anweisungen 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 gesamte Anwendung von Grund auf zu erstellen, kann sie leicht überfordert sein, wenn Sie sie zwingen, gleichzeitig Architekt, Programmierer, Tester und Bereitstellungsleiter zu sein. Indem Sie diese Rollen in agents.md zentralisieren, verhindern Sie, dass die KI verwirrt wird. Der Produktmanager konzentriert sich nur auf die Anforderungen, der Entwickler nur auf die Codegenerierung und die Qualitätssicherung nur auf die Fehlerbehebung. So erhalten Sie für jede Phase Ihrer Pipeline spezialisierte Experten.

Die Datei agents.md löst dieses Problem, indem sie die verschiedenen Personas Ihres Teams zentralisiert:

  1. Der Produktmanager (@pm): Konzentriert sich nur auf das Gesamtbild. Er schreibt die Datei „Technical_Specification.md“ und verwaltet den Genehmigungsprozess mit Ihnen (dem Menschen).
  2. Der Full-Stack-Entwickler (@engineer): Macht sich keine Gedanken über die Planung, sondern nimmt einfach die Spezifikation des Produktmanagers und konzentriert sich ganz auf das Schreiben von hochwertigem Code in der von Ihnen genehmigten Sprache.
  3. Der Qualitätssicherungsingenieur (@qa): Wirkt als frischer Blick. Anstatt neue Funktionen zu schreiben, konzentriert er sich ausschließlich darauf, fehlende Abhängigkeiten, Syntaxfehler oder Logikfehler im Code des Entwicklers zu finden.
  4. Der DevOps-Master (@devops): Konzentriert sich ausschließlich auf die Laufzeitumgebung. Er weiß, 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 Agenten an, welche genaue Verantwortung er in der Pipeline hat.
  • Merkmale verleihen ihm eine Verhaltenspersönlichkeit und geben an, wie er sich verhalten soll (z.B. „10x Senior Developer“ oder „paranoid in Bezug auf Sicherheit“).
  • Einschränkungen fungieren als strenge Leitplanken (z.B. „niemals Code schreiben“, „strikte Einhaltung der genehmigten Architektur“).

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

Ihr Ordner sollte so aussehen:

4. Spezialisierte Skills programmieren (skills/)

Detaillierte Anweisungen sind der Schlüssel zur Zero-Code-Magie. Wir erstellen für jeden Skill hochspezifische Textdateien, damit der Produktmanager aktiv zurückkehrt, wenn Sie eine Überarbeitung anfordern.

1. Spezifikations-Skill

Dieser Skill dient als Ausgangspunkt. Der Produktmanager-Agent verwendet ihn, um Sie zu befragen und die Architektur zu konkretisieren, bevor Code geschrieben wird. So können Sie Stunden potenziell verschwendeter Programmierung vermeiden.

Erstellen Sie .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!

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

2. Der Full-Stack-Generierungs-Skill

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

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

Dieser Skill hat keinen vordefinierten Stack (z. B. Next.js oder Django). Er basiert ausdrücklich auf dem dynamischen Technologie-Stack, der vom Produktmanager ausgewählt wurde. Das bedeutet, dass Ihr einzelner Skill zur Codegenerierung für jedes Framework funktioniert, das Sie in der Spezifikation genehmigt haben.

3. Der Audit-Skill

Dieser Skill bietet ein Sicherheitsnetz. Der Qualitätssicherungsagent fungiert als unabhängiger Prüfer, der speziell angewiesen wird, fehlende Abhängigkeiten und Logikfehler im neu generierten Code zu finden.

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

GenAI macht beim Schreiben großer Mengen von Code naturgemäß kleine Syntaxfehler. Wenn wir einen separaten Audit-Skill haben, dessen einzige Aufgabe es ist, nach Fehlern zu suchen, erhöhen wir die Erfolgsrate der Ausführung der endgültigen Anwendung erheblich.

4. Der dynamische Bereitstellungs-Skill

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

Erstellen Sie .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!

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

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

(Optional) 5. Der Cloud Run-Bereitstellungs-Skill

Wenn Sie Ihre Anwendung direkt in der Produktion 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 Ihre lokal authentifizierte gcloud CLI nahtlos nutzen.

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

Was macht ein benutzerdefinierter Slash-Befehl?

Wenn Sie diese Textdatei in .agents/workflows/ speichern , registrieren Sie einen brandneuen Befehl direkt in der Chat-Oberfläche von Antigravity.

Anstatt die KI Schritt für Schritt manuell zu bitten („Verhalte dich wie der Produktmanager und schreibe eine Spezifikation…“ und dann „Okay, verhalte dich jetzt wie der Entwickler und schreibe Code…“), fungiert der Befehl /startcycle als automatisierter Orchestrator. Er verknüpft Ihre definierten Personas und ihre spezifischen Skills nahtlos zu einer kontinuierlichen, automatisierten Sequenz. Wir erstellen ein einzelnes Makro, das die Übergabe zwischen Agenten verarbeitet und den Überarbeitungszyklus für die Produktmanager-Phase explizit verwaltet.

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

Ihr Ordner sollte so aussehen:

de21eeb6012ddbcd.png

6. Kettenreaktion starten

Nachdem Ihr Team und Ihre Regeln offiziell in Antigravity definiert wurden, können Sie den gesamten Workflow mühelos auslösen.

Prompt für Antigravity:

  1. Geben Sie im Chatfeld des KI-Agenten-Managers „/“ ein, um das Menü mit benutzerdefinierten Befehlen zu öffnen. Wählen Sie startcycle aus oder geben Sie es 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 wird zum Produktmanager, entwirft eine robuste Spezifikation und bittet Sie um Genehmigung.
  2. Öffnen Sie Technical_Specification.md im Editor Ihrer IDE, fügen Sie einige Notizen hinzu (z. B. „Verwenden wir Python anstelle von Node“) und bitten Sie den Agenten, sie zu überarbeiten. Er überarbeitet die Datei automatisch.
  3. Sobald Sie sie genehmigt haben, wechselt Gemini nativ zum Entwickler und verwendet die genehmigte Spezifikation, um den Backend-/Frontend-Code zu schreiben.
  4. Er wird zum Qualitätssicherungsingenieur, 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.

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

11defe4c48e874cc.png

Nach der Genehmigung des Prompts durch den Nutzer beginnt der gesamte Workflow.

b9af07291806ae60.png

7. Zusammenfassung und nächste Schritte

Das wars! Sie haben das Lab erfolgreich abgeschlossen. Sie haben gelernt, wie Sie kollaborative Überarbeitungszyklen und die dynamische Full-Stack-Anwendungserstellung in eine agentengestützte Pipeline einfügen.

In diesem Codelab haben wir Folgendes behandelt:

  • Wie Sie 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.
  • Erstellen Sie dynamische .md-Skills, die je nach genehmigter Spezifikation Code in jedem Framework (Python, React) schreiben.