SESSION 02 / 06
Veröffentlichen wir erst einmal
die eigene Webseite.
Dokumente → Vorführung → Deployment → Grundsätze
Jee Jun Young
BWL statt Informatik → Journalismus · Auslandsvertrieb → Wechsel in die Entwicklung
iOS · Android · Frontend Etwa 5½ Jahre (im sechsten Jahr)
Entwicklung von iOS-/macOS-Apps für ein Kollaborationstool eines Großunternehmens
Seit 2026 Web- und Serverentwicklung sowie Vermarktung als Einzelentwickler mit Vibe Coding
TEIL 1 — Rückblick
Was haben Sie seit dem letzten Termin
Claude machen lassen?
Es ist auch in Ordnung, wenn Sie noch nichts ausprobiert haben.
Letztes Mal haben wir
genau eine HTML-Datei erstellt
und sie selbst geöffnet.
Wollen Sie die Datei per KakaoTalk verschicken?
Wollen Sie sie nur allein zu Hause ansehen?
Veröffentlichen heißt: Sie können sie herumzeigen.
unter einer eigenen Adresse
und ihre Projekte
„Hier könnt ihr sie kaufen“
TODAY'S GOAL
Am Ende dieses Termins
Haben Sie den gesamten Ablauf gesehen:
eine Webseite bauen
und sieim Internet veröffentlichen.
Verstehen Sie,
warum Dokumente nötig sind.
PART 2
Dokumente kommen zuerst
Was ist für Sie ein Dokument?
Was bedeutet ein Dokument für Claude?
„Was bauen wir diesmal?“
„So sollst du es bauen“
des gewünschten Ergebnisses
Warum das nötig ist, erkläre ich mit einem Restaurant.
STEP 1
🍚 „Essen bitte.“
Was passiert, wenn Sie ohne Blick auf die Speisekarte „Essen bitte“ sagen?
Sie bekommen, was der Wirt will.
Bei KI ist es genauso.
Nur „Mach mal“ sagen → sie schustert etwas zusammen.
STEP 2
🍳 „Kimchi-Bratreis bitte.“
Nennen Sie ein konkretes Gericht,
bekommen Sie wenigstens das gewünschte Essen.
= Der KI eine Seite mit dem geplanten Vorhaben geben
STEP 3
📋 Detaillierte Bestellung
„Mit Spam, nicht mit anderem Frühstücksfleisch.
Der Kimchi soll gut fermentiert sein.
Das Ei weich gebraten. Bitte ohne eingelegten Rettich.“
Diese Details vermitteln Sie der KI
mit einem Dokument.
Der Wirt Ihres Stammlokals erinnert sich, oder?
KI kann das nicht.
Bei KI steht jedes Mal eine neue Aushilfe da.
Sie weiß nicht, was Sie gestern bestellt haben.
Deshalb schreiben Sie es auf.
Auch eine neue Aushilfe kann den Zettel lesen
und sofort loslegen.
Bevor Sie der KI die Arbeit geben,
lassen Sie sie zuerst die Dokumente erstellen.
Vorführung des Dozenten ①
Das Grimoire-Projekt in Claudes Mac-App öffnen
„Erkläre die Dokumente dieses Projekts“
→ Die Struktur, in der KI Dokumente liest und danach arbeitet, besteht bereits.
Was Sie gerade gesehen haben,
ist Stufe 3 — die detaillierte Bestellung.
In diesem Projekt liegen
mehrere Blätter mit der Anweisung:
„Diesen Teil so bauen.“
Und wenn keines dieser Blätter vorhanden wäre?
→ „Essen bitte.“ Das Ergebnis fällt entsprechend schlampig aus.
Vorführung des Dozenten ②
Die Dokumentenstruktur direkt in IntelliJ ansehen
(gemeinsam)
(Küche / Gastraum)
Oben steht das Konzept, darunter getrennte Regeln für Küche und Gastraum.
Vorführung des Dozenten ③
DOC_MAP.html — Dokumentenbeziehungen im Vollbild
Merken Sie sich heute
nur die eine Seite ganz oben.
📋 Konzept
Die Beschreibung des Vorhabens steht an der Spitze des Projekts
Die restliche komplexe Struktur? → Dazu mehr in Termin 3.
Zurück zum Restaurant:
Das ist der Gesamtplan aller Regeln an den Wänden.
So kompliziert war es nicht von Anfang an.
Am Anfang stand eine Konzeptseite.
„Unser Restaurant ist auf Kimchi-Bratreis spezialisiert.“
Mit dieser einen Seite begann es. Danach kam eine Regel nach der anderen hinzu.
PART 3
Eine Webseite bauen
+ veröffentlichen
Ich zeige es Ihnen jetzt von Anfang bis Ende.
Live-Vorführung
Claude eine Webseite erstellen lassen
Zuerst lassen wir allein aus Textanweisungen eine Webseite erstellen.
→ Wechsel zum Bildschirm des Dozenten
Sie ist fertig. Aber…
„Ich kann doch gar nicht
gestalten?“
Es gibt drei Möglichkeiten.
THREE METHODS
ein passendes Design aufnehmen
Die KI nach ihren Grundsätzen fragen
einfach per Drag-and-drop übergeben
KI kennt die Designtheorie vollkommen.
Sie hat jedes Designbuch der Welt gelesen.
Aber sie weiß nicht wirklich,
was Menschen dazu bringt,
„Wow, das sieht toll aus“ zu denken.
Jemand, der jede Filmkritik der Welt gelesen,
aber nie selbst einen Film gesehen hat
Die Regeln sind bekannt, das Gespür fehlt. Menschen geben die Richtung vor, KI setzt um. Das ist Regie.
Live-Vorführung — Methode 3
Die HTML-Präsentation aus Termin 1 in Claude ziehen
USER
Erstelle es mit dem Stil und den Gestaltungsregeln dieser Datei.
Rot, Schwarz, Bauhaus-Anmutung.
Mit Einblendanimationen und einem Tippeffekt.
→ Wechsel zum Bildschirm des Dozenten
Live-Vorführung — Deployment
Bei Vercel anmelden → Projekt hochladen → URL erzeugen
So veröffentlichen Sie die erstellte Webseite im Internet.
→ Wechsel zum Bildschirm des Dozenten
DEPLOYED
Schicken Sie diese URL
jetzt an irgendjemanden,
und sie öffnet sich sofort.
Wenn Sie den Ablauf zu Hause wiederholen,
bekommen Sie dasselbe Ergebnis.
Web-Umsetzer, Webentwickler und Fullstack-Entwickler auf Auftragsplattformen wie Kmong.
Dienstleister, die Projekte schnell abschließen und zum nächsten wechseln.
Viele erledigen ihre Arbeit mit Vercel, das ich gerade gezeigt habe, und Supabase, das als Nächstes kommt.
Wenn Sie Ihr Webprojekt auf Vercel und Supabase veröffentlichen können,
gut gestaltet, ohne Fehlfunktionen und ohne Sicherheitslücken —
können Sie Ihren eigenen Dienst betreiben,
ohne ihre Hilfe in Anspruch nehmen zu müssen.
Live-Vorführung — Supabase
„Ein Ort zum Speichern von Daten“
Merken Sie sich zunächst nur, dass es das gibt.
→ Wechsel zum Bildschirm des Dozenten
Vercel, Supabase.
Beim Hin und Her mit Claude
werden Sie bestimmt an Stellen feststecken.
Es wird natürlich Dinge geben, an die Sie sich nicht erinnern.
Entscheidend ist,
was Sie tun, wenn Sie feststecken.
10 Minuten Pause
Machen wir eine kurze Pause.
PART 4
Vier Grundsätze
für die Arbeit mit KI
Ich gebe dem, was Sie gerade gesehen haben,
jetzt Namen.
Gute Ergebnisse beginnen damit, das Gewünschte zu klären.
„Ich habe Claude nicht einfach sofort ‚Mach mal‘ gesagt.
Ich ließ zuerst das Konzept erstellen, oder? Genau das ist gemeint.“
Schreiben Sie im Restaurant eine detaillierte Bestellung, statt nur „Essen bitte“ zu sagen. Dann bekommen Sie das Gewünschte, auch wenn jedes Mal eine neue Aushilfe kommt.
Den Auftrag aufschreiben, das Ergebnis prüfen und bei Bedarf erneut anfordern.
„Das Konzept von eben war genau dieses Dokument.
Ohne es hätte Claude gemacht, was es wollte.“
Im Restaurant wird die Bestellung aufgeschrieben. Sonst vergisst man sie. Bei KI ist es genauso.
das sie tatsächlich nicht getan hat.
„Ich habe während der Vorführung nachgeprüft.
Ob es wirklich läuft, ob die Arbeit tatsächlich
wie behauptet erledigt wurde und ob die Aussage nur geraten war.
Das muss zur Gewohnheit werden.“
Drei Fragen zum Verhören der KI
„Diesen Wert — hast du ihn tatsächlich geprüft oder geschätzt?“
„Die Information, die du gesehen hast — von wann stammt dieser Eintrag?“
„Ist dieser Ansatz grundsätzlich richtig?“
Echte Fälle — Nicht alles für bare Münze nehmen
Strukturkonflikt durch einen falschen Ansatz
Falsche Meldung „Keine Änderungen“
Fehlende Sitzungsaufzeichnung
Das habe ich alles selbst erlebt.
Ohne Prüfung wäre es unbemerkt geblieben.
ändert sich die spürbare Effizienz erheblich.
„Ich habe keine einzige Zeile Code getippt.
Alles hat Claude gemacht. Das ist Delegieren.“
Eine wöchentlich wiederkehrende, lästige Aufgabe → ein Kandidat für die KI.
SUMMARY
Bei der Vorbereitung dieses Termins
habe ich einige eigene Grundsätze formuliert.
Ich werde sieim offenen Chat veröffentlichen.
BONUS
Noch ein Grundsatz.
Es bringt mehr, die KI am Kragen zu packen und sie erneut arbeiten zu lassen.
„Sie haben gesehen, was ich tat, als ich bei der Vorführung feststeckte.
Ich suchte nicht bei Google und schlug kein Buch auf.
Ich fragte Claude.“
PART 5 — HOMEWORK
Die heutige
Hausaufgabe
Es kann eine Vorstellungsseite sein
oder etwas ganz anderes.
Wichtig ist, es einmal selbst auszuprobieren.
Fragen Sie beim BauenClaude
nach diesen Dingen.
Was ist CLAUDE.md?
Wie erstellt und verwaltet man in großen Projekten andere Dokumente?
Was ist RLS?
Wie bewahre ich API-Schlüssel auf?
Was ist localStorage?
Was ist .env?
Stellen Sie auch ein paar Fragen
zum Code.
Was ist Next.js?
Ist das in reinem JavaScript geschrieben?
Was ist dann TypeScript?
Was ist React?
Was ist Zustandsverwaltung?
Sie müssen diese Begriffe kennen,
damit Claude geordneten Code schreibt.
Sie müssen jetzt nicht alles verstehen.
Suchen Sie nicht bei Google.
Fragen Sie Claude.
Aber lassen Sie mich
einen Punkt klarstellen.
Ich habe es schon in Termin 1 erwähnt —
Anthropic, das Unternehmen hinter Claude,
hat den Gebrauchtbuchmarkt in den USA durchforstet,
Hunderttausende Bücher gekauft,
eingescannt und KI damit trainiert.
Warum? Weil Bücher von Fachleuten geschrieben,
von Redaktionen geprüft
und am Markt bewertet werden.
Ihre Qualität unterscheidet sich von Texten, die im Internet kursieren.
Am Ende bleiben
Bücher die Grundlage.
Aber schon vor dem Anfang
unter der Last dieser Bücher
gar nicht erst anzufangen,
passt nicht in unsere Zeit.
Unterschätzen Sie nicht
Bücher und die Meinung von Fachleuten.
Der Zeitpunkt, an dem Sie geprüftes Wissen brauchen, kommt garantiert.
Sie brauchen es, um Ihren Dienst vor Schäden zu bewahren.
SESSION 02 / 06
Vielen Dank
für Ihre Arbeit heute.
Nächstes Mal — Termin 3
„Dokumente verfeinern, erstellen und verknüpfen“
CONTACT
Fragen können Sie
im offenen KakaoTalk-Chat stellen.
QR-Code scannen, um den offenen Chat zu öffnen.