Vibe Coding für das Web

1. Einführung

Da Coding-Agents ein integraler Bestandteil der täglichen Softwareentwicklung werden, ändert sich grundlegend, wie und was Sie entwickeln – ganz gleich, ob Sie ein erfahrener Entwickler oder ein Neuling sind, der seine erste App auf den Markt bringen möchte. Wenn Sie mit der Verwendung von Coding-Agents beginnen, verwenden Sie in der Regel „Zero-Shot“-Prompts – eine einzelne Anweisung, in der Sie kurz und in menschlicher Sprache beschreiben, was Sie möchten. Das führt schnell zu Problemen:

• Bias durch Gefallenwollen: Modelle akzeptieren oft fehlerhafte Einschränkungen oder Prämissen, um Ihre Anfrage so schnell wie möglich zu bearbeiten. Sie prüfen nicht, ob das, was sie erstellen, tatsächlich Ihren Intentionen entspricht.
• Verifizierungslücke: Selbst wenn Agents Tests schreiben, überprüfen sie ihre Arbeit in der Regel nicht, um sicherzustellen, dass sie funktioniert. Wenn Sie versuchen, Websites in einem Live-Browser zu verwenden, werden verborgene Fehler, fehlerhafte Layouts und nicht zugängliche Steuerelemente angezeigt.
• Technische Altlasten: Aufgrund der Art und Weise, wie Modelle trainiert werden und funktionieren, orientiert sich der von ihnen geschriebene Code an alten und veralteten Mustern. Dadurch werden technische Altlasten erhöht, deren Verwaltung mehr Tokens sowie mehr Zeit und Aufwand von Menschen und Maschinen erfordert. Technische Schulden können sich sogar negativ auf die Nutzerfreundlichkeit auswirken.

Der 4‑Schritte-Plan

Damit Code-Agents besseren Code generieren, der Ihren Anforderungen besser entspricht, sollten Sie einen 4-stufigen Produktentwicklungszyklus durchlaufen:

1. Planen und entwerfen: Schreiben Sie gemeinsam mit dem Agenten Dokumente zu Produktanforderungen (Product Requirements Documents, PRDs) und lassen Sie ihn die PRDs im Browser prototypisieren und entwerfen, bevor die Implementierung beginnt. Erstellen Sie dann aus Ihren PRDs und Designs Architekturdokumente (Spezifikationen), bevor mit dem Programmieren begonnen wird.
2. Code und Build: Weisen Sie Ihre Agents an, auf Grundlage Ihrer PRDs, Designs und Spezifikationen zu entwickeln, anstatt einen Zero-Shot-Prompt zu verwenden. Lassen Sie die Arbeit von einem anderen Agenten überprüfen.
3. Wiederholen: Führen Sie die Schritte 1 und 2 für jede neue Funktion aus, die Sie hinzufügen möchten.
4. Bereitstellen: In der Produktion bereitstellen.

In diesem Dokument erfahren Sie, wie Sie KI-Agents als aktive Partner für die Zusammenarbeit nutzen können. Die beschriebenen Methoden sollen Ihnen helfen, technische Schulden zu reduzieren und die Qualität des Ausgabecodes zu verbessern. Sie verwenden Antigravity in Kombination mit Modern Web Guidance und DevTools for Agents, um ein einfaches Wortspiel zu entwickeln und es mit KI-Funktionen zu erweitern. Anschließend stellen Sie sie mit Firebase in Google Cloud bereit, um sie mit Freunden und Familie zu teilen.

Lerninhalte

• Wie Sie KI-Programmieraufgaben als Mini-Produktentwicklungszyklen behandeln.
• Warum Sie Produktanforderungen von Architekturspezifikationen trennen sollten.
• So orchestrieren Sie Workflows mit mehreren Agenten, um direkt im Browser Prototypen zu erstellen und Ihren Code zu überprüfen.
• Wie Sie Drittanbieter-Skills und ‑Tools nutzen können, um sowohl die Entwicklung als auch die Nutzerfreundlichkeit zu verbessern.
• So stellen Sie Webanwendungen mit Firebase MCP direkt in der Produktion bereit.

Vorbereitung

