Interaktiven Angebotsrechner mit Claude oder ChatGPT erstellen

Ilya SpiridonovIlya Spiridonov
15 Min. Lesezeit

Sie kennen Ihre Preise. Ihren Interessenten fehlt jedoch eine einfache Möglichkeit, sie auszuprobieren. Sie können kein Paket auswählen, weitere Seiten hinzufügen und den neuen Gesamtpreis sehen, ohne erst auf Ihr Angebot zu warten.

Claude und ChatGPT können diesen Rechner aus einer Preisliste erstellen. Sie liefern Preise und Regeln, die KI schreibt die Seite. Zwei Aufgaben bleiben bei Ihnen: die Zahlen zu prüfen und eine funktionierende Datei aus dem Chat zu holen. Dieser Artikel erklärt beides, mit einem fertigen Prompt und sechs Vergleichsergebnissen.

Probieren Sie zuerst das fertige Beispiel aus. Wählen Sie ein Paket, ändern Sie die Anzahl zusätzlicher Seiten und schalten Sie die Zusatzleistungen ein und aus.

Ihr Projekt

Eine Landingpage und eine Korrekturrunde.

$150.00 pro Seite, höchstens 10. Ab 5 Seiten 5% Rabatt auf Zusatzseiten.

Zusatzleistungen

Schätzung

Grundpreis
$800.00
Zusatzseiten0 × $150.00
$0.00
MengenrabattAb 5 Zusatzseiten
$0.00
Texterstellung
$0.00
Einmalige Gesamtsumme
$800.00
Monatlicher SupportMonatliche Abrechnung
$0.00
Geschätzte erste RechnungEinmalige Summe plus erster Supportmonat
$800.00

Unverbindliche Beispielschätzung. Ohne Steuern. Endgültiger Umfang und Preis werden im Angebot bestätigt. Beträge in USD.

Die Preise sind für eine kleine Webdesign-Agentur erfunden; Steuern bleiben unberücksichtigt. Setzen Sie Ihre eigenen Preise ein, sobald Sie den Aufbau verstanden haben.

Preise und Regeln festhalten

Beginnen Sie mit den Zahlen, bevor Sie den Prompt schreiben. Die KI baut, was Sie beschreiben. Eine ungenaue Preisliste führt deshalb zu einem ungenauen Rechner. Dieses Beispiel enthält sechs Preise und eine einzige Rabattregel.

PositionPreisAbrechnung
Paket Basic$800Einmalig
Paket Standard$1,200Einmalig
Paket Plus$1,800Einmalig
Zusätzliche LandingpageJe $150, von 0 bis 10Einmalig
Texterstellung$200, optionalEinmalig
Monatlicher Support$75, optionalJeden Monat

Dazu kommen drei Regeln:

  • Ab fünf zusätzlichen Seiten werden 5% von der gesamten Position für Zusatzseiten abgezogen. Paketpreis und Texterstellung erhalten keinen Rabatt.
  • Der monatliche Support bleibt außerhalb der einmaligen Gesamtsumme, weil eine monatliche Gebühr eine andere Verpflichtung als die Erstellungskosten ist.
  • Die geschätzte erste Rechnung setzt sich aus der einmaligen Summe und einem Monat Support zusammen.

Der Rechner startet mit Basic, null zusätzlichen Seiten und ohne Zusatzleistungen. Ist die Seitenzahl leer, negativ, keine ganze Zahl oder größer als 10, erscheint direkt am Feld eine Fehlermeldung. Die Summen bleiben verborgen, bis die Eingabe korrigiert ist.

Berechnen Sie die Ergebnisse selbst, bevor Sie die KI beauftragen. Jede Version muss diese sechs Fälle bestehen:

  • Minimum. Basic, 0 Zusatzseiten, keine Zusatzleistungen. Einmalig $800.00, monatlich $0.00, erste Rechnung $800.00.
  • Menge. Standard, 2 Zusatzseiten, keine Zusatzleistungen. Einmalig $1,500.00, monatlich $0.00, erste Rechnung $1,500.00.
  • Zusatzleistung. Standard, 2 Zusatzseiten, Texterstellung. Einmalig $1,700.00, monatlich $0.00, erste Rechnung $1,700.00.
  • Unter der Rabattgrenze. Standard, 4 Zusatzseiten, Texterstellung. Einmalig $2,000.00, monatlich $0.00, erste Rechnung $2,000.00.
  • An der Rabattgrenze. Standard, 5 Zusatzseiten, Texterstellung und Support. Einmalig $2,112.50, monatlich $75.00, erste Rechnung $2,187.50.
  • Maximum. Plus, 10 Zusatzseiten, Texterstellung und Support. Einmalig $3,425.00, monatlich $75.00, erste Rechnung $3,500.00.

