跑步 App UI 模板。
一套完整的跑步健身 App UI 设计：8 个手机屏幕，数据真实可信，从每周目标、跑步中到训练计划都有。每个屏幕都是纯 HTML 加 Tailwind，Codex 或 Claude Code 可以直接克隆下来，改成你的 App。
更新于 2026年11月6日
手机 App · 8 个界面 · 免费开源
01今日 
02开始跑步 
03跑步中 
04跑步总结 
05历史记录 
06跑步详情 
07训练计划 
08个人主页
克隆
npx degit ummydev/ui-templates/apps/running my-app
只把这个模板复制到一个新文件夹，不会下载仓库里的其他内容。
改成你的产品
这是 codexdesign.io 的 跑步 App 模板。把它改名为[你的产品]，把示例数据换成[你的功能]，所有界面都继续遵循 DESIGN.md 里的设计系统。
在新文件夹里，把这段话粘贴到 Codex 或 Claude Code。
- 技术栈
- HTML · Tailwind CSS v4 · Lucide icons
模板包含什么
| 屏幕 | 内容 |
|---|---|
| 今天 | 每周跑量进度环、开始跑步按钮、上一次跑步、今天的训练计划 |
| 开始跑步 | GPS 状态、目标类型（自由跑、距离、时间或配速）、语音播报 |
| 跑步中 | 实时距离、配速、时长和心率，暂停和结束按钮在拇指够得到的位置 |
| 跑步总结 | 路线、个人最佳、关键数据、每公里配速和分享 |
| 记录 | 每周跑量柱状图和最近的跑步列表 |
| 单次详情 | 配速曲线、心率区间、天气和跑鞋 |
| 训练计划 | 半马计划的进度和本周课表 |
| 我的 | 累计数据、个人最佳、成就徽章和设置 |
每个屏幕是一个 390×844 的 HTML 文件，用 Tailwind CSS v4 和一个共用的 tokens.css 写成。用浏览器直接打开就能看，不用安装，也不用构建。默认是深色模式，也内置了浅色模式。
用 Codex 或 Claude Code 改成你的 App
从 ui-templates 仓库里只复制这一个模板：
npx degit ummydev/ui-templates/apps/running my-running-app
然后让 agent 改成你的产品：
这个文件夹是一个跑步 App 的 UI 模板。把它改成[你的 App 名字]，一个[你的 App 做什么]的 App。保留 DESIGN.md 和 tokens.css 作为设计系统，把示例数据换成[你的数据]，按 App 的功能改一下底部标签的名字。然后用[Expo / SwiftUI / 你的技术栈]把这些屏幕实现出来。
因为设计系统已经写在 DESIGN.md 里，agent 之后新加的屏幕也会和这 8 个保持一致。
基于 Stride 设计系统
这个模板用的是 Stride，一套为运动类 App 设计的系统：大号窄体数字和等宽数字、一个充满活力的橙色用于操作和进度、16px 圆角、48px 触控区域，以及底部标签栏。它的页面有实时预览、完整的 DESIGN.md 和 shadcn 主题。
常见问题
这个跑步 App 模板免费吗？
免费。它是 MIT 协议的开源项目，个人和商业项目都可以用。
用什么技术写的？
HTML 加 Tailwind CSS v4，任何 AI agent 都能读懂和修改。准备好之后，可以让 agent 用 React Native、Expo、SwiftUI、Flutter 或你的 Web 框架重新实现这些屏幕。
可以用浅色模式吗？
可以。把任意屏幕 <html> 标签上的 class="dark" 去掉，就会切换成 Stride 的浅色模式。