Sportstech · AI Enablement

Dein Guide für AI-Tools & Automatisierungen

Hier findest du alles, was du brauchst, um mit n8n, Claude Code und der Sportstech_GIT Organisation produktiv zu werden — Schritt für Schritt.

☑️
Fortschritt tracken
Hake Schritte ab — dein Fortschritt wird automatisch im Browser gespeichert.
📋
Schritt für Schritt
Jeder Abschnitt führt dich durch das Setup mit klaren Anleitungen und Code-Snippets.
🔗
Links & Downloads
Alle wichtigen Dokumente, Vorlagen und Ressourcen sind direkt verlinkt.
💬
Fragen?
Meld dich per MS Teams, über Wrike oder direkt beim PMO Team.

Unser Tech-Stack

n8n
Automatisierung & API-Handling
Visueller Workflow-Builder — verbindet alle Services miteinander und orchestriert API-Aufrufe ohne Code.
🤖
Claude Code
KI-Coding-Assistent
Anthropics KI-Terminal — schreibt, erklärt und refactort Code direkt in deinem Projektordner.
🚀
Vercel
Live-Deployment
Jeder Push auf GitHub löst automatisch ein Deployment aus — dein Projekt ist in Sekunden online.
🐙
GitHub · Sportstech_GIT
Zentrale Codebase
Alle Sportstech-Projekte leben in der Organisation Sportstech_GIT — versioniert, sicher und vom PMO gemanaged.

Wie die Tools zusammenspielen

Claude Code schreibt den Code → GitHub (Sportstech_GIT) speichert ihn → Vercel bringt ihn live → n8n verbindet alles mit anderen Services

🤖
Claude Code
Coding-Assistent
git push
🐙
GitHub
Sportstech_GIT
auto deploy
🚀
Vercel
Live-URL
API calls
n8n
Middle Layer

n8n fungiert als Middle Layer — es empfängt Webhooks von Vercel, ruft externe APIs auf und sendet Ergebnisse zurück oder in Wrike-Tasks.

Ein-Pager für das ganze Team

Wie wir mit KI arbeiten.

Diese Prinzipien legen fest, wie wir bei Sportstech KI einsetzen — nicht, welche Tools wir benutzen. Sie gelten für alle: Content, Finance, PMO, Operations, Leadership.

5
Prinzipien
4
Tool-Owner
100%
Mensch entscheidet final
0
Headcount-Kürzungen durch KI

1

Die fünf Prinzipien

Was uns leitet, wenn KI im Spiel ist — fünf Leitsätze für jede Rolle und jedes Tool.

01Strategie

KI stärkt Menschen — sie ersetzt sie nicht.

Jedes KI-Tool bei Sportstech muss eine konkrete menschliche Fähigkeit verstärken: bessere Entscheidungen, schnelleres Lernen, höhere Qualität, sinnvollere Arbeit. Wenn ein Tool das nicht leistet, fliegt es raus.

Praxisregel

Vor jedem neuen Tool-Onboarding: Ein Satz, was es für den Menschen besser macht. Lässt sich der Satz nicht schreiben, wird das Tool nicht eingeführt.

02Expertise

Wir schützen unser Können aktiv vor Erosion.

KI darf Drafts erstellen, vorschlagen, beschleunigen — aber niemand bei Sportstech unterschreibt etwas blind. Wer einen KI-Output nutzt, muss ihn verstehen und vertreten können. Sonst sind wir in zwei Jahren handlungsunfähig.

Praxisregel

Draft → verstehen → entscheiden. Liquiditätsmodelle, Listings, Verträge, Bank-Kommunikation: KI ist Co-Pilot, nicht Autopilot.

03Enablement

Skill schlägt Zugang.

Ein MCP-Token alleine macht niemanden produktiv. Wir investieren in Workflows, in dokumentiertes Vorgehen und in Skill-Aufbau im Team — nicht nur in Lizenzen. Jedes Tool hat einen Workflow, jeder Workflow hat einen klaren Use-Case.

Praxisregel

Pro Tool: ein Workflow-Doc, ein verantwortlicher Owner, ein Schulungsformat. Kein Tool ohne diese drei Dinge im Standardbetrieb.

04Vertrauen

Sichtbare Verantwortung — nie eine Black Box.

Wo KI bei uns mitarbeitet, ist das sichtbar. Jedes Tool hat einen benannten Owner. Jeder im Team darf einen KI-Output ablehnen oder überschreiben — ohne sich zu rechtfertigen. Wichtige Entscheidungen treffen Menschen, nicht Modelle.

