Vibe Coding mit Claude Code: Mind-Blowing, But Not Brain-Dead Easy – was wirklich funktioniert

Geschätzte Lesedauer: 12 Minuten (voller Artikel) | 3 Minuten (Handlungsleitfaden)

Lang, aber wichtig

Dieser Artikel zeigt Ihnen nicht nur, wo Vibe Coding an Grenzen stößt – sondern vor allem, wie Sie diese Grenzen überwinden.
Sie erfahren:

✓ Warum die „30-Minuten-Versprechen“ nur für Experten gelten (und was das für Sie bedeutet)
✓ Welcher Workflow wirklich funktioniert (Schritt-für-Schritt-Anleitung)
✓ Wann Claude Chat ausreicht – und wann Claude Code Sinn macht
✓ Wie diese Erkenntnis für ALLE KI-Tools gilt (Midjourney, ChatGPT & Co.)
✓ Was das für Entscheider in Unternehmen bedeutet (realistische Planung statt Hype)Ich habe diesen Weg gegangen – damit Sie ihn abkürzen können.

→ Trotzdem ungeduldig? Hier geht’s direkt zum Handlungsleitfaden

---

Der Hype und die Realität

Vibe Coding ist der aktuelle Hype. Programmieren für jedermann. Entwickler werden nicht mehr gebraucht. Claude Code der aktuelle Beschleuniger dieses Hypes.

Auf LinkedIn, YouTube und in Tech-Communities überschlagen sich die Posts: „Funktionale App in 30 Minuten!“ – „Website ohne Code-Kenntnisse!“ – „Jeder kann jetzt Developer sein!“, „Wie Claude Code die Vobe-Welt verändert“, „Mein Weg mit Claude Code zu funktionierenden Plattform“ …

Die Versprechen klingen verlockend. Und sie sind nicht falsch.

Aber sie gelten nicht für die Mehrheit von uns.

Denn was diese Posts verschweigen: Die „In-30-Minuten-Super-Apps“ entstehen in den Händen von Leuten, die verstehen, wie Code funktioniert. Für sie ist Claude Code tatsächlich ein Gamechanger – ein Turbo für bestehende Expertise.
Also z.B. für Entwickler, die so ihre eigene Expertise beschleunigen und sich von nervigem Balast befreien. Oder Von App-Designern, die „mal schnell“ ein funktionierendes Mockup ihrer konkreten App-Idee für das Meeting erstellen.

Für alle anderen? Ein steiniger Weg. Möglich, ja. Aber nicht in 30 Minuten.

Ich weiß, wovon ich spreche. Ich bin diesen steinigen Weg gegangen:
Vom ersten Konzept meiner Personal-Brand-Website bis zur Live-Schaltung – mit Claude Pro (Claude Chat) und später Claude Code.
Der Prozess dauerte nicht Minuten, nicht Tage, eher Wochen bis zu Monaten. Er war frustrierend, lehrreich und am Ende aber erfolgreich.

Was ich dabei gelernt habe, stelle ich hier dar und verkürzt euren Weg hoffentlich erheblich, da ihr meine Fehler vermeidet und die Verprechungen richtig einordnet und auf euch adaptiert

Und bei allem hat sich erneut mein Mantra bestätigt – eines, das nicht nur für Vibe Coding gilt, sondern für alle KI-Tools:

KI produziert nichts Sinnvolles, wenn wir nicht genau wissen, was wir vorhaben und das braucht eigenes Expertenwissen. KI ist keine Magie, KI ist kein Gedankenleser. KI ist ein massives Uplifting unserer Fähigkeiten. Habe ich keine auf dem speziellen Gebiet, wird auch nichts „geliftet“. Überschätze ich mich, erhält dieses überschätzte Nicht-Wissen ein Uplifting.

KI ist kein Ersatz für Expertise. Sie ist ein Verstärker. Und wer das nicht versteht, wird scheitern – egal ob beim Coden, beim Designen oder beim Texten.

Dieser Artikel zeigt euch, was wirklich funktioniert. Und wo die Grenzen liegen.

---

Warum die „30-Minuten-Versprechen“ nicht für jeden gelten

Wenn ein erfahrener Entwickler postet: „Ich habe mit Claude Code in 30 Minuten eine funktionale Web-App gebaut“, dann ist das vermutlich wahr. Für diese Person stimmt es.

Aber was dabei implizit vorausgesetzt, aber in diesen Posts nicht explizit gesagt wird:

Die Person versteht bereits:

• Wie Webarchitekturen funktionieren (Frontend, Backend, APIs)
• Welche Dateistruktur eine App braucht (und warum)
• Wie man Code-Probleme debuggt (und wo man sucht)
• Welche Libraries wofür geeignet sind
• Was gutes UX-Design ausmacht

Ein Entwickler mit 10 Jahren Erfahrung nutzt Claude Code als Beschleuniger. Claude übernimmt das Tippen von Codezeilen, die Boilerplate-Erstellung, die Routine-Tasks. Der Entwickler steuert die Architektur und kontrolliert und steuert.

Für jemanden ohne diese Vorkenntnisse ist Claude Code kein Beschleuniger – sondern ein Co-Pilot in einem Cockpit voller unbekannter Knöpfe. Theoretisch kann man damit fliegen…

Das bedeutet nicht, dass Vibe Coding für Laien unmöglich ist. Aber es bedeutet: Die Lernkurve ist steil, der Weg hart. Und die „30 Minuten“ werden zu Tagen, Wochen oder Monaten.

Ein Stack Overflow Artikel beschreibt es treffend:

