30 Vibe-Coding-Projekte für Anfänger: Ideen und Beispiele mit Claude Code

Die besten Vibe-Coding-Projekte für Anfänger sind kleine Browser-Apps mit sofort sichtbarem Ergebnis: ein Rechner, ein Timer, ein Pfandrechner oder ein Quiz. Du beschreibst Claude Code in normalen Sätzen, was die App tun soll, testest sie im Browser und verbesserst sie Schritt für Schritt. Hier findest du 30 Ideen, sortiert nach Schwierigkeit, plus fünf Beispiele mit offenen deutschen Daten.

Was ist Vibe Coding und warum passt es zu Anfängern?

Vibe Coding heißt: Du beschreibst einer KI in Alltagssprache, was ein Programm tun soll, und die KI schreibt den Code. Du liest nicht jede Zeile, sondern prüfst das Ergebnis, indem du die App benutzt. Genau deshalb eignet sich die Methode für Menschen, die noch nie programmiert haben.

Der Begriff ist jung. Andrej Karpathy, Mitgründer von OpenAI, hat ihn am 2. Februar 2025 in einem Beitrag auf X geprägt. Er beschrieb dort, wie er sich den "Vibes" hingibt und vergisst, dass der Code überhaupt existiert. Neun Monate später, am 6. November 2025, wählte das Wörterbuch Collins "vibe coding" zum Wort des Jahres 2025. Die Begründung: Die Nutzung des Begriffs sei seit Februar stark gestiegen.

Auch unter Profis ist KI im Alltag angekommen. In der Entwicklerumfrage von Stack Overflow vom 29. Juli 2025, mit über 49.000 Antworten aus 177 Ländern, gaben 84 % an, KI-Werkzeuge zu nutzen oder nutzen zu wollen. Gleichzeitig sagten fast 77 %, dass Vibe Coding kein Teil ihrer beruflichen Entwicklungsarbeit ist, und 46 % vertrauen der Genauigkeit von KI-Ergebnissen nicht.

Was heißt das für dich? Vibe Coding ist ein hervorragender Weg, um eigene kleine Werkzeuge zu bauen und zu verstehen, wie Software entsteht. Für ein Produkt mit Kundendaten oder Zahlungen reicht es allein nicht. Für die 30 Projekte in diesem Artikel ist es genau richtig: Sie laufen im Browser, speichern höchstens ein paar Daten lokal und richten keinen Schaden an, wenn etwas schiefgeht.

Das Wichtigste in Kürze

• Starte mit einem Projekt, das in einer einzigen HTML-Datei im Browser läuft.
• Beschreibe zuerst das Ergebnis, dann die Bedienung, dann das Aussehen.
• Baue eine Funktion nach der anderen und teste nach jeder Änderung.
• Offene deutsche Daten wie die Euro-Referenzkurse der EZB oder die Wetterdaten des DWD machen aus einer Übung ein nützliches Werkzeug.
• Prüfe jedes Ergebnis selbst: 46 % der befragten Profis misstrauen der Genauigkeit von KI-Ausgaben.
• Lege nie echte persönliche Daten oder API-Schlüssel in ein öffentliches Projekt.

Welche Vibe-Coding-Projekte eignen sich für den Einstieg?

Für den Einstieg eignen sich Apps mit einer einzigen Aufgabe und sofortigem Feedback: Rechner, Zähler, Timer und Generatoren. Du siehst nach dem ersten Prompt, ob es funktioniert, und lernst dabei, deine Wünsche präzise zu formulieren.

Diese zehn Vibe-Coding-Ideen sind bewusst klein gehalten:

1. Einfacher Rechner: Plus, Minus, Mal und Geteilt mit anklickbaren Tasten.
2. Zufallszitat-Generator: Ein Klick zeigt ein neues Zitat aus einer Liste, die du selbst festlegst.
3. Küchen-Timer: Countdown mit Tonsignal, zum Beispiel für die Nudeln.
4. Währungsrechner: Euro in Dollar, Pfund oder Franken. Als Ausbaustufe holt er die Euro-Referenzkurse der Europäischen Zentralbank, die an Arbeitstagen gegen 16 Uhr MEZ für 29 Währungen erscheinen.
5. Einfache To-do-Liste: Aufgaben anlegen, abhaken und löschen.
6. Passwort-Generator: Erzeugt zufällige Passwörter mit wählbarer Länge.
7. Klick-Zähler: Ein Knopf, eine Zahl. Das kleinste sinnvolle Projekt überhaupt.
8. Digitale Uhr: Zeigt die aktuelle Uhrzeit sekundengenau an.
9. Trinkgeld-Rechner: Rechnungsbetrag eingeben, Prozentsatz wählen, Betrag pro Person teilen.
10. Zufallsfarben-Generator: Wechselt die Hintergrundfarbe und zeigt den Farbcode an.

Der Klick-Zähler ist der beste allererste Versuch. Er besteht aus einem Knopf und einer Zahl, und trotzdem lernst du daran die drei Grundbausteine jeder App: etwas anzeigen, auf eine Eingabe reagieren, einen Zustand merken. Wenn er läuft, bitte Claude Code um eine zweite Funktion, etwa einen Knopf zum Zurücksetzen. So spürst du sofort, wie Vibe Coding funktioniert: beschreiben, ausprobieren, nachbessern.

Wie öffnest du so ein Projekt überhaupt? Bitte Claude Code, alles in eine einzige Datei namens index.html zu schreiben. Diese Datei öffnest du per Doppelklick, und sie erscheint in Chrome, Firefox, Safari oder Edge. Es gibt nichts zu installieren und keinen Server einzurichten. Wenn du etwas änderst, lädst du die Seite neu und siehst sofort das Ergebnis. Genau diese Einfachheit macht die ersten zehn Projekte so geeignet.

Die To-do-Liste zeigt besonders gut, wie ein kleines Projekt in Stufen wächst. Version 1: Aufgaben anlegen und löschen. Version 2: erledigte Aufgaben abhaken. Version 3: Aufgaben bleiben nach dem Schließen des Browsers erhalten, weil sie lokal gespeichert werden. Version 4: Kategorien wie Arbeit, Privat und Einkauf. Version 5: ein Filter nach Kategorie. Version 6: ein dunkles Design. Version 7: eine kleine Statistik, wie viele Aufgaben du diese Woche erledigt hast. Sieben Stufen, sieben kurze Prompts, und am Ende steht ein Werkzeug, das du wirklich benutzt.

Beim Währungsrechner lohnt ein Hinweis, den die EZB selbst gibt: Die Referenzkurse dienen nur zur Information, für echte Transaktionen rät sie ausdrücklich davon ab. Für einen Reise-Rechner sind sie ideal, für deine Buchhaltung nicht.

Welche Vibe-Coding-Beispiele passen zum Alltag in Deutschland?

Die besten Beispiele nutzen offene deutsche Daten oder deutsche Alltagsregeln, weil du das Ergebnis dann wirklich benutzt. Ein Werkzeug, das du jede Woche öffnest, bringt dir mehr bei als ein Übungsprojekt, das nach einem Abend in der Schublade landet.

Fünf Bonus-Ideen, die es so nur hierzulande gibt:

• Pfandrechner: Du tippst ein, wie viele Flaschen und Dosen im Keller stehen, und siehst den Betrag. Die Regeln sind klar: Einwegpfand beträgt laut Verbraucherzentrale immer 25 Cent, Mehrwegpfand meist 8 Cent bei Bier und 15 Cent bei anderen Flaschen.
• Tankpreis-Vergleich: Die Plattform Tankerkönig stellt die Spritpreise der Markttransparenzstelle für Kraftstoffe (MTS-K) beim Bundeskartellamt als kostenlose Schnittstelle bereit, unter der Lizenz CC BY 4.0. Du brauchst dafür einen API-Schlüssel und musst die Quelle nennen.
• Wetter-Widget: Bright Sky macht die offenen Daten des Deutschen Wetterdienstes als freie JSON-Schnittstelle nutzbar, ohne API-Schlüssel. Perfekt für eine kleine Seite, die dir morgens sagt, ob du einen Schirm brauchst.
• Urlaubs-Wechselkurs: Die Erweiterung des Währungsrechners von oben, mit den täglichen EZB-Kursen für 29 Währungen.
• Haushaltsbuch light: Einnahmen und Ausgaben eintragen, nach Kategorien sortieren, Monatsübersicht anzeigen. Alles bleibt lokal im Browser.

Gerade das Wetter-Widget zeigt gut, wie Vibe Coding mit Schnittstellen funktioniert. Du schreibst zum Beispiel: "Hole für Köln die aktuelle Temperatur von der Bright-Sky-Schnittstelle und zeige sie groß in der Mitte an." Claude Code liest die Dokumentation, baut den Abruf und zeigt dir den Code. Du musst nicht wissen, was ein HTTP-Aufruf ist, um das Ergebnis zu prüfen: Stimmt die Temperatur ungefähr mit dem Blick aus dem Fenster überein?

Zwei praktische Hinweise zu den Schnittstellen. Tankerkönig bietet einen Demo-Schlüssel an, der allerdings nur Testdaten liefert und keine echten Preise. Zum Üben reicht er völlig: Du baust die Oberfläche mit den Testdaten und beantragst den echten Schlüssel erst, wenn alles läuft. Bright Sky ist ein Open-Source-Projekt und laut eigener Seite für alle Zwecke kostenlos nutzbar. Bei beiden gilt: Bitte Claude Code, die Quelle sichtbar auf der Seite zu nennen, etwa mit einem Satz wie "Preisdaten: MTS-K über tankerkoenig.de".

Welche kreativen Projekte kannst du mit Claude Code umsetzen?

Kreative Projekte sind Generatoren, Editoren und kleine Gestaltungswerkzeuge, bei denen du mit Farben, Schrift und Layout spielst. Sie zeigen dir, wie viel das Aussehen einer App ausmacht und wie du gestalterische Wünsche in Worte fasst.

Zehn Ideen für kreative Projekte:

11. Namensgenerator für Figuren: Zufällige Namen für Romane oder Pen-and-Paper-Runden.
12. Farbpaletten-Generator: Schlägt fünf Farben vor, die zusammenpassen.
13. Markdown-Editor: Links schreiben, rechts die formatierte Vorschau sehen.
14. Haiku-Generator: Baut kurze Gedichte mit dem Silbenmuster 5, 7, 5.
15. Digitales Moodboard: Bilder und Notizen frei auf einer Fläche anordnen.
16. Titel-Generator: Schlägt Überschriften zu einem Thema vor.
17. Visitenkarten-Designer: Name, Funktion und Kontakt in einem druckfertigen Layout.
18. Initialen-Logo: Einfache Logos aus zwei Buchstaben und einer Form.
19. Lebenslauf-Editor: Formular ausfüllen, Lebenslauf als PDF speichern.
20. Fotogalerie mit Filtern: Schwarzweiß, Sepia oder höherer Kontrast per Klick.

Ein guter Trick bei kreativen Projekten: Bitte Claude Code um drei Versionen desselben Projekts in unterschiedlichen Stilen, etwa minimalistisch, verspielt und retro. Du vergleichst nebeneinander und lernst dabei Begriffe wie Abstand, Kontrast oder Schriftgröße, die du für deine nächsten Prompts brauchst.

Beim Lebenslauf-Editor solltest du an den Datenschutz denken. Probiere ihn mit erfundenen Angaben aus, solange das Projekt öffentlich im Netz steht. Deine echten Daten gehören erst hinein, wenn die App nur auf deinem Rechner läuft.

Welche einfachen Spiele kannst du zum Lernen bauen?

Für den Anfang eignen sich Spiele mit klaren Regeln: Tic-Tac-Toe, Zahlenraten, Memory oder Galgenmännchen. Du lernst daran, Eingaben zu verarbeiten, einen Spielstand zu speichern und Gewinnbedingungen zu prüfen.

Zehn Spielideen:

21. Tic-Tac-Toe: Zwei Personen auf einem Feld mit 3 mal 3 Kästchen.
22. Zahlenraten: Der Computer denkt sich eine Zahl zwischen 1 und 100 aus.
23. Memory: Kartenpaare finden, mit Zugzähler.
24. Schere, Stein, Papier: Gegen den Computer, mit Punktestand.
25. Galgenmännchen: Ein Wort Buchstabe für Buchstabe erraten.
26. Quiz: Zehn Fragen, am Ende die Punktzahl.
27. Simon Says: Eine Farbfolge merken und nachspielen.
28. Einfaches Snake: Eine Schlange, die mit jedem Bissen wächst.
29. Farbe erraten: Den Farbcode einer angezeigten Farbe schätzen.
30. Würfelspiel: Zwei Würfel werfen und die Augen zusammenzählen.

Spiele sind die Projekte, bei denen Vibe Coding am meisten Spaß macht, weil du jede Änderung sofort ausprobierst. Du spielst eine Runde, merkst, was nervt, und beschreibst es: "Die Schlange ist zu schnell, halbiere das Tempo am Anfang und erhöhe es nach jedem fünften Bissen." Diese kurze Schleife aus Spielen, Beschreiben und erneutem Testen ist der Kern der Methode.

Wenn ein Spiel läuft, wächst es mit dir. Tic-Tac-Toe bekommt einen Gegner aus dem Computer, Memory einen Timer, das Quiz eine Bestenliste. Jede Erweiterung ist ein neues kleines Projekt.

Typische Erweiterungen, die bei fast jedem Spiel und jedem Werkzeug funktionieren: lokales Speichern, damit der Punktestand bleibt; ein dunkles Design per Schalter; eine Ansicht, die auf dem Handy genauso gut aussieht wie am Rechner; Töne bei wichtigen Aktionen; eine kleine Statistik über deine Runden. Jede dieser Erweiterungen bringt dir einen neuen Baustein bei, den du in allen weiteren Projekten wiederverwenden kannst.

Wie schreibst du einen Vibe-Coding-Prompt, der funktioniert?

Ein guter Prompt beschreibt das Ziel, die Bedienung, das Aussehen und eine Grenze, in dieser Reihenfolge. Je klarer du sagst, was am Ende auf dem Bildschirm passieren soll, desto weniger musst du nachbessern.

Ein Beispiel für den Pfandrechner:

Baue eine einzelne HTML-Datei für einen Pfandrechner.
Ziel: Ich sehe sofort, wie viel Pfand meine leeren Flaschen bringen.
Bedienung: Drei Eingabefelder für Einweg (25 Cent), Mehrweg Bier (8 Cent)
und Mehrweg andere (15 Cent). Darunter die Summe in Euro, die sich bei
jeder Eingabe aktualisiert.
Aussehen: groß lesbar, funktioniert auf dem Handy.
Grenze: keine externen Bibliotheken, nichts wird gespeichert.

Drei Regeln helfen dir, wenn etwas nicht klappt. Erstens: Beschreibe, was du erwartet hast und was stattdessen passiert ist, statt nur "geht nicht" zu schreiben. Zweitens: Bitte um eine Änderung pro Nachricht. Drittens: Wenn sich ein Fehler nach zwei Versuchen nicht löst, lass dir erklären, woran es liegt, bevor du weiterfragst.

So sieht eine gute Nachbesserung aus: "Wenn ich bei Einweg 12 eintippe, zeigt die Summe 3 Euro statt 3,00 Euro. Bitte zeige immer zwei Nachkommastellen und ein Komma statt eines Punkts, wie in Deutschland üblich." Der Satz nennt die Eingabe, das falsche Ergebnis, das erwartete Ergebnis und die Regel dahinter. Mit so einer Beschreibung findet Claude Code die Stelle in der Regel beim ersten Versuch.

Mehr Beispiele für gute Anweisungen findest du in unserem kompletten Vibe-Coding-Leitfaden.

Wie wählst du das richtige Projekt für dein Niveau?

Wähle das Projekt, das ein echtes kleines Problem in deinem Alltag löst und in einer Datei Platz hat. Motivation schlägt Ehrgeiz: Ein fertiger Pfandrechner bringt dich weiter als ein abgebrochenes Online-Shop-Projekt.

Diese Übersicht hilft bei der Wahl:

Projekt	Was du lernst	Datenquelle	API-Schlüssel nötig
Klick-Zähler	Anzeigen, Klick, Zustand	keine	nein
To-do-Liste	Listen, lokales Speichern	keine	nein
Pfandrechner	Eingaben, Rechnen in Euro	Pfandsätze der Verbraucherzentrale	nein
Wetter-Widget	Daten aus dem Netz abrufen	DWD über Bright Sky	nein
Währungsrechner	Tägliche Daten verarbeiten	Referenzkurse der EZB	nein
Tankpreis-Vergleich	Schlüssel sicher verwenden, Quellen nennen	MTS-K über Tankerkönig	ja
Memory	Spiellogik, Timer	keine	nein

Eine bewährte Reihenfolge: zuerst ein Projekt ganz ohne Daten aus dem Netz, dann eines mit lokaler Speicherung, dann eines mit einer offenen Schnittstelle ohne Schlüssel. Erst danach lohnt sich der Tankpreis-Vergleich, weil du dort lernen musst, einen API-Schlüssel nicht öffentlich zu machen.

Was brauchst du, um mit Claude Code zu starten?

Du brauchst einen Rechner, ein Claude-Konto mit passendem Abo und zehn Minuten für die Installation. Claude Code läuft laut Anthropic im Terminal, als Erweiterung für VS Code und JetBrains, als Desktop-App und im Browser unter claude.ai/code.

Für die Desktop-App verlangt Anthropic ein kostenpflichtiges Abo. Auf der offiziellen Preisseite steht Claude Code beim Pro-Tarif ausdrücklich als enthalten. Am 2. November 2026 kostete Pro dort 20 Dollar im Monat oder 17 Dollar im Monat bei jährlicher Zahlung (200 Dollar im Voraus), Max ab 100 Dollar im Monat. Die Seite zeigt Dollarpreise. Einen Vergleich mit den Preisen anderer KI-Abos in Euro findest du in unserem Preisvergleich der KI-Abos.

Im Terminal installierst du Claude Code auf macOS und Linux mit einer einzigen Zeile:

curl -fsSL https://claude.ai/install.sh | bash

Unter Windows gibt es eine eigene Zeile für die PowerShell. Danach prüfst du mit claude --version, ob alles geklappt hat, wechselst in einen leeren Ordner und startest mit claude. Wenn dir das Terminal fremd ist, nimm die Desktop-App: Dort öffnest du den Reiter Code und fängst direkt an.

Ein nützliches Detail für später: Claude Code liest zu Beginn jeder Sitzung eine Datei namens CLAUDE.md im Projektordner, wenn sie existiert. Dort kannst du festhalten, was immer gelten soll, zum Beispiel "Alle Texte auf Deutsch, Beträge in Euro mit Komma, keine externen Bibliotheken". Dann musst du diese Wünsche nicht in jeder Nachricht wiederholen. Für ein einzelnes Mini-Projekt brauchst du die Datei nicht, ab dem dritten oder vierten Projekt spart sie dir viel Tipparbeit.

Wie veröffentlichst du dein erstes Projekt?

Am einfachsten veröffentlichst du ein Browser-Projekt über GitHub Pages, das statische Seiten direkt aus einem Repository ausliefert. Claude Code kann dir die nötigen Schritte vorbereiten und erklären.

Die Grenzen sind für Anfängerprojekte großzügig. Laut GitHub darf eine veröffentlichte Pages-Seite höchstens 1 GB groß sein, es gilt eine weiche Grenze von 100 GB Datenverkehr pro Monat und von 10 Builds pro Stunde. Pro Repository gibt es eine Projektseite. Ein Pfandrechner oder ein Memory-Spiel liegt weit darunter.

Bevor du etwas veröffentlichst, frag Claude Code ausdrücklich: "Enthält dieses Projekt Passwörter, API-Schlüssel oder persönliche Daten?" Beim Tankpreis-Vergleich lautet die Antwort ja, denn jeder Aufruf der Tankerkönig-Schnittstelle braucht einen Schlüssel. Lass dir dann zeigen, wie du ihn aus dem öffentlichen Code heraushältst. Und denk an die Quellenangabe, die die Lizenz CC BY 4.0 verlangt.

Welche Fehler solltest du als Anfänger vermeiden?

Der häufigste Fehler ist ein zu großes erstes Projekt, gefolgt von zu vielen Wünschen in einer einzigen Nachricht. Beides führt zu Code, den weder du noch die KI sauber nachbessern können.

Weitere typische Stolperfallen:

• Ungeprüfte Ergebnisse: Rechne beim Trinkgeld- oder Pfandrechner zwei Beispiele selbst nach. Fast die Hälfte der befragten Profis traut KI-Ausgaben nicht blind, aus gutem Grund.
• Keine Sicherung: Bitte Claude Code, vor jeder größeren Änderung eine Kopie anzulegen oder Git zu nutzen. Dann kannst du jederzeit zurück.
• Echte Daten im Test: Teste Haushaltsbuch und Lebenslauf mit erfundenen Zahlen und Namen.
• Neu anfangen statt korrigieren: Wenn ein Detail stört, beschreibe genau dieses Detail. Ein neuer Anlauf verwirft auch alles, was schon funktioniert hat.

Eine ausführliche Liste mit Beispielen findest du in unserem Artikel über die zehn häufigsten Fehler beim Vibe Coding. Und wenn du sehen willst, wie ein komplettes erstes Projekt Schritt für Schritt entsteht, lies die Anleitung zu deiner ersten To-do-App.

Vibe Coding lernst du nicht durch Lesen, sondern durch Bauen. Nimm dir heute den Klick-Zähler vor, morgen den Pfandrechner, und am Wochenende das Wetter-Widget für deine Stadt. Nach drei fertigen Projekten weißt du genau, welche Art von Werkzeug dir Spaß macht, und kannst die nächsten zehn Ideen aus dieser Liste gezielt auswählen.

Quellen

• Anthropic, Claude-Preise: claude.com/pricing, abgerufen am 2. November 2026.
• Anthropic, Claude-Code-Dokumentation, Überblick: code.claude.com/docs/en/overview, abgerufen am 2. November 2026.
• Stack Overflow, Pressemitteilung zur Entwicklerumfrage 2025 vom 29. Juli 2025: stackoverflow.co, abgerufen am 2. November 2026.
• Collins Dictionary, Wort des Jahres 2025, Meldung vom 6. November 2025: i-programmer.info, abgerufen am 2. November 2026.
• Europäische Zentralbank, Euro-Referenzkurse: ecb.europa.eu, abgerufen am 2. November 2026.
• Verbraucherzentrale, Fragen und Antworten zum Einwegpfand: verbraucherzentrale.de, abgerufen am 2. November 2026.
• Tankerkönig, Spritpreis-API: creativecommons.tankerkoenig.de, abgerufen am 2. November 2026.
• Bright Sky, JSON-API für DWD-Daten: brightsky.dev, abgerufen am 2. November 2026.
• GitHub, Grenzen von GitHub Pages: docs.github.com, abgerufen am 2. November 2026.