Wie man mit KI einen Rechnungsgenerator erstellt

Bevor Sie einen Prompt schreiben, definieren Sie die kleinste sinnvolle Version.

Für die meisten Rechnungsgeneratoren bedeutet das:

• ein Formular für Firmendaten
• Kundendaten
• Rechnungsnummer und Datum
• Positionen mit Beschreibung, Menge, Preis und Betrag
• Zwischensumme, Steuer, Rabatt und Gesamtbetrag
• eine druckbare oder teilbare Rechnungsansicht

Entscheiden Sie auch, wer die App nutzen soll.

• Wenn sie nur für Sie auf einem Gerät gedacht ist, brauchen Sie vielleicht keinen Login und keine Datenbank.
• Wenn mehrere Personen gespeicherte Rechnungen benötigen, fügen Sie Login und Speicherfunktion hinzu.
• Wenn Kunden Rechnungen online bezahlen sollen, integrieren Sie Stripe.

Eine einfache erste Version ist meist eine einseitige Web-App mit zwei Hauptbereichen: einem bearbeitbaren Formular und einer Live-Rechnungsvorschau. Das reicht aus, um die Logik zu testen, bevor Sie Konten, gespeicherte Datensätze oder Zahlungslinks hinzufügen.

Moremade funktioniert am besten, wenn Sie die App so beschreiben, als würden Sie ein Entwicklerteam briefen. Seien Sie konkret bei Feldern, Berechnungen und Layout.

Bitten Sie um eine React- und Tailwind-Web-App, denn genau das erzeugt Moremade für Websites. Erwähnen Sie das gewünschte Verhalten: bearbeitbare Positionen, automatische Summen und eine druckfreundliche Rechnungsansicht.

Hier ist ein solider erster Prompt:

Erstelle eine einfache Web-App zum Erstellen von Rechnungen. Verwende ein Zwei-Spalten-Layout: links ein Formular und rechts eine Live-Vorschau der Rechnung. Das Formular soll Firmenname, Firmenadresse, Kundenname, Kundenadresse, Rechnungsnummer, Ausstellungsdatum, Fälligkeitsdatum, Währung, Steuersatz, Rabatt und Notizen enthalten. Füge bearbeitbare Positionen mit Beschreibung, Menge, Preis und automatischer Positionssumme hinzu. Berechne Zwischensumme, Steuer, Rabatt und Endbetrag automatisch. Ergänze Schaltflächen zum Hinzufügen und Entfernen von Positionen sowie ein sauberes, druckfreundliches Rechnungs-Layout.

Halten Sie den ersten Prompt auf den Kernablauf fokussiert. Versuchen Sie nicht, alle zukünftigen Funktionen auf einmal einzubauen. Es ist meist schneller, zunächst eine brauchbare erste Version zu erhalten und sie dann im Chat zu verfeinern.

Sobald Moremade die erste Version generiert hat, prüfen Sie den Ablauf in der Live-Vorschau.

Achten Sie auf praktische Probleme:

• Werden die Summen korrekt neu berechnet?
• Ist die Rechnung gut lesbar?
• Lassen sich Positionen einfach bearbeiten?
• Funktioniert das Layout auch bei langen Kundennamen oder vielen Zeilen?

Formulieren Sie danach kleine, konkrete Änderungswünsche. Allgemeines Feedback wie „mach es besser“ ist weniger hilfreich als eine genaue Beschreibung der Änderung.

Drei nützliche Folge-Prompts:

• „Verschiebe das Zusammenfassungsfeld unten rechts in der Vorschau und hebe den Gesamtbetrag stärker hervor.“
• „Füge eine Eingabevalidierung hinzu, sodass Menge und Preis nicht negativ sein können, und zeige Platzhaltertext für Pflichtfelder an.“
• „Mache die Rechnungsansicht druckfreundlicher mit weniger Hintergrundfarbe, engeren Abständen und positionssicheren Zeilenumbrüchen.“

Moremade hat außerdem einen visuellen Inspector, mit dem Sie auf ein Element zeigen und es direkt ändern können. Das ist nützlich für Abstände, Beschriftungen, Button-Texte und kleinere Layoutkorrekturen. Wenn Sie mehr Kontrolle möchten, öffnen Sie die Code-Ansicht und prüfen Sie, was die KI erzeugt hat.

Viele Rechnungsgeneratoren brauchen am ersten Tag noch keine Konten. Wenn die App im Browser nur einmalige Rechnungen erzeugen soll, können Sie an diesem Punkt aufhören.

Fügen Sie Supabase hinzu, wenn Sie Folgendes benötigen:

• Benutzer-Login
• gespeicherte Rechnungsdaten
• getrennte Arbeitsbereiche für verschiedene Nutzer
• Dateispeicher für Assets wie Logos