„The promise that vibe coding will give anyone, even those with a nontechnical background, the power to create their own usable applications is debatable. […] It felt like hitting one of those ‚That was easy!‘ buttons … But it was too easy, and immediately upon handing the output over to someone with more technical expertise than me, the holes began to show.“

„Das Versprechen, dass Vibe Coding jedem, auch Menschen ohne technischen Hintergrund, die Macht gibt, eigene nutzbare Anwendungen zu erstellen, ist diskutabel. […] Es fühlte sich an, als würde man einen ‚Das war einfach!‘-Knöpfe zu drücken. Aber es war zu einfach, und sobald ich das Ergebnis jemandem mit mehr technischer Expertise übergab, zeigten sich die Lücken.“

---

Was Vibe Coding wirklich kann – und wo es scheitert

Wo es brillant funktioniert

1. Konzeptentwicklung (Claude als Sparringspartner)

Der vielleicht unterschätzteste Mehrwert: Claude hilft dir, überhaupt erst zu verstehen, was du willst. Also noch vor der ersten Code-Zeile darüber zu sprechen, sichd arüber im klaren zu werden, was der Code später bewirken soll.

Zu meinem eigenen Beispiel: Ich startete bein Webseiten-Projekt nicht mit Code, sondern mit vagen Vorstellungen

• „Ich will eine Website um einen Personal Brand aufzubauen“
• „Sie soll Vertrauen und Expertise transportieren“
• „Sie soll die Inhalte meiner Workshops zeigen und „verkaufen“ und ich will einen Blog. Ach ja, meine Videos sollen da auch zu finden sein.“
• Modern und cool soll sie aussehen, aber nicht angeberisch, eher … cool halt, nüchtern professionell.

Durch den Dialog mit Claude – über Stunden und Tage hinweg (es gab ja Pausen dazwischen, denn ich muss ja auch mal einen Workshop durchführen) – entstand Klarheit:

• Welche Seiten brauche ich mit welchen Inhalten?
• Welche Inhalte gehören wohin?
• Wie führe ich Besucher durch die Site?
• Was ist meine User Journey?

Dieser Prozess war Gold wert. Ohne Claude hätte ich einem Webdesigner nicht einmal ein klares Briefing geben können.

2. Prototyping (erste funktionale Seiten)

Claude Chat kann vollständige HTML-Seiten mit CSS generieren. Diese sind nicht perfekt, aber sie sind:

• Funktionsfähig (du kannst sie im Browser öffnen)
• Anpassbar (du kannst Texte ändern, Bilder austauschen)
• Lehrreich (du siehst, wie Struktur und Design zusammenhängen)

Ich lernte durch Beobachtung und vor allem dadurch, dass ich Claude gleich aufforderte, für mich, „ich bin Laie“, in den Code Hiweise zu setzen, was der nachfolgende Codeblock tut.
Sehr hilfreich, wenn ich selbst irgendetwas tun muss, z.B. Texte anpassen oder nach Aufforderung von Claude selbst html-Code anzupassen.

3. Lernen durch Anleitung

Claude war nicht nur Builder, sondern auch Lehrer. Ich fragte:

• „Was macht dieser CSS-Block?“
• „Warum liegt dieses Element über jenem?“
• „Wie ändere ich die Schriftgröße?“

Die Antworten waren geduldig, präzise und nachvollziehbar. Für jemanden ohne Vorkenntnisse war das unbezahlbar. Und ich fing nach einer Weile tatsächlich an, Code konkretere Tipps zu geben, wo ich ansätzen würde (ja, klar, als ob ich das gekonnt hätte, aber eine Idee konnte ich tatsächlich reinbringen). Und das fühlte sich nicht nur gut an, gemeinsam lösten wir auch kniffligere Probleme.

Wo es an Grenzen stößt

Problem 1: Wartung und Anpassungen

Neue, frische Seiten im besprochenen Stil erstellen? Funktioniert großartig. Bestehende Seiten anpassen? Leider ganz schnell Chaos.

Ein konkretes Beispiel: Ich wollte den Foto-Grid-Hintergrund von meiner Seite zu individuellen Vorträgen und Workshops auch auf den anderen Seiten haben. Für mich: eine Mini-Änderung. Kein weißer Hintergrund mehr, sondern nun die Fototapete, die auf der anderen Seite ja auch super-cool funktioniert. Für Claude gleich auch ein Anlass, nebenbei und ohne jeglichen Auftrag die gesamte CSS-Struktur „zu optimieren“.

Das Ergebnis:

• Aufzählungszeichen wurden zu kryptischen Sonderzeichen (●■▶ statt -)
• Ein Hover-Element rutschte visuell unter einen CTA-Bereich (obwohl es darüber liegen sollte)
• Ein Bild-Grid mit 70 Fotos wurde intern auf „7 Bilder, 10× wiederholt“ umgebaut. Ist ja effizienter. Ja, sieht aber völlig anders aus … und habe ich nicht beauftragt!

Nach fünf Versuchen, das wieder in Griff zu bekommen (Claude: oh, du hast Recht, lass mich das ansehen … ich erkenne das Problem … lass mich das in Ordnung bringen), Jedesmal war die Seite in chaotischerem Zustand als vorher. Ich habe dann die Backup-Datei neu eingespielt.

Problem 2: Anwender unterschätzt die Komplexität

Ein Zitat von einem Entwickler auf Reddit bringt es auf den Punkt:

„Frontend is undervalued because for the most part it is seen as pretty colours and things you click. At the surface that’s what users and stakeholders see.“

Übersetzung: „Frontend wird unterschätzt, weil es meist als hübsche Farben und klickbare Dinge gesehen wird. Das ist das, was Nutzer und Stakeholder sehen [nicht den komplexen Code dahinter].“

