VIBE CODING HFSZ

Vibe Coding

From good vibes to code

Drei Stunden über KI, Sprache und warum plötzlich alle programmieren können.

1 · Wer redet hier
Dima (Dimitry Uzilevsky)
Moderation

Dima 👾

  • Technologie-Enthusiast und Prototyper aus Zürich
  • Vorher: IT-, ERP- und Controlling-Projekte bei Deutscher Telekom, Orange, Lufthansa, Gate Gourmet
  • Heute: Apps, KI-Prototypen und kleine Helfer mit modernen Coding-Tools

Diese Präsentation ist mit Vibe Coding entstanden.
Fragen ist erlaubt.

2 · Zeitplan

Drei Stunden, vier Blöcke

45 min
Einstieg & PräsentationWie wir hierher kamen, wie das Ganze funktioniert, wer was baut.
30 min
Eure Use CasesBrainstorming in Gruppen: Was nervt euch, und wofür fehlt bis heute ein Tool?
Pause
30 min
Artefakte in Claude & ChatGPTEin kleines Beispiel, das wir gemeinsam durchgehen.
60 min
Wir bauen zusammen eine App oder WebsiteMit VS Code, wie echte Programmierer.

Ziel für heute: neugierig werden, wie man eigene Ideen in Code umsetzt.

3 · Check-in

Wo steht ihr gerade bei KI?

🫣
Noch nie benutztKenne ich nur aus den News
💬
Ab und zu ChatGPTMeistens für Texte und Bilder
⚡
Fast täglichIst Teil meines Alltags
🛠️
Schon was gebautCode, Automation, Bot

Alle drei Gruppen nehmen heute etwas mit. Versprochen.

TEIL 1
01

Wie wir hierher kamen

Eine kurze Geschichte davon, wie Programmieren immer einfacher wurde, bis es heute jeder machen kann.

5 · Der Anfang
1945–1970

Am Anfang war Programmieren:
Schalter umlegen

Ein Prozessor ist im Grunde ein sehr schneller Taschenrechner. Er kann nur ein paar Dinge: eine Zahl aus einer Schublade holen, damit rechnen, sie zurücklegen. Diese Schubladen heissen Register.

🔢

Alles war Zahlen

Kein „öffne die Datei“. Sondern: lade Zahl aus Schublade 3, addiere Schublade 5, leg sie in Schublade 1.

📇

Programme auf Karton

Lochkarten. Ein Loch falsch gestanzt und das ganze Programm läuft nicht. Runterfallen lassen wollte man den Stapel auch nicht.

🎓

Ein Beruf für wenige

Man musste wissen, wie die Maschine innen aussieht. Das konnten weltweit ein paar tausend Leute.

Merkt euch das Gefühl: Der Mensch musste sich der Maschine anpassen.

6 · Die grosse Linie
Jede Stufe = eine Übersetzungsschicht mehr

Seitdem ging es nur in eine Richtung: einfacher

1940er Maschinencode 10110000 01100001

Reine Zahlen. Nur die Maschine versteht das. Und ein paar Menschen.

1950er Assembler MOV AL, 61h

Kürzel statt Zahlen. Immer noch pro Prozessortyp anders.

1970er C int x = 97;

Erstmals fast lesbar. Läuft auf verschiedenen Maschinen.

1990er Python & Co. print("Hoi")

Fast schon Englisch. Man muss es aber immer noch exakt tippen.

seit 2022 Deutsch. Englisch. „Mach mir eine Website
für mein Café.“

Komma vergessen? Egal. Die Maschine passt sich jetzt euch an.

← Maschine bestimmtMensch bestimmt →
7 · Der Satz dazu

Einer hat das früh auf den Punkt gebracht

„The hottest new programming language is English.“

Die angesagteste neue Programmiersprache ist Englisch.

Andrej Karpathy
Andrej Karpathy Mitgründer von OpenAI, davor KI-Chef bei Tesla · Januar 2023

Damals klang das nach Angeberei. Heute ist es einfach die Beschreibung eures Alltags.

8 · Der Ursprung
2017 · Google

Alles, was ihr heute benutzt, geht auf ein einziges Paper zurück

Acht Forscher bei Google stellen eine neue Architektur vor: den Transformer. Der Trick heisst „Attention“: Das Modell lernt selbst, welche Wörter im Satz füreinander wichtig sind.

Daher der Name ChatGPT:

GGenerativeerzeugt selbst neuen Text, statt nur zu suchen
PPre-trainedvorher auf riesigen Textmengen trainiert
TTransformergenau die Architektur aus diesem Paper