Diese Summen wurden unabhängig vom Rechner berechnet. Das Beispiel oben liefert alle sechs korrekt. Fügen Sie die Preisliste, die drei Regeln und diese sechs Ergebnisse in den Prompt ein. Bewahren Sie die Ergebnisse für die spätere Prüfung auf.

Den Rechner in Claude erstellen

Claude ist hier der Hauptweg, weil es den Rechner als interaktives Artefakt erstellen kann: ein funktionierendes Werkzeug neben dem Gespräch. Anthropic nennt Artefakte für Free, Pro, Max, Team und Enterprise. Die Einstellung zur Codeausführung und Dateierstellung muss aktiviert sein.

Den Prompt einfügen

Öffnen Sie einen neuen Chat auf claude.ai oder in der Desktop-App. Beginnen Sie mit Erstelle dies als eigenständiges, vollständig in sich geschlossenes interaktives Artefakt ohne externe Dateien., damit der Rechner als dauerhaftes Artefakt statt als vorübergehende Visualisierung im Chat erscheint. Fügen Sie danach den folgenden Prompt ein. Ergänzen Sie am Ende die Preisliste, drei Regeln und sechs erwarteten Ergebnisse an der angegebenen Stelle.

Erstelle einen funktionierenden interaktiven Angebotsrechner für eine kleine Webdesign-Agentur.
Die Preisliste und Preisregeln folgen unten. Verwende genau diese Werte.
Fehlt eine Regel oder widersprechen sich Regeln, frage mich, bevor du einen Wert festlegst.

Das Ergebnis ist ein eigenständiges, vollständig in sich geschlossenes Artefakt:
eine Vorschau und eine vollständige herunterladbare Datei namens quote-calculator.html.
HTML, CSS und JavaScript gehören in diese Datei. Lade keine externen Ressourcen
wie Schriftarten, Bilder oder Skripte. Die Datei muss sich direkt im Browser
öffnen lassen, ohne Installation, externe Bibliotheken, KI-Aufrufe oder Server.

Baue eine Paketauswahl, ein Zahlenfeld für zusätzliche Seiten und Kontrollkästchen
für Texterstellung und monatlichen Support. Aktualisiere die Schätzung bei jeder
Eingabeänderung. Zeige Grundpreis, Zusatzseiten, Rabatt, Texterstellung, einmalige
Gesamtsumme, monatlichen Support und geschätzte erste Rechnung als getrennte,
beschriftete Beträge. Formatiere USD-Beträge mit zwei Nachkommastellen.

Beschrifte den Rechner mit „Unverbindliche Beispielschätzung. Ohne Steuern.
Endgültiger Umfang und Preis werden im Angebot bestätigt.“ Ergänze „Zurücksetzen“.

Die Anzahl zusätzlicher Seiten muss eine ganze Zahl von 0 bis 10 sein. Bei leerer
oder ungültiger Eingabe zeige einen Fehler am Feld und verberge die Summen,
bis die Eingabe korrigiert ist. Starte mit Basic, null Seiten, ohne Zusatzleistungen.

Verwende klare Beschriftungen, sichtbaren Tastaturfokus und gut bedienbare Felder
auf dem Smartphone. Verwende feste IDs: package, extra-pages, copywriting,
monthly-support, reset. Fasse die Preise in einem beschrifteten Konfigurationsblock zusammen.
Erfasse keine Kontaktdaten, sende keine Bestellungen, speichere keine Auswahl
und akzeptiere keine Zahlungen. Kein Trackingcode; Hosting und Tracking sind separat.

Prüfe vor der Übergabe die bereitgestellte Ergebnistabelle. Melde Korrekturen
und liefere die endgültige HTML-Datei.

Preisliste, Formeln und erwartete Ergebnisse:
[Hier die bereitgestellten Tabellen einfügen.]