• Ein privates Google-Konto und ein Google Cloud- oder Firebase-Projekt (Anleitung in der Projekteinrichtung)
• Sie sollten mit HTML, CSS und JavaScript vertraut sein.
• Ein Webbrowser wie Chrome.
• Node.js ist installiert (LTS empfohlen).

2. Projekt einrichten

Google-Konto

Wenn Sie noch kein privates Google-Konto haben, können Sie ein Google-Konto erstellen.

Melden Sie sich in der Google Cloud Console an.

Melden Sie sich mit einem privaten Google-Konto in der Google Cloud Console an.

Abrechnung aktivieren

Tipp:Wenn Sie die Abrechnung mit Google Cloud-Guthaben einrichten, können Sie mit „Firebase-Projekt erstellen“ fortfahren.

Aktivieren Sie die Abrechnung in der Cloud Console, um ein privates Rechnungskonto einzurichten.

Firebase-Projekt erstellen

Tipp:Wenn Sie im Rahmen der Einrichtung von Google Cloud-Guthaben ein Google Cloud-Projekt eingerichtet haben, verwenden Sie dieses Projekt, um Ihr Firebase-Projekt einzurichten. In diesem Fall müssen Sie Ihr Rechnungskonto nicht verbinden, da es bereits verbunden ist.

1. Rufen Sie die Firebase Console auf und melden Sie sich mit Ihrem privaten Google-Konto an.
2. Klicken Sie auf Projekt hinzufügen oder Projekt erstellen.
3. Im Assistenten zur Projekterstellung:
   • Geben Sie einen Projektnamen ein (z. B. wordup-web-app) oder verwenden Sie das Google Cloud-Projekt, das Sie bei der Projekteinrichtung eingerichtet haben.
4. Rechnungskonto verbinden 
   • Suchen Sie in der Seitenleiste der Firebase Console unten nach dem Plan-Badge (mit der Aufschrift „Spark“). Klicken Sie auf Upgrade.
   • Wählen Sie das Pay as you go-Modell aus.
   • Wählen Sie das Rechnungskonto aus, das Sie beim Einrichten des Projekts eingerichtet haben.
   • Bestätigen Sie die Auswahl, um Ihr Rechnungskonto mit dem Projekt zu verknüpfen. Firebase Hosting bietet eine großzügige kostenlose Stufe. Für dieses Tutorial fallen in der Regel keine Kosten an.

Tools installieren

• Antigravity 2.0: Die primäre agentische Programmierumgebung, die Sie verwenden, in Kombination mit dem neuesten Gemini Flash-Modell für schnelles Programmieren auf dem neuesten Stand der Technik.
• Modern Web Guidance: Skill für die Programmierung von Agents, damit sie modernen CSS-, HTML- und JavaScript-Code schreiben können. Installieren Sie das Plug-in über Antigravity unter Einstellungen > Anpassung > Mit Google-Plug-ins erstellen > Modern Web Guidance.
• Entwicklertools für KI-Agenten: Ermöglichen es KI-Agenten, Chrome zu steuern, das Live-DOM zu untersuchen, das Layout zu testen und zur Laufzeit Fehler zu beheben. Installieren Sie die Chrome-Entwicklertools über Antigravity Einstellungen > Anpassung > Mit Google-Plug-ins erstellen > Chrome-Entwicklertools und Antigravity Einstellungen > Anpassung > MCP-Server hinzufügen > Chrome-Entwicklertools für Kundenservicemitarbeiter.
• Firebase-MCP-Server: für eine nahtlose Projekteinrichtung und Bereitstellungen mit nur einem Prompt. Installation über Antigravity: Einstellungen > Anpassung > Mit Google-Plug-ins entwickeln > Firebase- und Antigravity-Einstellungen > Anpassung > MCP-Server hinzufügen > Firebase.

3. Mit einem Plan beginnen

Bei der agentenbasierten Programmierung ist es verlockend, einen Zero-Shot-Prompt zu senden (Erstelle ein Wortspiel für mich) und auf das Beste zu hoffen. Das führt fast immer zu übersprungenen Grenzbedingungen, aufgeblähten Codebases und endlosen Bugfixing-Zyklen.