Die Wahrheit: HTML/CSS/JS sind voller Zustände, Abhängigkeiten und Feinheiten. Ein kleiner CSS-Tweak kann unerwartete Domino-Effekte auslösen:

„Complexity is the root cause of the vast majority of problems with software today. […] Unknown unknowns are the worst: there’s an implicit dependency between two completely different parts of the codebase, but the only way to discover it is when an issue finally occurs.“

Übersetzung: „Komplexität ist die Hauptursache für die große Mehrheit der Probleme mit Software heute. […] Unbekannte Unbekannte sind am schlimmsten: Es gibt eine implizite Abhängigkeit zwischen zwei völlig unterschiedlichen Teilen der Codebasis, aber der einzige Weg, sie zu entdecken, ist, wenn schließlich ein Problem auftritt.“

Genau das habe ich erlebt: Ich ändere einen Hintergrund → plötzlich sind Aufzählungszeichen kaputt. Warum? Weil CSS-Spezifität, Stacking-Context und Vererbung miteinander interagieren – Dinge, von denen ich als Laie keine Ahnung hatte. Und Claude pro (Chat) legte überzeugt von sich und begeistert los. Und dachte offenbar auch nicht an die Interdependenzen. Ein Horror-Duo.

Problem 3: LLMs „räumen auf“ – auch wenn du das nicht willst

Simon Wardley, ein renommierter Strategy-Experte, warnt:

„Just remember, when you are vibe ‚coding‘, if you don’t look at the code then you’re not software engineering. The AI system is making all the decisions for you. Your prompt rules, your ERD, your specification are just ‚wishes‘ and not ‚instructions‘.“

Übersetzung: „Denkt daran: Wenn ihr beim Vibe Coding nicht auf den Code schaut, dann macht ihr kein Software Engineering. Das KI-System trifft alle Entscheidungen für euch. Eure Prompt-Regeln, euer ERD, eure Spezifikation sind nur ‚Wünsche‘ und keine ‚Anweisungen‘.“

Ich hatte Claude gesagt: „Ändere den Hintergrund.“ Claude interpretierte: „Wenn ich schon mal dabei bin, ich reorganisiere gleich mal den gesamten Content-Container, optimiere die Struktur und ändere nebenbei die List-Styles. Das geht doch viel cooler, effizienter und ich mach’s, weil ich’s kann.“

Warum? Weil LLMs auf Muster trainiert sind, nicht auf Verständnis. Die KI sieht „70 Fotos“ und denken: „70 Fotos laden, uneffektiv. 7 Fotos laden und 10-mal zeigen, ist viel effektiver.“ Ja, sieht aber leider mehr als seltsam aus.

Problem 4: Context Loss bei langen Sessions

Nach mehreren Iterationen mit Claude erschien plötzlich:

„Maximale Chat-Länge erreicht.“

Das bedeutete:

• Unsere mühsam aufgebauten Gedankengänge waren abgeschnitten
• Der Kontext, in dem wir Entscheidungen getroffen hatten, war weg
• Im neuen Chat musste ich alles erneut erklären – was nie zu 100% gleich gut klappt

Und: nach 4-5 Debugging-Runden im gleichen Chat schlug Claude plötzlich die gleiche Lösung vor wie drei Versuche zuvor – die damals schon gescheitert war. Für ihn schien es eine „neue“ Idee zu sein. Ich war wirklich frustriert und entsetzt. Wieso wird gesagt: Claude und Code = super?

Warum meine vermeitlich einfachen HTML-Aufträge Claude an seine Grenzen brachten

Kurz: Frontend ist viel komplexer, als es für den Laien aussieht

Brian Kernighan, legendärer Informatiker, formulierte:

„Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.“

Übersetzung: „Debugging ist doppelt so schwer wie das Schreiben des Codes. Wenn du den Code also so clever wie möglich schreibst, bist du per Definition nicht schlau genug, um ihn zu debuggen.“

Debugging ist das entfernen von Fehlern im Code.
Das gilt exponentiell für von KI generierten Code. Ich verstehe den Code als Laie sowieso nicht, den Claude schreibt. Wenn er falsch ist, kann ich ihn nicht debuggen.
Ich muss Claude bitten, seinen eigenen Code zu debuggen – und Claude hat bei Iteration 5 vergessen, was bei Iteration 1 schiefging. Den Bock zum Gärtner machen.

Hier zeigt sich brutal: Ich habe keine Ahnung, treibe aber Claude (ohne es zu ahnen) in eine Höllenaufgabe, mecker rum, Claude bemüht sich und ich kann nicht helfen, sondern treibe ahnungslos noch mehr ins Übel. Ich erinnere an „KI produziert ohne eigenes Fachwissen des Nutzers nichts sonderlich Sinnvolles.“ Und ich mittendrin. Als Täter und Opfer.

Ein Entwickler auf Reddit bestätigt:

„Developers spend 30-50% of their time debugging code. For complex systems, debugging can consume up to 75% of the development lifecycle.“

Übersetzung: „Entwickler verbringen 30-50% ihrer Zeit mit Debugging. Bei komplexen Systemen kann Debugging bis zu 75% des Entwicklungszyklus in Anspruch nehmen.“

Bei mir fühlte es sich an wie 95%.

Vibe Coding funktioniert nur, wenn du weißt, was du tust

Houssem Hajlaoui, ein Tech Lead, bringt es auf den Punkt:

„Vibe coding only works if you already know what you’re doing. If you don’t, you won’t just get low-quality code. You’ll get something much worse: confident code that looks fine, passes basic tests, and quietly sabotages your system behind the scenes.“