Drei Teile sollten in jedem eigenen Prompt erhalten bleiben. Die Aufforderung, bei fehlenden Regeln nachzufragen, deckt Lücken auf, bevor ein Kunde sie findet. Eine einzige eigenständige Datei ohne externe Ressourcen macht den Rechner portabel. Der abschließende Vergleich mit Ihrer Tabelle liefert eine erste Prüfung, ersetzt Ihre eigene jedoch nicht.

Lieber eine Datei anhängen? Fügen Sie rate-card.csv über die Schaltfläche + und Add files or photos hinzu oder ziehen Sie sie in den Chat. Anthropic führt CSV als unterstützten Dokumenttyp auf.

Die Datei enthält Preise, Regeln und Summenformeln. Ersetzen Sie die letzten beiden Prompt-Zeilen durch diese Anweisung und fügen Sie darunter nur die sechs erwarteten Ergebnisse ein.

Preise und Regeln stehen in der angehängten rate-card.csv. Bestätige die gelesenen
Preise und Regeln und erstelle dann den Rechner als eigenständige,
vollständig in sich geschlossene Datei ohne externe Ressourcen.

Die erste Version ansehen

Sie sollten ein Paketmenü, ein Zahlenfeld für Zusatzseiten, zwei Kontrollkästchen, eine Schaltfläche zum Zurücksetzen und sieben getrennte Beträge sehen: Grundpreis, Zusatzseiten, Rabatt, Texterstellung, einmalige Gesamtsumme, monatlicher Support und erste Rechnung. Eine geänderte Eingabe muss die Schätzung ohne weiteren Klick aktualisieren.

Nachbessern

Ist eine Summe falsch, beschreiben Sie den Fehler wie einem Menschen: Nennen Sie den Fall und das erwartete Ergebnis.

Jede falsche Summe weist auf eine Regel hin. Standard mit fünf Zusatzseiten, Texterstellung und Support muss $2,112.50 zeigen. Eine einmalige Summe von $2,042.50 bedeutet, dass der Rabatt auf den Gesamtbetrag statt nur auf Zusatzseiten angewandt wurde. $2,150.00 bedeutet, dass der Rabatt fehlt.

Bleibt nach dem Leeren des Seitenfeldes eine alte Summe stehen oder erscheint NaN, verlangen Sie die Korrektur direkt: „Wenn die Anzahl zusätzlicher Seiten leer ist, zeige einen Fehler am Feld und blende die Summen aus. Behalte eine einzige eigenständige Datei ohne externe Ressourcen bei.“ Ändern Sie pro Nachricht eine Sache und prüfen Sie anschließend den zuvor fehlgeschlagenen Fall erneut.

Die Datei exportieren

Stimmen die Zahlen, holen Sie die Datei aus dem Chat. Wurde der Rechner in Claudes Design-Vorlage erstellt, klicken Sie auf Export und wählen eigenständiges HTML. Anthropic nennt auf seiner Artefakte-Seite Export als Bedienelement für Vorlagen-Artefakte und auf der Hilfeseite zu Claude Design eigenständiges HTML als Exportformat.

Fehlt die HTML-Option, bitten Sie Claude um den vollständigen Rechner als eine herunterladbare, eigenständige Datei namens quote-calculator.html, ohne externe Ressourcen.

Claude Cowork mit einer vorhandenen Preisliste nutzen

Cowork ergänzt das Anhängen der CSV um einen Ordnerablauf: Claude liest die Datei aus einem Ordner auf Ihrem Computer und speichert den fertigen Rechner dort, ohne Upload oder Download. Laut Anthropic kann es in verbundenen Ordnern lokale Dateien lesen und schreiben.

Legen Sie rate-card.csv in einen Ordner und verbinden Sie ihn in der Claude-Desktop-App. Cowork ist in kostenpflichtigen Tarifen verfügbar, also Pro, Max, Team und Enterprise.

Verwenden Sie denselben Prompt samt erster Zeile. Ersetzen Sie nur die letzten beiden Zeilen zum Einfügen der Preisliste durch die folgende Anweisung. Da die Datei Preise und Regeln enthält, ergänzen Sie darunter nur die sechs erwarteten Ergebnisse.