Google hat es veröffentlicht, gross wurde damit aber zuerst ein anderer: OpenAI mit ChatGPT.

Erste Seite des Papers „Attention Is All You Need“, Vaswani et al., Google, NIPS 2017
Vaswani et al., Attention Is All You Need, NIPS 2017 · arxiv.org/abs/1706.03762
9 · Grundlagen
Was ist ein neuronales Netz?

Ganz viele Regler, die sich selbst einstellen

Stellt euch tausende winzige Schalter vor, die in Schichten hintereinander liegen. Links kommt etwas rein, rechts kommt eine Antwort raus. Jede Verbindung hat ein Gewicht: eine Zahl, die sagt „das hier ist wichtig“ oder „das hier ist egal“.

  • Beim Training rät das Netz, liegt falsch, dreht an den Reglern, milliardenfach
  • Niemand programmiert die Regler von Hand. Sie stellen sich selbst ein
  • Diese eingestellten Zahlen sind die Gewichte. Merkt euch das Wort für gleich

Deshalb kann niemand genau sagen, warum ein Modell etwas antwortet.

rein „versteckte Schichten“ raus
10 · Zwei Lager
Erinnert ihr euch an die „Gewichte“? Jetzt wird es wichtig

Die Branche läuft in zwei Richtungen auseinander

🔓 Open Weights

Die eingestellten Zahlen sind öffentlich. Ihr könnt das Modell herunterladen und auf eurem eigenen Rechner laufen lassen.

Llama Qwen DeepSeek Mistral Gemma gpt-oss GLM

Vorteil: läuft offline, niemand kann es euch abschalten, keine Nutzungsgebühr.
Haken: ihr braucht Hardware und etwas Technikwissen.

🔒 Closed Weights

Die Zahlen bleiben im Haus. Ihr kommt nur über die Website oder eine Schnittstelle heran. Das Modell selbst bekommt ihr nie.

GPT Claude Gemini Grok

Vorteil: meist das Beste, was es gerade gibt, und null Aufwand.
Haken: Preis, Verfügbarkeit und Regeln bestimmt der Anbieter. Nicht ihr.

Stand August 2026: Die Namen ändern sich schneller als diese Folie. Das Prinzip nicht.

11 · Grundlagen
Was ist ein LLM?

T9 auf sehr, sehr vielen Daten

Handys vor Smartphones kannten das schon: das Handy schlug beim Tippen das nächste Wort vor. Ein LLM macht genau dasselbe, nur hat es dafür das ganze Internet gelesen.

  • Es rät immer nur: welches Wortstück kommt als Nächstes?
  • Es „weiss“ nichts. Es kennt nur Wahrscheinlichkeiten
  • Genau deshalb erfindet es manchmal überzeugend Blödsinn

LLM heisst „Large Language Model“. Ein sehr grosses Sprach-Ratemodell.

12 · Tokens
Probiert es aus

Es sieht keine Wörter, sondern Legosteine

Bevor das Modell rechnet, zerlegt es euren Satz in Stücke: Tokens. Mal ein ganzes Wort, mal nur eine Silbe. Alles, was ihr bezahlt und alles, was es sich merken kann, wird in Tokens gemessen.

Faustregel: 100 Tokens ≈ 75 Wörter.

Vereinfachte Darstellung. Echte Tokenizer schneiden etwas anders.

13 · Ein bekanntes Muster
Wo das schon mal passiert ist

Bitcoin-Mining hat diesen Weg bereits vorgemacht

🖥️CPU

2009: normale Prozessoren reichten am Anfang.

🎮GPU

Ab 2010: Grafikkarten, tausendfach parallel.

🎯ASIC

Ab 2013: Application-Specific Integrated Circuit, ein Chip nur für eine Aufgabe.

🎮Heute bei KI

Fast alles läuft über GPUs mit Nvidia CUDA.

🚀Was schon kommt

Google und Huawei bauen eigene KI-Chips.

Die Richtung: mehr Rechenleistung, um ein Vielfaches effizienter.

14 · Ausblick
Ehrlich gesagt: niemand weiss es

Was als Nächstes kommt, kann euch niemand seriös sagen

Wer im Januar behauptet, was im Dezember State of the Art ist, verkauft euch etwas. Was sich aber in jeder bisherigen Runde wiederholt hat, ist die Richtung:

🔬Neue Methoden

Der Transformer war nicht das Ende der Forschung, sondern der Anfang.

