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.
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:
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:
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
Terminal öffnen
Drücke gleichzeitig ⌘ Command + Leertaste, tippe Terminal ein und drücke Enter
2
Diesen Befehl eingeben und Enter drücken
Terminal (macOS)
xcode-select --install
3
Fenster bestätigen
Es öffnet sich ein Popup — klicke auf „Installieren" und warte bis es fertig ist (ca. 2–5 Minuten)
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)
Installer herunterladen
Der Download startet meist automatisch. Falls nicht, klicke auf den großen Download-Button auf der Seite
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
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 öffnenmkdir~/Projekte/mein-projektcd~/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
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.
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.
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
In Claude oben rechts auf dein Profilbild klicken → Einstellungen
2
Im Menü links auf „Konnektoren" klicken
3
Bei „GitHub Integration" auf „Verbinden" klicken — GitHub öffnet sich zur Bestätigung
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.
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
Über der Eingabezeile links auf den aktuellen Ausführungsort klicken
(steht dort z.B. „Lokal" oder ein Profilbild)
2
Im Dropdown-Menü unter dem Abschnitt „Cloud" auf
„PMO-Github" (oder „Default") klicken
3
Im nächsten Schritt erscheint eine Liste aller Sportstech-Git Repos —
das gewünschte Projekt auswählen
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.
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.
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.