Praxisregel

Human Override gilt immer. Wer einen Output anzweifelt, hat die Pflicht — nicht die Lizenz — zur Korrektur. Owner muss reagieren.

05Reinvestition · Kernversprechen

Produktivitätsgewinne fließen zurück ins Team.

Wenn KI uns Zeit zurückgibt, kürzen wir keine Stellen. Wir investieren die Zeit in bessere Arbeit, in neue Projekte, in Qualität, in Skill-Aufbau. Sportstech braucht Wachstum, nicht Schrumpfungseffizienz. Das ist eine Zusage — kein Wunsch.

Praxisregel · CEO-Zusage

Niemand verliert seinen Job, weil KI seine Aufgaben übernimmt. Wenn sich Rollen verändern, gestalten wir Übergänge gemeinsam und mit Vorlauf.


2

Ownership — wer welche Rolle spielt

KI ist kein Projekt einer Abteilung — sie ist Arbeitsalltag für alle. Im Zentrum steht jede:r Mitarbeiter:in. Der CEO gibt die Richtung vor, das PMO begleitet, IT macht den Boden bereit.

↑ Vision & Richtung
CEO
Ali · Founder & CEO

Gibt vor, wie KI bei Sportstech eingesetzt wird und welche unternehmerischen Ziele wir damit erreichen. Visionär und Guide — steckt den Rahmen, in dem sich alle bewegen.

↔ Partner & Begleiter
PMO · AI-Enabler
Hauptansprechpartner: Quang
  • Berater für Automatisierungen, erste Anlaufstelle
  • Admin der LLMs (Claude, OpenAI)
  • Schnittstellen prüfen & integrieren
  • Daten-Pipelines und Git-Setup
Im Zentrum
Mitarbeiter:in
Das ganze Team
  • Bringt die Idee
  • Nutzt die Tools im Arbeitsalltag
  • Baut Schritt für Schritt eigene Automatisierungen ein
  • Wird befähigt — die Umsetzung passiert hier
↓ Support & Grundlage
IT · Software-Admin
Hauptansprechpartner: Salmo
  • Installation der nötigen Tools
  • Zugriffsmanagement MS365-Umgebung
  • Macht den technischen Boden bereit

CEO gibt Richtung · Team setzt um · PMO begleitet · IT trägt


3

Sechs Regeln für den Alltag

So sieht das in der Praxis aus — sechs Leitlinien, die für alle gelten.

Verstehen vor Versenden. Wer einen KI-Output an Kunden, Bank, Partner oder ans Team rausschickt, hat ihn gelesen und verstanden.

KI ist sichtbar. Wenn wir KI für ein Ergebnis nutzen, sagen wir es intern. Keine Geheimniskrämerei, keine künstliche Aufwertung.

Override jederzeit. Jede:r darf einen KI-Vorschlag ablehnen oder ändern — ohne Rechtfertigung. Owner muss zuhören.

Keine sensiblen Daten ohne Klärung. Mitarbeiterdaten, Verträge, Bank-Details, IP gehören nicht ungefragt in fremde Modelle.

Feedback ist Pflicht. Wenn ein Tool Mist baut, melden — nicht still leiden. Nur so wird der Stack besser.

Lernen ist Arbeitszeit. Sich mit dem Stack auseinanderzusetzen ist Teil des Jobs, nicht Freizeit-Hausaufgabe.

KI ist bei Sportstech ein Werkzeug. Die Entscheidungen treffen wir. Und die Gewinne teilen wir.

Ali Ahmad · Founder & CEO · Sportstech Brands Holding

Automatisierung

n8n – Automatisierungen ohne Code

Mit n8n verbindest du Apps und automatisierst Abläufe visuell – ganz ohne Programmierkenntnisse.

0 / 7 erledigt
1

Zugang anfragen

ℹ️

So bekommst du deinen n8n-Zugang

Erstelle einen Wrike-Task mit dem Betreff „n8n Zugang anfragen". Das PMO Team richtet deinen Account ein und meldet sich bei dir. Trage in den Task ein: deinen Namen, deine E-Mail und kurz wofür du n8n nutzen möchtest.


2

Erste Schritte in n8n

Nach dem Login siehst du das n8n-Dashboard. Workflows sind deine Automationen — sie bestehen aus verbundenen Nodes (Bausteinen). Jeder Node macht eine Sache: Daten holen, transformieren, senden.

