> ## Documentation Index
> Fetch the complete documentation index at: https://docs.genie-app.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Schneller starten mit Genie-Vorlagen

> Wähle einen fertigen Ausgangspunkt für deine App — Portfolios, Dashboards, CRMs, Tracker und mehr — und passe ihn dann mit Folgeprompts an.

Vorlagen geben dir einen vollständigen, gut strukturierten Ausgangspunkt statt eines leeren Prompts. Jede Vorlage ist ein bewährtes Layout, gebaut für einen bestimmten Tool- oder Seitentyp. Du wählst die passendste aus, Genie generiert sie, und du verfeinerst von dort aus mit Folgeprompts. Das ist der schnellste Weg von der Idee zur funktionierenden App.

## So nutzt du eine Vorlage

<Steps>
  <Step title="Stöbere durch die Vorlagengalerie">
    Klicke in deinem Genie-Dashboard auf **Vorlagen** in der Seitenleiste oder Navigation. Die Vorlagen sind nach Kategorien geordnet, damit du den passenden Ausgangspunkt schnell findest.
  </Step>

  <Step title="Wähle eine Vorlage">
    Klicke auf eine Vorlagenkarte, um eine Beschreibung zu sehen, was enthalten ist — das Layout, die Bereiche und die unterstützten Interaktionen. Wenn du eine gefunden hast, die passt, klicke auf **Diese Vorlage verwenden**.
  </Step>

  <Step title="Genie generiert deine App">
    Genie führt den eingebauten Prompt der Vorlage aus und generiert deine App. Die Live-Vorschau öffnet sich automatisch, sobald die Generierung abgeschlossen ist.
  </Step>

  <Step title="Mit Folgeprompts anpassen">
    Die Vorlage ist dein Ausgangspunkt, nicht die finale Version. Tippe Folgeprompts, um Farben anzupassen, Bereiche umzubenennen, Felder hinzuzufügen oder das Layout an deine Bedürfnisse anzupassen.
  </Step>
</Steps>

<Tip>
  Jede Vorlage wird aus einem Prompt in Alltagssprache generiert — derselben Art, die du selbst schreiben würdest. Du kannst den Prompt vor dem Generieren ansehen und anpassen, wenn du den Ausgangspunkt verändern möchtest.
</Tip>

## Vorlagenkategorien

Vorlagen sind in sechs Kategorien organisiert, basierend auf dem Tool-Typ oder der Zielgruppe.

