UI-Vorlage für eine Meditations-App.
Ein vollständiges UI-Design für eine Meditations- und Schlaf-App: acht Smartphone-Screens für eine Beispiel-App namens Stillpoint, von der Empfehlung des Tages und einem Sieben-Tage-Kurs bis zum Player, einer Atemübung, Einschlafgeschichten und dem Fortschritt. Serie, Minuten und Kursfortschritt stimmen auf jedem Screen überein, und jeder Screen ist einfaches HTML mit Tailwind, sodass Codex oder Claude Code ihn klonen und zu deiner App machen kann.
Aktualisiert am 7. November 2026
Mobile app · 8 screens · Free and open source
01Heute 
02Entdecken 
03Kurs 
04Player 
05Atmen 
06Schlaf 
07Fortschritt 
08Profil
Clone it
npx degit ummydev/ui-templates/apps/meditation my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the Meditations-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.
Design system
CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
Was in der Vorlage steckt
| Screen | Was darauf ist |
|---|---|
| Heute | Die Empfehlung für heute Abend, die Serie, die Minuten dieser Woche und die nächste Einheit |
| Entdecken | Schlaf, Fokus, Angst und Atmung, jeweils eine Reihe von Einheiten mit ihrer Länge |
| Kurs | Ein Sieben-Tage-Kurs mit Lehrer, allen Einheiten und dem, was erledigt ist |
| Player | Ein Fortschrittsring, die Restzeit, Vor- und Zurückspringen und ein Hintergrundklang |
| Atmen | Eine 4-4-6-Atemübung mit Runden, Länge und einer Animation, die die Einstellungen beachtet |
| Schlaf | Immer dunkel: Einschlafgeschichten, Klanglandschaften und ein Timer, der die Wiedergabe stoppt |
| Fortschritt | Serie, Minuten und Einheiten insgesamt, das Diagramm der Woche und ein Stimmungsprotokoll |
| Profil | Abo, Erinnerungen, Downloads, Klang und Einstellungen |
Die Beispieldaten sind die Praxis einer Person an einem Samstagabend: eine Serie von 12 Tagen, 75 Minuten in dieser Woche und insgesamt 1.286 Minuten in 142 Einheiten. Der Kurs Steady Mind hat sieben Einheiten mit zusammen 69 Minuten; drei sind erledigt, und Tag 4 zeigt auf den Screens Heute, Kurs und Player gleichermaßen 3:40 von 9:00 verbleibend. Der Atemrhythmus ist 4 Sekunden ein, 4 halten und 6 aus, also sind fünf Minuten genau 21 Runden, und die Animation stoppt, wenn das Gerät weniger Bewegung verlangt.
Jeder Screen ist eine HTML-Datei in 390×844, gestaltet mit Tailwind CSS v4 und einer gemeinsamen tokens.css. Die Illustrationen sind flache SVG-Formen in den Farben des Systems, ohne Verläufe oder Leuchteffekte, und die Icons stammen von Lucide. Öffne einfach eine Datei im Browser; es gibt nichts zu installieren oder zu bauen.
Mit Codex oder Claude Code nutzen
Kopiere nur diese Vorlage aus dem ui-templates-Repository:
npx degit ummydev/ui-templates/apps/meditation my-meditation-app
Dann bitte deinen Agenten, sie zu deiner zu machen:
Dieser Ordner ist eine UI-Vorlage für eine Meditations-App. Mach daraus [Name deiner App], für [Zielgruppe]. Behalte DESIGN.md und tokens.css als Designsystem, ersetze Kurse, Lehrer und Klänge durch [deine Inhalte] und sorge dafür, dass Serie, Minuten und Fortschritt der Einheiten auf allen Screens übereinstimmen. Baue diese Screens danach in [Expo / SwiftUI / deinem Stack].
Weil das Designsystem in DESIGN.md festgehalten ist, passen neue Screens, die dein Agent hinzufügt, etwa ein Tagebuch oder eine Abendroutine, zu den acht vorhandenen.
Gebaut auf dem Designsystem Calm
Die Vorlage nutzt Calm, ein Designsystem für Wellness-Apps: ein sanfter Salbeigrün-Hintergrund, tiefes Grün für Aktionen, Newsreader für Titel und Figtree für Text, 24px-Ecken, 48px-Touchflächen und eine Tab-Leiste mit drei Einträgen. Seine Seite zeigt eine Live-Vorschau, die vollständige DESIGN.md und ein shadcn-Theme. Calm ist nur der Name des Designsystems; die Vorlage steht in keiner Verbindung zu einer gleichnamigen App.
Häufige Fragen
Ist diese Vorlage für eine Meditations-App kostenlos?
Ja. Sie ist Open Source unter der MIT-Lizenz, für private und kommerzielle Projekte.
Gibt es ein dunkles Theme?
Ja. Füge dem <html>-Tag eines Screens class="dark" hinzu, um auf das dunkle Theme von Calm umzuschalten. Der Schlaf-Screen ist immer dunkel, weil man ihn nachts öffnet.
Beachtet die Atemanimation die Einstellung für reduzierte Bewegung?
Ja. Sie besteht nur aus CSS und stoppt, wenn im Betriebssystem reduzierte Bewegung eingeschaltet ist; jede Phase und ihre Länge stehen dann weiterhin als Text auf dem Screen.