KI WORKSHOP · DEIN ORT

KI verstehen.
Ausprobieren. Selber bauen.

Drei Stunden. Zwei eigene Ergebnisse. Und hoffentlich viel Lust auf mehr.

01 · Heute

Drei Stunden, drei klare Etappen

60'Verstehen: LLMs, Kontext und Artefakte
60'Gestalten: aus Dateien einen Flyer bauen
60'Coden: ein portables Projekt mit VS Code

Nach jedem Block habt ihr etwas verstanden oder selbst gemacht.

02 · Unser Ziel
Kein Expertenkurs

Heute geht es um Orientierung, Mut und erste Erfahrungen

🧭Einordnen

Was KI kann, und was nicht.

📄Artefakte bauen

Aus dem Chat werden sichtbare Dateien.

🛠️Weitercoden

Aus Dateien wird ein portables Projekt.

Ihr sollt nachher wissen, wo ihr als Nächstes weiterlernen wollt.

03 · Check-in
Handzeichen

Wo steht ihr gerade bei KI?

🙈
Noch nieWas ist ein Prompt?
👀
Schon getestetEin paar Fragen gestellt
🛠️
Ab und zuFür Alltag oder Arbeit
🚀
Fast täglichEigene Workflows

Es gibt heute kein „zu wenig Erfahrung“.

04 · Einordnung

Ist das nur Hype, oder ein neues Werkzeug?

Nur Hype

Kurzer Trend. Viel Show. Bald wieder weg.

Ein neues Werkzeug

Nicht magisch und nicht für alles. Aber stark, wenn wir den Umgang damit lernen.

Die Tools wechseln. Die Fähigkeit, mit ihnen zu denken, bleibt.

05 · Die Richtung heute
Nicht nur chatten

Aus einer Unterhaltung wird Schritt für Schritt etwas Eigenes

STUFE 1💬

Chat

Ideen, Fragen und einzelne Antworten.

STUFE 2📄

Artefakt

Ein sichtbares Dokument, Layout oder Mini-Werkzeug.

STUFE 3🧑‍💻

Code

Dateien, die wir behalten, verändern und veröffentlichen können.

Unser Ziel ist nicht die schönste Antwort, sondern ein brauchbares Ergebnis.

06 · Grundlagen
Was ist ein LLM?

T9 auf sehr, sehr vielen Daten

  • Es zerlegt Sprache in kleine Teile: Tokens.
  • Es berechnet, welches Token als Nächstes gut passt.
  • Das wiederholt es schnell und mit viel Kontext.

Kein digitales Gehirn, sondern ein mächtiges Musterwerkzeug.

07 · Kontext
Was sieht das LLM gerade?

Kontext ist der aktuelle Arbeitstisch der KI

  • dein Auftrag und der bisherige Chat
  • Dateien, die du bereitstellst
  • Regeln und Hinweise des Werkzeugs

Was nicht im Kontext liegt, kann die KI nicht zuverlässig berücksichtigen.

KONTEXTFENSTERfast voll
Frühe Idee: „Vielleicht eine Event-App …“
Zielgruppe: junge Erwachsene
Wichtig: einfache Sprache, mobile Ansicht
Aktuelle Aufgabe: Landingpage verbessern
08 · Warum verliert es den Faden?
Mehr Chat ist nicht immer mehr Klarheit

Ein langer Verlauf kann wichtige Entscheidungen überdecken

💬Viel Verlauf

Ideen, Korrekturen und alte Varianten sammeln sich.

→
🌫️Weniger Fokus

Was aktuell und wichtig ist, wird unklarer.

→
🧭Ergebnis driftet

Stil, Regeln oder frühere Entscheidungen gehen verloren.

Lösung: Wichtiges kurz zusammenfassen und in Dateien festhalten.

09 · Die Zwischenstufe
Claude Artifacts · OpenAI Workflows

Ein Artefakt ist mehr als eine Antwort im Chat

CHAT💬

Besprechen

Wir erklären die Idee und treffen Entscheidungen.

ARTEFAKT🖼️

Anschauen

Das Ergebnis wird direkt sichtbar und bearbeitbar.

DATEIEN📁

Mitnehmen

HTML, Text, Daten oder Dokumente werden weiterverwendet.

Artefakte sind eine einfache Brücke vom Prompt zum eigenen Projekt.

10 · Guter Kontext
Nicht möglichst viel, sondern das Richtige

Ein gutes Briefing beantwortet vier Fragen

Was bauen wir?„Eine mobile Landingpage …“
+
Für wen?„Für Gäste zwischen 20 und 30 …“
+
Was gilt?„Einfach, ruhig, keine erfundenen Fakten …“
+
Was entsteht?„Speichere alles in klaren Dateien …“

Kontext ist das gemeinsame Verständnis vor dem Bauen.

11 · Externes Gedächtnis
Wichtige Dinge nicht nur im Chat lassen

Dateien halten den Stand des Projekts fest

  • Was soll das Projekt können?
  • Welche Entscheidungen gelten?
  • Was ist als Nächstes zu tun?

