Unternehmens-Dashboard mit KI erstellen: Lovable vs. Claude, getestet mit denselben Daten

01Klicken Sie zuerst beide Dashboards durch

Beide laufen auf denselben Dummy-Daten: Quellwerk Software, ein fiktives Unternehmen mit 8 Vertriebsmitarbeitern, Stichtag 30. September 2026. Ändern Sie den Zeitraum, wählen Sie einen Rep, klicken Sie auf einen Balken, und die Deal-Liste darunter filtert auf genau diese Deals. Versuchen Sie, Fehler zu provozieren. Nutzen Sie die Tastatur. Die Dashboards selbst sind auf Englisch, so wie im Test.

Sie sehen sich ähnlich, weil die Spezifikation Farben, Schriften, Abschnitte und Regeln festgelegt hat. Genau darum ging es: gleicher Input, soweit ich das hinbekommen konnte. Die eine Stelle, an der der Input nicht identisch war, erkläre ich im nächsten Abschnitt.

02So lief der Test

Die Regel war einfach. Was ein Tool bekam, bekam das andere auch, Wort für Wort. Ich habe die Spezifikation einmal geschrieben und in beide ersten Prompts eingefügt. Nur die Zeilen zur Technik und zum Selbsttest unterscheiden sich, weil Lovable Web-Apps baut und Claude eine einzelne Datei liefern sollte. Einer dieser Unterschiede ist wichtig: Claude sollte seine Arbeit in einem Browser bei 1440 und 390 px prüfen; im Prompt für Lovable stand nur „testen Sie die App im Browser“ (die Spezifikation verlangte von beiden ein Smartphone-Layout mit 390 px). Ein Teil von Claudes strengerem Testen geht auf diese Zeile zurück, und der Laptop-Bug von Lovable lag bei einer Breite, die nur Claude prüfen sollte.

Claude lief als Claude Code mit dem Modell Opus 5.5 auf meinem Mac, auf dem bereits ein Headless Chrome und eine Bibliothek für Browsertests installiert waren. Auf einem neu eingerichteten Rechner lassen Sie Claude zuerst einen Testbrowser installieren, sonst laufen seine Browserprüfungen nicht. Lovable lief in meinem eigenen Lovable-Pro-Workspace mit meinen eigenen Credits. Wie viel vom Nutzungsfenster eines Claude-Tarifs 38 Minuten Agentenzeit verbrauchen, habe ich nicht gemessen.

Die Daten: ein CRM-Export mit echtem Chaos

Den Datensatz habe ich mit einem Skript mit festem Seed erzeugt. Er ist also reproduzierbar und enthält kein echtes Unternehmen. Er umfasst Deals, die von Juli 2025 bis September 2026 angelegt wurden, mit Monatszielen für die letzten 12 Monate. Dann habe ich ihn absichtlich beschädigt, so wie jeder CRM-Export beschädigt ist, den ich je geöffnet habe:

Die Bereinigungsregeln in den Prompt zu schreiben ist der Schritt, den die meisten auslassen. Ohne sie rät jedes Tool, und 2 ehrliche Vermutungen ergeben 2 verschiedene Win Rates aus derselben Datei. Mit ihnen kamen beide Tools auf den Euro genau zu denselben Zahlen.

03Die 10 KPIs im Vertriebs-Dashboard und warum genau diese

Eine Vertriebsleitung will am Montag 5 Antworten: Liegen wir im Ziel, wo steht die Pipeline, welche Deals hängen fest, wer braucht Unterstützung, welche Quellen zahlen sich aus. Jede Zahl auf dem Dashboard beantwortet eine dieser Fragen. Alles andere blieb draußen.

Die Win Rate (Abschlussquote) braucht eine schriftliche Definition. Pipedrive und die Win-Rate-Formel in der Salesforce-Hilfe teilen gewonnene Deals durch abgeschlossene Deals (Pipedrive, Salesforce-Hilfe). Der Blog von Close teilt durch alle Opportunities, offene eingeschlossen (Close). Auf diesem Datensatz ergibt die erste Variante 26,1 % für das Quartal. Wer offene Deals in den Nenner nimmt, lässt das Team jedes Mal schlechter aussehen, wenn die Pipeline wächst. Ich nutze gewonnen / (gewonnen + verloren) und schreibe das auf das Dashboard.