🧩
Workflow anlegen
„+ New Workflow" → Nodes per Drag & Drop verbinden → „Save" → „Execute Workflow" zum Testen.
🔌
Credentials
Zugänge zu anderen Apps (Google, Teams …) einmalig unter Credentials anlegen — dann in jedem Workflow nutzbar.

Grundkurs-Video: Erste Schritte in n8n — von der Oberfläche bis zum ersten Workflow:


3

Google Sheets Credentials einrichten

Um Google Sheets in n8n zu nutzen, musst du einmalig eine OAuth-Verbindung einrichten. Die offizielle n8n-Dokumentation führt dich durch jeden Schritt:

📄 n8n Docs: Google OAuth Credential einrichten

Video-Tutorial: Google Sheets Credentials in n8n einrichten:


4

Webhooks — externe Trigger empfangen

Webhooks erlauben es externen Diensten, deinen Workflow automatisch zu starten — z.B. wenn ein Formular ausgefüllt wird, ein Wrike-Task erstellt wird oder ein anderer Service ein Event schickt.

🔔
Webhook Node
Füge einen „Webhook" Node als Trigger hinzu. n8n gibt dir eine URL — diese trägst du im externen Dienst ein.
🧪
Test vs. Production
Die Test-URL ist nur aktiv solange du im Editor bist. Für den echten Betrieb „Activate" oben rechts klicken — dann läuft die Production-URL.

Video-Tutorial: Webhooks in n8n verstehen und einsetzen:


5

Tipps & Tricks

🐛
Fehler debuggen
Klicke auf einen roten Node nach einer fehlgeschlagenen Ausführung — du siehst genau, welche Daten ankamen und welcher Fehler auftrat.
🧪
Webhook testen
Nutze die „Test Webhook URL" (nicht Production) zum Entwickeln. Sie ist nur aktiv, wenn du den Workflow im Test-Modus hast.
📜
Ausführungshistorie
Alle Runs der letzten 7 Tage sind unter „Executions" sichtbar — perfekt, um Fehler nachzuvollziehen.
🔁
Credentials zentral
Credentials einmal anlegen, überall nutzen. Ändert sich ein Passwort, musst du nur eine Stelle anpassen.

KI-gestütztes Arbeiten

Claude Code einrichten

Claude Code ist dein KI-Assistent im Terminal — er hilft dir beim Entwickeln, Automatisieren und Strukturieren von Projekten.

0 / 9 erledigt

Die drei Arten, Claude zu nutzen

Je nach Aufgabe den richtigen Modus wählen — das macht den größten Unterschied.

CHAT
Thinking with Claude
Ein Gespräch. Du fragst, entwirfst, brainstormst oder denkst laut nach — Claude antwortet im Chat-Fenster.
Best for
  • Fragen stellen & Ideen erkunden
  • Texte entwerfen, die du selbst noch finishst
  • Alles, was in eine einzelne Antwort passt
COWORK
Delegating to Claude
Ein Workspace. Du gibst Claude einen Ordner und deine Tools, beschreibst ein Ziel — Claude plant, führt aus und liefert.
Best for
  • Mehrstufige Arbeit über mehrere Dateien & Tools
  • Echte Deliverables (Docs, Decks, Sheets)
  • Aufgaben, die du anstoßen und abholen willst
CODE
Building software with Claude
Ein agentisches Coding-Tool. Claude arbeitet direkt in einer Codebase — bearbeitet Dateien, führt Tests aus, macht Commits.
Best for
  • Arbeiten in einem Repo
  • Bauen oder Refactoring über viele Quelldateien
  • Entwicklerarbeit, keine Dokumentenarbeit
⚠️

Wann Cowork nicht das richtige Tool ist

  • Regulierte Prozesse mit Audit-Trail. Cowork-Aktivitäten erscheinen nicht in Audit-Logs, der Compliance API oder in Datenexporten.
  • Alles, was du einem smarten Kollegen nicht unbeaufsichtigt überlassen würdest. Das Rechtsdokument an die Gegenseite schicken, die öffentliche Ankündigung posten, ein kundenseitiges Change ausrollen. Claude bereitet vor — du sendest ab.
  • Hochsensible Personendaten außerhalb der Grenzen, die euer IT-Team explizit freigegeben hat.

1

Installation & Setup (durch IT)

🔧

Claude Code wird durch die IT-Abteilung installiert