Übersetzung: „Vibe Coding funktioniert nur, wenn man schon weiß, was man tut. Wenn nicht, bekommt man nicht nur minderwertigen Code. Man bekommt etwas viel Schlimmeres: selbstbewussten Code, der gut aussieht, einfache Tests besteht und das System still und heimlich sabotiert.“

Und weiter:

„Vibe coding isn’t dangerous because it replaces you. It’s dangerous because it flatters you. It tells you: ‚You’ve got this,‘ when actually, you don’t even know what you’ve built.“

Übersetzung: „Vibe Coding ist nicht gefährlich, weil es einen ersetzt. Es ist gefährlich, weil es einem schmeichelt. Es sagt: ‚Du schaffst das‘, obwohl man eigentlich nicht einmal weiß, was man gebaut hat.“

Das war meine Erfahrung exakt. Die ersten Seiten fühlten sich an wie Magie. Die Wartung fühlte sich an wie Treibsand: Je mehr ich versuchte, rauszukommen, desto tiefer sank ich.

Und zum Glück war es nur meine Webseite und kein Portal mit Webkunden und Zahlungsfunktion. Wer da nicht weiß, was er/sie tut, riskiert viel.

---

Mein steiniger Weg aus dem Chaos: Selbst lernen + Screenshots + DevTools

Ich wollte nicht aufgeben. Also fing ich an, selbst die Grundlagen zu lernen – weiterhin mit Claude als Lehrer:

1. Struktur verstehen lernen

Ich ließ mir von Claude den groben Seitenstruktur erklären:

• „Was macht dieser <div class='content-area'>-Bereich?“
• „Warum liegt dieses Element über jenem?“
• „Was bewirkt dieser CSS-Block?“

2. Browser-DevTools nutzen (F12-Taste)

Das war der Durchbruch. Die Entwicklerwerkzeuge im Browser zeigen:

• Console → Fehlermeldungen (rote Warnungen, die sagen, was schiefläuft)
• Elements → Welcher CSS-Code auf welches Element wirkt
• Network → Ob Bilder und Skripte richtig geladen werden

Alle nur unter minutiöser Anleitung von Claude (drücke x, gib y ein, schaue dann bei z).

3. Screenshots als Kommunikationsmittel

Und wenn ich nicht weiterwusste, dann gab es die geniale Möglichkeit, Claude selbst draufschauen zu lassen.
Ich machte Screenshots von Fehlermedlungen im Developer-Fenster des Browser (Seite + Konsole) und lud sie in Claude hoch: „Das wird angezeigt,. Was nun?“

Claude analysierte die Screenshots und gab mir Schritt-für-Schritt-Anleitungen: „Ah, ich sehe woran es liegt. Die Bilder werden zwar geladen, aber offenbar gibt es ein js-Fehler. Der Fehler sagt: Uncaught ReferenceError: initHover is not defined. Das bedeutet: In Zeile 42 deines main.js rufst du eine Funktion auf, die nicht existiert. Lösche Zeile 42 und füge stattdessen diese Funktion hinzu. Mach ein Refresh iund sage mir, ob der Fehler noch auftaucht“

Unfassbar. Das half – aber nur bis zu einem gewissen Punkt. Wir kamen tatsächlich voran, aber ich hatte Null Ahnung, was wir da tun.

---

Claude Code: Besseres Tool, steilere Lernkurve

Bis dahin dachte ich, ich bin bereits mit Claude Code unterwegs. Aber das ist etwas andere!Claude Code ist die Variante von Claude, die direkt in VS Code läuft, direkten Zugriff auf meine Dateien hat und Diffs zeigt, bevor sie Änderungen macht.

Was Claude Code besser macht als Claude Chat

Nach Recherche das nächste Versprechen: In der Theorie löst Claude Code alle meine Claude Chat Probleme:

Problem mit Claude Chat	Lösung durch Claude Code
Komplette Dateien werden neu generiert	Zeigt nur geänderte Zeilen (Diff)
Ich muss Code kopieren/einfügen	Ändert Dateien direkt automatisch
Keine Rückgängig-Funktion	Checkpoints + /rewind in 3 Sekunden
Claude „sieht“ meine Dateien nicht	Vollständiger Projekt-Zugriff via @dateiname
Context Loss bei langen Sessions	CLAUDE.md als „Projekt-Memory“

Was es voraussetzt

Um Claude Code sinnvoll zu nutzen, brauchst du:

1. Visual Studio Code oder anderes Code-Werkzeug installieren, öffnen und Terminal starten

Ich gebe zu, hier fing ich noch mehr an zu schwimmen. Terminal! Diese schwarze Box als Zeitmaschine zurück in das Jahrhundert, als mal noch mit „cd/“ den Datei-Ordner auf Befehlszeile in MS-DOS wechseln musste.

Als ob mir VC Code nicht schon beunruhigend genug Codezeilen aufzeigte. Immerhin ist das schon mit benutzerfreundlicherer Oberfläche.
In dem Programm nun also auf claude eintippen und Enter drücken. Klingt banal – ist es auch. Aber für jemanden, der noch nie ein Terminal gesehen hat, ist es erstmal, naja, „ungewohnt“.

Man muss Node.js installieren, danach

npm install -g @anthropic-ai/claude-code

ins Terminalfenster eigeben und Enter drücken
(ich sagte doch, das ist eben nicht nicht brain-dead easy und nichts für Ängstliche!).

Wenn das geklappt hat, dann im Terminalfenster claude eingeben.

Tata!

Und dann, wenn man das wiederum geschafft hat (dazu muss man in Claude mit einem Pro-Account auf dem Browser eingeloggt sein) mit etwas Glück:

2. Verstehen, welche Datei relevant ist