Die Liste der liegengebliebenen Deals ist das Nützlichste auf der Seite. Hier enthält sie 17 offene Deals im Wert von 456.000 €, die seit 3 Wochen oder länger niemand angefasst hat. In einem Pipeline-Meeting ist diese Liste mehr wert als jedes Diagramm darüber.

04Lovable vs. Claude im direkten Vergleich: Zeit, Credits, Bugs

2 Dinge haben mich überrascht. Erstens: Bei der Genauigkeit war es ein Unentschieden. Ich hatte erwartet, dass mindestens ein Tool eine Zahl erfindet oder die Duplikate falsch zählt. Mit einer schriftlichen Spezifikation und Bereinigungsregeln tat das keines. Zweitens: Claude war langsamer, aber gründlicher. Es hat weit mehr getestet: jede Kombination der 4 Filter bei 2 Bildschirmbreiten, jede sortierbare Spalte, die Zeilenzahl des CSV-Exports, die Bedienung nur per Tastatur. Lovable hat weniger getestet und schneller geliefert.

05Was jedes Tool falsch gemacht hat

Richtige Hauptkennzahlen sind die Pflicht, nicht die Kür. Nach der Datenaktualisierung habe ich einer separaten KI-Prüfsitzung (Claude Opus, frischer Kontext) nur die 2 fertigen Dateien, die CSV-Dateien und die Spezifikation gegeben und sie gebeten, in beiden Fehler zu finden: Filter kombinieren, jede Zahl aus der CSV neu berechnen, den Bildschirm verkleinern, auf die Maus verzichten. Meine Überlegungen und die Build-Protokolle hat sie nicht gesehen. Für Lovable hat sie meinen Offline-Build des Lovable-Codes getestet. Ein Claude-Modell, das einen Claude-Build bewertet, birgt das Risiko einer Verzerrung. Deshalb können Sie jeden der folgenden Befunde selbst in den Demos nachvollziehen.

Keine einzige Zahl war falsch. Der Prüfer hat jede Kachel für alle 4 Zeiträume und 15 kombinierte Filterzustände neu berechnet, jeden Diagrammwert, die Summen jeder Tabelle und die genauen IDs der liegengebliebenen Deals. Er hat sogar die Zeitzone des Browsers auf Los Angeles und auf die Pazifikinsel Kiritimati umgestellt, um Datumsfehler zu finden. Beide Dashboards stimmten auf den Euro genau, in Python und noch einmal in einer separaten Datenbankabfrage.

Gefunden hat er Probleme im Verhalten und im Layout: 9 Befunde bei Lovable, 6 bei Claude. Die Tabellen listen alle auf.

Option 1: Lovable

Option 2: Claude

Beide hatten dieselben 3 kleinen Lücken, die der Prüfer markiert hat, die ich aber nicht angefasst habe: Die Suche findet „brück“ nicht, wenn der Umlaut in zerlegter Form getippt oder eingefügt wird (so wie manche Mac-Dateien ihn speichern), der CSV-Export schützt nicht vor Werten, die Excel als Formeln ausführen würde (in diesen Daten gibt es keine), und ein Phasenfilter „Closed Won“ zeigt eine Win Rate von 100 %, was stimmt, aber nichts nützt.

Die Fix-Runde

Ich habe jedem Tool seine eigene Liste in einem Prompt geschickt, formuliert wie die weitergeleiteten Notizen eines Kollegen: „Die Zahlen stimmen, diese Dinge sind kaputt, beheben Sie sie in einem Durchgang, ändern Sie sonst nichts“. Dann hat derselbe Prüfer die korrigierten Versionen getestet. Lovable hat 7 seiner 9 Befunde vollständig und 2 teilweise behoben, für 3,4 Credits in etwa 3,5 Minuten. Claude hat 5 seiner 6 Befunde vollständig und 1 teilweise in etwa 6 Minuten behoben und dabei ein neues Problem geschaffen: Auf dem Smartphone wurde die Deal-Liste zu einer kleinen Box, in der man scrollt und jeweils etwa 1 Deal sieht. Claudes eigener Test hatte in derselben Runde schon eine schlimmere Nebenwirkung erwischt (die Smartphone-Karten hatten die Sortierung entfernt) und behoben. In keinem der beiden Dashboards hat sich eine Zahl geändert. Ein zweiter Fix-Prompt würde den Rest erledigen; ich habe hier aufgehört, damit Sie sehen, was 1 Runde bringt.