🪶Immer effizienter

Modelle, die vor zwei Jahren ein Rechenzentrum brauchten, laufen heute auf einem Laptop.

📱Direkt auf dem Handy

Der Weg geht klar dahin, dass brauchbare Modelle lokal auf dem Smartphone laufen, ohne Internet.

Deshalb lernt heute nicht ein Tool auswendig. Lernt das Prinzip.

15 · Eure Daten
Die Frage, die im Job wirklich zählt

Wohin geht das, was ihr eintippt?

☁️

Cloud: ChatGPT, Claude, Gemini im Browser

euer Tippen→ verschlüsselt unterwegs→ auf dem Server entschlüsselt→ Antwort zurück
💻

Lokal: Ollama, LM Studio auf eurem Rechner

euer Tippen→ bleibt auf dem Gerät→ Antwort
🔐

Verschlüsselt ≠ unsichtbar

Der Transportweg ist sicher. Aber zum Rechnen muss der Text auf dem Server im Klartext vorliegen. Anders geht es technisch nicht.

📄

Business-Pläne helfen

Enterprise- und Team-Abos sagen vertraglich zu, eure Daten nicht fürs Training zu verwenden. Das ist ein Versprechen, kein Naturgesetz.

🤷

Sicher wisst ihr es nie

Ihr könnt es nicht nachprüfen. Deshalb: Patientendaten, Lohnlisten, Kundenverträge gehören nicht in ein Gratis-Chatfenster.

TEIL 2
02

Eure Ideen sind gefragt

17 · 30 Minuten · Gruppen zu viert
Breakout

Was nervt euch so richtig, und es gibt noch kein Tool dafür?

Sucht ein echtes Problem aus eurem Alltag oder Job. Kein erfundenes. Etwas, bei dem ihr regelmässig denkt: „das kann doch nicht sein, dass ich das von Hand mache.“

Nicht zählt: „E-Mails automatisch mit ChatGPT beantworten.“ Das gibt es schon dreifach. Wir suchen hier etwas ganz Neues.
1 · SammelnJede Person nennt zwei Dinge, die im Alltag unnötig lange dauern. Ohne Bewerten.
2 · AuswählenEinigt euch auf das eine, das euch am meisten stört.
3 · Konkret machenWer genau hat das Problem? Wie oft? Was wäre das Ergebnis, wenn es gelöst ist?
4 · Vorstellen60 Sekunden pro Gruppe. Ein Satz genügt: „Wir wollen, dass ___ nicht mehr ___ machen muss.“
🎽 Wer im Verein hat noch nicht bezahlt? 🍲 Kochplan aus WG-Kühlschrankresten 🚲 Welches Ersatzteil fehlt bei welchem Kunden? 📸 20 000 Handyfotos sortieren, ohne Upload
18 · Pause
☕

Pause

Kurz raus, kurz durchatmen. Danach basteln wir.

Artefakte → App
TEIL 3
03

Vibe Coding

20 · Der Begriff

Warum heisst das eigentlich „Vibe Coding“?

„…where you fully give in to the vibes, and forget that the code even exists.“

…wo man sich ganz den Vibes hingibt und vergisst, dass der Code überhaupt existiert.

Andrej Karpathy
Wieder Andrej Karpathy Februar 2025 · ein einzelner Post, 4,5 Millionen Mal gelesen

Gemeint war: Man beschreibt, was man will, schaut aufs Ergebnis statt auf den Code, und wenn ein Fehler kommt, kopiert man ihn einfach zurück in den Chat. Der Name blieb hängen, und ein Teil der Programmierenden ist bis heute beleidigt, weil sich das verdächtig nach ihrem Job anhört.

Vibe Coding ersetzt keine Profis. Aber es macht aus Zuschauenden Mitmachende.

21 · Achtung, Falle
Base44 · Lovable · und die ganze „Klick dir deine App“-Fraktion

Die bequemen Baukästen haben einen Preis

🎣 Der Baukasten

Ihr beschreibt eure App, bekommt sie fertig angezeigt, klickt auf „veröffentlichen“. Grossartig, solange nichts schiefgeht.

Den Code seht ihr nicht. Die Datenbank gehört dem Anbieter. Und selbst wenn ihr im teuren Abo den Code exportieren dürft:

eigenes Datenbankformat eigene Login-Logik eigenes Hosting
Habt ihr erst echte Kunden und echte Daten drin, wird der Umzug richtig teuer.

🗝️ Der eigene Ordner