Claude Code und Git werden von der IT-Abteilung auf deinem Rechner eingerichtet — du musst nichts selbst installieren. Stelle deine Anfrage über das Wrike-Formular:

IT-Anfrage stellen (Wrike-Formular)

Nach der Installation durch die IT (ZIP-Datei für GitHub-Setup per Teams):

Terminal (macOS)
# 1. ZIP in Downloads entpacken, dann:
bash ~/Downloads/sportstech-setup/install-mac.sh

# 2. Terminal schließen und neu öffnen, dann Diagnose:
~/.sportstech/bin/sportstech-doctor
PowerShell (Windows)
# ZIP entpacken, dann Doppelklick auf:
install-windows.bat

# Falls Sicherheitswarnung: "Weitere Informationen" → "Trotzdem ausführen"
# Fenster schließen wenn "Setup abgeschlossen!" erscheint

2

Git installieren

Git ist ein Programm, das Claude Code braucht, um deinen Code zu speichern und auf GitHub hochzuladen. Du installierst es einmalig — danach läuft alles automatisch im Hintergrund.

ℹ️

Was ist Git überhaupt?

Stell dir Git wie ein automatisches Speichersystem vor — es merkt sich jede Änderung an deinem Projekt und lädt es auf GitHub hoch, damit es online geht.

  1. 1
    Terminal öffnen
    Drücke gleichzeitig ⌘ Command + Leertaste, tippe Terminal ein und drücke Enter
  2. 2
    Diesen Befehl eingeben und Enter drücken
    Terminal (macOS)
    xcode-select --install
  3. 3
    Fenster bestätigen
    Es öffnet sich ein Popup — klicke auf „Installieren" und warte bis es fertig ist (ca. 2–5 Minuten)
  4. 4
    Prüfen ob es funktioniert
    Tippe im Terminal ein und drücke Enter — es sollte eine Versionsnummer erscheinen (z.B. git version 2.39.0)
    Terminal (macOS)
    git --version
  1. 1
    Download-Seite öffnen
    Öffne deinen Browser und gehe zu: 🌐 git-scm.com/download/win
  2. 2
    Installer herunterladen
    Der Download startet meist automatisch. Falls nicht, klicke auf den großen Download-Button auf der Seite
  3. 3
    Installer starten und durchklicken
    Doppelklick auf die heruntergeladene Datei → bei jeder Frage einfach auf „Next" klicken → am Ende auf „Install" klicken — alle Standardeinstellungen sind richtig
  4. 4
    Prüfen ob es funktioniert
    Drücke Windows-Taste, tippe cmd ein, drücke Enter — dann diesen Befehl eingeben:
    Eingabeaufforderung (Windows)
    git --version
    Es sollte eine Versionsnummer erscheinen (z.B. git version 2.44.0) — dann hat alles geklappt ✓

Siehst du eine Versionsnummer? Perfekt!

Git ist installiert — du brauchst dich von jetzt an nicht mehr darum kümmern. Claude erledigt alles Weitere automatisch.


3

Erstes Projekt einrichten

Lege für jedes Projekt einen eigenen Ordner an. Claude Code liest automatisch die CLAUDE.md-Datei — sie erklärt Claude, wie dein Projekt aufgebaut ist und welche Regeln gelten.

Terminal
# Projektordner anlegen und öffnen
mkdir ~/Projekte/mein-projekt
cd ~/Projekte/mein-projekt

# Claude Code starten (im Projektordner)
claude

Der /init-Befehl

Wenn du Claude Code das erste Mal in einem neuen Projekt startest, führe /init aus. Claude analysiert dann deine gesamte Codebase und erstellt automatisch eine CLAUDE.md-Datei mit Projektstruktur, wichtigen Befehlen und Coding-Mustern.

💡

Datei schreiben erlauben

Wenn Claude fragt, ob er die CLAUDE.md anlegen darf: Enter für einmalige Freigabe, oder Shift+Tab drücken, damit Claude in dieser Session frei Dateien schreiben darf.

Die CLAUDE.md-Datei

Die CLAUDE.md wird bei jeder Anfrage automatisch mitgeladen — sie ist wie ein persistentes System-Prompt für dein Projekt. Sie hat zwei Funktionen:

🗺️
Projektführer für Claude
Beschreibt Architektur, wichtige Befehle und Coding-Stil — damit Claude sofort produktiv ist, ohne alles neu erklären zu müssen.
🎛️
Eigene Anweisungen
Steuere Claudes Verhalten: z. B. „Use comments sparingly" oder spezifische Standards deines Teams. Änderungen gelten ab der nächsten Nachricht.
📁

