Tages-Workshop

Webseiten & Web-Apps bauen mit opencode in deiner IDE

Von der ersten Datei bis in die Produktion — mit einem KI-Agenten, der direkt in deinem Editor mitarbeitet. In 8 Stufen, an einem durchgehenden Praxis-Beispiel.

Worum geht's?

Du lernst, wie du mit opencode direkt im integrierten Terminal deiner IDE (VS Code, Cursor, Antigravity) echte Dinge baust: Webseiten, kleine Web-Apps, Automatisierungen — und wie du das in einer Firma sinnvoll und sicher einsetzt. Der rote Faden: sichtbarer Quick-Win → Zeit sparen → echter Code (Brownfield) → bis ins Deployment.

Dieses Portal ist beides: Live-Präsentation für den Workshop und Selbstlern-Kurs zum Durchklicken. Dein Fortschritt wird lokal gespeichert.

? Warum opencode — zusätzlich zur eingebauten KI deiner IDE?

Deine IDE hat meist schon KI (Code-Vervollständigung, Chat — z. B. Copilot in VS Code, der Cursor-Chat oder Gemini in Antigravity). opencode ist etwas anderes: ein Agent, der eigenständig mehrere Dateien liest, ändert, Befehle ausführt und Schritt für Schritt arbeitet. Und anders als die meisten Agenten ist opencode quelloffen und providerunabhängig — das Modell wählst du selbst.

⌨️ Klassische Editor-KI
  • Vervollständigt die aktuelle Zeile / Datei
  • Beantwortet Fragen im Chat
  • Du führst Befehle selbst aus
  • Kontext meist auf das offene File begrenzt
🤖 opencode (Agent im Terminal)
  • Plant Aufgaben & arbeitet über viele Dateien
  • Liest/schreibt Dateien, führt Tests & Befehle aus
  • Fragt bei heiklen Aktionen um Freigabe
  • Versteht das ganze Projekt (inkl. AGENTS.md)
  • Open Source · jedes Modell (auch lokal)
Kurz: Die IDE ist der Editor, opencode ist der mitarbeitende Kollege darin. Beides zusammen ist stärker als jedes allein.

🧠 Mentales Modell: ein Agent in deinem Terminal

opencode macht keine Magie. Es ist ein wiederkehrender Kreislauf — und du bleibst an der Kontrolle.

💬
Du promptest
„Bau mir …"
📂
Liest Kontext
Dateien, Projekt
✏️
Schlägt Änderung vor
Code / Befehl
🔐
Fragt um Freigabe
du bestätigst
✅
Führt aus & zeigt
Ergebnis

… und dann wieder von vorn. Du gibst die Richtung vor und bestätigst — opencode übernimmt die Fleißarbeit.

🏭 Unser Beispiel: die „Nordwerk GmbH"

Damit alles zusammenhängt, digitalisieren wir über alle Stufen hinweg eine fiktive kleine Firma.

Stufe 3 baut die öffentliche Landingpage, Stufe 4 ein internes Dashboard, Stufe 6 ein Report-Skript, Stufe 7 erweitert ein bestehendes Modul und bringt alles live. So siehst du, wie opencode im echten Firmenalltag wächst.

🗺️ Die 8 Stufen

Git ist das Sicherheitsnetz. Für sicheres Arbeiten mit KI-Änderungen gibt es eine eigene Schwester-Schulung: „Git in der IDE". Wir verweisen an den passenden Stellen darauf.
Stufe 1

Setup & Orientierung

opencode im integrierten Terminal deiner IDE installieren, einloggen und das erste Mal etwas bauen.

1 Installieren & starten

opencode läuft im integrierten Terminal deiner IDE — ob VS Code, Cursor oder Antigravity. Einmal installieren, dann mit einem Befehl starten.