Ihr baut dasselbe lokal in VS Code. Etwas mehr Technik nötig, ein paar Klicks mehr am Anfang.

Dafür: gewöhnliche Dateien, gewöhnliche Datenbank, gewöhnliches Hosting. Alles austauschbar.

Anbieter wechselbar Modell wechselbar Hosting wechselbar
Ihr bleibt unabhängig. Und genau das üben wir gleich.

Faustregel: Wenn ihr die Dateien nicht sehen könnt, gehört euch das Projekt nicht.

22 · Womit arbeitet man
„Harness“ heisst einfach: das Geschirr, in dem das Modell arbeitet

Es gibt zwei Sorten von Werkzeug

💬 Die Chat-Programme

Das, was ihr kennt: Fenster auf, lostippen.

  • ChatGPT mit Projekten und Workflows
  • Claude mit Artefakten
  • Gemini, Perplexity fürs Recherchieren
Perfekt für Texte, Ideen, einzelne Ergebnisse.

🛠️ Die Coding-Harnesses

Die KI sitzt direkt in euren Dateien und darf sie verändern.

  • VS Code mit Copilot, Cline oder Claude: ein Editor mit KI-Chat
  • Cursor, Windsurf: Editoren, um KI herum gebaut
  • Claude Code, Codex: laufen im Terminal, ganz ohne Fenster
Nötig, sobald aus einem Ergebnis ein Projekt wird.

Heute Nachmittag benutzen wir beides: erst Chat, dann Editor.

23 · Ein Beispiel dazu
Ein Beispiel dazu · Boris Cherny bei Anthropic

Claude Code: entstanden als ein Bastel-Experiment

🎧Ende 2024

Boris Cherny bastelt im Terminal mit Claude, ohne fertigen Plan.

🎵Erstes Spielzeug

Zeigt nur an, welche Musik ein Kollege gerade hört.

🔥Lauffeuer

Bekommt Dateizugriff, verbreitet sich intern bei Anthropic.

🚀Mai 2025

Daraus wird Claude Code.

Auch bei Anthropic selbst hat niemand um Erlaubnis gefragt. Jemand hat einfach angefangen.

24 · Das Problem
Kennt ihr das?

Irgendwann wird der Chat einfach schlechter

Ein Modell hat einen begrenzten Arbeitstisch: den Kontext. Alles, was ihr geschrieben habt, liegt darauf. Wird es voll, rutscht das Wichtige unter den Stapel.

  • Es vergisst, was ihr vor 40 Nachrichten entschieden habt
  • Es widerspricht sich selbst
  • Es dreht sich im Kreis und ihr werdet wütend

Das ist kein Bedienfehler. Das ist Bauart.

25 · Die Lösung, Teil 1
Claude Artifacts · ChatGPT Canvas & Workflows

Darum haben die Anbieter Artefakte erfunden

Ein Artefakt ist ein fertiges kleines Stück Arbeit, das aus dem Chat herausfällt: eine Datei. Kein Gesprächsverlauf, sondern ein Ergebnis.

📄
Ein FlyerFertiges A4-Layout als Datei
🌐
Eine WebsiteEin Stück HTML, das man ansehen kann
📊
Eine TabelleAuswertung, die ihr weiterverwendet
🧾
Ein KonzeptText, den der nächste Chat lesen kann
endloser Chat → flyer.html → neuer Chat startet damit

Der Trick: Ein Artefakt ist der Startpunkt für das nächste Gespräch. Ihr fangt nie bei null an.

26 · Die Lösung, Teil 2
Wenn ihr direkt mit einem Editor arbeitet

Ein Ordner ist das ehrlichste Ergebnis, das es gibt

  • Alles landet als Datei im Ordner, nicht im Chat
  • Ihr könnt kopieren, mailen, auf einen Stick ziehen
  • Modell wechseln mitten im Projekt: es liest den Ordner und macht weiter

Der Chat gehört dem Anbieter. Der Ordner gehört euch.

27 · Ein ehrlicher Blick
Bevor ihr gleich selbst loslegt

Vibe Coding hat auch eine Schattenseite

Es gibt inzwischen echte Untersuchungen dazu, nicht nur Bauchgefühl. Die gute Nachricht: die Risiken lassen sich mit ein paar einfachen Gewohnheiten stark reduzieren.

⚠️ Was schiefgehen kann