Drei CLAUDE.md-Speicherorte

CLAUDE.md — im Projektordner, in Git committed, für alle Engineers
CLAUDE.local.md — im Projektordner, nicht committed, persönliche Anpassungen
~/.claude/CLAUDE.md — gilt für alle Projekte auf deinem Rechner

Die Sportstech-Vorlage enthält bereits die wichtigsten Standards — einfach herunterladen und in deinen Projektordner legen:

📄
CLAUDE.md — Sportstech Vorlage
Workflow-Regeln & Standards für Claude Code in deinen Projekten
Download

4

Modellauswahl

Claude Code bietet verschiedene Modelle — je nach Aufgabe das richtige wählen spart Token und Zeit. Wechseln mit dem Befehl /model im Chat.

Modell Stärke Wann nutzen? Token-Verbrauch
Sonnet 4.6
Standard
Ausgewogen — schnell & intelligent Tägliche Arbeit, Code, Texte, Analysen Mittel
Opus 4.7
Leistung
Höchste Qualität & Reasoning Komplexe Architekturen, schwierige Bugs, lange Strategiedoks Hoch
Haiku 4.5
Schnell
Sehr schnell & günstig Kurze Aufgaben, Formatierungen, einfache Fragen Niedrig

5

Token sparen — Tipps & Tricks

Tokens sind die „Währung" von Claude Code — je mehr Kontext und je länger das Gespräch, desto mehr Token werden verbraucht. Mit ein paar Tricks arbeitest du effizienter.

🗜️
/compact
Komprimiert den bisherigen Gesprächsverlauf, ohne ihn zu verlieren. Nutzen wenn die Session lang wird.
🧹
/clear
Startet eine komplett neue Session. Ideal wenn du ein völlig neues Thema beginnst.
📝
CLAUDE.md nutzen
Trage Projektkontext einmalig in die CLAUDE.md ein — Claude liest sie automatisch, du musst nicht jedes Mal erklären.
✂️
Kurze Prompts
Präzise, kurze Anfragen sind effizienter als lange Beschreibungen. Statt: „Kannst du mir helfen …" lieber direkt: „Erstelle eine Tabelle mit …"

Video-Tutorial: Claude Tipps & Tricks — Token sparen und effizienter arbeiten:


6

Claude Skills

Skills sind Ordner mit Anweisungen und Ressourcen, die Claude Code automatisch erkennt und bei passenden Aufgaben einsetzt. Jeder Skill lebt in einer SKILL.md-Datei mit Name und Beschreibung im Frontmatter.

🧠
Wie Claude Skills erkennt
Die Beschreibung im Frontmatter entscheidet. Claude liest deine Anfrage, vergleicht sie mit allen verfügbaren Skill-Beschreibungen und aktiviert die passenden automatisch.
📁
Struktur eines Skills
Ein Skill ist eine SKILL.md-Datei mit Name und Beschreibung im Frontmatter — darin stehen die Anweisungen, die Claude für diese Aufgabe nutzen soll.
🔁
Die goldene Regel
Wenn du Claude immer wieder dasselbe erklärst — Commit-Formate, Code-Review-Standards, Brand Guidelines — dann ist das ein Skill, der darauf wartet, geschrieben zu werden.
🎯
Wann Skills am besten funktionieren
Spezialisiertes Wissen für wiederkehrende Aufgaben: Team-Standards, Dokumentationsvorlagen, Debugging-Checklisten oder Sportstech-spezifische Workflows.
💡

Beispiele für sinnvolle Skills bei Sportstech

Code-Review-Standards des Teams · bevorzugte Commit-Message-Formate · Brand Guidelines · Dokumentationsvorlagen · Debugging-Checklisten für spezifische Frameworks

Video-Tutorial: Claude Skills & Slash Commands — alle wichtigen Befehle im Überblick:


7

Claude Masterclass by Sportstech

Die interne Sportstech-Masterclass zu Claude Code — aufgezeichnet am 30. April 2026. Hier lernst du, wie Claude Code konkret im Sportstech-Alltag eingesetzt wird: von der ersten Installation bis zu echten Projekten und Workflows.

Meeting-Aufzeichnung ansehen:

🎬 Aufzeichnung direkt in SharePoint öffnen

Deployment

Projekt live bringen