Gleiche Lesart, unterschiedliche Umgangsformen

Ich hatte erwartet, dass die 2 Tools mindestens 1 Regel unterschiedlich auslegen. Das taten sie nicht. Wählen Sie im Phasenfilter die offene Phase „Demo“, und beide leeren den Block „Results“, weil Ergebnisse nur abgeschlossene Deals zählen, während der Pipeline-Block die 19 Demo-Deals zeigt. Der Unterschied liegt darin, was Ihnen der leere Block sagt. Claude schreibt „No closed deals here“ und schlägt einen längeren Zeitraum oder ein Zurücksetzen vor. Lovable zeigt „€0“, Striche, „0.0 % of target“ und „No won deals in this period“, aber nichts erklärt, warum. In einem Montagsmeeting liest sich das wie ein schlechtes Quartal. Gleiche Logik, unterschiedliche Umgangsformen. Wenn Ihnen leere Zustände wichtig sind, verlangen Sie die Erklärung in der Spezifikation.

Was sie nicht falsch gemacht haben

Keines der beiden Tools hat eine Zahl, eine Spalte oder einen Deal erfunden. Keines hat „NaN“ auf die Seite geschrieben. Beide haben jede Bereinigungsregel auf jeden eingebauten Fehler angewendet. Beide haben die 2 Blöcke wie verlangt getrennt gehalten: Ergebnisse nach Abschlussdatum, Pipeline zum heutigen Stand. Als ich die Datenaktualisierung mit „ändern Sie sonst nichts“ angefordert habe, haben beide im Dashboard sonst nichts geändert.

06Die Prompts zum Kopieren

Das ist alles, was ich gesendet habe, in dieser Reihenfolge. Gesendet habe ich die Prompts auf Englisch; hier stehen sie übersetzt, das Original finden Sie im Prompt-Paket unter Downloads. Die Spezifikation ist der lange Teil und für beide Tools gleich. Ersetzen Sie das Unternehmen, die Farben und das Datum durch Ihre eigenen. Die Begriffe in Anführungszeichen sind die englischen Beschriftungen aus den Demos; tauschen Sie sie aus, wenn Ihr Dashboard deutsch sein soll.

Die Spezifikation (für beide gleich)

FÜR WEN ES IST
Ich leite den Vertrieb bei Quellwerk Software (B2B-Workflow-Software, 8 Vertriebsmitarbeiter). Jeden Montag gehe ich mit meinem Team die Pipeline durch. Ich möchte ein Dashboard, das beantwortet: Liegen wir im Ziel, wo steht die Pipeline, welche Deals hängen fest, wer braucht Unterstützung, welche Lead-Quellen zahlen sich aus.

DIE DATEN
- deals.csv: eine Zeile pro Deal. Spalten: deal_id, deal_name, account, industry, company_size, owner, lead_source, stage, probability_pct, value_eur, created_date, expected_close_date, close_date, stage_entered_date, last_activity_date, lost_reason, calls, emails, meetings.
- Phasen: Qualified, Discovery, Demo, Proposal, Negotiation (offen), Closed Won, Closed Lost.
- targets.csv: monatliches Neugeschäftsziel in EUR (month, target_eur).
- Die Daten sind ein Stand vom 30. September 2026. Behandeln Sie dieses Datum als „heute“.

DATEN ZUERST BEREINIGEN (der Export ist unaufgeräumt, wie jeder CRM-Export)
- Phasennamen können sich in Groß- und Kleinschreibung unterscheiden: „closed won“ wie „Closed Won“ behandeln.
- Einige Deals sind Duplikate: gleicher Account (zusätzliche Leerzeichen ignorieren), gleicher Wert, gleiches Erstellungsdatum. Nur einmal zählen.
- Leerer Owner = „Unassigned“. Leere Lead-Quelle = „Unknown“.
- Leerer Wert = aus jeder Summe und jedem Durchschnitt herauslassen, den Deal aber trotzdem zählen.
- Ein gewonnener Deal mit Wert 0 bleibt aus der durchschnittlichen Dealgröße heraus.
- Ein Abschlussdatum vor dem Erstellungsdatum ist ein Tippfehler: diesen Deal aus dem Durchschnitt des Verkaufszyklus herauslassen.
- All das in einem Panel „Data quality“ zeigen: jedes Problem, wie viele Deals und ihre Deal-IDs, damit ich sie im CRM korrigieren kann.

