冥想 App UI 模板。
一套完整的冥想和助眠 App UI 设计：示例 App 叫 Stillpoint，8 个手机屏幕，从今日推荐、7 天课程，到播放页、呼吸练习、睡眠故事和练习进度都有。连续天数、分钟数和课程进度在每个屏幕上都对得上，而且都是纯 HTML 加 Tailwind，Codex 或 Claude Code 可以直接克隆下来，改成你的 App。
更新于 2026年11月7日
手机 App · 8 个界面 · 免费开源
01今日 
02探索 
03课程 
04播放 
05呼吸 
06睡眠 
07进度 
08我的
克隆
npx degit ummydev/ui-templates/apps/meditation my-app
只把这个模板复制到一个新文件夹，不会下载仓库里的其他内容。
改成你的产品
这是 codexdesign.io 的 冥想 App 模板。把它改名为[你的产品]，把示例数据换成[你的功能]，所有界面都继续遵循 DESIGN.md 里的设计系统。
在新文件夹里，把这段话粘贴到 Codex 或 Claude Code。
- 技术栈
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
模板里有什么
| 屏幕 | 内容 |
|---|---|
| 今日 | 今晚推荐、连续天数、本周分钟数，以及上次没听完的课 |
| 探索 | 睡眠、专注、焦虑、呼吸四个主题，每个主题一排课程，标明时长 |
| 课程 | 7 天课程、老师、每一节的时长和完成情况 |
| 播放 | 进度圆环、剩余时间、前后跳转、背景音选择 |
| 呼吸 | 4-4-6 呼吸引导：轮次、时长，动画会遵守系统的减少动态设置 |
| 睡眠 | 始终是深色：睡眠故事、环境音，以及定时停止播放 |
| 进度 | 连续天数、累计分钟数和节数、本周柱状图、心情记录 |
| 我的 | 订阅、提醒、下载、声音和设置 |
示例数据是一个人周六晚上的练习记录：连续 12 天，本周 75 分钟，累计 1,286 分钟、142 节。Steady Mind 课程共 7 节、69 分钟，已完成 3 节；第 4 节共 9:00，还剩 3:40，今日、课程和播放三个屏幕显示的都是这个进度。呼吸节奏是吸气 4 秒、屏息 4 秒、呼气 6 秒，所以 5 分钟正好 21 轮；设备开启减少动态效果时，动画会停下。
每个屏幕都是一个 390×844 的 HTML 文件，用 Tailwind CSS v4 和共用的 tokens.css。插画是用设计系统颜色画的纯色 SVG 形状，没有渐变和光晕，图标用 Lucide。用浏览器直接打开任意文件即可，不需要安装或构建。
在 Codex 或 Claude Code 里使用
从 ui-templates 仓库只复制这一个模板：
npx degit ummydev/ui-templates/apps/meditation my-meditation-app
然后让 agent 改成你的产品：
这个文件夹是一个冥想 App 的 UI 模板。把它改成[你的 App 名字]，面向[你的目标用户]。保留 DESIGN.md 和 tokens.css 作为设计系统，把课程、老师和声音换成[你的内容]，并保证连续天数、分钟数和课程进度在各个屏幕上前后一致。然后用[Expo / SwiftUI / 你的技术栈]把这些屏幕实现出来。
因为设计系统已经写在 DESIGN.md 里，agent 之后新加的屏幕（比如日记、睡前流程）也会和这 8 个保持一致。
基于 Calm 设计系统
这个模板用的是 Calm，一套为身心健康类 App 设计的系统：柔和的鼠尾草绿背景、深绿色的操作按钮、Newsreader 标题字体加 Figtree 正文字体、24px 圆角、48px 触控区域，以及 3 项的底部标签栏。它的页面有实时预览、完整的 DESIGN.md 和 shadcn 主题。Calm 只是这套设计系统的名字，模板和任何同名 App 都没有关系。
常见问题
这个冥想 App 模板免费吗？
免费。它是 MIT 协议的开源项目，个人和商业项目都可以用。
有深色模式吗？
有。在任意屏幕的 <html> 标签上加 class="dark"，就会切换成 Calm 的深色模式。睡眠页始终是深色，因为大家都是晚上打开它。
呼吸动画会遵守减少动态效果的设置吗？
会。动画是纯 CSS 写的，系统开启减少动态效果后会停下，屏幕上仍然用文字显示每个阶段和时长。