Ein Maler in Hamburg hat einen Kostenrechner auf seiner Website. Fläche eingeben, Raumanzahl wählen, Sonderarbeiten anklicken — geschätzter Preis erscheint in Echtzeit. Seit er den Rechner online hat, rufen ihn nur noch Kunden an, die wissen, was sie erwartet. Keine Preisschock-Gespräche mehr, keine verschwendeten Beratungstermine. Die Anfragen sind qualifizierter, der Abschluss schneller.

Interaktive Tools wie Kostenrechner sind keine Spielerei. Sie gehören zu den effektivsten Conversion-Elementen, die eine Dienstleister-Website haben kann. Laut einer Analyse von Marketing LTB erhöhen interaktive Tools die Verweildaür und Lead-Generierung um 30 bis 200 Prozent. Eine Demand-Metric-Studie zeigt: Interaktive Inhalte wie Rechner und Konfiguratoren generieren in 70 Prozent der Fälle messbare Conversions — statischer Content nur in 36 Prozent.

Das Beste daran: Du brauchst keinen Entwickler. Mit Claude baust du einen funktionierenden Kostenrechner als Artefakt — in einer einzigen Chat-Session, komplett ohne Code-Kenntnisse.

Warum Kostenrechner so gut funktionieren

Drei psychologische Prinzipien machen Kostenrechner wirkungsvoll — und alle drei arbeiten gleichzeitig.

Reciprocity. Der Rechner liefert etwas Wertvolles (eine Preisschätzung), bevor der Kunde etwas geben muss (Kontaktdaten oder einen Anruf). Dieses Prinzip der Gegenseitigkeit senkt die Hemmschwelle für den nächsten Schritt erheblich.

Commitment & Consistency. Wer bereits Daten in ein Formular eingegeben hat — Fläche, Zimmeranzahl, Wünsche — hat sich mental schon mit dem Projekt beschäftigt. Der Schritt von „ich habe gerade meinen Bedarf kalkuliert" zu „ich frage jetzt an" ist psychologisch klein.

Preistransparenz als Vertrauenssignal. In Branchen, in denen Preise traditionell unklar sind (Handwerk, Beratung, Dienstleistungen), wirkt ein offener Kostenrechner wie ein Vertrauensbeweis. Der Betrieb sagt: Wir haben nichts zu verbergen.

Kernerkenntnis

Interaktive Inhalte generieren doppelt so viel Engagement wie statischer Content. 81 Prozent der Käufer bevorzugen interaktive Formate. Ein Kostenrechner ist kein „Nice-to-have" — er ist ein Conversion-Hebel, der rund um die Uhr arbeitet.

Schritt für Schritt: Kostenrechner mit Claude bauen

Das Trial-and-Error-Prinzip: Du fängst einfach an, machst bewusst Fehler, verstehst warum, und verbesserst. Jeder Durchlauf bringt dich näher an ein Ergebnis, das genau zu deinem Betrieb passt.

Schritt 1: Der erste Versuch (bewusst unvollständig)

Öffne claude.ai und gib diesen Prompt ein:

Erstelle einen Kostenrechner für Malerarbeiten.

Was passiert: Claude erstellt ein Artefakt — aber es wird generisch sein. Keine konkreten Preise, kein Branding, kein Handlungsaufruf. Das ist gewollt. Der erste Versuch zeigt dir, was fehlt.

Typische Fehler und was sie bedeuten:

Preise sind unrealistisch oder fehlen ganz — Claude kennt deine Preise nicht, du musst sie liefern. Design sieht unfertig aus — kein Farbschema, keine Schriftart angegeben. Kein Call-to-Action — Claude weiß nicht, was nach der Berechnung passieren soll. Rechner funktioniert nur auf Desktop — kein Mobile-Hinweis im Prompt.

Schritt 2: Der verbesserte Prompt

Jetzt fütterst du Claude mit Kontext. Ersetze die Platzhalter mit deinen echten Daten:

Erstelle ein HTML-Artefakt: Ein interaktiver Kostenrechner für „[Leistung, z.B. Malerarbeiten Innenraum]" für meinen Betrieb [Firmenname] in [Stadt]. Eingabefelder: - Fläche in Quadratmetern (Slider oder Eingabefeld, 10 bis 200) - Raumanzahl (Dropdown: 1 bis 8 Räume) - Sonderarbeiten (Checkboxen: Decke streichen, Türen lackieren, Fensterrahmen, Tapete entfernen) Berechnung: - Basispreis: [X Euro] pro Quadratmeter - Sonderarbeit Decke: +[X Euro] pro Quadratmeter - Sonderarbeit Türen: +[X Euro] pro Tür (1 pro Raum) - Sonderarbeit Fenster: +[X Euro] pro Fenster (1 pro Raum) - Sonderarbeit Tapete entfernen: +[X Euro] pro Quadratmeter Ausgabe: Geschätzter Preisbereich von X bis Y Euro (Spanne +/- 15%). Unter dem Ergebnis: Ein „Verbindliches Angebot anfragen"-Button der eine mailto-URL öffnet mit den Rechnerdaten als vorbefülltem Betreff. Design: Weiss und [Akzentfarbe], professionell, mobile-first, große Touch-Targets. Keine Emojis.

Was jetzt passiert: Claude erstellt einen funktionierenden Rechner mit deinen echten Preisen, in deinem Farbschema, mit konkretem CTA. Du siehst das Ergebnis sofort im Artefakt-Preview.

Schritt 3: Iteration

Das Ergebnis wird nicht perfekt sein — und das ist der Punkt. Jetzt folgt der Feinschliff:

Ändere den Button-Text zu „Kostenlose Beratung anfragen". Mach die Preisspanne etwas breiter (+/- 20%). Füge unter dem Ergebnis einen Hinweis ein: „Diese Schätzung ersetzt kein verbindliches Angebot. Rufen Sie uns an für eine genaü Kalkulation: [Telefonnummer]".

So iterierst du weiter, bis der Rechner genau passt. Jede Anpassung dauert Sekunden, nicht Stunden.

Vom Artefakt auf die eigene Website

Der Rechner funktioniert im Claude-Artefakt — aber wie kommt er auf deine Website?

Option 1: Download und einbetten. Claude-Artefakte lassen sich als HTML-Datei herunterladen. Diese Datei kannst du direkt auf deinen Webserver laden oder in ein CMS wie WordPress per Custom-HTML-Block einfügen.

Option 2: Iframe-Einbettung. Lade die HTML-Datei auf einen kostenlosen Hoster (z.B. Netlify Drop — kein Account nötig), kopiere die URL und binde sie per Iframe in deine Seite ein.

Option 3: Code kopieren. Wenn deine Website einen HTML-Editor hat (WordPress, Shopify, Wix), kopiere den HTML-Code aus dem Artefakt direkt in einen Custom-Code-Block. Bei Shopify funktioniert das über einen Custom-Liquid-Block, bei WordPress über den Custom-HTML-Block im Gutenberg-Editor.

Für alle drei Optionen gilt: Der Rechner ist reines HTML, CSS und JavaScript — keine externen Abhängigkeiten, keine Datenbank, keine Server-Kosten. Er funktioniert überall, wo ein Browser laüft.

Praxistipp

Teste den Rechner auf deinem Smartphone bevor du ihn einbindest. Über 60 Prozent der lokalen Suchen kommen vom Handy. Wenn der Rechner auf einem kleinen Bildschirm nicht bedienbar ist, verlierst du genau die Kunden, die du gewinnen willst.

Beispiele: Kostenrechner für verschiedene Branchen

Kostenrechner funktionieren nicht nur für Maler. Jede Branche mit kalkulierbaren Leistungen profitiert davon.

Elektriker: Eingabe: Anzahl Steckdosen/Schalter, Neubau oder Sanierung, Raumanzahl. Ausgabe: Preisbereich für Elektroinstallation.

Gartenlandschaftsbau: Eingabe: Gartengrösse, Leistung (Rasen anlegen, Terrasse, Bepflanzung, Zaun). Ausgabe: Geschätzte Kosten pro Leistungsbereich.

Umzugsunternehmen: Eingabe: Wohnungsgrösse, Etage, Entfernung, Einpackservice ja/nein. Ausgabe: Preisrange für den Umzug.

Webdesign / Freelancer: Eingabe: Seitenanzahl, Funktionen (Kontaktformular, Shop, Blog, SEO), Design-Aufwand. Ausgabe: Projektkosten-Bereich.

Coaching / Beratung: Eingabe: Thema, Anzahl Sitzungen, Einzel oder Gruppe. Ausgabe: Investition pro Paket.

Allen gemeinsam: Der Rechner qualifiziert Anfragen vor, spart Beratungszeit und baut Vertrauen auf — bevor der Kunde zum Hörer greift. Und dank der Verlinkung mit dem Local SEO Leitfaden kannst du den Rechner direkt in deine lokale SEO-Strategie einbinden — als Conversion-Element auf der Leistungsseite.

Häufig gestellte Fragen

Frequently Prompted Tipps: Probier's aus in Claude