FILTER (oben auf der Seite, alle Zahlen und Diagramme aktualisieren sich gemeinsam)
- Zeitraum: „This quarter“ (Jul. bis Sep. 2026, Standard), „Last quarter“ (Apr. bis Jun. 2026), „Last 6 months“, „Last 12 months“.
- Rep (alle oder einer), Lead-Quelle (alle oder eine), Phase (alle oder eine).
- Anzeigen, welche Filter aktiv sind, und ein Button „Reset filters“.

2 BLÖCKE, KLAR BESCHRIFTET
1. „Results in the period“ nutzt abgeschlossene Deals, deren Abschlussdatum im gewählten Zeitraum liegt:
   - Gewonnener Umsatz vs. Ziel (Ziel = Summe der Monatsziele im Zeitraum), mit % vom Ziel.
   - Win Rate = gewonnene Deals / (gewonnene + verlorene Deals).
   - Durchschnittliche Dealgröße (gewonnene Deals).
   - Durchschnittlicher Verkaufszyklus in Tagen (Erstellungsdatum bis Abschlussdatum, gewonnene Deals).
   - Gewonnener Umsatz pro Monat gegen das Monatsziel (Diagramm).
   - Verlustgründe (Diagramm, verlorene Deals pro Grund; leerer Grund = „Not given“).
2. „Pipeline today (30 Sep 2026)“ nutzt offene Deals und ignoriert den Zeitraumfilter:
   - Wert der offenen Pipeline und gewichtete Pipeline (value x probability_pct).
   - Pipeline nach Phase (Diagramm: Wert und Anzahl der Deals pro Phase).
   - Liegengebliebene Deals: offene Deals ohne Aktivität seit 21 Tagen oder mehr vor dem 30. September 2026. Anzahl, Wert und eine Liste.

TABELLEN
- Rep-Scorecard: pro Rep gewonnener Umsatz, gewonnene Deals, Win Rate, offene Pipeline, Aktivitäten (Calls + E-Mails + Meetings auf den Deals des Reps in der Ansicht, also im Zeitraum abgeschlossene plus offene Deals).
- Lead-Quellen: pro Quelle gewonnener Umsatz und Win Rate.
- Deal-Liste: alle Deals in der Ansicht, durchsuchbar, nach jeder Spalte sortierbar, mit einem Button „Export CSV“ für die aktuelle Ansicht.

INTERAKTION
- Hover über einem Diagramm zeigt die genauen Zahlen.
- Ein Klick auf einen Balken (eine Phase, einen Rep, eine Quelle, einen Verlustgrund, einen Monat) filtert die Deal-Liste auf diese Deals. Anzeigen, wonach gefiltert ist, und eine Möglichkeit, den Filter aufzuheben.
- Wenn eine Filterkombination keine Deals hat, einen kurzen, freundlichen Leerzustand zeigen, nie ein kaputtes Diagramm oder „NaN“.

DESIGN
- Hell und ruhig. Hintergrund #FFFFFF, weiche Panels #F3F6FB, Text #141A2B, Sekundärtext #4C5670, Linien #E3E8F1. Hauptfarbe Ink Navy #1A2C6B, Akzent Kobalt #2F5BFF, Highlight Zitronengelb #FFE27A (sparsam einsetzen), Grün #0B6B4C für gut, Rot #AE2239 für schlecht.
- Schriften: Encode Sans für Text, Martian Mono für Zahlen und kleine Labels.
- Zahlen formatiert wie „€1.24M“, „€23,500“, „21.7 %“.
- Funktioniert auf dem Smartphone (390 px breit) und allein mit der Tastatur.

Lovable, Prompt 1 (vor der Spezifikation)

Hängen Sie deals.csv und targets.csv an die Nachricht an und fügen Sie dann diesen Text ein, mit der Spezifikation darunter.

Bauen Sie ein Sales Dashboard als reine Client-Web-App: React + Vite Single-Page-App, kein Backend, keine Datenbank, kein Login, Lovable Cloud nicht aktivieren. Die Daten kommen aus den beiden angehängten CSV-Dateien (deals.csv und targets.csv): Kopieren Sie sie als statische Daten ins Projekt und laden Sie sie beim Build, damit die App ohne Server funktioniert.

