UI-Vorlage für eine Lauf-App.
Ein komplettes UI-Design für eine Lauf- und Fitness-Tracking-App: acht Smartphone-Screens mit realistischen Daten, vom Wochenziel über den Live-Lauf bis zum Trainingsplan. Jeder Screen ist schlichtes HTML mit Tailwind, sodass Codex oder Claude Code die Vorlage klonen und in deine App verwandeln können.
Aktualisiert am 6. November 2026
Mobile app · 8 screens · Free and open source
01Heute 
02Lauf starten 
03Aktiver Lauf 
04Lauf-Zusammenfassung 
05Verlauf 
06Lauf-Details 
07Plan 
08Profil
Clone it
npx degit ummydev/ui-templates/apps/running my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the Lauf-App template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
- Built with
- HTML · Tailwind CSS v4 · Lucide icons
Was in der Vorlage steckt
| Screen | Was zu sehen ist |
|---|---|
| Heute | Wochendistanz-Ring, ein Start-Button, der letzte Lauf und das heutige geplante Training |
| Lauf starten | GPS-Status, Zieltyp (freier Lauf, Distanz, Zeit oder Pace) und Audio-Hinweise |
| Aktiver Lauf | Live-Distanz, Pace, Zeit und Herzfrequenz, mit Pause und Stopp in Daumenreichweite |
| Lauf-Zusammenfassung | Die Strecke, eine persönliche Bestleistung, wichtige Kennzahlen, Kilometer-Splits und Teilen |
| Verlauf | Ein Wochendistanz-Diagramm und eine Liste der letzten Läufe |
| Lauf-Details | Ein Pace-Diagramm, Herzfrequenzzonen, Wetter und Schuhe |
| Plan | Fortschritt im Halbmarathon-Plan und die Trainings dieser Woche |
| Profil | Gesamtwerte, persönliche Bestleistungen, Erfolge und Einstellungen |
Jeder Screen ist eine HTML-Datei in 390×844, gestaltet mit Tailwind CSS v4 und einer gemeinsamen tokens.css. Öffne eine beliebige Datei im Browser; es gibt nichts zu installieren oder zu bauen. Die Screens sind standardmäßig dunkel, ein helles Theme ist eingebaut.
Mit Codex oder Claude Code nutzen
Kopiere nur diese Vorlage aus dem ui-templates-Repository:
npx degit ummydev/ui-templates/apps/running my-running-app
Bitte dann deinen Agenten, sie zu deiner zu machen:
Dieser Ordner ist eine UI-Vorlage für eine Lauf-App. Mach daraus [Name deiner App], eine App für [was deine App macht]. Behalte DESIGN.md und tokens.css als Designsystem, ersetze die Beispieldaten durch [deine Daten] und benenne die Tabs passend zur App um. Baue danach diese Screens in [Expo / SwiftUI / deinem Stack].
Weil das Designsystem in DESIGN.md festgehalten ist, passen neue Screens, die dein Agent ergänzt, zu den acht vorhandenen.
Gebaut auf dem Designsystem Stride
Die Vorlage nutzt Stride, ein Designsystem für Bewegungs-Apps: große kondensierte Zahlen mit tabellarischen Ziffern, ein energiegeladenes Orange für Aktionen und Fortschritt, 16px-Ecken, 48px-Touch-Ziele und eine Tab-Leiste unten. Auf der Seite findest du eine Live-Vorschau, die komplette DESIGN.md und ein shadcn-Theme.
Häufige Fragen
Ist diese Lauf-App-Vorlage kostenlos?
Ja. Sie ist Open Source unter der MIT-Lizenz, für private und kommerzielle Projekte.
Mit welchem Stack ist sie gebaut?
Mit HTML und Tailwind CSS v4, damit jeder KI-Agent sie lesen und ändern kann. Wenn du so weit bist, bitte deinen Agenten, die Screens in React Native, Expo, SwiftUI, Flutter oder deinem Web-Framework neu aufzubauen.
Kann ich ein helles Theme nutzen?
Ja. Entferne class="dark" aus dem <html>-Tag eines Screens, um auf das helle Theme von Stride zu wechseln.