Behandeln Sie jede Aufgabe stattdessen als Mini-Produktentwicklungszyklus. Coding-Agents haben Recherche- und Argumentationstools, mit denen sie als Kollaborationspartner fungieren können, um Ihnen zu helfen, Ihre Ideen zu konkretisieren, bevor Sie Code schreiben. Wenn Sie Ihre Idee laut aussprechen, können Sie oft Fragen finden und beantworten, bevor sie zu Problemen werden. In der Softwareentwicklung wird dies als Rubber Duck Debugging bezeichnet. Sie können Ihre Coding-Agents als Gummienten verwenden, um Ihre Projekte und Funktionen zu planen.

Sie entwickeln ein Casual Game mit Wörtern. Fordern Sie den KI-Agenten auf, Ihnen beim Entwerfen des gewünschten Spiels zu helfen.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

Das ist die grundlegende Form des Prompts. Sie können ihn an Ihre eigenen Bedürfnisse anpassen. Der Schlüssel dazu ist, dass Gemini eine umfassende Recherche durchführt und Ihnen auf Grundlage dieser Recherche Fragen stellt, um Ihnen bei der Planung Ihrer Arbeit zu helfen.

Beginnen Sie mit diesem Prompt, da die Arbeit mit Coding-Agents viel Überprüfung erfordert. Wenn Sie einen vollständigen Implementierungsplan in kleinere, fokussierte Abschnitte unterteilen, ist es viel einfacher, ihn zu überprüfen. Außerdem können Sie Grenzfälle frühzeitig erkennen, Wissen außerhalb der Trainingsdaten des Kundenservicemitarbeiters einbeziehen und vor allem mehr Pausen zwischen den Überprüfungen einlegen.

• Trennt „Was“ von „Wie“: Wenn Sie die User Experience und den Produktumfang in einem formalen Dokument zu Produktanforderungen (Product Requirements Document, PRD) definieren, trennen Sie Was Sie erreichen möchten von Wie es implementiert wird. So können Sie sich jeweils auf einen Aspekt der Produktentwicklung konzentrieren, anstatt alles auf einmal zu erledigen.
• Grenzfälle frühzeitig erkennen: In einer interaktiven Fragerunde müssen Sie Ihre Anforderungen klären, bevor mit dem Design oder der Implementierung begonnen wird.
• Aktive Agentenrecherche: Da das Agententraining zu einem bestimmten Datum abgeschlossen wird und die Informationen darin stark zusammengefasst werden, können durch die Live-Recherche neue Informationen abgerufen werden, die sonst fehlen würden.

Tipp:Wenn Sie sehen, dass Ihr Coding-Agent etwas tut, das Ihnen gefällt oder nicht gefällt, können Sie Anweisungen in einer AGENTS.md-Datei in Ihrem Projektordner hinzufügen, um sein Verhalten zu korrigieren oder zu verstärken. Fügen Sie Folgendes hinzu, damit Antigravity das integrierte Fragetool verwendet, wenn es Ihnen Fragen stellt:

When I ask you to ask me questions, you are **REQUIRED** to use your `ask_question` tool to do so.

Übung 1

Jetzt sind Sie an der Reihe. Richten Sie Ihr Projekt ein und erstellen Sie das PRD.

1. Fügen Sie Ihrer AGENTS.md-Datei eine Anweisung hinzu, mit der die Ausgabe in docs/plans/{{YYYY-MM-DD}}-{{description}}.md gespeichert wird.
2. Führen Sie den oben genannten Recherche-Prompt mit den gewünschten Anpassungen aus, um Ihr PRD zu erstellen.
3. [Stretch Goal] Aktualisieren Sie die Datei AGENTS.md mit Dingen, die Ihr Agent tut und die Ihnen nicht gefallen, und führen Sie den Prompt noch einmal aus.

Tipp:Antigravity 2.0 hat einen /grill-me-Befehl, den Sie speziell für diese Art von Untersuchung ausführen können.

Best Practice:Antigravity 2.0 bietet ein Tool namens „Artifact“, mit dem Sie Zeile für Zeile kommentieren oder bestimmten Text hervorheben und Kommentare hinterlassen können – genau wie in Google Docs. Sie sollten Kommentare inline einfügen, anstatt sie dem Prompt hinzuzufügen. Speichern Sie den Prompt für dokumentweite Kommentare. Wenn Sie Ihren Prompt senden, auch wenn er leer ist, werden Ihre Kommentare gesendet und Antigravity wird angewiesen, Ihr Dokument unter Berücksichtigung Ihrer Kommentare neu zu generieren.