Copy-paste-fertige Prompts für verschiedene Rechner-Typen. Öffne claude.ai, ersetze die Platzhalter — fertig.

Handwerk

Kostenrechner Malerarbeiten

Erstelle ein HTML-Artefakt: Kostenrechner für Malerarbeiten. Eingaben: Fläche (m², Slider 10-200), Räume (1-8), Sonderarbeiten (Checkboxen: Decke, Türen, Fenster, Tapete entfernen). Formel: Basispreis 12 Euro/m² + Decke 8 Euro/m² + Türen 45 Euro/Stück + Fenster 35 Euro/Stück + Tapete 6 Euro/m². Ausgabe: Preisrange +/-15%. CTA-Button „Angebot anfragen" mit mailto-Link. Design: Weiss, grün, mobile-first.

Der Klassiker für Maler und Lackierer. In 5 Minuten fertig, sofort einsetzbar.

Handwerk

Kostenrechner Elektroinstallation

Erstelle ein HTML-Artefakt: Kostenrechner Elektroinstallation. Eingaben: Neubau oder Sanierung (Radio-Buttons), Anzahl Räume (1-15), Steckdosen pro Raum (2-8), Smart-Home-Vorbereitung (ja/nein). Formel: Neubau Basis 85 Euro/Raum + 25 Euro/Steckdose. Sanierung +40%. Smart Home +120 Euro/Raum. Ausgabe: Preisrange +/-20%. CTA: Telefonnummer als klickbarer Button. Mobile-first.

Für Elektriker die ihre Leistungsseiten mit einem Conversion-Tool aufwerten wollen.

Dienstleistung

Kostenrechner Umzug

Erstelle ein HTML-Artefakt: Umzugskostenrechner. Eingaben: Wohnungsgrösse (Dropdown: 1-Zimmer bis 5-Zimmer), Etage (0-5+, Aufzug ja/nein), Entfernung in km (Eingabefeld), Einpackservice (ja/nein). Formel: Basis je Wohnungsgrösse (400/600/900/1200/1600 Euro) + Etage ohne Aufzug 50 Euro/Etage + 1.50 Euro/km + Einpackservice 300 Euro. Ausgabe: Von-Bis mit +/-15%. Button: „Unverbindliches Angebot". Sauber, professionell.

Einer der meistgesuchten Rechner — perfekt für Umzugsunternehmen mit lokaler Website.

Freelancer

Projektkostenrechner Webdesign

Erstelle ein HTML-Artefakt: Projektkostenrechner für Webdesign. Eingaben: Seitenanzahl (1-20, Slider), Features (Checkboxen: Kontaktformular +200, Shop-Integration +800, Blog +400, SEO-Grundoptimierung +500, mehrsprachig +600), Design-Level (Radiobuttons: Template 500, Custom 1500, Premium 3000). Ausgabe: Gesamtkosten + monatliche Wartungspauschale (5% vom Projektpreis). CTA: „Projekt besprechen". Dunkel, modern, mobile-first.

Zeigt Kunden transparent, wie sich Webdesign-Kosten zusammensetzen — baut Vertrauen auf.

Garten

Kostenrechner Gartengestaltung

Erstelle ein HTML-Artefakt: Kostenrechner Gartengestaltung. Eingaben: Gartengrösse in m² (Slider 20-500), Leistungen (Checkboxen: Rasen anlegen 8 Euro/m², Terrasse 65 Euro/m², Bepflanzung 15 Euro/m², Zaun 45 Euro/lfm mit separatem Feld für Meter). Ausgabe: Aufgeschlüsselt nach Leistung + Gesamtsumme als Range. Button: „Beratungstermin vereinbaren" mit tel:-Link. Grün-weiß, natürlich, mobile-first.

Gartenlandschaftsbaür heben sich durch Preistransparenz von der Konkurrenz ab.

Conversion

Rechner mit Lead-Capture

Erstelle ein HTML-Artefakt: Kostenrechner für [Branche]. Nach der Berechnung: Ergebnis wird erst angezeigt, wenn der Nutzer Name und E-Mail-Adresse eingibt. Unter dem Formular: „Wir senden Ihnen das Ergebnis und ein unverbindliches Angebot per E-Mail." Button: „Ergebnis erhalten". Hinweis: „Ihre Daten werden nicht an Dritte weitergegeben." Formular sendet per mailto an [E-Mail]. DSGVO-Hinweis unter dem Formular.

Verwandelt den Rechner in ein Lead-Gen-Tool. Nur einsetzen wenn du die Leads auch nachfasst.

Quellen