Lies rate-card.csv aus dem verbundenen Ordner. Bestätige die gelesenen Preise
und Regeln. Erstelle den Rechner als eigenständige, vollständig in sich geschlossene
HTML-Datei ohne externe Ressourcen und speichere ihn als quote-calculator.html
in diesem Ordner. Verändere die ursprüngliche Preisliste nicht und sage mir,
wo du das Ergebnis gespeichert hast.

Cowork führt Aufgaben in der Cloud aus und greift über die Desktop-App auf den Ordner zu. Lassen Sie die App daher geöffnet.

Einige Konten zeigen weiterhin die Auswahl Chat oder Cowork; wählen Sie dort Cowork. Anthropic führt beide zu einem Gespräch zusammen, schrittweise und zunächst für Pro und Max. In einem bereits umgestellten Konto stellen Sie dieselbe Anfrage im normalen Chat und verbinden den Ordner wie bisher in der Desktop-App.

Alternativ ChatGPT verwenden

Preisliste, Prompt und sechs Prüfungen bleiben gleich. Nur Erstellung und Download unterscheiden sich. Fügen Sie denselben Prompt mit Preisen, Regeln und erwarteten Ergebnissen in ChatGPT ein. Das Ergebnis bleibt eine herunterladbare, eigenständige Datei quote-calculator.html ohne externe Ressourcen.

Laut OpenAI-Dokumentation können erzeugte HTML-Dateien dort als interaktive Vorschau geöffnet werden, wo HTML-Vorschauen verfügbar sind. Vorschau- und Prüfwerkzeuge hängen von der verwendeten Oberfläche ab. Für ChatGPT Work im Web beschreibt sie das Prüfen der Datei im Chat und den Download bei Bedarf.

ChatGPT kann eine Seite auch als Site, Canvas oder HTML-Vorschau statt als Datei anbieten. Der Leitfaden zum Teilen einer mit ChatGPT erstellten HTML-Website erklärt alle Varianten. Fehlt die Vorschau, laden Sie die Datei herunter und öffnen Sie sie im Browser.

Prüfen Sie in jedem Fall die heruntergeladene Datei, denn diese Version teilen Sie später.

Den exportierten Rechner prüfen

Ein Rechner kann richtig aussehen und trotzdem falsch rechnen. Ein falscher Kundenpreis kostet Geld oder Vertrauen. Schließen Sie den KI-Chat und prüfen Sie die heruntergeladene Datei:

  1. Öffnen Sie sie per Doppelklick. Sie muss im Browser ohne Anmeldung, Internetverbindung oder laufendes Claude funktionieren.
  2. Wählen Sie Standard, 2 Zusatzseiten und Texterstellung. Die einmalige Summe muss $1,700.00 betragen.
  3. Ändern Sie die Seitenzahl auf 4: $2,000.00 ohne Rabatt. Stellen Sie 5 ein und aktivieren Sie Support: einmalig $2,112.50, monatlich $75.00, erste Rechnung $2,187.50, Rabattposition -$37.50.
  4. Leeren Sie das Seitenfeld und testen Sie -1, 2.5 und 11. Jede Eingabe muss einen Fehler am Feld anzeigen und die Summen bis zur Korrektur verbergen.
  5. Klicken Sie auf Zurücksetzen. Basic, 0 Seiten, beide Zusatzleistungen aus, Gesamtbetrag $800.00.
  6. Prüfen Sie die übrigen der sechs Fälle. Plus mit 10 Seiten und beiden Zusatzleistungen eignet sich als Abschluss: $3,425.00, $75.00 und $3,500.00.
  7. Verkleinern Sie das Browserfenster auf Smartphone-Breite oder öffnen Sie die Datei am Handy. Es darf kein seitliches Scrollen geben; alle Felder müssen gut antippbar sein.
  8. Legen Sie die Maus zur Seite und nutzen Sie die Tastatur. Tab muss jedes Bedienelement mit sichtbarem Fokus erreichen; die Leertaste schaltet Kontrollkästchen um. Safari am Mac erreicht Schaltflächen und andere Elemente per Tab nur bei aktivierter Tastaturnavigation in den Tastatureinstellungen.