Fügen Sie Stripe hinzu, wenn Sie Folgendes benötigen:

• einen Zahlungslink oder Checkout-Ablauf, der mit Rechnungen verbunden ist
• feste Preise, die Sie für Dienstleistungen oder Produkte festlegen

Für ein einfaches internes Rechnungstool ist Supabase meist die relevantere Anbindung. Sie könnten Moremade so auffordern, Authentifizierung und Speicherung hinzuzufügen:

• „Füge Supabase-Login hinzu und speichere Rechnungen pro angemeldetem Nutzer. Erstelle ein Dashboard mit gespeicherten Rechnungen und Aktionen zum Erstellen, Bearbeiten, Duplizieren und Löschen.“

Wenn Ihre Rechnungs-App Kunden bezahlen lassen soll, halten Sie den Zahlungsablauf einfach. Stripe Checkout ist die integrierte Zahlungsoption, die Moremade unterstützt. Bitten Sie um einen klaren Status „bezahlt“ oder „unbezahlt“ in der Rechnungsliste, damit der Ablauf eindeutig ist.

Auch wenn der Hauptanwendungsfall am Desktop liegt, werden Rechnungstools oft auf dem Smartphone geöffnet, um Details zu prüfen oder schnell einen Link zu senden.

Testen Sie in der Vorschau ein paar Dinge:

• gestapeltes Layout auf kleinen Bildschirmen
• gut lesbare Tabellen oder Karten für Positionen
• ausreichend große Schaltflächen zum Tippen
• sichtbare Summen ohne zu viel Scrollen

Wenn die Tabelle auf Mobilgeräten zu eng wird, bitten Sie lieber um eine mobile-spezifische Darstellung, statt eine Desktop-Tabelle in einen schmalen Bildschirm zu pressen.

Zum Beispiel:

• „Zeige auf Mobilgeräten Positionen als gestapelte Karten statt als Tabelle an, mit Menge, Preis und Gesamtbetrag jeweils in separaten Zeilen.“

Das ist auch ein guter Zeitpunkt, um Sonderfälle zu testen:

• viele Positionen
• lange Notizen
• keine Steuer
• Rabattwerte
• Dezimalbeträge und Währungsformatierung

Wenn Sie diese Probleme jetzt erkennen, ist das schneller, als sie nach dem Teilen der App zu beheben.

Wenn der Rechnungsgenerator korrekt funktioniert, veröffentlichen Sie ihn aus Moremade heraus.

Sie können mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. Das reicht meist für Tests, Demos oder die interne Nutzung.

Wenn Sie eine gebrandete URL benötigen, unterstützen kostenpflichtige Pläne das Verbinden einer eigenen Domain. Domains können auch direkt in Moremade gekauft werden.

Führen Sie vor der Veröffentlichung eine kurze Checkliste durch:

• Platzhalter-Firmendaten entfernen
• Berechnungen noch einmal testen
• Beschriftungen und Währungsformat bestätigen
• sicherstellen, dass das Drucklayout akzeptabel ist
• jede hinzugefügte Supabase- oder Stripe-Verbindung prüfen

Wenn Sie eine Kopie außerhalb der Plattform behalten möchten, exportieren Sie den kompletten Quellcode als ZIP oder pushen Sie ihn zu GitHub. Moremade erzeugt für Websites echten React- und Tailwind-Code, Sie sind also nicht an einen einzigen Host gebunden.

Die häufigsten Fehler betreffen meist den Umfang und die Qualität des Prompts.

• Zu groß anfangen. Beginnen Sie mit Formular, Positionen, Summen und Vorschau. Fügen Sie Konten oder Zahlungen später hinzu.
• Berechnungen zu vage beschreiben. Sagen Sie genau, wie Zwischensumme, Steuer und Rabatt funktionieren sollen.
• Das Drucklayout ignorieren. Rechnungsgeneratoren brauchen oft ein druckbares Ergebnis, nicht nur eine schöne Browseransicht.
• Login hinzufügen, obwohl keine gespeicherten Daten nötig sind. Das bringt Komplexität mit sich, die Sie vielleicht gar nicht brauchen.
• Lange Eingaben nicht testen. Echte Kundenname, Adressen und Notizen können ein Layout sprengen.
• Die Codehoheit vergessen. Wenn Sie die App später anderswo weiter pflegen wollen, exportieren Sie früh die ZIP-Datei oder pushen Sie den Code zu GitHub.

Eine gute Faustregel ist, den ersten KI-Build als Entwurf zu behandeln. Nutzen Sie Vorschau, Inspector und Folge-Prompts, um die Details so lange zu verfeinern, bis sich die App zuverlässig verhält.