Terminal — VS Code / Cursor / Antigravity
  1. In deiner IDE das Terminal öffnen (Strg/Cmd + ö bzw. View → Terminal).
  2. opencode installieren — am einfachsten per Installer-Skript curl -fsSL https://opencode.ai/install | bash (Alternativen: npm i -g opencode-ai oder brew install anomalyco/tap/opencode). Details in der opencode-Doku.
  3. Im Projektordner opencode starten und im TUI mit /connect einen Anbieter verbinden (OpenCode Zen, Claude, OpenAI, Gemini, OpenRouter — oder ein lokales Modell via Ollama/LM Studio).
  4. Mit /init eine AGENTS.md anlegen lassen. Danach siehst du unten Modell und Modus; mit /models wechselst du das Modell, mit Tab zwischen Plan- und Build-Modus.
Tipp: opencode ist quelloffen und providerunabhängig — du bist an keinen Anbieter gebunden und kannst sogar ein lokales Modell nutzen. Es „lebt" im Ordner, in dem du es startest: öffne in deiner IDE den richtigen Projektordner, bevor du loslegst. Auf Windows ist WSL2 meist die angenehmste Terminal-Umgebung.
Versionsstand: Diese Schulung bezieht sich auf opencode v1.15.13 (veröffentlicht 30. Mai 2026) · Stand: Juni 2026. opencode entwickelt sich schnell — bei neueren Versionen können sich einzelne Befehle/Optionen ändern; die Konzepte bleiben. Aktuelle Version prüfen: opencode --version.
Neu auf der Kommandozeile? Die Grundlagen — Navigieren, Dateien, Befehle, Installieren, mit Umschalter für Linux/macOS/Windows — gibt's in Terminal-Basics.

2 Die IDE-Oberfläche verstehen

Vier Bereiche, die du kennen solltest. Die Skizze zeigt das Layout schematisch (VS Code, Cursor & Antigravity sind hier nahezu gleich) — die Nummern erklärt die Legende darunter.

VS Code — nordwerk-website
Skizze
  • 1 Datei-Explorer — dein Projektbaum. opencode sieht genau diese Dateien.
  • 2 Editor — hier siehst du Änderungen sofort, kannst selbst eingreifen.
  • 3 Terminal mit opencode — dein Prompt-Eingabefeld an den Agenten.
  • 4 Diff/Änderungen — was opencode geändert hat, prüfst du hier (Quellcode-Verwaltung).
Schematische Darstellung — in VS Code, Cursor & Antigravity liegen Explorer links, Editor in der Mitte, das opencode-Terminal unten, die Änderungen rechts.

3 Erstes Prompt → erste Datei

Sag in einfachen Worten, was du willst. opencode legt die Datei an — nach deiner Freigabe.

Du

Lege eine Datei hallo.html an mit einer zentrierten Überschrift „Hallo Nordwerk" und einem Lime-Hintergrund.

opencode

Ich erstelle hallo.html mit einem einfachen, zentrierten Layout. Darf ich die Datei anlegen?

→ [Freigabe erteilt] → Datei erstellt. Öffne sie im Browser, um sie zu sehen.

Wichtig: Du musst keine perfekten Anweisungen schreiben. Anfangen, ansehen, nachschärfen — das ist der normale Rhythmus (mehr in Stufe 2).

✓ Geschafft, wenn du …

Stufe 2

Grundlagen des Arbeitens

Wie du gut promptest, Kontext gibst, mit dem Plan-/Build-Modus arbeitest und über Berechtigungen die Kontrolle behältst.

1 Gut prompten

Je klarer Ziel, Kontext und gewünschtes Ergebnis, desto besser. Vage Prompts kosten Runden.

✗ vage
  • „Mach die Seite schöner."
  • „Bau mir ein Tool."
  • „Fix den Bug."
✓ konkret
  • „Mach die Hero-Sektion responsive, max. Breite 1100px, mehr Abstand."
  • „Bau ein Dashboard mit 3 Kennzahl-Karten aus daten.json."
  • „Der Filter zeigt 0 Treffer bei Großbuchstaben — vergleiche case-insensitive."

2 Dateien & Kontext referenzieren

Zeig opencode, worum es geht — statt es raten zu lassen.