Ein neuer Chat kann die Dateien lesen und dort weiterarbeiten.

📁 mein-projekt/
├── PROJECT.md ← Ziel und Regeln
├── DECISIONS.md ← Entscheidungen
├── TODO.md ← nächste Schritte
└── index.html ← das Ergebnis
12 · Verantwortung
Bevor wir loslegen

KI kann überzeugend klingen und trotzdem falsch liegen

🔎

Prüfen

Fakten, Quellen, Zahlen und Code nie blind übernehmen.

🔐

Schützen

Keine vertraulichen oder persönlichen Daten ohne Freigabe eingeben.

🧭

Entscheiden

Verantwortung bleibt beim Menschen: besonders bei wichtigen Folgen.

KI ist ein Co-Pilot. Ihr bleibt am Steuer.

13 · Praxisblock
02 / 03 · SELBER GESTALTEN
60'

Aus einer Idee wird ein kleines Projekt

Mit Briefing, Inhalt, HTML-Artefakt und einem Flyer als PDF.

14 · Aufgabe

Euer Auftrag für die nächste Stunde

ERGEBNIS
1 Ordner

Briefing, Inhalt, HTML und PDF: alles weiterverwendbar.

5' · ThemaIdee und Zielgruppe wählen
20' · KontextBriefing und Inhalt in Dateien festhalten
25' · ArtefaktMit Claude ein HTML-Layout gestalten
10' · SichernDateien laden, PDF exportieren, testen
15 · 5 Minuten
Wenn du keine Idee hast

Wähle ein Thema, das du wirklich kennst

🎉EventKonzert, Workshop, Vereinsabend
💡Eigene IdeeProjekt, Initiative, Hobby
🏘️Lokaler OrtCafé, Treffpunkt, kleiner Laden
🌱Gute SacheRepair, Teilen, Umwelt, Nachbarschaft

Notiere: Thema · Zielgruppe · gewünschte Aktion.

16 · 15 Minuten · Inhalt

Erst Kontext und Inhalt als Dateien festhalten

  • PROJECT.md: Zielgruppe, Ton und Regeln
  • inhalt.md: Titel, Kurztext und Aktion
  • Unklare oder erfundene Angaben sichtbar markieren

Ziel: Ein anderer Chat könnte mit diesen Dateien weiterarbeiten.

Erstelle für das Flyer-Projekt zwei Dateien: PROJECT.md mit Ziel, Zielgruppe und Stilregeln; inhalt.md mit Titel, Kurztext, drei Punkten und Call to Action.
2 Dateien erstellt
📄 PROJECT.md
📄 inhalt.md
17 · 5 Minuten · Speichern
Der Chat ist nicht das Projekt

Speichert den Zwischenstand ausserhalb des Chats

  • Dateien eindeutig benennen
  • kurz öffnen und Inhalt prüfen
  • gemeinsam in einen Projektordner legen

Ab jetzt arbeitet ihr mit einem Projekt, nicht nur mit einem Verlauf.

📁 mein-flyer/
├── PROJECT.md
└── inhalt.md

Gleich kommen flyer.html und mein-flyer.pdf dazu.
18 · 25 Minuten · Gestaltung

Aus den Dateien wird ein sichtbares HTML-Artefakt

  • PROJECT.md und inhalt.md bereitstellen
  • A4-Layout als HTML-Artefakt erstellen lassen
  • Vorschau prüfen und konkret verbessern
  • den erzeugten Code als flyer.html sichern

Die Vorschau ist praktisch. Die Datei macht das Ergebnis dauerhaft.

DEIN THEMA · DEIN ORT
Mach den ersten Schritt.
Mehr erfahrendein-link.ch →
19 · 5 Minuten · Fertigstellen
Prüfen und mitnehmen

Das Ergebnis besteht jetzt aus mehr als einer Vorschau

📄

HTML öffnen

Funktioniert die Datei auch ausserhalb des KI-Werkzeugs?

👀

Flyer prüfen

Worum geht es? Für wen? Was soll ich tun?

📦

Alles sichern

Briefing, Inhalt, HTML und PDF liegen im selben Ordner.

PROJECT.mdinhalt.mdflyer.htmlflyer.pdf
20 · 5 Minuten · Feedback
Zu zweit · kleiner Handover-Test

Kann jemand anderes mit eurem Projekt weiterarbeiten?

📁
Person A übergibt

Projektordner und fertigen Flyer zeigen.

↔
🧑‍🔎
Person B prüft

Ist Ziel, Stand und nächster Schritt verständlich?

Gute Dateien sind der erste Schritt zu gutem Coding.

21 · Codingblock
03 / 03 · SELBER BAUEN
60'

Vibe Coding mit VS Code

Wir arbeiten direkt mit Dateien, wechseln den KI-Anbieter und halten den Projektstand fest.

22 · Warum Coding?
Code ist auch Sprache · aus Dübendorf

Weil aus einer Antwort ein Werkzeug werden kann