GitHub-Account anlegen, Claude verbinden — und dann pusht Claude dein Projekt direkt in die Sportstech_GIT Organisation. Vercel deployt es automatisch.

0 / 7 erledigt
1

GitHub Account anlegen (einmalig)

Jede Abteilung legt sich einen persönlichen GitHub-Account an. Wichtig: Verwende dieselbe E-Mail-Adresse, mit der du auch bei Claude angemeldet bist — das vereinfacht die Verbindung zwischen den Tools.

💡

Warum dieselbe E-Mail?

Claude und GitHub sind über deine E-Mail-Adresse miteinander verknüpft. Mit einer einheitlichen Adresse ist der Konnektor sofort erkannt — kein manuelles Zuordnen nötig.

  1. 1
    github.com aufrufen und auf „Sign up" klicken 🌐 github.com/signup
  2. 2
    E-Mail-Adresse eingeben — die gleiche, die du für Claude verwendest
  3. 3
    Passwort und Benutzername wählen → Verifizierung abschließen → Account bestätigen (E-Mail-Link)

2

Claude mit GitHub verbinden (einmalig)

Claude kann direkt mit GitHub kommunizieren — Repos anlegen, Code pushen, Branches verwalten. Dafür musst du einmalig die GitHub-Integration in den Claude-Einstellungen aktivieren.

  1. 1
    In Claude oben rechts auf dein Profilbild klicken → Einstellungen
  2. 2
    Im Menü links auf „Konnektoren" klicken
  3. 3
    Bei „GitHub Integration" auf „Verbinden" klicken — GitHub öffnet sich zur Bestätigung
  4. 4
    Mit deinem GitHub Account einloggen und die Verbindung autorisieren

Verbindung aktiv?

Wenn bei der GitHub Integration ein grüner Status oder „Verbunden" erscheint, ist alles bereit. Claude kann jetzt direkt mit GitHub arbeiten.


3

Zugang zur Sportstech_GIT Organisation

Alle Sportstech-Projekte landen in der GitHub-Organisation Sportstech_GIT. Je nachdem, ob du an einem bestehenden oder einem neuen Projekt arbeitest, gibt es zwei Wege:

📂
Bestehendes Repo
Schreib eine kurze Nachricht ans PMO — wir fügen deinen GitHub Account als Contributor in das bestehende Repo ein. Danach kannst du direkt aus Claude pushen.
🆕
Neues Projekt
Kein Setup nötig — Claude erstellt das Repo direkt in der Sportstech_GIT Organisation. Nutze einfach den Beispiel-Prompt aus Schritt 4.
✉️

Anfrage ans PMO für bestehende Repos

Schreib eine kurze E-Mail oder Teams-Nachricht an das PMO Team mit deinem GitHub-Benutzernamen und dem Namen des Repos, auf das du zugreifen möchtest — wir richten den Zugang ein.

pmo@sportstech.de

4

Repo in Claude auswählen

Das Repo ist euer Projektordner innerhalb von Claude — bevor ihr loslegt, müsst ihr Claude mitteilen, in welchem Repo ihr arbeiten wollt. Das gilt sowohl für Claude Chat als auch für Claude Code.