@-Referenzen: Mit @dateiname hängst du konkrete Dateien an dein Prompt. „Richte dich nach @styles.css" liefert viel bessere Ergebnisse als eine allgemeine Bitte.

3 Plan- vs. Build-Modus

opencode kennt zwei Modi (Wechsel mit Tab): Im Plan-Modus liest und plant es nur — es ändert keine Dateien. Im Build-Modus setzt es den Schritt-für-Schritt-Plan dann um. Faustregel: erst im Plan-Modus prüfen, dann zum Bauen wechseln.

Klick, um zu sehen, wie ein Plan entsteht.
1.Bestehende Struktur von index.html lesen
2.Neue Sektion „Leistungen" als Karten-Grid entwerfen
3.Responsive Regeln in styles.css ergänzen
4.Im Browser gegenprüfen
✓ Plan steht. Erst jetzt — nach deiner Freigabe — beginnt opencode mit den Änderungen. Du kannst den Plan vorher anpassen.

So sieht das im Terminal aus:

Terminal — opencode plant
● Plan · opencode zeigt die Schritte, bevor es Dateien ändert › Ergänze eine Sektion „Leistungen" als Karten-Grid. Mein Plan: 1. index.html lesen (bestehende Struktur) 2. Karten-Grid „Leistungen" entwerfen 3. Responsive-Regeln in styles.css ergänzen 4. Im Browser gegenprüfen ? Plan annehmen? [ Annehmen ] [ bearbeiten ] [ abbrechen ]
Ablauf: opencode listet die 4 Schritte auf, ohne Dateien zu ändern. Erst nach „Annehmen" werden die Änderungen ausgeführt und sind im Browser sichtbar.

4 Berechtigungen: opencode fragt nach

Du behältst die Kontrolle: opencode fragt vor heiklen Aktionen um Freigabe. Pro Aktionstyp legst du fest, ob es fragt, erlaubt oder verbietet.

Aktionen mit Freigabe
  • edit — Dateien ändern
  • bash — Shell-Befehle ausführen
  • webfetch/websearch — Inhalte aus dem Netz holen
  • read, grep, glob, lsp — Projektkontext lesen
Einstellung je Aktion
  • "ask" — vor jeder Aktion nachfragen (sicher)
  • "allow" — ohne Rückfrage erlauben
  • "deny" — ganz verbieten
Zusammenspiel: Im Plan-Modus sind Änderungen ohnehin gesperrt. Im Build-Modus bestimmen die permission-Regeln in opencode.json, wann gefragt wird (Details in Stufe 5). Für Teams ist oft gut: global "*": "ask", harmlose Befehle gezielt erlauben, gefährliche Muster wie rm * verbieten.
Sicherheitsnetz: Das dauerhafte Netz für KI-Änderungen ist zusätzlich Git — jede Änderung nachvollziehbar & umkehrbar (Stufe 6 + Git-Schulung).

✓ Geschafft, wenn du …

Stufe 3 · Nordwerk

Erste Webseite

Eine echte Landingpage von Null — responsive, live geändert. Der sichtbare Quick-Win.

1 Von Null zur Landingpage

Ein Prompt mit klarem Ziel reicht für ein erstes, vorzeigbares Ergebnis.

Du

Bau eine einseitige Landingpage für die „Nordwerk GmbH" (Metallbau): Hero mit Slogan, 3 Leistungs-Karten, Kontakt-Abschnitt. Modern, dunkel, responsive. Nur HTML/CSS, keine Frameworks.

opencode

Ich lege index.html und styles.css an, mit Hero, Karten-Grid und Kontaktbereich. Danach kannst du im Browser draufschauen.

Terminal — nordwerk-website
› opencode run "Landingpage für Nordwerk GmbH …" ● erstellt index.html ● erstellt styles.css ✓ Fertig. Öffne index.html im Browser.

2 Ansehen & nachschärfen (Vorher / Nachher)

Iterieren ist der Normalfall: erste Version ansehen, gezielt verbessern.