// Auch diese Präsentation ist vibe coded.
const idee = "KI einfach erklären";
const deck = await ki.baue(idee);

prüfen(deck);
verbessern(deck);
teilen(deck);

Der Code ist nicht nur die Antwort der KI: er ist das Produkt, das bei euch bleibt.

23 · Anbieter wechseln
Der gemeinsame Nenner sind die Dateien

Das Modell kann wechseln: euer Projekt bleibt

🟠Claude
↔
📁HTML · CSS · JS · Markdownoffene Projektdateien
↔
🟢OpenAI

Wer nur einen Chat besitzt, hängt am Chat. Wer Dateien besitzt, kann weiterziehen.

24 · VS Code

Dateien, Vorschau und KI-Chat

1 · Dateien

index.html enthält Aufbau, Text und Design unseres Prototyps.

2 · Vorschau

Im Browser sehen wir sofort, was funktioniert und was fehlt.

3 · KI-Chat

Wir beschreiben kleine Änderungen und prüfen das Resultat.

Heute zählt der Loop, nicht jedes Menü im Editor.

25 · Dokumentation
Das Projekt erklärt sich selbst

Lasst die KI wichtige Grundlagen in Dateien nachführen

PROJECT.md

Ziel, Zielgruppe, Ton und wichtigste Regeln.

TECH.md

Technische Grundlagen, Dateistruktur und verwendete Werkzeuge.

TODO.md

Was funktioniert, was fehlt und was als Nächstes kommt.

Halte technische Entscheidungen und Änderungen laufend in TECH.md fest. Aktualisiere TODO.md nach jedem grösseren Schritt.
26 · 15 Minuten · Live-Build 1
VS Code · Website

Eine Landingpage für ein fiktives Schweizer Café

klarmobileine Aktion
Arbeite im bestehenden Projektordner. Baue in index.html eine moderne Landingpage für „Berg & Bohne“ in Luzern. Zeige Angebot, Öffnungszeiten und einen klaren Reservationsbutton. Warm, ruhig, schweizerisch, ohne Klischees. Halte technische Entscheidungen in TECH.md fest.
BERG & BOHNE · LUZERNKaffee mit Aussicht.Geröstet hier. Genossen am See.
Heute offen bis 18:00
Seestrasse 12 · Luzern
Tisch reservieren
27 · 5 Minuten · Übergabe
Neuer Chat oder anderer Anbieter

Kann eine andere KI dort weitermachen, wo wir aufgehört haben?

Lies zuerst PROJECT.md, TECH.md und die vorhandenen Dateien. Erkläre mir den aktuellen Stand in fünf Sätzen. Ändere danach nur die mobile Navigation.

Wenn die Übergabe klappt, ist euer Kontext gut dokumentiert.

📁 berg-und-bohne/
├── PROJECT.md
├── TECH.md
├── TODO.md
└── index.html
28 · 15 Minuten · Live-Build 2
VS Code · Mini-App

Ein digitaler Guide für einen Ort in der Schweiz

InfosAnreiseHighlights
Lies zuerst PROJECT.md und TECH.md. Entwickle den bestehenden Code zu einem einfachen Tourismus-Guide für Appenzell weiter. Zeige Anreise, drei Highlights und einen Tagesvorschlag. Markiere ungeprüfte Inhalte als Demo-Daten und aktualisiere die Dokumentation.
Appenzell
entdecken
Heute
Highlights
Essen & Trinken
Anreise
DEMO-DATEN
18°
🌤️
🏘️ DorfkernBunte Häuser & kleine Läden
⛰️ EbenalpAussicht und kurze Wanderungen
🧀 Lokale SpezialitätenProbieren und mitnehmen
29 · 5 Minuten · Fertig
Projekt sauber hinterlassen

Testen, dokumentieren, dann erst aufhören

🧪Eine Funktion testen

Klicken, mobil prüfen und offensichtliche Fehler suchen.

📝Dateien aktualisieren

TECH.md und TODO.md auf den echten Stand bringen.

📦Ordner sichern

Das vollständige Projekt bleibt bei euch.

Gute Dokumentation ist Kontext für Menschen und für die nächste KI.

30 · 10 Minuten · Der Beweis
Zu zweit · tauscht die Plätze

Der Test, ob ihr wirklich unabhängig seid

Öffnet den Ordner eurer Sitznachbarin in einem neuen Chat, gern auch mit einem anderen KI-Anbieter. Und dann sagt einfach: „Lies das Projekt und mach den nächsten Punkt aus TODO.md.“

ChatGPT
→
📁euer Ordnerbleibt gleich
←
Claude

Funktioniert das, seid ihr an keinen Anbieter gebunden. Genau das war das Ziel.

31 · Und jetzt?

Geht heute nicht als Experten raus.
Geht neugierig raus.

01Eine echte Frage

Etwas, das euch wirklich interessiert.

02Ein kleines Projekt

Ein Mini-Prototyp statt der perfekten Idee.

03Eine weitere Runde

Feedback holen und weiterlernen.

Das Ziel für heute: Hunger auf mehr.