03 · Apps · Workflows · Frontends
Drei Phasen, ein Werkzeug-Kasten, eine Token-Ökonomie, die über Erfolg oder Geldgrab entscheidet. Hier ist alles, was du brauchst, um dein erstes Produkt selbst zu bauen.
Wir haben keine Partnerschaften mit den hier genannten Anbietern. Wir empfehlen, was wir selbst nutzen.
Setup
Erst die Werkzeuge, dann das Konzept. Wir gehen die Reihenfolge durch, in der wir selbst starten — Account, App, Editor, Repo, Regeln, Skills, MCPs. Eine Stunde Setup, dann nie wieder daran denken.
Anthropic-Account mit aktivem Abo ist die Basis. Ein Plan reicht — Pro für den Start, Max wenn du längere Sessions oder mehr Token-Budget brauchst. Ohne aktives Abo kein Cowork und kein Claude Code.
Cowork lebt als dritter Tab innerhalb der Claude Desktop App — du brauchst keine separate App. In Cowork beschreibst du, was dein Produkt können soll, und die KI fragt so lange, bis das Konzept steht. Am Ende fällt eine Markdown-Datei raus, die du in Phase 2 an Claude Code übergibst.
Das Bau-Werkzeug für Phase 2. Zwei Setup-Wege: Terminal (maximal flexibel) oder VS Code (Code, Terminal und Claude in einem Fenster) — Output ist derselbe. Sicherheits-Tipp: bestenfalls auf einem separaten Computer arbeiten, auf dem keine persönlichen Daten liegen. Claude Code bekommt vollen Datei-Zugriff, das sollte sauber getrennt sein.
npm install -g @anthropic-ai/claude-codeBackup nach jedem Sprint. API-Keys, interne Notizen und frühe Architektur-Skizzen bleiben unter Verschluss. Vercel und Netlify deployen direkt aus GitHub heraus — der Workflow lohnt sich also doppelt.
git init
git remote add origin git@github.com:dein-user/dein-repo.git
echo ".env" >> .gitignoreIn jedem Projektordner liegt eine Datei namens CLAUDE.md. Sie ist das Regelwerk für deine Sessions. Wie du arbeitest, welcher Stack genutzt wird, welche Pflicht-Checks (DSGVO, Performance, Barrierefreiheit) immer laufen, was tabu ist. Claude Code liest sie bei jedem Start automatisch. Ohne CLAUDE.md fängt die KI bei jedem Mal von vorne an.
Skills sind Ordner mit einer Anleitung (Markdown) plus optionalen Skripten. Claude lädt sie nur dann, wenn sie zur aktuellen Aufgabe passen. Vier Skills lohnen sich von Tag 1: UI/UX Design (Komponenten, Layouts, Design-Tokens), Superpowers (Planung, Brainstorming, Test-Driven Development), Code Review (zweiter Blick, bevor du committest) und Memory (CLAUDE.md-Pflege und Lessons-Learned-Tracking über Sessions hinweg).
/plugin install ui-ux-pro-max@anthropic
/plugin install superpowers@anthropic
/plugin install code-review@anthropic
/plugin install memory@anthropicMCPs (Model Context Protocol) geben Claude Zugriff auf deine Welt — Dateien, GitHub, Datenbank, Browser. Drei für den Start: Filesystem (Claude baut in deinem Projekt), GitHub (Claude wird Team-Mitglied), Context7 (aktuelle Doku statt veralteter Halluzinationen). Brauchst du ein Backend, häng Supabase dran (Datenbank, Auth, Storage). Tipp: am Projekt-Start frag deine Planungs-Session (Cowork oder Superpowers), welche MCPs dein konkreter Use-Case wirklich braucht — sonst sammelst du Zeug, das nichts tut.
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /pfad/zum/projekt
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"
claude mcp add context7 --transport http https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: ctx7sk_..."
claude mcp add supabase -- npx -y @supabase/mcp-server-supabase --access-token YOUR_SUPABASE_PATB · Slash-Befehle und Modi
Slash-Befehle räumen den Kontext auf und steuern Claude Code. Drei Modi entscheiden, wie selbständig Claude arbeitet.
/clearKontext leeren zwischen verschiedenen Aufgaben — spart Tokens.
/compactVerlauf zusammenfassen, wenn die Session zu lang wird.
/debugSystematisches Debugging. Reproduktion, Hypothese, Test, Fix-Vorschlag.
/planPlan-Mode aktivieren. Claude analysiert die Aufgabe und schreibt einen Plan, bevor er codet.
/dreamBrainstorming- und Ideation-Modus. Claude denkt frei laut mit, ohne direkt zu coden.
/initProjekt einrichten, CLAUDE.md anlegen, Defaults setzen.
/rewindZurück zu einem früheren Stand — Checkpoint wiederherstellen.
/pluginPlugin installieren oder verwalten, MCP-Server hinzufügen.
/usageAktuellen Token-Verbrauch checken.
Claude recherchiert und schlägt einen Plan vor, bevor Code geschrieben wird. Du liest gegen, sagst „passt“, erst dann legt er los.
Wann nutzt du es: Bei allem, was nicht trivial ist. Standard für jedes neue Feature.
Claude führt eine bestätigte Aufgabe direkt aus, ohne erneut zu fragen. Schritt für Schritt, mit Sichtbarkeit auf Tool-Calls.
Wann nutzt du es: Wenn der Plan steht und du nur noch das Ergebnis willst.
Claude arbeitet autonom durch, fragt nicht zwischendurch. Risikoreicher, aber schneller.
Wann nutzt du es: Bei klaren, kleinen Aufgaben oder wenn du Sprint-Power brauchst.
Die drei Phasen
Egal, ob du eine Web-App, eine iOS-App oder eine kleine Automatisierung baust. Der Weg ist immer derselbe. Du planst, du baust, du testest. Wir machen das an unserem eigenen Tool durch, dem KI-Bundestrainer, und du gehst die gleichen drei Schritte für deine Idee.
Werkzeug · Claude Cowork
Werkzeug · Claude Code
Werkzeug · Browser, Simulator, Logs
Hauptwerkzeug: Claude Cowork.
Du beschreibst, was deine App können soll, und gibst Claude den Auftrag, dich so lange zu fragen, bis das Konzept steht. Am Ende generiert Claude eine Markdown-Datei mit dem fertigen Konzept. Sie ist dein Briefing für die Programmierphase.
Standard-Prompt für Claude Cowork (anpassen und kopieren):
Ich möchte eine [Web-App / iOS-App / Android-App] bauen.
Folgende Funktionen soll sie haben:
[hier Funktionen beschreiben]
Die Zielgruppe ist:
[hier Zielgruppe beschreiben]
Stelle mir so lange Fragen zu Funktionen, Edge-Cases und Zielgruppe, bis du das Konzept vollständig verstanden hast.
Kläre mit mir außerdem die Daten- und Architektur-Seite:
- Welche Daten speichert und verarbeitet die App?
- Welche davon sind kritisch (sensibel, vertraulich, regulatorisch heikel — z. B. Gesundheit, Finanzen, persönliche Notizen)?
- Welche Daten müssen WIR als Betreiber ownen (Server, Datenbank, Backups)?
- Welche Daten sollten ausschließlich dem Nutzer gehören (nur lokal auf dem Gerät, Ende-zu-Ende-verschlüsselt, niemals auf unseren Servern)?
- Welche Software-Architektur passt dazu (reine Frontend-App mit Local Storage, Backend mit Auth + Datenbank, E2E-verschlüsselter Sync …)?
Baue dann eine Markdown-Datei mit dem fertigen Konzept, die ich im nächsten Schritt mit Claude Code teilen kann.Du musst heute nicht selbst coden können. Ein Grundverständnis für Software-Architektur lohnt sich trotzdem. Die spannendste Frage dabei ist fast immer: Was passiert eigentlich mit den Daten? Welche landen auf deinen Servern, welche nur auf dem Gerät des Nutzers, welche dürfen den Browser nie verlassen?
Sobald du eine App baust, in der kritische Daten verarbeitet werden (Gesundheit, Finanzen, Tagebuch, Kund:innen-Daten), triffst du diese Architektur-Entscheidung bewusst, bevor die erste Zeile Code geschrieben wird. Genau dafür ist der Datenblock im Prompt oben.
Dein Werkzeug: Claude Code. Details zum Setup, zu Slash-Befehlen und zum Plan-Modus stehen in Sektion B.
Workflow:
Standard-Prompt für Claude Code (kopieren und einsetzen):
Lies die Markdown-Datei, die ich im Projektordner abgelegt habe.
Baue auf Basis dieses Konzepts die Applikation. Wenn du Fragen hast, stelle sie mir bitte, bevor du anfängst.
Bitte programmiere die App in mehreren Sprints — wir machen immer nur einen klar abgegrenzten Teil auf einmal. Sag mir am Ende jedes Sprints, was du gebaut hast und was als Nächstes ansteht.
Wichtig:
- Plan-Modus vor jeder größeren Änderung. Erst Plan, dann meine Bestätigung, dann Code.
- Sprich Pflicht-Checks aktiv an: DSGVO, Performance, Mehrsprachigkeit, Barrierefreiheit.
- Schlag nach jedem Meilenstein einen Commit-Befehl vor (private Repo auf GitHub).Bis hierhin ist es einfach. Du sprichst mit der KI, sagst, was sie tun soll, und die KI erledigt den Rest. Test und Optimierung sind der spannendste Teil. Hier geht es um echte Problemlösung. Funktioniert die UX, auch wenn der Nutzer etwas Unerwartetes tut? Liefert dein Tool die Antworten, die es soll, oder halluziniert das Modell? Wie hoch sind die Token-Kosten pro Aufruf?
Die Details zu Token-Ökonomie, Halluzinationen und Timeouts findest du in Sektion G. Hier nur die typischen Fragen, die in dieser Phase auftauchen:
Skills
Skills sind Ordner mit einer Anleitung (Markdown) plus optionalen Skripten. Claude lädt sie nur dann, wenn sie zur aktuellen Aufgabe passen. Das hält den Kontext schlank und macht wiederkehrende Aufgaben reproduzierbar.
Abgrenzung in einem Satz:
claude mcp add <name>./plugin install <name>@<marketplace>.Wo Skills liegen: ~/.claude/skills/ (persönlich), .claude/skills/ (projektweit), oder gebündelt im Plugin.
Pro Karte: Was, Install, Beispiel-Use-Case.
Was · Analysiert eine bestehende Codebase und empfiehlt passende Hooks, Skills, MCP-Server und Subagents.
Install
/plugin install claude-code-setup@claude-plugins-officialUse-Case: Erste Session in einem neuen Repo. Der Skill schlägt dir die richtigen Automatisierungen für deinen Stack vor („du hast Next.js + Supabase → installiere XYZ“).
Was · Pflegt und auditiert die CLAUDE.md-Projekt-Memory, fängt Lessons-Learned aus jeder Session ein.
Install
/plugin install claude-md-management@claude-plugins-officialUse-Case: Nach zwei bis drei Wochen am gleichen Projekt wirkt Claude vergesslich. Der Skill schreibt die wichtigsten Regeln in die CLAUDE.md zurück.
Was · Anthropic-Skill für persistente Memory über Sessions hinweg. Speichert Entscheidungen, Lessons-Learned und Projekt-Kontext.
Install
/plugin install memory@anthropicUse-Case: Nach jeder Session erinnert sich Claude beim nächsten Start, was zuletzt funktioniert hat und welche Wege Sackgassen waren.
Was · Anthropic-Skill für UI/UX-Design — generiert Komponenten, achtet auf Design-System-Konsistenz, Typografie, Spacing und Barrierefreiheit.
Install
/plugin install ui-ux-pro-max@anthropicUse-Case: Du beschreibst eine Sektion oder Komponente, der Skill liefert produktionsreifen Code, der wirklich nach Design aussieht.
Was · UI/UX-Implementierung — generiert Layouts, prüft Design-Konsistenz, baut Komponenten.
Install
/plugin install frontend-design@claude-plugins-officialUse-Case: Du beschreibst „eine Pricing-Seite im Bento-Grid-Stil“, der Skill liefert produktionsreife React/HTML-Komponenten mit echtem Design-Niveau.
Was · Kompletter Feature-Workflow mit spezialisierten Agents für Codebase-Exploration, Architektur-Design und Quality-Review.
Install
/plugin install feature-dev@claude-plugins-officialUse-Case: „Ich will Multi-Tenant-Support einbauen.“ Der Skill exploriert die Codebase, schlägt eine Architektur vor, implementiert, reviewed.
Was · Automatisierter Code-Review mit mehreren spezialisierten Subagents (Security, Tests, Quality) parallel.
Install
/plugin install code-review@claude-plugins-officialUse-Case: Du hast einen PR fertig. /code-review lässt mehrere Reviewer-Agents laufen und gibt eine Liste echter Issues zurück.
Was · Slash-Commands für git commit, git push und PR-Erstellung mit sauberen Messages.
Install
/plugin install commit-commands@claude-plugins-officialUse-Case: Du hast zehn Änderungen gemacht und willst sie sauber committen. /commit schreibt Message, staged, committet — alles in einem Schritt.
Was · Holt aktuelle, versionsspezifische Doku direkt aus Source-Repos in den Claude-Kontext.
Install
/plugin install context7@claude-plugins-officialUse-Case: „Wie funktioniert der neue Server-Components-Pattern in Next.js 16?“ context7 holt die aktuelle Doku statt zu raten.
Was · Web-Suche aus Claude heraus — recherchiert aktuelle Fakten, prüft Aussagen gegen echte Quellen, gibt Links zurück. Das beste Mittel gegen Halluzinationen bei aktuellen Themen.
Install
/plugin install web-search@anthropicUse-Case: Aktueller Preis eines Modells, frische Library-Version, ist eine Behauptung wirklich noch wahr? Statt zu raten lässt Claude suchen und zeigt die Quelle.
Was · React-basierte programmatische Videos — du codest Animationen wie eine Komponente, Remotion rendert daraus ein MP4. Gut für Tutorials, Produkt-Demos, Social-Clips.
Install
/plugin install remotion@claude-plugins-communityUse-Case: Onboarding-Video für deine App: Claude baut die Remotion-Komposition mit Text, Bewegung und Sound, du renderst das Endprodukt mit einem Befehl.
Was · Hook-basierte Sicherheitswarnungen beim Editieren. Warnt vor Command-Injection, XSS, unsicheren Patterns.
Install
/plugin install security-guidance@claude-plugins-officialUse-Case: Du baust ein Formular oder einen API-Endpunkt. Der Hook erinnert dich an typische Lücken — passiv, ohne den Workflow zu stören.
Was · Hilft dir, eigene Skills zu bauen, bestehende zu verbessern und mit Evals zu testen.
Install
/plugin install skill-creator@claude-plugins-officialUse-Case: Du tippst zum dritten Mal dieselbe Anweisung („formatier alle Inputs nach unserem Style“). skill-creator macht daraus einen wiederverwendbaren /format-input-Skill.
Offizielle Marketplaces
claude-plugins-official
Automatisch in Claude Code verfügbar.
claude-plugins-community
Community-Marketplace, manuell hinzufügen.
/plugin marketplace add anthropics/claude-plugins-communityMCPs
Irgendwann willst du mehr als Antworten. Du willst, dass Claude deine Dateien anfasst, in deinem GitHub committet, eine Datenbank abfragt, Screenshots im Browser macht. Dafür gibt es MCP — das Model Context Protocol. Ein offener Standard, eine Art einheitlicher Anschluss für KI. Jeder MCP-Server stellt Werkzeuge bereit, die die KI nach deiner Freigabe nutzen darf.
Setup-Grundlage:
claude mcp add <name> ... zum Hinzufügen, /mcp zur Verwaltung.Pro Karte: Was, Setup-1-Liner, Sicherheits-Hinweis, Link.
Was · Geregelter Lese-/Schreibzugriff auf bestimmte lokale Ordner. Die Grundlage für „Claude baut in meinem Projekt“.
Setup
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /pfad/zum/projektSicherheit: Nur konkrete Projektordner whitelisten. Nie / oder ~. Keine .env, Keys oder SSH-Ordner einbinden.
Repo / DokuWas · Repos lesen, Issues und PRs erstellen, Reviews schreiben, Actions triggern. Claude wird zum Team-Mitglied.
Setup
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"Sicherheit: Fine-grained PAT, nur auf die Repos beschränken, in denen Claude arbeiten soll. Token nie committen.
Repo / DokuWas · Tabellen erstellen und abfragen, Migrationen laufen lassen, Edge Functions und Auth aus Claude heraus.
Setup
claude mcp add --transport http supabase https://mcp.supabase.com/mcp (OAuth-Login im Browser)Sicherheit: Nie gegen Production verbinden. Supabase empfiehlt explizit Dev-/Staging-Projekte. read_only=true und project_ref setzen. Die häufigste MCP-Katastrophe 2025/26 war jemand, der den MCP an Prod gehängt hat.
Repo / DokuWas · Browser-Automation und E2E-Tests. Claude kann den eigenen Code im Browser anklicken, screenshotten und Fehler sehen.
Setup
claude mcp add playwright npx @playwright/mcp@latestSicherheit: Default startet eine isolierte Browser-Instanz. Eigene Login-Sessions nur dann weitergeben, wenn du genau weißt, wem du sie gibst.
Repo / DokuWas · Vollzugriff auf Chrome DevTools. Performance-Profiles, Network-Traces, Console-Logs, Lighthouse.
Setup
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestSicherheit: Wenn du an deine normale Chrome-Session andockst, sieht Claude alle eingeloggten Tabs. Für sensible Logins lieber ein Debug-Profil verwenden.
Repo / DokuWas · Liest Figma-Files (Components, Variables, Auto-Layout) und gibt Claude den Design-Kontext, um echten Production-Code statt LLM-Mockups zu schreiben.
Setup
claude plugin install figma@claude-plugins-official oder Dev-Mode-MCP in der Figma-Desktop-App aktivieren.Sicherheit: Nur Dateien teilen, die geteilt werden sollen — OAuth gibt Zugriff auf den ganzen Workspace, wenn du nicht aufpasst.
Repo / DokuWas · Liefert Claude versionsspezifische, aktuelle Doku für Libraries (React, Next.js, Tailwind …) gegen LLM-Halluzinationen mit veralteten APIs.
Setup
Remote https://mcp.context7.com/mcp mit CONTEXT7_API_KEY: ctx7sk_..., lokal: npx -y @upstash/context7-mcp --api-key ctx7sk_...Sicherheit: Lese-only. Kein Risiko über den API-Key hinaus.
Repo / DokuWas · Deployments managen, Logs lesen, Env-Variablen setzen. Claude kann eigenständig deployen und debuggen.
Setup
claude mcp add --transport http vercel https://mcp.vercel.com (OAuth-Login)Sicherheit: OAuth-Scopes prüfen. Zugriff auf Production-Deployments bewusst geben.
Repo / DokuWas · Fehler-Events, Stack-Traces und Performance-Probleme abfragen. Claude sieht, was bei deinen Nutzern crasht.
Setup
claude mcp add sentry -e SENTRY_AUTH_TOKEN=... -- npx -y @sentry/mcp-serverSicherheit: Auth-Token auf das nötige Project/Org scopen.
Repo / DokuWas · Stripe-API (Products, Prices, Customers, Subscriptions, Test-Charges) plus Suche in der Stripe-Doku. Pricing, Checkout und Subscriptions aus Claude bauen.
Setup
claude mcp add --transport http stripe https://mcp.stripe.com (OAuth im Stripe-Dashboard)Sicherheit: Strikt im Test-Mode starten. Live-Keys erst freigeben, wenn die Flows stehen. MCP-Sessions regelmäßig im Stripe-Dashboard auditen.
Repo / DokuWas · Notion-Pages und -Databases lesen und schreiben. PRDs, Specs, Knowledge-Base ohne Context-Switch ins Browser-Tab. Claude kann z. B. das aktuelle Spec aus deiner Notion lesen und direkt umsetzen.
Setup
claude mcp add --transport http notion https://mcp.notion.com/mcp (OAuth-Login im Browser)Sicherheit: OAuth-Scope auf die nötigen Workspaces beschränken. Sensible Datenbanken (HR, Finance) im Setup ausschließen.
Repo / DokuWas · Issues, Cycles und Projects abfragen oder erstellen. Roadmap-Sync, Bug-Triage und Task-Updates direkt aus Claude. Gut für Solo-Builds, in denen Issue-Tracking sonst untergeht.
Setup
claude mcp add --transport http linear https://mcp.linear.app/sse (OAuth im Browser)Sicherheit: Mit Read-only-Scope starten, Schreibrechte erst aktivieren, wenn klar ist, welche Workflows Claude triggern darf.
Repo / DokuWas · Web-Suche aus Claude heraus. Komplement zum web-search-Skill: MCP-Variante, die strukturierte Such-Ergebnisse zurückgibt und für Agenten-Workflows besser instrumentierbar ist.
Setup
claude mcp add brave-search -e BRAVE_API_KEY=... -- npx -y @modelcontextprotocol/server-brave-searchSicherheit: API-Key in einer .env, nicht hardcoden. Free-Tier hat Quota — nicht in Loops nutzen, sonst rate-limit.
Repo / DokuWas · OpenAIs Coding-Agent als MCP-Server. Claude kann Codex aus dem Editor heraus aufrufen, um den eigenen Code von einem zweiten Modell reviewen zu lassen — Cross-Model-Second-Opinions decken oft blinde Flecken auf, die ein Modell im Selbstgespräch übersieht.
Setup
claude mcp add codex -- npx -y @openai/codex-mcpSicherheit: OpenAI-API-Key in .env, nicht hardcoden. Code-Reviews sind Read-only-Operationen, aber der Key kostet pro Call — bei Loops oder großen Diffs vorher Quota checken.
Repo / DokuSie geben dem Agent eine ungebremste Shell. In Kombination mit prompt-injiziertem Input aus Web, GitHub-Issues oder Mails extrem riskant. Wenn überhaupt: in einer isolierten VM, niemals auf dem Hauptsystem.
Generic REST-Wrapper, die beliebige HTTP-Calls erlauben. Klingen praktisch, sind genau das Muster, das beim Supabase-Demo-Leak 2025 zum Datenabfluss führte.
Selbst der offizielle MCP ist gefährlich, wenn du ihn an die Live-Prod-DB hängst. Dev-Projekt, read_only=true, project_ref auf Dev.
Allgemeine Regel:
Kein MCP installieren, ohne 30 Sekunden über den Blast-Radius nachzudenken. Wenn ein bösartiger String aus einer Webseite oder einem Issue ungefiltert in den Agenten kommt — was kann der MCP im Worst Case tun?
Vibe-Coding-Tools
Weil es unnötig viel Token-Geld kostet. Vibe-Coding-Builder bringen dich auf 70 Prozent — die letzten 30 Prozent (Auth-Flows, Custom-Logik, Security) zahlst du in Credit-Loops, die schnell explodieren. Mit Claude Code geht es günstiger, und es gibt trotzdem gute Produkte da draußen.
Die Tool-Karten — Lovable, Bolt, v0, Rork, Replit, Cursor, Figma Make — haben wir auf der Tools-Seite kuratiert, samt Pricing, Stärken und Bruchstellen. Da gehört das hin.
Zu den Tool-KartenD · Anschluss-Tools
Backend, KI-Anbindung, Hosting, Automatisierung — je nach Produkt-Typ. Pro Bereich eine Empfehlung plus den Hinweis, wann du sie wirklich brauchst.
Supabase
Wann: Sobald deine App Daten speichert: Logins, Profile, Posts, Caches.
Postgres + Auth + Storage + Edge Functions in einem. EU-Region in Frankfurt. Free-Tier reicht für die ersten Projekte.
Anthropic API · OpenAI · Google Gemini
Wann: Wenn dein Produkt KI ruft (nicht nur die Coding-KI).
Über Backend-Proxy aufrufen, niemals direkt aus dem Frontend. API-Keys als Umgebungsvariable, nicht im Code.
Vercel
Wann: Wenn deine Web-App online soll.
GitHub-Repo verbinden, push, automatischer Deploy. Eigene Domain in 5 Minuten. Edge-Functions inklusive.
n8n · Make · Zapier
Wann: Für Workflows zwischen Tools — ohne eigene App.
n8n self-hosted für günstige, planbare Kosten. Make für visuelle Mittelstands-Workflows. Zapier für maximale Einfachheit.
Token-Ökonomie & Skalierung
Günstig zu bauen ist das eine. Das Tool dauerhaft zu betreiben, ohne von der Rechnung erschlagen zu werden, ist das andere. Token sind die operativen Kosten deiner KI-App. Wer Modelle, Caching und Pre-Computation nicht im Griff hat, wird beim ersten viralen Tag zum Geldgrab.
Hochrechnung: 100.000 Nutzer × 2 Generierungen × 16.000 Tokens auf einem Premium-Reasoning-Modell. Ergebnis: rund 156.000 USD pro Tag. Nach den vier Hebeln unten waren wir bei rund 65 USD pro Tag. Eine Reduktion um −99,96 Prozent.
Die vier Hebel auf einen Blick
Von 156.000 USD/Tag auf rund 65 USD/Tag. Die vier Hebel im Effekt aufeinander gestapelt:
| Hebel | Was passiert | Effekt |
|---|---|---|
| 1 · Modellwahl | Wechsel von Opus 4 auf GPT-4o-mini | −95 % Modell-Kosten |
| 2 · Pre-Computation | Daten einmal recherchieren, in DB ablegen | −98 % Web-Search |
| 3 · Caching | Wiederholungen aus dem Cache statt neu rechnen | ≈ −65 % Anfragen |
| 4 · Max-Tokens-Cap | Hartes Limit auf Output-Länge | −30 % Latenz |
Vorab · Was du beim Bauen selbst tun kannst
Token-Optimierung beginnt nicht erst beim Modell-Pricing, sondern bei deiner Arbeitsweise mit Claude Code. Drei Hebel, die sofort wirken, bevor du eine Zeile Modell-Logik anfasst:
Premium-Reasoning-Modelle (Claude Opus, GPT-4) sind für die meisten Use-Cases zu viel, wenn du strukturierte Entscheidungen aus einem vordefinierten Pool triffst. Wechsle auf Stats-optimierte Klassen (GPT-4o-mini, Claude Haiku 4.5) und du zahlst Sub-Cent pro Call statt mehrerer Cent.
Modell-Tabelle (Pricing-Bars relativ zu Opus 4 = 100 %):
| Modell | Input · 1M Tok | Output · 1M Tok | Output relativ | Einordnung |
|---|---|---|---|---|
| Claude Opus 4 | 15 USD | 75 USD | 100 % | Top-Qualität, für strukturierte Picks oft zu teuer |
| GPT-4 (Classic) | 30 USD | 60 USD | 80 % | Overkill, wenn du nur aus einem Pool wählst |
| Claude Haiku 4.5Unsere Wahl | 1 USD | 5 USD | 7 % | Unsere Wahl für Texte mit Tonalität — bester Sprachton bei Sub-Cent |
| OpenAI GPT-4o-miniUnsere Wahl | 0,15 USD | 0,60 USD | 0,8 % | Unsere Wahl für strukturierte Aufgaben — JSON, Klassifikation, Picks |
| DeepSeek V3 | 0,27 USD | 1,10 USD | 2 % | Deutsche Generierung: schwach, vor allem in Stil-/Satire-Tonarten |
| Qwen 2.5 72B | 0,35 USD | 0,40 USD | 0,6 % | Deutsche Generierung: schwach in nicht-neutralen Tonarten |
| Gemini 2.0 Flash | 0,10 USD | 0,40 USD | 0,5 % | Sehr günstig, aber Schema-Fails bei strikten JSON-Requirements |
Listenpreise gerundet. Chinesische Modelle sind nominal günstig, aber bei deutscher Sprachgenerierung in bestimmten Tonarten (z. B. Satire) unbrauchbar. Die Wortwahl kippt schnell ins Generische.
Praxis-Tipp: Modelle parallel einsetzen. Beim KI-Bundestrainer nutzen wir Anthropic für Texte mit Stilgefühl (Satire, Stellungnahmen) und OpenAI für strukturierte Aufgaben (Kader-Auswahl). Das spart Geld und liefert für jeden Use-Case das passende Werkzeug.
Daten, die sich selten ändern, recherchierst du einmal und legst sie in einer Datenbank ab. Die KI greift beim Generieren nur noch darauf zu, statt bei jedem Call erneut zu suchen. Live-Daten holst du in größeren Intervallen (z. B. einmal pro Tag), nicht pro User-Anfrage.
Beispiel: Beim KI-Bundestrainer haben wir die 108 Kandidaten einmal recherchiert. Aktuelle Form, Verletzungen und Gegner-Analyse holen wir einmal pro WM-Spiel.
Effekt · −98 Prozent Web-Search-Kosten.
Wenn zwei User dasselbe anfragen, soll die KI nicht zweimal rechnen. Speichere bei jeder Anfrage die Eingaben plus das Ergebnis. Bei einer Wiederholung lieferst du das Ergebnis aus dem Cache, statt die KI erneut zu starten.
Effekt · Rund 65 Prozent der Anfragen entfallen komplett, je nach Anwendungsfall sogar mehr.
Bonus: Prompt-Caching beim Provider
Prompt-Caching beim Provider. Sowohl Anthropic als auch OpenAI cachen wiederkehrende Prompt-Teile (System-Prompts, feste Anleitungen) automatisch. Cache-Treffer kosten bei Anthropic etwa ein Zehntel des normalen Input-Preises — bis zu 90 Prozent Ersparnis. Bau deinen Prompt so, dass der stabile Teil nach vorne kommt und der variable User-Input nach hinten.
Modelle dürfen oft „bis zu 16.000 Output-Tokens“ und nutzen das gerne als Freifahrtsschein zum Nachdenken, selbst wenn der Output deutlich kürzer wäre. Setze ein hartes Cap (z. B. 7.000). Das Modell interpretiert das als Budget-Signal und kürzt automatisch. Kein Qualitätsverlust, weil das echte Output-Volumen meist drunter liegt.
Effekt · −30 Prozent Latenz, nebenbei weniger Timeouts.
Fortgeschritten
Vier Konzepte, die du nicht von Tag 1 brauchst, die dein Setup aber schärfer machen, sobald du regelmäßig baust.
Plugins bündeln Skills, Subagents, Hooks und MCP-Server in einem Paket. Installation über /plugin install [name]@[marketplace]. Marketplaces sind Repos auf GitHub, die du als Quelle hinzufügst. So holst du dir komplette Workflows mit einem Befehl.
Hooks sind kleine Automatiken, die bei bestimmten Ereignissen feuern — vor oder nach einem Tool-Aufruf, vor einem Commit, beim Edit einer Datei. Damit erzwingst du Verhalten, das du sonst manuell triggern müsstest („vor jedem Commit die Tests laufen lassen“, „beim Editieren einer Auth-Datei eine Security-Warnung zeigen“).
Permissions legen fest, was Claude ohne Rückfrage darf und was nicht. Drei Stufen: erlauben, fragen, verbieten. Wichtig, sobald die KI selbstständig läuft (Auto-Mode, Subagents, Hooks). Defaults sind sicher, aber du kannst sie pro Projekt schärfen — etwa Filesystem-Writes nur in bestimmten Ordnern, keine Shell-Befehle ohne Bestätigung.
Das Agent SDK ist der Weg, Claude direkt in dein fertiges Produkt einzubauen. Aus dem Konsolen-Tool wird ein Agent, der in deiner App lebt. Du baust eigene Werkzeuge, definierst System-Prompts, gibst dem Agenten Zugriff auf deine Datenbank — und Endnutzer reden mit Claude über deine Oberfläche statt über die Konsole.
Deine Bauen-Challenge
Nur wenn du KI selbst nutzt, verstehst du, wie sie funktioniert. Ein kleines Tool, ein Wochenend-Experiment, ein internes Skript. Egal. Du musst kein Techie werden. Du musst nur einmal angefangen haben.
Wähle eine Form: Web-App, iOS-App, kleine Automatisierung oder Workflow. Geh durch die drei Phasen aus Sektion A — Planung mit Claude Cowork, Programmierung mit Claude Code, Test im Browser oder Simulator. Plane ein Wochenende ein. Du wirst überrascht sein, wie weit du kommst.
Empfehlungen für dieses Thema
Creators und Newsletter, die zu diesem Cluster thematisch passen. Quereinstieg von außen, kuratiert von uns.
Vorne dabei beim Bauen mit Claude Code. Tiefe Praxis-Insights und eine eigene Academy (SKAILE) für alle, die ernsthaft mit KI Software bauen wollen.
Weiter zur nächsten Station
Automatisierung bauen mit KI
Workflows planen, dann mit Claude Code umsetzen. n8n + Hetzner — günstig, schnell, dein.