Browser — index.html (v1 → final)
Skizze
Schematisch: links die erste Version, rechts nach 2–3 Nachschärfungen (Lime-Akzent, größerer Hero, anhebende Karten).
Du

Mehr Abstand im Hero, die Karten sollen beim Hover leicht anheben, und die Akzentfarbe auf Lime (#bce941).

So fühlt sich Iterieren an — ein Klick verwandelt v1 in die finale Version:

Browser — index.html
Skizze · interaktiv
v1 — schlicht. Klick, um nachzuschärfen.

3 Responsive prüfen

„Sieht das auf dem Handy gut aus?" ist ein gültiges Prompt.

Browser — Mobile-Ansicht
Skizze
Schematisch: auf schmalen Geräten stapeln sich Hero und Karten untereinander — eine Spalte statt drei.

✓ Geschafft, wenn du …

Stufe 4 · Nordwerk

Interaktivität & Web-App

Ein kleines internes Dashboard mit echtem Verhalten — und wie opencode beim Debugging hilft.

1 Internes Dashboard bauen

Aus statisch wird interaktiv: Daten anzeigen, filtern, reagieren.

Du

Bau ein internes Dashboard: lies auftraege.json, zeige Kennzahl-Karten (offen/erledigt/Umsatz) und eine filterbare Tabelle. Vanilla JS.

opencode

Ich erstelle dashboard.html + app.js: Karten rechnen die Summen, das Suchfeld filtert die Tabelle live.

2 Debugging: Bug → Fix

Bugs gehören dazu. Beschreibe das Symptom — opencode findet und erklärt die Ursache. Klick „Fix anwenden".

Symptom: Der Filter findet „Schmidt" nicht, wenn man „schmidt" tippt.

const q = input.value; rows.filter(r => r.name.includes(q)); // case-sensitive! render(rows);
Ursache: includes vergleicht Groß-/Kleinschreibung. „schmidt" ≠ „Schmidt".
✓ Behoben: beide Seiten mit .toLowerCase() vergleichen — jetzt case-insensitive.

Im Terminal läuft das so ab:

Terminal — Debugging
› Der Filter findet „Schmidt" nicht, wenn ich „schmidt" tippe. ● liest app.js ● gefunden: Zeile 12 — includes(q) ist case-sensitive ● Vorschlag: r.name.toLowerCase().includes(q.toLowerCase()) ? Änderung anwenden? [ ja ] [ nein ] ✓ Suche funktioniert jetzt unabhängig von Groß-/Kleinschreibung.
Ablauf: Du tippst nur das Symptom. opencode zeigt die betroffene Zeile, erklärt die Ursache (Groß-/Kleinschreibung) und schlägt den Fix vor — nach deiner Freigabe funktioniert die Suche.

✓ Geschafft, wenn du …

Stufe 5

opencode methodisch nutzen

Die Features, die aus „nettem Helfer" einen verlässlichen, wiederholbaren Arbeitspartner machen.

1 Die Werkzeuge im Überblick

🧩
Open Source
Quelloffen. Transparent, erweiterbar, kein Vendor-Lock-in — auditierbar fürs Unternehmen.
🔀
Jedes Modell
Providerunabhängig: OpenCode Zen, Claude, OpenAI, Gemini, OpenRouter — oder lokal via Ollama/LM Studio. Wechsel mit /models.
📄
AGENTS.md
Projekt-Kontext & Regeln, die opencode automatisch liest — das Gedächtnis deines Projekts.
🔌
MCP
Externe Tools & Datenquellen anbinden (Model Context Protocol) — Doku, Datenbank, Ticket-System.
🤖
opencode run
Nicht-interaktiv laufen lassen — ideal für Skripte, Cron-Jobs und CI.
⚙️
opencode.json
Modell, Berechtigungen und MCP-Server zentral festlegen — pro Projekt oder global.

2 AGENTS.md anlegen

Die AGENTS.md im Projekt-Wurzelverzeichnis ist das Gedächtnis deines Projekts: Konventionen, Befehle, „nicht anfassen"-Zonen. opencode liest sie automatisch — du kannst sie von opencode erstellen lassen.

iopencode erzeugt das Gerüst
› /init
● analysiert Repo-Struktur, Befehle und Konventionen
› Ergänze in AGENTS.md: Build-/Test-Befehle, Code-Stil, Review-Regeln und Do-not-touch-Zonen.
● erstellt AGENTS.md ✓
Warum stark: Einmal gepflegt, hält sich opencode projektweit an eure Regeln — ohne dass du sie jedes Mal wiederholst. Gute Inhalte: Repo-Aufbau, Start-/Test-/Lint-Befehle, Engineering-Konventionen, Review-Erwartungen und klare Grenzen.

3 Automatisieren mit opencode run

Wiederkehrende Aufgaben musst du nicht jedes Mal von Hand starten. opencode run lässt opencode nicht-interaktiv laufen — perfekt für Skripte, Cron-Jobs oder CI-Pipelines.

Terminal — Automation
› opencode run --model opencode/gpt-5.1-codex "erzeuge aus auftraege.csv den Monatsreport als report.html" ● liest auftraege.csv ● erstellt report.html ✓ Fertig — nicht-interaktiv, skriptfähig.
Idee fürs Team: Solche opencode run-Aufrufe in ein npm-Skript oder einen nächtlichen Cron-Job packen — die Monatsreports entstehen dann automatisch. Mit --model wählst du gezielt ein Modell, mit --file hängst du Dateien an, mit --format json bekommst du maschinenlesbare Events. --dangerously-skip-permissions nur isoliert einsetzen.

4 Konfiguration & MCP (opencode.json)

In opencode.json (im Projekt) oder global unter ~/.config/opencode/ legst du Modell, Berechtigungen und MCP-Server fest.

⚙opencode.json (Beispiel)
{
  "$schema": "https://opencode.ai/config.json",
  "model": "opencode/gpt-5.1-codex",
  "small_model": "anthropic/claude-haiku-4-5",
  "permission": {
    "*": "ask",
    "bash": { "*": "ask", "git *": "allow", "rm *": "deny" },
    "edit": "ask"
  },
  "mcp": {
    "docs": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-filesystem", "./docs"],
      "enabled": true
    }
  }
}
Effekt: Standardmodell (Format provider/modell — frei wählbar), kleines Modell für Nebenaufgaben, Freigabe-Regeln und angebundene Tools gelten projektweit. Modellliste aktualisieren: opencode models --refresh. MCP prüfen: opencode mcp list.