Und jetzt ist man auf einem anderen Level in der Claude-Interaktion. Schluss mit Geplapper, hier wird knallhart gecodet. Und von mir erwartet, dass ich das auch ernst nehme und Entscheidungen treffe.
Ist das Problem in index.html, styles.css oder main.js? Claude Code fragt dich: „Soll ich diese Datei ändern?“ Du musst entscheiden können, ob das Sinn macht.

3. Einen Diff lesen können

Zeile 145:
- background-color: white;
+ background-image: url('photo-grid.jpg');

Du musst erkennen: „OK, Zeile 145 wird geändert, sonst nichts.“ Das ist nicht kompliziert – aber es setzt voraus, dass du verstehst, was diese Zeile macht.

4. Screenshots als Dateien speichern

Statt sie einfach in Chat zu ziehen, musst du sie als error-about-page.png (oder wie auch immer sie bezeichnet wurde) in einem /screenshots-Ordner speichern und mit @screenshots/error-about-page.png referenzieren.

Ja, ungemütlich. Wann der Wechsel trotzdem Sinn ergibt

Claude Code ist kein Tool für absolute Anfänger. Es ist ein Tool für Leute, die Phase 3 (Grundverständnis) hinter sich haben.

Du bist bereit für Claude Code, wenn:

☑ Ich verstehe, was HTML, CSS und JS grob machen
☑ Ich kann im Browser mit F12 Fehler ansehen  
☑ Ich weiß, in welcher Datei mein Problem vermutlich liegt
☑ Ich kann ein Terminal öffnen (auch wenn ich nicht viel damit mache)

→ Wenn mindestens 3 von 4: Claude Code ist für dich sinnvoll
→ Wenn weniger: Bleib noch bei Claude Chat und lerne weiter

Vergleich: Claude Chat vs. Claude Code

Aspekt	Claude Chat	Claude Code
Einstiegshürde	Niedrig (nur Browser)	Mittel (Terminal, VS Code)
Für Neuentwürfe	⭐⭐⭐⭐⭐ Perfekt	⭐⭐⭐ Überdimensioniert
Für Anpassungen	⭐⭐ Chaotisch	⭐⭐⭐⭐⭐ Präzise
Transparenz	⭐⭐ Unklar was sich ändert	⭐⭐⭐⭐⭐ Diff zeigt alles
Rollback	⭐ Manuell (Copy-Paste rückgängig)	⭐⭐⭐⭐⭐ /rewind in 3 Sek
Lernen	⭐⭐⭐⭐⭐ Erklärt beim Erstellen	⭐⭐⭐ Setzt Grundwissen voraus
Debugging	⭐⭐ Schwierig bei Fehlern	⭐⭐⭐⭐ Gezielt Dateien analysieren

---

Der richtige Workflow: Schritt für Schritt

Wenn ich heute nochmal starten würde, sähe mein Ideal-Workflow so aus:

Phase 1: Klarheit gewinnen (Claude Chat)

Ziel: Verstehen, was du überhaupt willst

Aufgaben:

• [ ] Ziele definieren im Dialog mit Claude („Wofür ist die Website?“)
• [ ] Content-Inventur durchführen („Was habe ich schon? Was fehlt?“)
• [ ] Struktur entwickeln („Welche Seiten brauche ich? In welcher Reihenfolge?“)
• [ ] Farbschema und Ton festlegen („Wie soll es sich anfühlen?“)

Tool: Claude Pro (Chat)

Zeitrahmen: 1-2 Wochen

Warum das wichtig ist: Ohne Klarheit baust du ins Blaue. Claude hilft dir, die richtigen Fragen zu stellen.

---

Phase 2: Prototyp bauen (Claude Chat + Copy-Paste)

Ziel: Erste funktionale Seiten zum Anfassen

Aufgaben:

• [ ] Claude erste HTML/CSS-Seiten generieren lassen
• [ ] Code in VS Code kopieren
• [ ] Mit Live Server Extension im Browser testen
• [ ] Einfache Anpassungen selbst vornehmen (Texte, Bilder)

Tool: Claude Pro (Chat) + VS Code + Live Server

Zeitrahmen: Je nach Aufgabe und Menge der Seiten zwischen 1 Stunde und mehreren Tagen

Warum das wichtig ist: Du siehst zum ersten Mal etwas Echtes. Das motiviert – und zeigt, wo du noch Fragen hast.

---

Phase 3: Grundverständnis aufbauen (Claude Chat als Lehrer)

Ziel: Verstehen, was du gebaut hast

Aufgaben:

• [ ] DevTools im Browser nutzen lernen (F12-Taste drücken)
• [ ] Screenshots von Fehlern machen (Seite + Konsole)
• [ ] Claude die Struktur erklären lassen („Was macht dieser Abschnitt?“)
• [ ] Kleine CSS-Änderungen selbst vornehmen (mit Claude-Anleitung)

Tool: Browser DevTools + Claude Chat

Zeitrahmen: Laufend parallel zu Phase 2

Warum das wichtig ist: Ohne Grundverständnis bleibst du hilflos, sobald etwas schiefgeht.

---

Phase 4: Zu Claude Code wechseln (wenn du bereit bist)

Ziel: Präzise Änderungen ohne Copy-Paste-Chaos

Voraussetzungen:

• [ ] Node.js installiert (einmalig)
• [ ] Terminal öffnen können (in VS Code: Ctrl+J oder Cmd+J)
• [ ] Verstehen, welche Datei relevant ist
• [ ] Diffs lesen können (nur Zeilen, die sich ändern)

Tool: Claude Code (VS Code Integration)

Zeitrahmen: Ab dem Punkt, wo Phase 3 abgeschlossen ist

Warum der Wechsel Sinn macht:

• Änderungen werden präzise (kein „kompletter Code neu“)
• Rollback in 3 Sekunden (/rewind)
• Direkte Datei-Referenzierung (@styles.css)

---

Entscheidungshilfe: Bin ich bereit für Claude Code?

☑ Ich verstehe, was HTML, CSS und JS grob machen
☑ Ich kann im Browser mit F12 Fehler ansehen  
☑ Ich weiß, in welcher Datei mein Problem vermutlich liegt
☑ Ich kann ein Terminal öffnen

→ Wenn bei mindestens 3 von 4 ein ☑: Claude Code ist für dich sinnvoll
→ Wenn weniger als 3: Bleib noch bei Claude Chat und lerne weiter

---

Phase 5: Wartung mit Claude Code + Screenshots

Ziel: Änderungen strukturiert und sicher durchführen

Aufgaben:

• [ ] Screenshots in /screenshots-Ordner speichern
• [ ] Mit @screenshots/bild.png referenzieren
• [ ] Claude Code analysiert + schlägt Fix vor
• [ ] Diff reviewen → „y“ oder „n“ drücken
• [ ] Falls falsch: /rewind eingeben (3 Sekunden zurück)

Tool: Claude Code + Screenshots

Zeitrahmen: Fortlaufend

Warum das wichtig ist: Wartung ist oft schwieriger als der Neubau. Claude Code macht sie beherrschbar.

---

Die universelle Wahrheit: Das gilt für alle KI-Tools

Die Lektion, die sich mit Claude Code zeigt, gilt für jedes KI-Tool. Als Laie ist der Weg steinig. Es sieht erst nach Leichtigkeit aus, es gibt scheinbar mühelos brilliante Ergebnisse, dann offenbart sich nach einiger Zeit die Wahrheit, oberflächlich brilliante Ergebnisse, aber der Inhalt ist definitiv nicht auf Profi-Ebene.

Beispiel Midjourney etc: Brillante Bilder, aber keine gezielte Bildsprache

Man kann in 30 Sekunden, mit einem Prompt wie „Meer, Welle“ ein Midjourney-Bild generieren, das brillant aussieht: Perfekte Lichtsetzung, cineastische Komposition, Details, die einen Fotografen neidisch machen würden.

Aber ist das Bild für eine Produktkampagne brauchbar? Wenn es eine bestimmte Emotion transportieren soll? Wenn Farben und Komposition eine Markenbotschaft unterstützen müssen? Wenn das Bild eine Geschichte erzählen soll?

Dann stehe ich als Anwender ratlos da. Weil ich zwar weiß, wie man „cinematic lighting, golden hour, 35mm“ eingibt – aber nicht, warum mal 35mm wichtig ist, was golden hour bewirkt und warum es wann eingesetzt werden sollte und wann nicht. Aus welcher Position soll der Bild gemacht werden, Froschperspektive, Vogelperspektive, welche Bildskomposition meine Zielgruppe emotional erreicht. Weil ich keine Ahnung von Design, Werbepsychologie, Bildaufbau, Fotokenntnisse oder Farbpsychologie habe. Weil ich nicht verstehe, wie man visuell eine Geschichte erzählt. Das erzählt und die Maschine aber nicht. Sie liefert uns ein brilliantes, uns verführendes Bild und verschweigt, dass es nichtssagende Massenware ist und damit ungeeignet.

Midjourney-Bilder sind beeindruckend. Aber sie transportieren keine zielgerichtete Botschaft. Sie sind wie ein wunderbar formulierter Satz in perfekter Grammatik – der inhaltlich ohne Bedeutung ist, aber beeindruckt.

ChatGPT: Perfekte Texte, aber keine Strategie

Ich kann ChatGPT bitten, mir einen Newsletter zu schreiben. Das Ergebnis ist grammatikalisch perfekt, strukturiert, lesbar.

Aber ohne mein Verständnis von:

• Meiner Zielgruppe (Was bewegt sie wirklich?)
• Meiner Markenstimme (Wie will ich klingen?)
• Meiner Content-Strategie (Was ist das Ziel dieses Newsletters?)

…ist es halt ein gut formulierter Text, der nach einem typischen Newsletter aussieht, aber nichts bewirkt.

Das Muster ist immer gleich

KI demokratisiert Werkzeuge – nicht Expertise.

Die meisten LinkedIn-Posts zu KI zeigen uns die Erfolgsgeschichten. Aber verschweigen die Voraussetzungen dafür.

Wenn jemand postet: „In 10 Minuten mit Claude Code zur funktionierenden App!“ – dann hat diese Person vermutlich:

• Jahrelange Coding-Erfahrung
• Ein klares Verständnis von Architektur und UX
• Die Fähigkeit, Code-Probleme zu debuggen

Für diese Person ist es wirklich ein 10-Minuten-Job. Weil Claude Code ihre bestehende Expertise beschleunigt. Und damit Claude Code eine absolute Sensation.

Für mich? Für die Meisten von uns? Nicht in 10 Minuten. Vielleicht in 10 Wochen – wenn ich bereit bin, unterstützt von Claude Chat (oder ChatGPT etc.) Schritt für Schritt zu lernen.

---

Seien wir ehrlich über unsere Fähigkeiten

Nicht, um uns kleinzumachen. Sondern um realistisch zu planen.

Wenn ich keine Ahnung von Bildkomposition habe, brauche ich für eine Marketingkampagne mit Midjourney nicht 10 Minuten – sondern Wochen. Oder einen Designer, der meine KI-Bilder kuratiert.

Wenn ich keine Ahnung von Coding habe, brauche ich für eine funktionierende Website nicht einen Nachmittag – sondern Monate. Oder einen Developer, der meinen Claude-Code professionalisiert.