Öffnen Sie anschließend die Datei in einem Texteditor. Die Preise sollten genau einmal gemeinsam in einem beschrifteten Block stehen. Diesen ändern Sie später selbst oder lassen ihn von der KI ändern.

Vertrauliche Zahlen gehören nicht in die Datei

Wer die Datei öffnet, kann ihren Code lesen. Interne Kosten, Margen und Freigabegrenzen gehören deshalb nicht hinein. Berechnungen im Browser erzwingen auch keine genehmigten Preise, da Empfänger ihre eigene Dateikopie bearbeiten können.

Den Rechner mit Kunden teilen

Senden Sie einen Link statt der Datei. E-Mail und Cloudspeicher zeigen HTML häufig als Quelltext oder blockieren es. Der Leitfaden zum Teilen einer HTML-Datei mit Kunden erklärt die Hintergründe.

Claude kann Artefakte selbst teilen; die Optionen hängen vom Tarif und den Organisationseinstellungen ab. Laut Anthopics Dokumentation zum Teilen benötigen Empfänger für neu geteilte Artefakte ein Claude-Konto. Eine Ausnahme gilt für ältere, aus einem Chat veröffentlichte Artefakte. Für Kollegen mit Claude passt das, bei Kunden ohne Konto entsteht ein zusätzlicher Schritt.

Für einen Link, den jeder Kunde öffnen kann, laden Sie die exportierte Datei bei einem HTML-Host hoch. Unser Produkt HummingDeck übernimmt das; die Seite zum Teilen von HTML erklärt die Details.

Eine einzelne HTML-Datei funktioniert im kostenlosen Tarif:

  1. Wählen Sie in der Dokumentbibliothek Dokument hinzufügen und quote-calculator.html. Die Datei muss die Anforderungen für HTML-Uploads erfüllen.
  2. Wählen Sie nach der Verarbeitung Neuer Link, dann einen persönlichen Link. Erstellen Sie zunächst einen eigenen und kennzeichnen Sie ihn als Test.
  3. Öffnen Sie den Testlink wie ein Kunde in einem privaten Browserfenster und wiederholen Sie die Prüfungen. Der Viewer führt Ihre Datei in einem abgeschotteten Frame aus. Ein erfolgreicher lokaler Test beweist deshalb noch nicht, dass der Empfängerlink funktioniert.
  4. Erstellen und versenden Sie den persönlichen Kundenlink genauso. Ihr Testbesuch bleibt am Testlink; der Kundenlink beginnt mit einer leeren Historie. Prüfen Sie nach dem Kundenbesuch unter Links, welcher Aufruf diesem Link zugeordnet wurde.

Umfasst das Geschäft mehrere Dokumente, stellen Sie den Rechner mit einem festen Angebot und einer Fallstudie in einen Raum. Der Kunde öffnet dann einen Link. Der kostenlose Tarif erlaubt einen Raum mit bis zu drei Dokumenten; die Vorlage für Webdesign-Angebote eignet sich für das feste Angebot.

Was Schätzung und Aktivität aussagen

Rechner und Angebot haben unterschiedliche Aufgaben. Im Rechner erkundet der Käufer Optionen und sieht eine Schätzung. Der verbindlich zugesagte Betrag gehört in ein festes Angebot, das Sie selbst ausstellen.

Soll der Kunde darauf antworten, zeichnet ein Angebotslink in Pro und Business die Antworten Annehmen, Änderungen anfordern oder Ablehnen auf. Diese Workflow-Antwort ist dem Angebotsdokument zugeordnet. Sie erfasst weder eine Unterschrift noch den im Rechner angezeigten Betrag.

Im kostenlosen Tarif zeigt die Dokumentseite Aufrufe insgesamt, eindeutige Besucher, Verweildauer und durchschnittlichen Abschluss. Ab Starter kommen Seitenanalysen und unterstützte Klicks hinzu. Der Leitfaden zu Analysen für HTML-Seiten vergleicht dies mit Analyseskripten. Ein Klick auf Schaltflächen, Kontrollkästchen, Auswahlmenü oder Zahlenfeld des Rechners zählt als Linkklick. Die Anzahl erscheint je Besucher und Sitzung.