✓ Geschafft, wenn du …

Stufe 6 · Nordwerk

Produktiv im Alltag

Refactoring, Tests, Git, MCP und eine Automatisierung, die über die Web-Welt hinausgeht.

1 Refactoring & Code erklären

Du

Erklär mir, was app.js macht, und schlage 3 Verbesserungen vor — ohne Verhalten zu ändern.

opencode

Überblick + 3 konkrete Refactorings (Funktionen trennen, Namen klären, Duplikate entfernen). Soll ich sie umsetzen?

2 Tests

„Schreib Tests dafür" ist ein hervorragendes Prompt — Tests sichern künftige Änderungen ab.

Du

Schreib die kleinsten sinnvollen Tests für den Filter und führe sie aus. Wenn etwas fehlschlägt, erkläre zuerst die Ursache, bevor du den Code änderst.

opencode

Ich ergänze gezielte Tests, starte den Testbefehl aus AGENTS.md und fasse Ergebnis + nächste Schritte zusammen.

Terminal — tests
› npm test ✓ filtert case-insensitive ✓ summiert Umsatz korrekt 2 passed

3 Git — kurz, aber wichtig

opencode hilft auch bei Git: Commit-Messages vorschlagen, Diffs erklären, bei Konflikten unterstützen. Git ist dein Sicherheitsnetz für KI-Änderungen. Die ganze Tiefe in der Git-Schulung.
Vor dem Commit: Lass dir die Änderungen von opencode zusammenfassen und im Plan-Modus gegenlesen — ein gutes zweites Paar Augen. Das ersetzt kein eigenes Lesen des Diffs.

4 MCP / Connectors

Über MCP verbindet sich opencode mit externen Werkzeugen & Datenquellen (z. B. Ticket-System, Datenbank, Doku).

Idee: Statt Daten zu kopieren, fragt opencode direkt das angebundene System. Sicherheit beachten — siehe Stufe 8 (nicht vertrauenswürdige Inhalte).

5 Automatisierungs-Skript (CSV → Report)

Der Nutzen über Webseiten hinaus: wiederkehrende Büroarbeit automatisieren.

Du

Schreib ein Skript, das auftraege.csv einliest und einen Monatsreport (Summen pro Kunde, als HTML) erzeugt.

Browser — report.html
Skizze
Schematisch: aus der CSV wird ein lesbarer HTML-Report mit Summen pro Kunde — automatisch erzeugt.

✓ Geschafft, wenn du …

Stufe 7 · Nordwerk

Echte Projekte & Deployment

Bestehenden Code verstehen und ändern (Brownfield) — und das Ergebnis live bringen.

1 Brownfield verstehen

Der Firmenalltag ist selten „grüne Wiese". opencode hilft, fremden Code schnell zu erfassen.

Du

Verschaff dir einen Überblick über dieses Projekt und erkläre mir die Architektur in 5 Sätzen. Wo würde ich eine neue Funktion „Angebots-PDF" einhängen?

Erst eine AGENTS.md anlegen lassen, dann gezielt fragen — so arbeitet opencode von Anfang an mit dem richtigen Kontext.

2 Große Aufgaben zerlegen

  1. Ziel klären & zuerst planen lassen.
  2. In kleine, prüfbare Schritte aufteilen.
  3. Schritt umsetzen → ansehen → nächster Schritt.
  4. Nach jedem sinnvollen Schritt committen (Git).

3 Statisch deployen — zuerst der einfache Weg

Eine statische Seite live zu bringen ist erstaunlich einfach.

Terminal — deploy
› opencode run "baue die Seite statisch und erkläre die Deploy-Optionen" ● Build in ./dist ● Optionen: statisches Hosting, VPS, Container … ✓ Bereit zum Hochladen.

4 Docker als Kür

Für reproduzierbares Deployment auf dem eigenen Server: ein Container.

🐳Dockerfile (statische Auslieferung)
FROM caddy:alpine
COPY ./dist /usr/share/caddy
Mehr Tiefe: Self-Hosting mit Docker & Caddy ist Thema der Git-Schulung (Forgejo-Beispiel).

Build & Deployment im Terminal:

Terminal — Deployment
› opencode run "baue die Seite und verpacke sie in einen Container" ● npm run build → ./dist ● schreibt Dockerfile (caddy:alpine) ● docker build -t nordwerk . ● docker run -p 8080:80 nordwerk ✓ Live unter http://localhost:8080
Ablauf: Die Seite wird statisch gebaut, in einen Container verpackt und gestartet — im Browser erscheint die Live-Version der Nordwerk-Seite.

✓ Geschafft, wenn du …

Stufe 8

Best Practices, Grenzen & Sicherheit

Damit opencode im Firmenalltag ein Gewinn bleibt — und kein Risiko.

1 Was opencode (nicht) gut kann

✓ Stark bei
  • Boilerplate, Refactoring, Tests
  • fremden Code erklären
  • wiederkehrende Aufgaben
  • Vorschläge & Varianten
△ Vorsicht bei
  • fachlichen Entscheidungen ohne Kontext
  • brandneuen/seltenen APIs
  • „einfach alles" ohne Review
  • sicherheitskritischen Details

2 Review-Pflicht & Halluzinationen

Du verantwortest den Code. opencode kann plausibel klingenden, aber falschen Code erzeugen (Halluzination). Lies Diffs, lass Tests laufen, prüfe das Ergebnis — besonders vor dem Commit.

3 Prompt-Injection / nicht vertrauenswürdige Inhalte