Das ist nicht frustrierend. Das ist realistisch.

Und mit dieser Realität kann ich arbeiten.

Was bedeutet das konkret?

Mit Vorwissen:

• Midjourney + 10 Jahre Design-Erfahrung = Kampagne in 2 Tagen
• Claude Code + 10 Jahre Entwicklung = App in 30 Minuten
• ChatGPT + 10 Jahre Marketing = Newsletter-Serie in 1 Stunde

Ohne Vorwissen:

• Midjourney + 0 Jahre Design = beeindruckende, aber wirkungslose Bilder
• Claude Code + 0 Jahre Entwicklung = funktionierende, aber wartungsunfähige Website
• ChatGPT + 0 Jahre Marketing = perfekte Texte ohne Strategie

Mit Lernbereitschaft:

• Midjourney + Bereitschaft, Design zu lernen = in 3 Monaten brauchbare Kampagnen
• Claude Code + Bereitschaft, Grundlagen zu lernen = in 3 Monaten solide Websites
• ChatGPT + Bereitschaft, Marketing zu lernen = in 3 Monaten strategische Inhalte

Die Frage ist nicht: „Kann ich das?“ Die Frage ist: „Bin ich bereit, es zu lernen?“

---

Fazit: KI macht uns zu besseren Auftraggebern

Nach Monaten intensiver Arbeit mit Claude habe ich eine funktionierende Personal-Brand-Website. Ich bin stolz darauf.

Aber ich bin auch realistisch:

Was ich erreicht habe

1. Klarheit über meine eigenen Ziele
   Durch den Dialog mit Claude musste ich präzise formulieren, was ich will. Das hätte ich ohne KI nie so klar gehabt.
2. Grundverständnis von Webstruktur
   Ich verstehe jetzt, was ein Container ist, wie CSS funktioniert, was JavaScript macht. Ich bin kein Developer – aber ich kann mit Developern reden.
3. Eine funktionierende Website
   Sie ist live, sie funktioniert, Besucher kommen, Kontaktanfragen gehen ein.
4. Respekt vor dem Handwerk
   Ich habe gelernt, wie komplex Frontend-Development wirklich ist. Jeder, der sagt „Das ist doch nur HTML“ hat keine Ahnung.

Was ich NICHT erreicht habe

1. Unabhängigkeit von Experten
   Für komplexere Features (z.B. Formular-Backend, Performance-Optimierung, SEO-technische Details) brauche ich weiterhin Profis.
2. Wartungsautonomie
   Größere Änderungen führe ich nur mit Claude Code durch – und selbst dann bin ich unsicher.
3. Produktionsreife für kritische Systeme
   Meine Website funktioniert für Personal Branding. Für E-Commerce, datenschutzkritische Anwendungen oder skalierbare Systeme: niemals ohne Profi.

Die eigentliche Errungenschaft

Ich bin jetzt ein besserer Auftraggeber.

Wenn ich heute einen Webdesigner oder Developer beauftrage, kann ich:

• Präzise kommunizieren, was ich will (weil Claude mir geholfen hat, es zu formulieren)
• Technische Begriffe verstehen (weil Claude sie mir erklärt hat)
• Realistisch einschätzen, was komplex ist und was nicht (weil ich es selbst erlebt habe)
• Kosten besser bewerten (weil ich weiß, wo der Aufwand liegt)

Ein Webdesigner wird dankbar sein, mit mir zu arbeiten – weil ich nicht sage „Mach mal eine Website“, sondern: „Ich brauche eine responsive Personal-Brand-Site mit fünf Hauptseiten, hier ist meine Content-Struktur, hier mein Farbkonzept, hier meine Zielgruppe, und hier ist der Prototyp, den ich mit Claude gebaut habe. Kannst du das professionalisieren?“

Das Gleiche gilt für Grafikdesigner, Texter, Entwickler.

KI hat mir nicht ihre Jobs gestohlen. Aber sie hat mir gezeigt, wie wertvoll ihre Expertise ist.

Und genau das ist der eigentliche Wert von Vibe Coding – und allen anderen KI-Tools:

Sie schließen die Lücke zwischen „keine Ahnung“ und „guter Gesprächspartner für Experten“.

Nicht mehr. Aber auch nicht weniger.

Und das ist verdammt viel.

---

Am Ende gilt:

KI produziert nichts Sinnvolles ohne unser Eigenwissen.

Aber wenn wir bereit sind, dieses Wissen Schritt für Schritt aufzubauen?

Dann ist sie verdammt mächtig.

---

Was das für Entscheider in Unternehmen bedeutet

Wenn Sie als Führungskraft oder Entscheider jetzt denken: „Interessant, aber was bedeutet das für mein Unternehmen?“ – hier die Kernerkenntnisse:

1. Die „KI macht alles einfach“-Versprechen kritisch hinterfragen

Wenn Ihr Team oder externe Berater behaupten, mit KI-Tools seien komplexe Projekte „in kürzester Zeit“ umsetzbar: Seien Sie skeptisch.

Die Realität:

• KI beschleunigt Experten erheblich
• KI befähigt Laien langsam
• KI ersetzt keine Expertise

Konkret: Ein erfahrener Entwickler wird mit Claude Code tatsächlich 2-3x schneller. Ein unerfahrenes Teammitglied braucht Monate – und möglicherweise am Ende trotzdem einen Profi.

2. Investieren Sie in Grundverständnis, nicht nur in Tools

Die Versuchung ist groß: „Wir kaufen Claude Code / ChatGPT Enterprise / Midjourney – und dann können alle alles.“

Die bessere Strategie:

• Schulen Sie Ihre Teams in Grundlagen (Was ist eine API? Wie funktioniert Bildkomposition? Was macht gutes UX aus?)
• Lassen Sie KI-Tools die bestehende Expertise verstärken
• Planen Sie realistische Lernkurven ein (Wochen bis Monate, nicht Stunden)

Konkret: Ein Marketing-Team, das versteht, wie Content-Strategie funktioniert, wird mit ChatGPT brillant arbeiten. Ein Team ohne dieses Verständnis produziert nur gut formulierte, aber wirkungslose Texte.

3. Die „Auftraggeber-Kompetenz“ ist der wahre ROI

Der größte Wert von KI-Tools liegt nicht darin, dass Ihre Mitarbeitenden zu Entwicklern werden. Sondern darin, dass sie bessere Auftraggeber für Entwickler, Designer und Spezialisten werden.

Konkret:

• Anforderungen werden präziser formuliert
• Briefings werden fundierter
• Die Kommunikation mit Dienstleistern wird effizienter
• Kosten werden realistischer eingeschätzt

Das spart Zeit und Geld – nicht, weil Sie keine Profis mehr brauchen, sondern weil die Zusammenarbeit mit ihnen deutlich reibungsloser läuft.

4. Planen Sie hybride Workflows

Der Fehler ist zu denken: „Entweder machen wir es selbst mit KI – oder wir beauftragen Profis.“

Besser:

• Phase 1: Interne Teams nutzen KI für Konzept und Prototyping
• Phase 2: Profis professionalisieren und skalieren
• Phase 3: Interne Teams nutzen KI für Wartung und kleinere Anpassungen

Konkret für Ihre Digitalisierungsstrategie:

Wenn Sie Ihr Unternehmen digital transformieren wollen:

1. Nutzen Sie KI-Tools für Exploration (Was ist möglich? Wie könnte es aussehen?)
2. Holen Sie Experten für Umsetzung (Professionell, skalierbar, wartbar)
3. Befähigen Sie Ihr Team für Wartung (Mit KI kleinere Anpassungen selbst vornehmen)

Diese Kombination gibt Ihnen:

• Geschwindigkeit (keine monatelangen Agentur-Prozesse für Konzepte)
• Qualität (Profis für die kritischen Teile)
• Autonomie (Nicht bei jeder Kleinigkeit extern beauftragen müssen)

5. Erwartungen managen – intern und extern

Die größte Gefahr von KI-Hypes: Unrealistische Erwartungen.

Wenn Ihr Vorstand / Geschäftsführung fragt: „Können wir nicht einfach ChatGPT nutzen statt teure Berater?“

Antworten Sie ehrlich: „Ja, ChatGPT kann uns helfen, schneller zu arbeiten. Aber es ersetzt nicht die strategische Expertise der Berater. Es macht uns zu besseren Auftraggebern – und dadurch werden die Berater effizienter und günstiger. Aber ganz ohne sie kommen wir bei komplexen Projekten nicht aus.“

Wenn Ihr Team fragt: „Warum dauert das mit KI immer noch so lange?“

Antworten Sie realistisch: „Weil KI Werkzeuge zur Verfügung stellt – aber nicht das Wissen, wie man sie richtig einsetzt. Wir investieren jetzt in Grundverständnis. Danach wird es schneller. Aber ’schnell‘ bedeutet: Wochen statt Monate – nicht Minuten statt Stunden.“

6. Die strategische Frage: Wo lohnt sich der Invest?

Nicht jede Aufgabe rechtfertigt den Aufwand, sie intern mit KI-Unterstützung zu lösen.

KI-gestützte interne Umsetzung lohnt sich bei:

• Prototyping und Exploration (schnelle Iterationen)
• Kleineren, wiederkehrenden Aufgaben (z.B. Social-Media-Grafiken, Newsletter-Entwürfe)
• Lernprojekten (wo der Prozess wichtiger ist als die Perfektion)

Externe Profis bleiben sinnvoll bei:

• Unternehmenskritischen Systemen (E-Commerce, Datenschutz, Skalierung)
• Komplexen, einmaligen Projekten (z.B. komplette Website-Relaunch)
• Zeitkritischen Vorhaben (wo Lernkurve zu lang ist)

Die zentrale Erkenntnis für Ihr Unternehmen

KI demokratisiert Werkzeuge – nicht Expertise.

Das bedeutet nicht, dass KI wertlos ist. Im Gegenteil.

Aber es bedeutet: Die klügsten Unternehmen investieren nicht blind in KI-Tools. Sie investieren in:

1. Grundlagenverständnis (Schulungen, Workshops)
2. Realistische Erwartungen (Management, Team, Stakeholder)
3. Hybride Workflows (KI + Experten statt KI statt Experten)

Wer das versteht, wird mit KI erheblich erfolgreicher sein als jene, die glauben, ein Tool allein löse alle Probleme.

---

Für Ihre digitale Transformation bedeutet das:

Sie brauchen keine „KI-Strategie“. Sie brauchen eine Strategie, wie KI bestehende Expertise verstärkt – ohne zu glauben, dass sie diese ersetzt.

Genau dabei unterstütze ich Unternehmen: Mit Workshops, Trainings und Beratung, die realistische Erwartungen setzen, fundiertes Verständnis aufbauen und hybride Workflows etablieren.

Denn am Ende zählt nicht die Frage: „Welches Tool nutzen wir?“

Sondern: „Wie befähigen wir unser Team, diese Tools sinnvoll einzusetzen?“

---

Interesse an einem Workshop oder Beratungsgespräch zu KI-gestützter Transformation?
Kontaktieren Sie mich – und lassen Sie uns darüber sprechen, wie Sie KI in Ihrem Unternehmen realistisch und erfolgreich einsetzen können.