<Tabs>
  <Tab title="Startup">
    Vorlagen für Gründer:innen und frühe Teams, die schnell Landingpages, Dashboards und schlanke Produkt-Tools brauchen.

    <CardGroup cols={2}>
      <Card title="Startup Launchpad" icon="rocket">
        Baue eine Startup-Landingpage mit Gradient-Hero, 3 Feature-Blöcken, Social Proof, Preisumschalter und Sticky-CTA-Leiste.

        **Tags:** Hero · Features · CTA
      </Card>

      <Card title="Micro SaaS Dashboard UI" icon="chart-bar">
        Erstelle ein Frontend-only-Beispiel-Dashboard: Sidebar-Navigation, KPI-Statistikkarten, Charts, Aktivitätsliste und Datentabelle.

        **Tags:** Dashboard · Charts · Navigation
      </Card>

      <Card title="Task Tracker Mini App" icon="circle-check">
        Baue eine Aufgabenverwaltungs-App mit Kanban-Spalten, verschiebbaren Karten, Tag-Filtern und Statistik-Zusammenfassung.

        **Tags:** Aufgaben · Board · Filter
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Beratung">
    Vorlagen für Freelancer und Agenturen, die ihre Arbeit professionell präsentieren und Kundenbeziehungen verwalten müssen.

    <CardGroup cols={2}>
      <Card title="Freelancer Portfolio" icon="briefcase">
        Baue ein Freelancer-Portfolio mit Split-Hero, Leistungsliste, Case-Study-Karten, Testimonial-Leiste und Kontaktformular.

        **Tags:** Portfolio · Leistungen · Case Studies
      </Card>

      <Card title="Agency Showcase" icon="building-2">
        Baue eine Agentur-Website mit Hero, Prozess-Zeitstrahl, Case-Study-Slider, Metriken-Leiste und Kontaktformular-Panel.

        **Tags:** Case Studies · Prozess · Kontakt
      </Card>

      <Card title="Mini CRM Contacts" icon="book-user">
        Erstelle eine Mini-CRM-Oberfläche mit Kontakttabelle, Segmentfiltern und rechtsseitigem Drawer mit Aktivitäts-Zeitstrahl.

        **Tags:** Kontakte · Segmente · Notizen
      </Card>

      <Card title="Client Portal Lite" icon="folder-open">
        Erstelle ein Mini-Kundenportal mit Tab-Oberfläche für Dateien, Nachrichten, Aufgaben und Übersicht.

        **Tags:** Portal · Dateien · Aufgaben
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Kleinunternehmen">
    Vorlagen für Shop-Besitzer:innen und Betreiber, die praktische Alltagstools benötigen.

    <CardGroup cols={2}>
      <Card title="Recipe Organizer" icon="utensils">
        Baue eine Rezept-Mini-App mit durchsuchbarer Liste, Tag-Filter-Chips, Rezept-Detail-Panel und Favoriten.

        **Tags:** Rezepte · Suche · Tags
      </Card>

      <Card title="Inventory Lite" icon="package">
        Baue einen schlanken Inventar-Manager mit Bestandstabelle, Niedrigbestand-Hervorhebungen und Massenbearbeitung.

        **Tags:** Inventar · Tabelle · Filter
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Marketing">
    Vorlagen für Marketer, die Kampagnen-Tools, Lead-Erfassungsseiten und Quiz-Erlebnisse brauchen.

    <CardGroup cols={2}>
      <Card title="Quiz Builder" icon="flask-conical">
        Baue einen Quiz-Builder mit Fragenliste, Editor, Vorschaumodus und Ergebniszusammenfassung.

        **Tags:** Quiz · Builder · Formular
      </Card>

      <Card title="UTM Link Tracker" icon="link">
        Erstelle einen UTM-Builder mit Formular-Eingaben, Echtzeit-Vorschau, Kopier-Button und gespeicherter Linkliste.

        **Tags:** UTM · Builder · Links
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Spaß">
    Vorlagen für persönliche Projekte, kreative Portfolios und Hobby-Apps.

    <CardGroup cols={2}>
      <Card title="Just for Fun Portfolio" icon="palette">
        Erstelle ein verspieltes persönliches Portfolio mit farbenfrohem Hero, Projektraster, About-Bereich mit Badges und animierten Hover-Effekten.

        **Tags:** Portfolio · Animationen · Verspielt
      </Card>

      <Card title="Blog Magazine" icon="newspaper">
        Baue ein modernes Blog-Magazin-Layout mit Featured-Hero-Artikel, Masonry-Grid, Kategorie-Filter-Pills und Newsletter-Anmeldung.

        **Tags:** Artikel · Kategorien · Suche
      </Card>

      <Card title="Habit Tracker" icon="flame">
        Erstelle einen Gewohnheits-Tracker mit Gewohnheitsliste, monatlichem Erfüllungsraster, Streak-Zähler und Fortschrittsringen.

        **Tags:** Gewohnheiten · Fortschritt · Streak
      </Card>

      <Card title="Idea Vault" icon="lightbulb">
        Baue ein Ideen-Vault mit Masonry-Karten-Raster, Modal zum Hinzufügen einer Idee und Sortierung nach Score.

        **Tags:** Ideen · Tags · Bewertung
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## Alle Vorlagen auf einen Blick