💬
Claude Chat
Neben der Eingabezeile auf das + klicken → „Aus Github hinzufügen" auswählen → Repo aus der Liste wählen.
🤖
Claude Code (Web)
Über der Kommentarzeile die Instanz-Option anklicken → unter Cloud auf PMO-Github (oder „Default") klicken → Repo aus dem Dropdown auswählen.

Schritt für Schritt — Claude Code (Web):

  1. 1
    Über der Eingabezeile links auf den aktuellen Ausführungsort klicken (steht dort z.B. „Lokal" oder ein Profilbild)
  2. 2
    Im Dropdown-Menü unter dem Abschnitt „Cloud" auf „PMO-Github" (oder „Default") klicken
  3. 3
    Im nächsten Schritt erscheint eine Liste aller Sportstech-Git Repos — das gewünschte Projekt auswählen
  4. 4
    Unten in der Leiste sollte jetzt „PMO-Github" + der Repo-Name stehen — Claude arbeitet nun direkt in eurem Projekt
💡

Lokal vs. Cloud

Lokal bedeutet: Claude läuft auf eurem Rechner — nur sinnvoll wenn Claude Code lokal installiert ist.
Cloud (PMO-Github) bedeutet: Claude läuft direkt gegen euer GitHub-Repo — kein lokales Setup nötig, ideal für die meisten Anwendungsfälle.


5

Sportstech Projekt-Struktur

Jedes Sportstech-Projekt braucht diese Pflicht-Dateien — Claude legt sie automatisch an, wenn du sagst: „Richte das Projekt nach Sportstech-Standard ein."

Projektstruktur
mein-projekt/
├── CLAUDE.md          ← Workflow-Regeln für Claude
├── README.md          ← Projektbeschreibung (auf Deutsch)
├── .env.example       ← API-Keys ohne echte Werte!
├── .gitignore         ← muss .env* enthalten
├── vercel.json        ← Deployment-Konfiguration
└── src/               ← dein eigentlicher Code
🔒

Niemals echte API-Keys in den Code!

Die .env-Datei enthält echte Zugangsdaten — sie gehört nicht auf GitHub. Nur .env.example mit leeren Werten committen. Die .gitignore muss .env* enthalten.


6

Neues Projekt auf GitHub pushen

Wenn dein Projekt bereit ist, lässt du Claude das Repo direkt in der Sportstech_GIT Organisation anlegen und den Code hochladen. Kein manuelles Git-Setup nötig — einfach den folgenden Prompt verwenden:

💬

Beispiel-Prompt für Claude

„Erstelle auf der GitHub-Organisation Sportstech_GIT ein neues privates Repository mit dem Namen mein-projektname und pushe den aktuellen Stand des Projekts dorthin. Stelle sicher, dass die .env-Datei nicht mit gepusht wird."

🔒
Immer privat
Claude legt das Repo standardmäßig als privat an — nur Mitglieder der Sportstech_GIT Organisation sehen es.
🔄
Folge-Pushes
Für spätere Updates sagst du einfach: „Pushe die aktuellen Änderungen auf GitHub" — Claude commitet und pusht automatisch.

7

Vercel Deployment einrichten & live schalten

Das finale Deployment erfolgt über Vercel. Beim allerersten Mal richtet das PMO die Vercel-Verbindung für dein Repo ein — danach läuft alles vollautomatisch: jeder Push aus Claude deployt direkt auf deine Live-URL.

1️⃣
Erstes Deployment
Schreib einmalig ans PMO mit dem Namen deines Repos — wir verknüpfen es mit Vercel und du bekommst deine Live-URL.
🚀
Ab dann automatisch
Nach dem Setup deployt Vercel bei jedem Push in den main-Branch automatisch — keine weitere Aktion nötig.
✉️

Einmalige Anfrage ans PMO für das erste Deployment

Schick dem PMO Team den GitHub-Link deines Repos und nenn uns kurz, was das Projekt machen soll — wir richten Vercel ein und melden uns mit der Live-URL.

pmo@sportstech.de
🎉

Fertig? Meld dich beim PMO Team!

Fragen, Probleme oder Verbesserungsvorschläge → per MS Teams, über Wrike oder direkt an pmo@sportstech.de.

Design & Standards

Sportstech Standard

Das Sportstech Design System gibt jedem Projekt die richtige visuelle Sprache — Farben, Typografie, Komponenten und Regeln, die die Brand konsistent halten.

0 / 7 erledigt
1

Was ist das Sportstech Design System?

Das Sportstech Design System ist die zentrale Grundlage für alle visuellen Projekte — vom einfachen Prototyp bis zur fertigen App. Es definiert Farben, Typografie, Abstände, Komponenten und Bildsprache. Damit sehen alle Sportstech-Projekte konsistent aus und folgen der Markenidentität.

🎨
Farben & Typografie
Sportstech Dark, Warm Grey und Sportstech Red sind die drei Markenfarben. Archivo (Display) und Inter (Body) als Schriftfamilien.
🧩
Komponenten
Buttons, Cards, Inputs, Tags — alle vorgefertigt, markenkonform und direkt einsetzbar als CSS-Variablen oder HTML-Komponenten.
📐
Layout & Abstände
8-Pixel-Raster, definierte Radien, Schatten-Levels und Motion-Timing — alles vorgedacht, damit du dich auf den Inhalt konzentrieren kannst.
✍️
Sprache & Ton
Zwei Tonalitäten: «Motivation!» für Performance-Produkte und «Pass auf dich auf» für Wellness. Immer du/dein, kurze Sätze, Verben voran.

2

Design System herunterladen

Das ZIP-Paket enthält alle Design-Tokens (CSS), Logo-Assets, Komponenten-Previews und die vollständige Dokumentation. Entpacke es in deinen Projektordner und verlinke die colors_and_type.css in deinem HTML.

🎨
Sportstech Design System Handoff
CSS-Tokens, Logos, Komponenten, Dokumentation & Previews
Download ZIP
💡

ZIP-Inhalt im Überblick

colors_and_type.css — Design-Tokens (Farben, Type-Scale, Spacing, Radien, Motion)
assets/ — Logo-SVGs (schwarz, weiß, rot-schwarz)
preview/ — HTML-Previews aller Komponenten
README.md — vollständige Markendokumentation


3

Design System mit Claude implementieren

Lade die ZIP-Datei in Claude hoch und nutze den folgenden Prompt, damit Claude das Design System korrekt in dein Projekt implementiert. Claude liest die README und alle Quelldateien und setzt die Designs pixelgenau um.

💬

Prompt für Claude (ZIP anhängen!)

Read the attached sportstech-design-system.zip and the README inside. Implement: the designs in this project

Prompt kopieren
Read the attached sportstech-design-system.zip and the README inside.
Implement: the designs in this project
📎
ZIP anhängen
Klicke auf das Büroklammer-Symbol in Claude und wähle die heruntergeladene sportstech-design-system.zip aus.
📖
Claude liest alles
Claude öffnet die ZIP, liest README und alle CSS-Dateien und implementiert das Design System korrekt in dein Projekt.

4

Wichtigste Markenregeln

Do's
Sportstech Red nur für CTAs & Akzente · Warm Grey als Sekundärfläche · ALL CAPS für Display-Headlines · Archivo (Display) + Inter (Body) · «The energy is here.» als Claim · du/dein in allen Texten
Don'ts
Nie Red als große Hintergrundfläche · Nie Logo verzerren, rotieren oder einfärben · Nie «moves you» (alter Claim) · Nie andere Schriftfamilien · Nie Emoji in Produkt- oder Marketingtexten
⚠️

Richtiger Claim

Der offizielle Sportstech-Claim lautet «The energy is here.» — der alte Claim «moves you» ist nicht mehr gültig und darf nicht verwendet werden.


5

Wrike mit Claude verbinden

Über den Wrike MCP Connector kann Claude direkt auf dein Wrike-Konto zugreifen — Aufgaben lesen, erstellen und aktualisieren, ohne den Browser zu öffnen. Die Verbindung läuft über deine persönlichen Wrike-Zugangsdaten und respektiert automatisch deine bestehenden Berechtigungen.

Video-Tutorial: Was ist MCP und wie funktioniert die Verbindung zwischen Claude und externen Tools?

ℹ️

Voraussetzung

Der Wrike MCP Connector muss zuerst vom Administrator im Claude-Team-Account freigeschaltet werden. Danach kannst du die Verbindung selbst einrichten.

Einrichtung in 4 Schritten

⚙️
1. Einstellungen öffnen
Klicke in Claude auf dein Profilbild und wähle Settings.
🔌
2. Connectors aufrufen
Navigiere zum Abschnitt Connectors und suche nach Wrike MCP.
🔗
3. Verbinden
Klicke auf Connect und schließe den OAuth-Login mit deinen Wrike-Zugangsdaten ab.
4. Fertig
Die Verbindung ist aktiv. Claude nutzt automatisch deine persönlichen Wrike-Berechtigungen.

Was Claude mit Wrike tun kann

🛠️

Verfügbare Funktionen

Aufgaben
Aufgaben suchen, abrufen, erstellen, aktualisieren und mehrere Aufgaben gleichzeitig bearbeiten (bis 100 Stück). Kommentare zu Aufgaben lesen.

Projekte & Ordner
Ordner und Projekte suchen, abrufen, erstellen und aktualisieren. Spaces und deren Inhalte einsehen.

Metadaten & Struktur
Kontakte, Custom Fields, Custom Types, Workflows und Genehmigungen (Approvals) abrufen. Numerische IDs in Wrike-IDs umwandeln.

💡

Beispiel-Prompts

«Zeig mir alle offenen Aufgaben, die mir in Wrike zugewiesen sind.»
«Erstelle in Wrike eine neue Aufgabe im Projekt X mit Fälligkeitsdatum nächsten Freitag.»
«Welche Aufgaben im Space Marketing sind diese Woche fällig?»

🎉

Fragen zum Design System?

Bei Fragen zu Marke, Design oder Komponenten meld dich beim PMO Team — per MS Teams, über Wrike oder direkt an pmo@sportstech.de.