Echte Vorfälle, keine Theorie.

  • Eine Studie fand in KI-mitgeschriebenem Code fast dreimal so viele Sicherheitslücken wie in von Menschen geschriebenem Code
  • 2025 löschte ein KI-Agent bei einer Firma eine Produktionsdatenbank, trotz expliziter Anweisung, nichts zu verändern
  • Wer den Code nicht selbst geschrieben hat, tut sich schwer, ihn zu verstehen, sobald etwas kracht
Schnell gebaut heisst nicht automatisch sicher gebaut.

🧭 Wie ihr gegensteuert

Die KI liefert schneller, das Denken bleibt bei euch.

  • Architektur und Datenmodell selbst entscheiden, bevor ihr bauen lasst, statt die KI die Struktur wählen zu lassen
  • Klein anfangen, oft testen, Schritt für Schritt statt alles auf einmal generieren lassen
  • Code lesen, bevor ihr ihn übernehmt, auch wenn nur grob
  • Löschen, Datenbank-Änderungen oder Force-Push nie ohne Rückfrage ausführen lassen
Planung vorher, Kontrolle während, Review danach.

Vibe Coding ersetzt nicht das Nachdenken. Es beschleunigt nur, was danach kommt.

28 · 30 Minuten · Artefakt
Übung 1 · wir basteln mit ChatGPT Work und Claude Artefacts

Wir bauen einen Flyer, den wir wirklich ausdrucken würden

A4 · Hochformat Claude Artefacts oder ChatGPT Work Ergebnis: eine Datei

Wir nehmen unser Thema aus dem Breakout, oder etwas, das wir wirklich kennen: unseren Verein, unsere Band, unseren Nebenjob. Erfundene Firmen werden langweilige Flyer.

„Erstelle einen A4-Flyer als einzelne HTML-Datei.
Thema: ___
Zielgruppe: ___
Wichtigste Botschaft: ___
Ton: ___
Nur eine Datei, druckfertig, keine externen Bilder.“
SAMSTAG · 14 UHR · TURNHALLE
Schnuppertraining
für alle
ANMELDUNG@VEREIN.CHGRATIS
01Erste Version

Anschauen, nicht sofort meckern.

02Drei Änderungen

Konkret sagen, was anders soll.

03Speichern

Als Datei sichern, dann als PDF drucken.

29 · Werkzeugwechsel

VS Code ist im Kern einfach ein besserer Ordner

VS Code ist gratis, läuft auf jedem Rechner und ist im Grunde ein Textbearbeitungsprogramm mit drei nützlichen Bereichen. Mehr müsst ihr heute nicht wissen. Zuerst erschlägt es einen, dann will man nichts anderes mehr nutzen zum Tüfteln.

Ihr müsst keine Zeile Code selbst tippen. Ihr müsst nur sehen können, was entsteht.

📁 Links: die Dateien

Alles, was zu eurem Projekt gehört. Anklicken zum Anschauen.

📝 Mitte: der Inhalt

Hier steht der Text und der Code. Hier schreibt meistens die KI.

💬 Rechts: der KI-Chat

Wie ChatGPT, nur dass er eure Dateien sieht und direkt ändern darf.

30 · 45 Minuten · Live-Build
Übung 2 · in VS Code

Aus der Idee wird eine App

Ordner statt Chat Vorschau im Browser Ergebnis: ein Projekt

Gleiches Thema, neues Werkzeug. Ihr legt einen Ordner an, schiebt den Flyer hinein und lasst die KI daraus eine richtige Seite bauen, mit mehreren Abschnitten und einem Kontaktbereich.

„Lies PROJECT.md.
Bau daraus eine einseitige Website:
Startbereich, drei Abschnitte, Kontakt.
Handy-tauglich. Schreib danach in TODO.md,
was noch fehlt.“
SEIT 2019 · ZÜRICH Willkommen Euer Thema, aber richtig im Netz.
Über uns · Angebot · Termine · Kontakt Schreib uns
31 · Und jetzt?

Versucht keine Profis zu sein.
Bleibt neugierig und probiert aus.

01Diese Woche

Nehmt eine nervige Aufgabe und lasst sie einmal von der KI machen.

02Diesen Monat

Baut die Idee aus dem Breakout als winzige Version. Hässlich ist erlaubt.

03Danach

Zeigt sie jemandem. Feedback schlägt Perfektion.

32 · Vielen Dank

Vielen Dank!

codecook.ch

Mehr zu Workshops und MVPs.

 dima@codecook.ch

Schreibt mir eine kurze Nachricht.

 LinkedIn

Bleiben wir connected.

👾 Viel Spass bei schlaflosen Nächten beim Tüfteln an euren Ideen.