| Vorlage                 | Kategorie        | Was sie enthält                                                                    |
| ----------------------- | ---------------- | ---------------------------------------------------------------------------------- |
| Startup Launchpad       | Startup          | Gradient-Hero, Feature-Blöcke, Social Proof, Preisumschalter, Sticky-CTA           |
| Micro SaaS Dashboard UI | Startup          | Sidebar-Nav, KPI-Karten, Charts, Aktivitätsliste, Datentabelle                     |
| Task Tracker Mini App   | Startup          | Kanban-Board, verschiebbare Karten, Tag-Filter, Statistik-Zusammenfassung          |
| Freelancer Portfolio    | Beratung         | Split-Hero, Leistungsliste, Case-Study-Karten, Testimonial-Leiste, Kontaktformular |
| Agency Showcase         | Beratung         | Hero, Prozess-Zeitstrahl, Case-Study-Slider, Metriken-Leiste, Kontaktformular      |
| Mini CRM Contacts       | Beratung         | Kontakttabelle, Segmentfilter, Aktivitäts-Zeitstrahl-Drawer                        |
| Client Portal Lite      | Beratung         | Tab-Oberfläche: Dateien, Nachrichten, Aufgaben, Übersicht                          |
| Recipe Organizer        | Kleinunternehmen | Durchsuchbare Liste, Tag-Filter, Detail-Panel, Favoriten                           |
| Inventory Lite          | Kleinunternehmen | Bestandstabelle, Niedrigbestand-Hervorhebungen, Massenbearbeitung                  |
| Quiz Builder            | Marketing        | Fragen-Editor, Vorschaumodus, Ergebniszusammenfassung                              |
| UTM Link Tracker        | Marketing        | UTM-Formular, Echtzeit-Vorschau, Kopier-Button, gespeicherte Links                 |
| Just for Fun Portfolio  | Spaß             | Farbenfroher Hero, Projektraster, About-Bereich, Hover-Animationen                 |
| Blog Magazine           | Spaß             | Featured-Artikel, Masonry-Grid, Kategorie-Filter, Newsletter-Anmeldung             |
| Habit Tracker           | Spaß             | Gewohnheitsliste, monatliches Raster, Streak-Zähler, Fortschrittsringe             |
| Idea Vault              | Spaß             | Masonry-Karten-Raster, Modal zum Hinzufügen, Score-Sortierung                      |

## Eine Vorlage anpassen

Jede Vorlage ist ein Ausgangspunkt. Nach der Generierung kannst du mit Folgeprompts alles ändern:

<AccordionGroup>
  <Accordion title="Farbschema ändern">
    Tippe etwa: `"Ändere das Farbschema zu Türkis und Off-White"` oder `"Verwende einen dunklen Hintergrund mit Bernstein-Akzenten"`.
  </Accordion>

  <Accordion title="Bereiche hinzufügen oder entfernen">
    Tippe: `"Füge einen Testimonials-Bereich unter den Feature-Blöcken hinzu"` oder `"Entferne den Preisumschalter und ersetze ihn durch einen einzelnen CTA-Button"`.
  </Accordion>

  <Accordion title="Felder und Bezeichnungen umbenennen">
    Tippe: `"Benenne 'Projekte' in 'Kunden' in der gesamten App um"` oder `"Ändere die Kanban-Spalten von Backlog/In Progress/Done zu Neu/Aktiv/Geschlossen"`.
  </Accordion>

  <Accordion title="Neue Funktionalität hinzufügen">
    Tippe: `"Füge eine Suchleiste zur Kontakttabelle hinzu"` oder `"Füge dem Habit-Tracker eine Monatsansicht zusätzlich zum bestehenden Raster hinzu"`.
  </Accordion>
</AccordionGroup>

<Note>
  Vorlagen enthalten standardmäßig kein Live-Backend — sie verwenden lokale Mock-Daten, um die Oberfläche zu zeigen. Um echte Datenspeicherung, Nutzer-Logins oder Zahlungsabwicklung anzubinden, nutze Folgeprompts, um diese Funktionen hinzuzufügen, oder erkunde [Genie Cloud](/de/cloud/overview).
</Note>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Deinen ersten Prompt schreiben" icon="pencil" href="/de/quickstart">
    Lerne, wie du Prompts schreibst, die schon bei der ersten Generierung großartige Ergebnisse liefern.
  </Card>

  <Card title="Genie Cloud erkunden" icon="cloud" href="/de/cloud/overview">
    Füge jeder App, die du baust, eine echte Datenbank, Authentifizierung oder Dateispeicher hinzu.
  </Card>
</CardGroup>