Wenn Sie fertig sind, testen Sie die App im Browser: Klicken Sie jeden Filter und die Drill-downs der Diagramme durch und prüfen Sie, ob gewonnener Umsatz, Win Rate, durchschnittliche Dealgröße, offene Pipeline und liegengebliebene Deals für „This quarter“ und „Last 12 months“ mit einer separaten Berechnung aus der CSV übereinstimmen. Korrigieren Sie alles, was nicht übereinstimmt.

Das brauche ich:

[Spezifikation hier einfügen]

Claude, Prompt 1 (vor der Spezifikation)

Ich habe Claude Code mit den 2 CSV-Dateien und den Schriftdateien in einem Ordner genutzt. In der Claude-App hängen Sie stattdessen die CSV-Dateien an; der Rest bleibt gleich.

In diesem Ordner liegen 2 CSV-Dateien aus meinem CRM: deals.csv und targets.csv. Die Schriften liegen in ./fonts. Bauen Sie mir ein Sales Dashboard als EINE einzige HTML-Datei namens dashboard.html, die ich per Doppelklick öffnen kann, ohne Server und ohne Build-Schritt.

Technische Regeln:
- Packen Sie die Daten aus beiden CSV-Dateien in die HTML-Datei.
- Keinerlei externe Anfragen: Zeichnen Sie die Diagramme selbst mit SVG, keine Diagrammbibliothek, kein CDN. Betten Sie die beiden Schriften aus ./fonts als Base64 ein.
- Reines JavaScript, keine Module (die laufen nicht aus einer per Doppelklick geöffneten Datei).

Wenn Sie fertig sind, öffnen Sie die Datei in einem Headless-Browser bei 1440 px und 390 px Breite, klicken Sie die Filter durch und beheben Sie alles, was kaputt ist. Prüfen Sie dann die Hauptkennzahlen (gewonnener Umsatz, Win Rate, durchschnittliche Dealgröße, offene Pipeline, liegengebliebene Deals) für „This quarter“ und „Last 12 months“ mit einer separaten Berechnung direkt aus der CSV und korrigieren Sie jede Zahl, die nicht übereinstimmt.

Das brauche ich:

[Spezifikation hier einfügen]

Inhaltlich unverändert so, wie ich ihn gesendet habe. Eine Zeile darin ist nur halb richtig: Modul-Skripte, die direkt in der Seite stehen, laufen auch aus einer per Doppelklick geöffneten Datei; blockiert werden nur externe Moduldateien (Tipp 8).

Prompt 2 für beide: die Datenaktualisierung

Ich habe eine frische Kopie der Daten aus dem CRM exportiert. Ersetzen Sie deals.csv und targets.csv durch die neuen Dateien (gleiche Spalten, mehr Deals, die Ziele haben sich geändert). Ändern Sie sonst nichts: kein Layout, kein Design, keine Änderungen an der Logik. Führen Sie danach Ihre Zahlenprüfung für „This quarter“ und „Last 12 months“ erneut aus und nennen Sie mir die neuen Zahlen.

Prompt 3: die Fix-Runde (Version für Lovable)

Jedes Tool bekam seine eigene Liste vom Prüfer, im gleichen Rahmen. Das ist die Liste für Lovable; die für Claude hatte 6 Punkte derselben Art. Achten Sie auf den abgrenzenden Satz ganz oben: Er hat beide Fix-Runden eng gehalten.

Ein Kollege hat das Dashboard getestet. Die Zahlen sind alle richtig, aber diese Dinge sind kaputt. Beheben Sie sie in einem Durchgang. Ändern Sie sonst nichts: keine neuen Funktionen, keine Designänderungen, keine Änderungen daran, wie irgendeine Zahl berechnet wird.

