模板

给 AI agent 用的 UI 模板。

不只是主题，而是完整的 App 和网站设计：一个产品需要的每个屏幕都有，内容真实可信，用纯 HTML 加 Tailwind 写成。克隆一个下来，Codex 或 Claude Code 就能把它改成你的产品。

• 跑步 App手机 App免费的跑步健身 App UI 模板：8 个手机屏幕，用 HTML 和 Tailwind 写成，附设计系统，可以直接让 Codex 或 Claude Code 改成你自己的 App。8 个界面 · 免费开源
• 外卖点餐 App手机 App免费的外卖点餐 App UI 模板：从菜单、购物车到订单追踪共 8 个手机屏幕，用 HTML 和 Tailwind 写成，可以让 Codex 或 Claude Code 改成你的 App。8 个界面 · 免费开源
• 记账 App手机 App免费的记账和预算 App UI 模板：8 个手机屏幕，数据前后对得上，用 HTML 和 Tailwind 写成，可以让 Codex 或 Claude Code 改成你的 App。8 个界面 · 免费开源
• 冥想 App手机 App免费的冥想和助眠 App UI 模板：8 个手机屏幕，从播放页、呼吸练习到睡眠故事都有，用 HTML 和 Tailwind 写成，可以让 Codex 或 Claude Code 改成你的 App。8 个界面 · 免费开源

怎么用这些模板

1. 挑一个模板，选和你要做的产品最接近的。
2. 只复制这一个：npx degit ummydev/ui-templates/apps/<name> my-app。
3. 让 agent 改成你的产品。 每个模板都带着自己的设计系统（DESIGN.md），之后新加的屏幕也会和已有的保持一致。

所有模板都免费开源，MIT 协议，放在 GitHub 的 ummydev/ui-templates。更多模板正在做：SaaS 落地页和 SaaS 后台。

常见问题

为什么用 HTML 和 Tailwind，而不是某个框架？

纯 HTML 在哪里都能打开，任何 AI agent 都能读懂。等你把设计改成自己的之后，再让 agent 用 React、Next.js、React Native、SwiftUI 或 Flutter 重新实现。

可以从设计系统开始吗？

可以。设计系统库里有 24 套网站和 App 设计系统，可以直接作为 DESIGN.md 交给 agent。