Reales Risiko bei MCP & Web: Inhalte aus externen Quellen (Webseiten, Tickets, Dokumente) können versteckte Anweisungen enthalten, die opencode manipulieren wollen. Behandle externe Inhalte als Daten, nicht als Befehle — und gib nur die Berechtigungen, die nötig sind.

4 Secrets & .gitignore

Niemals echte Tokens/Passwörter in den Code oder ins Repo. Platzhalter verwenden, Secrets in .env, und .env in .gitignore. Falls doch passiert: Secret widerrufen — Details (auch „aus der Historie entfernen") in der Git-Schulung.

5 Sicherheitsnetz: Berechtigungen + Git

Zwei Netze: opencodes Berechtigungen & der Plan-Modus verhindern ungewollte Aktionen während der Sitzung — und Git ist das dauerhafte, nachvollziehbare Sicherheitsnetz für jede Änderung.
Datenhoheit (DSGVO): Weil opencode providerunabhängig ist, kannst du ein lokales Modell (z. B. via Ollama oder LM Studio) nutzen. Dann kann Code lokal bleiben — vorausgesetzt, Provider, MCP-Server, Sharing und Telemetrie sind entsprechend konfiguriert. Für sensible Projekte immer technisch und rechtlich prüfen.

6 Kontext & Kosten

Große Aufgaben = viel Kontext = mehr Tokens/Zeit. Arbeite fokussiert: relevante Dateien referenzieren, Aufgaben zerlegen, AGENTS.md pflegen. Das spart Geld und macht die Ergebnisse besser.

✓ Geschafft, wenn du …

Bonus

Cheat-Sheet

Zum Mitnehmen: gute Prompts, nützliche Befehle, Automatisierungs-Ideen. (Zählt nicht für den Fortschritt.)

★ Prompt-Muster, die funktionieren

  • Ziel + Kontext + Format: „Bau X, richte dich nach @datei, nur HTML/CSS."
  • Symptom statt Lösung: „Bei Großbuchstaben 0 Treffer" — Ursache findet opencode.
  • Erst Plan: „Mach erst einen Plan, bevor du etwas änderst."
  • Verifizieren: „Führe die Tests aus und zeig mir das Ergebnis."

⌨ Nützliche Befehle & Slash-Kommandos

opencode
Interaktive TUI-Sitzung im Terminal starten.
opencode run "…"
Nicht-interaktiv für Skripte & CI.
Tab
Zwischen Plan- und Build-Modus wechseln.
/connect
Provider/API-Key im TUI verbinden.
/models
Modell / Provider für die Sitzung wechseln.
/init
AGENTS.md erzeugen oder aktualisieren.
/undo
Letzte Änderung zurücknehmen; mit /redo wiederholen.
opencode mcp list
MCP-Server und Status prüfen.
/share
Sitzung per Link teilen (abschaltbar).

🧩 Automatisierungs-Ideen für die Firma

  • Report-Generator (CSV/Excel → formatierter Bericht, per opencode run)
  • Onboarding-Helfer (Projekt erklären, Setup-Schritte) — via AGENTS.md
  • Review-Checkliste (Stil, Sicherheit, Tests) vor jedem Commit
  • Doku-Schreiber (Code → README/Spec) als nächtlicher Job
Lernkontrolle

Quiz

10 Fragen quer durch die Stufen. Ab 8 richtigen Antworten schaltest du dein Zertifikat frei.

Frage 1 von 10
…
Abschluss

Dein Zertifikat

Glückwunsch! Trage deinen Namen ein und drucke das Zertifikat (oder speichere als PDF).

FL
Florian Ludwig
AI Consultant · Kutzschbach INNOVATIONS
Zertifikat
opencode in der IDE
Hiermit wird bestätigt, dass
Dein Name hier
den Workshop „Webseiten & Web-Apps bauen mit opencode in der IDE" erfolgreich abgeschlossen hat.
—Datum
★GEPRÜFT
Florian LudwigAI Consultant · Kutzschbach INNOVATIONS