1. „Reset filters“ lässt den Text im Suchfeld der Deal-Liste stehen, während die Seite „Default view“ anzeigt. Das Zurücksetzen muss auch die Suche leeren.
2. In „Lead sources“ ist die Spalte Win Rate auf einem Laptop-Bildschirm (1280 und 1440 px breit) abgeschnitten: Die Überschrift lautet „WIN“, die Werte „36“, „33“. Alle Spalten müssen bei 1280 px vollständig sichtbar sein.
3. Der CSV-Export schreibt den Verlustgrund „Not given“ in Deals, die offen oder gewonnen sind. Nur verlorene Deals bekommen „Not given“; andere Deals bekommen einen leeren Verlustgrund.
4. Der CSV-Export zerstört Umlaute, wenn man ihn in Excel öffnet (ü wird zu ü). Sorgen Sie dafür, dass sich die Datei in Excel korrekt öffnet.
5. Wenn ein Rep, eine Quelle oder eine Phase ausgewählt ist, vergleicht „% of target“ weiterhin mit dem Ziel des ganzen Teams, und nichts weist darauf hin. Ergänzen Sie daneben einen kurzen Hinweis, etwa „Team target, no per-rep targets in the data“.
6. Im Panel zur Datenqualität fehlen 2 Probleme: verlorene Deals ohne Verlustgrund und offene Deals, deren erwartetes Abschlussdatum bereits vorbei ist. Ergänzen Sie beide, mit Anzahl und Deal-IDs.
7. Nach „Clear“ bei einem Drill-down oder „Reset filters“ per Tastatur springt der Fokus an den Seitenanfang. Lassen Sie den Fokus stattdessen auf einem sinnvollen Element.
8. Auf dem Smartphone (390 px): Die Spaltenköpfe der Rep-Scorecard laufen ineinander („WON REVENUEWON“), und die Achsenbeschriftungen des Phasendiagramms überlappen. Beheben Sie beides.
9. Kleiner Text: „1 DEALS IN VIEW“ soll „1 deal in view“ heißen, und „Nothing stalled. Nice.“ soll nicht erscheinen, wenn es überhaupt keine offenen Deals gibt.

Prüfen Sie danach, ob die Zahlen für „This quarter“ und „Last 12 months“ unverändert sind, und sagen Sie mir, was Sie geändert haben.

079 Dinge, die ich beim Bau des Sales Dashboards mit KI gelernt habe

1. Schreiben Sie die Bereinigungsregeln in den Prompt. Duplikate, leere Owner, leere Werte, eigenwillige Phasennamen. Jede Regel ist eine Zeile. Ohne sie entscheidet das Tool für Sie, und zwar stillschweigend.

2. Berechnen Sie 3 Zahlen selbst, bevor Sie prompten. Gewonnenen Umsatz, Win Rate, offene Pipeline, in einer Tabellenkalkulation. Das dauert etwa 10 Minuten. Nur so wissen Sie, dass das Dashboard stimmt, statt es nur zu glauben.

3. Lassen Sie das Tool sich selbst prüfen und die Zahlen nennen. Ich habe einen Satz in den Prompt geschrieben („prüfen Sie diese 5 Zahlen mit einer separaten Berechnung und korrigieren Sie, was nicht übereinstimmt“), und beide Tools haben daraufhin ihren eigenen Test geschrieben. Beide haben die Werte am Ende aufgelistet, sodass ich in Sekunden vergleichen konnte.

4. Lovable wählt seinen eigenen Stack und sagt es Ihnen. Ich hatte eine schlichte App mit React und Vite verlangt. Lovable hat auf seinem Standard-Framework gebaut und das auch gesagt: „that part can't be swapped“. Für eine gehostete App ist das in Ordnung. Wichtig wird es, wenn Sie den Code woandershin umziehen wollen.

5. „Ändern Sie sonst nichts“ funktioniert. Beide Tools haben die Datenaktualisierung auf die Daten beschränkt. In der Fix-Runde blieben beide nah an der Liste; Claude hat 1 Bedienelement ergänzt, das niemand verlangt hatte, um eine Nebenwirkung seines eigenen Fixes zu beheben, und hat das auch gesagt. Bei Lovable kostete die Aktualisierung 1,8 Credits statt eines kompletten Neubaus.

6. Fixes machen Dinge kaputt; Tests fangen das auf. Claudes Smartphone-Fix verwandelte die Deal-Tabelle in Karten und entfernte damit die Spaltenköpfe, die zugleich die Sortier-Buttons waren. Sein eigener Test hat das noch im selben Prompt bemerkt, und Claude hat eine Zeile „Sort by“ ergänzt. Lovable hat 5 Regressionstests für die behobenen Punkte hinzugefügt. Fordern Sie Tests an, wenn Sie Fixes anfordern.