Was die Aktivität zeigt

  • Ein Aufruf bedeutet, dass der Link angefordert und eine Sitzung begonnen wurde. Er bestätigt nicht die Identität des Besuchers; der Link lässt sich weiterleiten.
  • Die Klickanzahl zeigt, wie häufig die Bedienelemente verwendet wurden. HummingDeck zeigt weder gewählte Optionen noch die angezeigte Summe. Das Eintippen einer Zahl oder die Auswahl per Tastatur zählt nicht als Klick.
  • Keines dieser Signale beweist Kaufabsicht. Nutzen Sie sie, um zu entscheiden, wann eine Nachfrage hilfreich ist.

CPQ steht für Configure, Price, Quote und ist ein anderes Werkzeug als ein Rechner. Salesforce beschreibt CPQ als Software zum Konfigurieren von Produkten, Anwenden von Preisregeln, Verwalten von Rabatten und Freigaben sowie Erstellen von Angeboten, mit CRM- und ERP-Integration.

Dieser Rechner deckt Konfiguration und Preisberechnung für eine einfache Preisliste ab. Für gespeicherte Angebote, einen vertraulichen Katalog oder Rabattfreigaben benötigen Sie ein Angebotssystem.

Häufige Fragen

Brauche ich Claude Cowork für einen Angebotsrechner?

Ein normaler Claude-Chat genügt: Fügen Sie die Preisliste ein oder hängen Sie rate-card.csv an. Cowork ergänzt einen Ordnerablauf, bei dem Claude die Datei aus einem verbundenen Ordner liest und den fertigen Rechner dort speichert. Dafür sind ein kostenpflichtiger Claude-Tarif und die geöffnete Desktop-App erforderlich.

Kann ich eine Preisliste aus Excel oder Google Sheets verwenden?

Exportieren Sie die Preisliste als CSV und hängen Sie sie an den Chat an oder fügen Sie die Tabelle in den Prompt ein. Lassen Sie die KI alle erkannten Preise und Regeln wiederholen, bevor sie beginnt. Vergleichen Sie diese Liste mit Ihrer Tabelle und testen Sie den fertigen Rechner mit Ergebnissen, die Sie in der Tabelle selbst berechnet haben.

Wie sende ich einen interaktiven Angebotsrechner an Kunden?

Senden Sie einen Link statt der Datei. Laden Sie das HTML bei einem passenden Host hoch, etwa über einen HummingDeck-Link im kostenlosen Tarif, oder teilen Sie das Artefakt aus Claude, wenn der Kunde ein Claude-Konto hat. Testen Sie zuerst über einen eigenen separaten Link, damit Ihr Besuch nicht auf dem Kundenlink erscheint.

Ist ein Angebotsrechner dasselbe wie CPQ-Software?

Ein Rechner zeigt eine Schätzung aus einer festen Preisliste. CPQ-Software setzt zusätzlich Preisregeln und Rabattfreigaben um, erstellt Angebote und ist mit CRM- und ERP-Systemen integriert. Lassen Sie Käufer im Rechner Optionen erkunden und senden Sie anschließend ein festes Angebot mit dem von Ihnen zugesagten Preis.

Wie ändere ich später die Preise?

Bearbeiten Sie die Zahlen im beschrifteten Preisblock der Datei oder lassen Sie die KI dieselbe eigenständige Datei ändern. Wiederholen Sie danach die sechs Prüfungen. Nutzen Sie anschließend Ersetzen am Dokument in HummingDeck; bestehende Links funktionieren weiter. Bei einem aktiven Angebotslink ist Ersetzen gesperrt. Widerrufen Sie diesen Link daher zuerst.

Kann der Rechner Angebote per E-Mail senden oder die Kundenauswahl speichern?

Die Version in diesem Artikel berechnet ausschließlich im Browser. Für E-Mail-Versand, gespeicherte Auswahl oder Zahlungen braucht die Seite einen Formulardienst, eine Datenbank oder ein Angebotssystem im Hintergrund. Lassen Sie diese Funktionen aus dem Rechner heraus und senden Sie ein festes Angebot mit dem zugesagten Preis.

Über den Autor

Ilya Spiridonov ist Gründer von HummingDeck, einer Plattform zum Teilen von Dokumenten, die eigenständige HTML-Dateien über nachverfolgbare Links für externe Empfänger bereitstellt.

Quellen

Teilen Sie Ihren Angebotsrechner über einen Link

Weitere Artikel: