Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Effektivität Ihres App-Konzepts und die Qualität des generierten Codes hängen von der Klarheit und den Details Ihrer Prompts ab. Beachten Sie bei der Verwendung von App Prototyping agent die folgenden Richtlinien für effektive Prompts beim Generieren und Debuggen von Apps:
Seien Sie konkret:Definieren Sie die Funktionen, Nutzerinteraktionen und Datenanforderungen Ihrer App klar. Fragen Sie nach Möglichkeit nach bestimmten Technologien. Wenn Sie beispielsweise eine Web-App mit 3D-Elementen erstellen möchten, können Sie Gemini bitten, three.js zu verwenden.
Zusätzliche Aufgaben zum Einrichten von Diensten anfordern:Gemini kann Code für Ihre App schreiben, aber keine Dienste einrichten, APIs aktivieren oder Ressourcen (z. B. einen Cloud Storage-Bucket oder ein Stripe-Konto) bereitstellen.
Weisen Sie Gemini darauf hin, dass es Ihnen bei der Erstellung von Code für bestimmte Dienste auch mitteilen soll, wie Sie diese Dienste einrichten.
Firebase-Projekt anfordern:Wenn Sie App Prototyping agent bitten, Sie bei der Einrichtung von Firebase-Diensten zu unterstützen, wird in Ihrem Namen ein Firebase-Projekt bereitgestellt. Sie können beispielsweise fragen: „Hilf mir, Firestore hinzuzufügen“ oder „Verbinde meine App mit Firebase“.
Gemini verwenden, um den Prompt zu optimieren:Verwenden Sie Gemini für Google, chatten Sie mit Gemini in Firebase in der Code-Ansicht oder verwenden Sie andere Gemini-Oberflächen, um Ihren Prompt zu optimieren.
Kontext bereitstellen:Geben Sie Hintergrundinformationen zum Zweck Ihrer App, zur Zielgruppe und zur gewünschten Nutzererfahrung an.
Beispiele verwenden:Geben Sie nach Möglichkeit Beispiele dafür an, wie Nutzer mit der App interagieren sollten oder welche Daten angezeigt werden sollen.
Iterieren und optimieren:Gehen Sie bei der Entwicklung iterativ vor. Beginnen Sie mit einer einfachen Anfrage, fügen Sie dann ein Feature hinzu, testen Sie es, optimieren Sie es und fügen Sie dann ein weiteres Feature hinzu.
Wenn Sie diese Richtlinien befolgen, können Sie die Qualität und Relevanz der von Firebase Studio generierten App-Blaupausen sowie die Erfolgsrate beim Debuggen Ihrer App erheblich verbessern.
Zusätzliche Prompts verwenden, um Antworten zu optimieren
Wenn die ersten Ergebnisse nicht Ihren Erwartungen entsprechen, können Sie Ihre Prompts optimieren, indem Sie mehr Details hinzufügen oder spezifische Anweisungen geben:
Einschränkungen hinzufügen:Geben Sie Einschränkungen für die Benutzeroberfläche, das Datenmodell oder die Funktionen an.
Beispiele angeben:Geben Sie Beispiele dafür an, wie Nutzer mit der App interagieren sollten und welche Daten angezeigt werden sollen.
Keywords verwenden:Verwenden Sie Keywords, um die Funktionen oder Möglichkeiten zu beschreiben, die Sie sich wünschen und die das LLM möglicherweise mit der gewünschten Art von Ausgabe in Verbindung bringt. Sie können beispielsweise Material Design in einem Prompt verwenden, um anzugeben, dass Ihre App den Designstandards von Google entsprechen soll.
Bestimmte Änderungen anfordern:Sie können bestimmte Änderungen am generierten Code oder Blueprint anfordern. Fügen Sie jede Funktionsanfrage in einer separaten Anfrage hinzu.
Das Modell um eine Begründung bitten:Wenn Sie Schwierigkeiten haben, die gewünschten Ergebnisse zu erhalten, bitten Sie das Modell, die Eingabeaufforderung zu begründen. Sie könnten zum Beispiel sagen: „Denke Schritt für Schritt. Ich möchte ein Eingabefeld für meine Aufgaben-App erstellen. Es soll eine Schaltfläche „Aufgabe hinzufügen“ und eine Schaltfläche „Abbrechen“ enthalten.“
Mit diesen Techniken können Sie Ihre Prompts iterativ verfeinern, um die gewünschten Ergebnisse zu erzielen.
Beispiele für effektive Prompts für App-Blaupausen
Hier sind einige Beispiele für effektive Prompts für verschiedene Arten von Apps:
Einfacher Aufgaben-Tracker:
Create a simple web app that displays a list of to-do items.
Users should be able to add new items to the list and mark items as complete.
Provide a way to delete items and export the list as a text file.
Use a clean and modern UI using Google Material Design principles.
Budget-App:
A budgeting and expense tracking app with spending categories, charts, and
budget goals. Include a clean dashboard with key insights. It should include
spending categories, charts, and budget goals. The app should allow users to
manually add expenses or upload csv files. The app should also allow users to
upload receipts, then use AI to convert the receipt into an expense entry that
users can edit. Data should be stored in browser cache, with download and
delete options.
Prompt für Gaming-Apps mit Unterstützung von Gemini (Markdown):
Generate a delightful sliding number puzzle game (15-puzzle) with Javascript,
HTML, and CSS.
-**Setup:** Create a 4x4 grid with numbers 1-15 and one empty space. Use a
**solvable shuffling algorithm** to randomize the start.
-**Gameplay:** Allow clicking tiles **adjacent to the empty space** to slide
them. Count and display the number of moves.
-**Timer:** Include a **countdown timer** starting at **120 seconds**
(2 minutes).
-**End Conditions:**-If solved (numbers 1-15 in order): Alert with an encouraging winning
statement generated by AI.
-If timer reaches 0: Alert with a funny retort generated by AI.
Tipps zur Fehlerbehebung
Sie können Gemini in Firebase verwenden, um Ihren Code mit Chat in Ihrem Code-Arbeitsbereich oder in App Prototyping agent zu debuggen.
Gemini kann zwar Code für Sie schreiben, aber es kann auch zu Fehlern kommen. Wenn ein Fehler erkannt wird, wird versucht, ihn zu beheben. Wenn das Problem anhand der Fehlermeldung nicht behoben werden kann, können Sie Folgendes versuchen:
Problem beschreiben:Beschreiben Sie das Problem, das Sie haben, in der Chatoberfläche so klar und prägnant wie möglich.
Gemini hat möglicherweise Zugriff auf Kontext wie Fehlermeldungen und Protokolle, versteht aber möglicherweise nicht den vollständigen Kontext. Wenn Sie das Verhalten zusammen mit der Fehlermeldung beschreiben, kann Gemini Fehler schneller beheben.
Konkrete Fragen stellen:Scheuen Sie sich nicht, Gemini direkte Fragen zu Ihrem Code zu stellen. Beispiele: „What could be causing a null pointer exception in this function?“ (Was könnte eine Nullzeiger-Ausnahme in dieser Funktion verursachen?) oder „How can I prevent this race condition?“ (Wie kann ich diese Race Condition verhindern?).
Komplexe Probleme aufschlüsseln:Wenn Sie es mit einem komplexen Problem zu tun haben, zerlegen Sie es in kleinere, übersichtlichere Teile. Bitten Sie Gemini, Ihnen bei der separaten Fehlerbehebung für die einzelnen Teile zu helfen und Probleme Schritt für Schritt zu durchdenken.
Code-Fences verwenden:Wenn Sie Code-Snippets teilen, verwenden Sie Code-Fences, damit der Code richtig formatiert wird. So kann Gemini Ihren Code leichter lesen und verstehen.
Wiederholen und verfeinern:Gemini liefert möglicherweise nicht immer beim ersten Versuch die perfekte Lösung. Sehen Sie sich die Antworten an, stellen Sie bei Bedarf klärende Fragen und geben Sie zusätzliche Informationen an.
Schleifen vermeiden:Wenn Gemini in einer Schleife hängen bleibt oder Ihre Frage nicht beantworten kann, versuchen Sie, den Prompt umzuformulieren oder zusätzlichen Kontext anzugeben. Manchmal reicht es schon, die Frage umzuformulieren, damit Gemini versteht, was Sie fragen.
Wenn das Problem durch eine Umformulierung des Prompts nicht behoben wird, versuchen Sie es mit den folgenden Techniken:
Neuen Chat starten:Wenn Sie Gemini in einem Firebase-Chat in Ihrem Code-Arbeitsbereich verwenden, starten Sie eine neue Chatsitzung, um den Kontext von Gemini zurückzusetzen. So können Sie sich von allen Missverständnissen oder Annahmen befreien, die Gemini im vorherigen Gespräch getroffen hat.
Gegenbeispiele angeben:Wenn Gemini falsche Annahmen trifft, geben Sie Gegenbeispiele an, damit das Modell das richtige Verhalten versteht.
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-26 (UTC)."],[],[],null,["The effectiveness of your app blueprint and the quality of the generated code\ndepend on the clarity and detail of your prompts. When using\nthe App Prototyping agent, consider the following guidelines for effective\nprompting when generating and debugging apps:\n\n- **Be specific:** Clearly define the features, user interactions, and data requirements of your app. Ask for specific technologies, where possible. For example, if trying to create a web app with 3D elements, you may want to ask Gemini to use `three.js`.\n- **Ask about additional tasks to set up services:** Gemini can write code for your app, but it cannot actually set up services, enable APIs, or provision resources (like a Cloud Storage bucket or a Stripe account). Make sure to tell Gemini that if it writes code for specific services that it should also tell you how to set up those services.\n- **Request a Firebase project:** If you ask the App Prototyping agent to help you set up Firebase services, it will provision a Firebase project on your behalf. For example, you can ask \"Help me add Firestore,\" or \"Connect my app to Firebase.\"\n- **Use Gemini to refine your prompt:** Use [Gemini for\n Google](https://gemini.google.com), [chat with\n Gemini in Firebase](/docs/studio/try-gemini) in Code view, or other Gemini surfaces to refine and optimize your prompt.\n- **Provide context:** Include background information about your app's purpose, target audience, and the user experience you want.\n- **Use examples:** If possible, provide examples of how users should interact with the app or what data should be displayed.\n- **Iterate and refine:** Approach your development *iteratively*. Consider starting with a basic request, then add a feature, test it, refine it, then add another feature.\n\nBy following these guidelines, you can significantly improve the quality and\nrelevance of the app blueprints generated by Firebase Studio and its\nsuccess when debugging your app.\n\nUse additional prompts to refine responses\n\nIf the initial results aren't what you expect, you can refine your prompts by\nadding more detail or providing specific instructions:\n\n- **Add constraints:** Specify constraints on the UI, data model, or features.\n- **Provide examples:** Provide examples of how users should interact with the app and what data should appear.\n- **Use keywords:** Use keywords to describe the features or capabilities you want that the LLM might associate with the class of output you want. For example, you might use *Material Design* in a prompt where you indicate that you want your app to adhere to Google design standards.\n- **Ask for specific changes:** Ask for specific changes to the generated code or blueprint. Add each feature request in a separate request.\n- **Ask the model to reason:** If you're having trouble getting the results you want, try asking the model to reason through the prompt. For example, you could say \"Think step by step. I want to create an input box for my task app. It should contain an 'Add task' button and a 'Cancel' button.\"\n\nBy using these techniques, you can iteratively refine your prompts to get the\nresults you want.\n\nExamples of effective prompts for app blueprints\n\nHere are some examples of effective prompts for different types of apps:\n\n**Simple task tracker:** \n\n Create a simple web app that displays a list of to-do items.\n Users should be able to add new items to the list and mark items as complete.\n Provide a way to delete items and export the list as a text file.\n Use a clean and modern UI using Google Material Design principles.\n\n**Budgeting app:** \n\n A budgeting and expense tracking app with spending categories, charts, and\n budget goals. Include a clean dashboard with key insights. It should include\n spending categories, charts, and budget goals. The app should allow users to\n manually add expenses or upload csv files. The app should also allow users to\n upload receipts, then use AI to convert the receipt into an expense entry that\n users can edit. Data should be stored in browser cache, with download and\n delete options.\n\n**Game app prompt with assistance from Gemini (Markdown):** \n\n Generate a delightful sliding number puzzle game (15-puzzle) with Javascript,\n HTML, and CSS.\n\n - **Setup:** Create a 4x4 grid with numbers 1-15 and one empty space. Use a\n **solvable shuffling algorithm** to randomize the start.\n - **Gameplay:** Allow clicking tiles **adjacent to the empty space** to slide\n them. Count and display the number of moves.\n - **Timer:** Include a **countdown timer** starting at **120 seconds**\n (2 minutes).\n - **End Conditions:**\n - If solved (numbers 1-15 in order): Alert with an encouraging winning\n statement generated by AI.\n - If timer reaches 0: Alert with a funny retort generated by AI.\n\nTips for debugging\n\nYou can use Gemini in Firebase to help you debug your code with\nchat in your **Code** workspace\nor the App Prototyping agent.\n\nWhile Gemini can write code for you, it might sometimes also\nproduce errors. When it detects an error, it will attempt\nto fix it. If you find that it isn't able to resolve the issue given\nthe error message, you can try some of the following techniques:\n\n- **Describe the issue:** In the chat interface, describe the\n problem you're encountering as clearly and concisely as possible.\n While Gemini might have access to context like error messages\n and logs, it might not understand the full context. Describing the behavior\n along with the error message can help Gemini fix errors\n faster.\n\n- **Ask specific questions:** Don't be afraid to ask Gemini\n direct questions about your code. For example, \"What could be causing a\n null pointer exception in this function?\" or \"How can I prevent\n this race condition?\"\n\n- **Break down complex problems:** If you're dealing with a complex\n issue, break it down into smaller, more manageable parts. Ask\n Gemini to help you debug each part separately and think\n through problems step-by-step.\n\n- **Use code fences:** When sharing code snippets, use code fences\n to ensure that the code is properly formatted. This makes it easier\n for Gemini to read and understand your code.\n\n- **Iterate and refine:** Gemini may not always provide the perfect\n solution on the first try. Review the responses, ask clarifying\n questions, and provide additional information as needed.\n\n- **Avoid prompting loops:** If Gemini gets stuck in a loop or is\n unable to answer your question, try rephrasing your prompt or\n providing additional context. Sometimes, just rewording your\n question can help Gemini understand what you're asking.\n\n If rephrasing your prompt doesn't resolve the loop, try\n the following techniques:\n - **Start a new chat:** If you're using Gemini in Firebase\n chat in your Code\n workspace, start a new chat session to reset\n Gemini's context. This can help break free from any\n misconceptions or assumptions that Gemini may have made\n in the previous conversation.\n\n - **Provide counter-examples:** If Gemini is making incorrect\n assumptions, provide counter-examples to help it understand\n the correct behavior.\n\nNext steps\n\n- [Get started with the App Prototyping agent](/docs/studio/get-started-ai).\n- [Develop, publish, and monitor an app following a guided tour of the App Prototyping agent](/docs/studio/solution-build-with-ai).\n- [Develop applications in a\n Firebase Studio workspace](/docs/studio/get-started-workspace)."]]