7. Achten Sie auf fest verdrahtete Testwerte. Beide Tools haben Tests geschrieben, die an die erste Datei gebunden waren: Die von Lovable erwarteten genau die Summen dieser Datei, die von Claude genau 15 liegengebliebene Deals und einen Account-Namen, den es nicht mehr gab. Nach der Aktualisierung hat Lovable die neuen Summen separat neu berechnet und dann in seine Tests geschrieben. Bei Claude schlugen aus demselben Grund 2 Prüfungen fehl; es hat sie so geändert, dass sie die erwarteten Werte aus den Daten lesen. Das ist der bessere Fix. Ein Test, der so umgeschrieben wird, dass er zu jeder Ausgabe passt, ist kein Test mehr.

8. Eine einzelne HTML-Datei läuft per Doppelklick, unter einer Bedingung. Externe Modul-Skripte werden blockiert, wenn Sie eine Datei direkt in Chrome öffnen; Skripte, die in der Seite selbst stehen, nicht. Verlangen Sie „eine Datei, keine externen Anfragen“, dann können Sie sie per E-Mail verschicken, auf ein Laufwerk legen oder offline öffnen.

9. Schriften und Bibliotheken aus dem Internet verhindern die Offline-Nutzung. Lovable hat seine Schriften von Google Fonts geladen. Claude hat sie in die Datei eingebettet, weil der Prompt das verlangte. Für eine Datei, die im Flugzeug oder hinter einer Firmen-Firewall funktionieren muss, schreiben Sie das in den Prompt.

08Später Ihr echtes CRM anbinden

Beide Demos lesen eine CSV-Datei, die ins Dashboard eingebaut ist. Das ist der richtige Start: keine Schlüssel, keine Zugriffsrechte, nichts, was nach außen dringen kann. Wenn der Export am Montag lästig wird, sind das die nächsten Schritte, vom geringsten zum größten Aufwand.

2 Regeln halte ich bei jedem Kundenprojekt ein. Dashboards lesen, sie schreiben nie, also hat der Schlüssel nur Lesezugriff. Und Dummy- oder Exportdaten, bis Sie kontrollieren, wo die Seite gehostet wird. Ein Sales Dashboard enthält Deal-Werte, Kundennamen und die Information, wer hinter den Erwartungen zurückbleibt. Das gehört nicht hinter einen öffentlichen Link.

09Was es kostet

Allein der erste Lovable-Prompt verbrauchte 9,4 Credits, mehr als die 5 pro Tag im kostenlosen Tarif. Planen Sie für einen Build wie diesen also Pro ein. Der getestete Weg über Claude braucht für Claude Code einen bezahlten Tarif. In der Claude-App kann der kostenlose Tarif eine hochgeladene CSV-Datei analysieren und Dateien erstellen, diesen Weg habe ich hier aber nicht getestet.

10Was ich anders machen würde

• Die Schriftregel von der Website übernehmen, nicht aus dem Gedächtnis. Meine Spezifikation nannte Encode Sans für Text. crmmeister.com nutzt für Text tatsächlich Onest. Beide Tools sind der Spezifikation treu gefolgt, also weichen beide leicht von der Marke ab. Das Tool hat seine Arbeit gemacht; mein Briefing war falsch.
• Zuerst die Daten prüfen. Mein erster Export hatte einen leeren Anfang, und das habe ich erst bemerkt, als beide Builds schon liefen. Ein Skript mit 20 Zeilen, das den Umsatz pro Monat summiert, hätte das vor dem ersten Prompt gezeigt.
• Nicht auf einen statischen Build von Lovable setzen. Ich habe im ersten Prompt einen verlangt und das Standard-Framework bekommen. Planen Sie die Veröffentlichung auf lovable.app ein oder einen separaten Exportschritt: Die App in eine einzige Offline-Datei zu verwandeln, erforderte einen Schritt außerhalb von Lovable, den Leser ohne Terminal nicht gehen würden.
• Ziele pro Rep mitgeben. Mit aktivem Rep-Filter vergleichen beide Dashboards weiterhin mit dem Teamziel. Beide sagen das inzwischen auf der Seite; die saubere Lösung ist eine Zieldatei pro Rep.

11Downloads

Alles aus diesem Test, kostenlos, ohne E-Mail-Abfrage. Die Dateien sind auf Englisch.

Außerdem im Ordner: targets.csv, deals.json, Datenwörterbuch mit Referenzwerten.