Achtung:Manchmal werden in das PRD auch Software-Design und ‑Architektur aufgenommen, obwohl Sie das nicht angegeben haben. Wenn das der Fall ist, hinterlassen Sie einen Kommentar oder fordern Sie das Modell auf, diese Elemente zu entfernen und sich nur auf die Nutzerfreundlichkeit zu konzentrieren.

4. Im Browser gestalten

Das statische UI-Design basiert auf Mockups, die oft beeindruckend aussehen, aber keine Grenzfälle, Einschränkungen und tatsächliche Nutzerinteraktionen berücksichtigen. Ähnlich wie bei Code führt die Aufforderung an einen Agenten, Ihre Website-Anwendung zu „entwerfen“, zu Designs, die sich auf ein generisches (oft lila) Design konzentrieren.

Bei Web-Apps können Sie die Fähigkeit Ihres Agents nutzen, einen Webbrowser über DevTools for Agents zu steuern, um im Browser zu entwickeln. Ganz gleich, ob Sie als Designer die Genauigkeit Ihrer Designs verbessern möchten, als Programmierer oder Entwickler die Benutzeroberfläche und ‑freundlichkeit Ihres Projekts optimieren möchten oder beide zusammenarbeiten: Wenn Sie in dem Medium arbeiten, für das Sie entwickeln, erzielen Sie bessere Ergebnisse.

Wenn Sie im Browser entwickeln, können Sie auch mehrere Agents koordinieren, die zusammenarbeiten, um eine einzelne Ausgabe zu erstellen. Diese Unter-Agents sind Agents mit bestimmten Identitäten und Zielen, die koordiniert werden können, um bessere Ergebnisse zu erzielen als ein einzelner Agent, der allein arbeitet. Sie können anfordern, dass ein Agent für visuelles Design, ein Agent für User Experience und ein Agent für Barrierefreiheit zusammenarbeiten, um Sie bei Ihrem Design zu unterstützen, und dass sie Ihnen das Ergebnis direkt im Browser anzeigen.

Achtung:Wenn Sie Unter-Agents zum Erledigen von Aufgaben verwenden, werden mehr Tokens benötigt. Sie können zwar qualitativ viel bessere Ergebnisse liefern, aber ihre Verwendung kann zusätzliche Kosten verursachen.

Starten Sie eine Gruppe von Design-Agents, die Ihnen bei der Auswahl eines Designs auf Grundlage Ihres PRD helfen.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

Tipp:Sie können @ in den Prompt-Bereich von Antigravity eingeben und mit der Eingabe des Namens einer Datei beginnen, um Antigravity auf die gewünschte Datei zu verweisen.

Wenn Sie in dem Medium entwerfen, für das Sie entwickeln – in diesem Fall das Web – anstatt in einem statischen Medium, können Sie Grenzfälle und Einschränkungen erkennen, die sonst schwer zu handhaben sind. Außerdem erhalten Sie sofortiges visuelles Feedback, das der Produktionsumgebung entspricht.

Übung 2

Jetzt sind Sie an der Reihe. Projekt gestalten

1. Führen Sie den vorherigen Design-Prompt mit den gewünschten Anpassungen aus, um das Design zu erstellen. Geben Sie Ideen für die verschiedenen Designrichtungen an, die Sie sich vorstellen können (z. B. modern, verspielt, realistisch).
2. Wählen Sie ein Design aus, das Ihnen gefällt, und lassen Sie es von Ihrem Agenten überarbeiten.
3. Lassen Sie Ihren Agenten das PRD aktualisieren, damit es auf das vereinbarte Design verweist.
4. Zusätzliches Ziel: Führen Sie Barrierefreiheitstests und Tests für responsives Design für Ihr ausgewähltes Design durch und passen Sie Ihr Design basierend auf diesen Prüfungen an.

Achtung:Kundenservicemitarbeiter sind manchmal übereifrig und betrachten diese Anweisung als Genehmigung, die gesamte Anwendung zu entwickeln. Beobachten Sie, wie die KI vorgeht. Wenn sie mehr tut, als Sie erwarten, stoppen Sie sie und fordern Sie sie auf, den Kurs zu ändern.

5. Spezifikation schreiben

Nachdem Sie ein genehmigtes PRD („Was soll entwickelt werden?“) und ein ausgewähltes visuelles Design („Wie soll es aussehen?“) haben, müssen Sie sich nun technisch auf die Architektur abstimmen („Wie soll es entwickelt werden?“).

Ein technisches Design-Dokument oder eine Spezifikation – kurz Spezifikation – enthält Details zu Dateistrukturen, Statusverwaltung, Komponentenschnittstellen, Ereignispipelines und Abhängigkeiten. Wenn Sie eine Spezifikation erstellen, bevor Sie Code schreiben, können Sie Abweichungen und unerwünschte Codierungsmuster frühzeitig erkennen, bevor sie zu Code werden, der schwerer zu verstehen und umzugestalten ist.

Write a detailed technical design document on how to implement the game with
the chosen design.

Warum Sie das tun

• Architektonische Klarheit: Durch die Definition der Komponentenhierarchie und des Ablaufs von Zustandsübergängen (z. B. Idle → InGame → EvaluatingGuess → GameOver) werden Race-Bedingungen und unübersichtlicher Spaghetti-Code vermieden.
• Ausrichtung an modernen Standards: Wenn Modern Web Guidance aktiviert ist, verweist der Agent auf moderne Standards (z. B. CSS-@container-Abfragen, integrierte
  -Elemente für Modale oder Hilfe-Overlays und modulare ES-Module), anstatt auf alte, umfangreiche Bibliotheken zuzugreifen.
• Überprüfung in Phasen: Wenn Sie die Überprüfung des funktionalen PRD von der Überprüfung des technischen Design-Dokuments trennen, können Sie die Architektur unabhängig von der Nutzerfreundlichkeit bewerten.

Übung 3

1. Weisen Sie AGENTS.md an, die Ausgabe im aktuellen Ordner zu speichern:

   PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
   

2. Führen Sie den Prompt für das Design-Dokument aus und prüfen Sie es. Achten Sie darauf, dass Aspekte wie Verzeichnisstruktur, Ereignisverarbeitung und Speicher abgedeckt werden.
3. Stretch Goal: Fügen Sie Mermaid-Diagramme hinzu, um den Statusfluss durch die Anwendung zu veranschaulichen, sofern sie noch nicht enthalten sind.

6. App erstellen

Nachdem Sie das PRD, das UI-Mockup und das Designdokument erstellt haben, ist es an der Zeit, die Anwendung zu entwickeln. Diese drei Elemente sind die klaren, eindeutigen Anweisungen, die Agents benötigen, um zu wissen, was sie erstellen sollen.

Hier bietet sich eine weitere gute Gelegenheit, Unter-Agents zu verwenden. Sie können sie nach dem Erstellen des Codes ausführen, um zu prüfen, wie genau das Erstellte Ihren ursprünglichen Designs entspricht, und eine weitere, um die Codequalität des Erstellten zu prüfen.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

Warum Sie das tun

Durch die spezifikationsgesteuerte Entwicklung mit Erstprüfern erhält Ihr Agent klare, vorab geprüfte Anforderungen, auf denen er aufbauen kann. Außerdem wird so sichergestellt, dass er sich an den Plan gehalten hat, bevor er an Sie weitergeleitet wird. Das verbessert die Qualität und Genauigkeit.

• Geprüfte Anforderungen: Der KI-Agent muss nicht raten, was Sie möchten. Sie haben bereits alles außer der Implementierung überprüft, bevor Code geschrieben wurde.
• Neue Perspektive: Ein Prüf-Agent, der in einem neuen Kontext generiert wird, hat keine Bestätigungsneigung, die sich aus der Entwicklung der Codebasis ergibt. Daher kann er nicht behandelte Grenzfälle, fehlende Implementierungsanforderungen und andere Code- oder Produktdetails effektiv erkennen, die übersehen wurden.

Übung 4

1. Führen Sie den Build-Prompt aus und verweisen Sie auf die genauen Dateien, die überprüft werden sollen.
2. Sehen Sie sich die Ausgabe während der Ausführung an. Sie können sehen, wie die KI Ihre Anforderungen analysiert und versucht, sie umzusetzen. Wenn etwas aus dem Ruder zu laufen scheint, können Sie es stoppen und korrigieren.
3. Lassen Sie den Entwicklungsserver ausführen, um die endgültige Website zu sehen und die Arbeit zu überprüfen.
4. Stretch Goal: Wiederholen Sie diesen Vorgang, um automatisierte Tests hinzuzufügen.
5. Stretch-Ziel: Wählen Sie ein bestimmtes Framework oder einen bestimmten Technologie-Stack aus, in dem die Website erstellt werden soll. Da PRD, Mockup und Designdokument getrennt sind, sollte es einfach sein, sie an verschiedene Frameworks oder Technologie-Stacks anzupassen.

7. Für die Produktion bereitstellen

Sie haben geplant, entworfen und programmiert. Was bleibt übrig? In der Produktion bereitstellen

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

Achtung:Wenn das nicht funktioniert, prüfen Sie, ob Firebase MCP installiert ist. Möglicherweise müssen Sie sich auch bei der ersten Ausführung anmelden.

Übung 5

1. Führen Sie den Bereitstellungs-Prompt aus und ersetzen Sie die Projekt-ID.
2. Kopiere die vom Kundenservicemitarbeiter bereitgestellte URL für das Live-Hosting.
3. Öffnen Sie die Live-URL, um zu prüfen, ob sie bereitgestellt wurde und funktioniert.
4. Stretch Goal: Verwenden Sie DevTools für Agents, um ein Lighthouse-Audit Ihrer Produktionswebsite durchzuführen, passen Sie die Website an, um den Lighthouse-Score zu verbessern, und veröffentlichen Sie die Änderungen.

8. [Optional] KI-Optimierungen

Ihr Wortspiel ist jetzt mit einem statischen Wörterbuch voll funktionsfähig. Wenn Sie das statische Dictionary in ein dynamisches Wort ändern möchten, können Sie stattdessen jedes Mal ein kleines, lokales Language Model aus der Prompt API verwenden.

Achtung:Wenn Sie es noch nicht getan haben, installieren Sie Modern Web Guidance, um Unterstützung zu erhalten.

Da diese Funktion nicht auf allen Geräten verfügbar ist, verwenden Sie Progressive Enhancement, um zu prüfen, ob die API und das Modell verfügbar sind. Wenn sie vorhanden sind, werden sie verwendet. Andernfalls wird auf die statische Liste zurückgegriffen.

Übung 6

Setzen Sie alles, was Sie gelernt haben, in die Praxis um.

1. Arbeiten Sie mit Ihrem Kundenservicemitarbeiter zusammen, um ein PRD zu schreiben, mit dem über die Prompt API ein gültiges verborgenes Wort generiert wird.
2. Gestalten Sie die Fortschrittsanzeige für den Download und die Benutzeroberfläche für die KI-Integration im Browser.
3. Schreiben Sie eine Spezifikation für die Implementierung. Hinweis: Führen Sie einen Agent aus, um sicherzustellen, dass die richtige API-Syntax verwendet wurde.
4. Entwickeln Sie die neue Funktion.
5. Stellen Sie sie in der Produktion bereit.

9. Zusammenfassung

Glückwunsch! Sie haben erfolgreich eine moderne, barrierefreie und KI-basierte Webanwendung erstellt, optimiert, erweitert und bereitgestellt, indem Sie Best Practices für die Entwicklung von Agenten verwendet haben.

Das haben Sie gelernt

• Produktorientierte Agent-Workflows: Wie die Behandlung von Aufgaben als Mini-Produktlebenszyklen (PRD → Design → Spezifikation → Entwicklung) die Verschuldung, den Prüfaufwand und die Reibung durch Hin- und Her-Kommunikation reduziert.
• Spezialistengruppen mit mehreren Agenten: Wie Sie die Qualität und Genauigkeit Ihrer Arbeit verbessern können, indem Sie mehrere KI-Unteragenten ausführen.
• PRD im Vergleich zu Design-Dokument: Warum die Trennung des Funktionsumfangs (Plan) von der technischen Architektur (Spezifikation) ein skalierbarerer und genauerer Prozess ist als das Zero-Shot-Feature-Prompting.
• Nahtlose Bereitstellung: Hier erfahren Sie, wie Sie MCP-Server (z. B. Firebase MCP) verwenden, um den Zugriff auf Drittanbietersysteme zu optimieren, z. B. beim Bereitstellen Ihrer Website.