外卖点餐 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/food-ordering my-app
只把这个模板复制到一个新文件夹，不会下载仓库里的其他内容。
改成你的产品
这是 codexdesign.io 的 外卖点餐 App 模板。把它改名为[你的产品]，把示例数据换成[你的功能]，所有界面都继续遵循 DESIGN.md 里的设计系统。
在新文件夹里，把这段话粘贴到 Codex 或 Claude Code。
- 技术栈
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
模板包含什么
| 屏幕 | 内容 |
|---|---|
| 首页 | 送达地址、搜索、菜系分类、优惠活动、附近的餐馆 |
| 餐馆 | 评分、配送时间和配送费、菜单分类、带加购按钮的菜品，以及固定在底部的购物车栏 |
| 菜品 | 描述、尺寸、辣度和加料（都标了价格）、数量、加入购物车 |
| 购物车 | 可以增减数量的菜品、给餐馆的备注、优惠码、费用明细 |
| 结账 | 地址、立即送达或预约时间、支付方式、骑手小费、下单 |
| 订单追踪 | 带骑手位置的地图、预计送达时间、订单进度、联系骑手、订单摘要 |
| 订单 | 进行中的订单，以及可以「再来一单」的历史订单 |
| 我的 | 个人资料、累计数据、邀请优惠、地址、支付方式和设置 |
每个屏幕是一个 390×844 的 HTML 文件，用 Tailwind CSS v4 和一个共用的 tokens.css 写成。菜品图片是模板自带的 12 张扁平 SVG 插画，不依赖任何外部图片。用浏览器直接打开就能看，不用安装，也不用构建。
用 Codex 或 Claude Code 改成你的 App
从 ui-templates 仓库里只复制这一个模板：
npx degit ummydev/ui-templates/apps/food-ordering my-food-app
然后让 agent 改成你的产品：
这个文件夹是一个外卖点餐 App 的 UI 模板。把它改成[你的 App 名字]，面向[你的餐馆或你的市场]。保留 DESIGN.md 和 tokens.css 作为设计系统，把示例餐馆、菜品和价格换成[你的菜单]，把插画换成你自己的照片。然后用[Expo / SwiftUI / 你的技术栈]把这些屏幕实现出来。
因为设计系统已经写在 DESIGN.md 里，agent 之后新加的屏幕（比如餐馆搜索、会员积分页）也会和这 8 个保持一致。
基于 Pantry 设计系统
这个模板用的是 Pantry，一套为餐饮和点餐 App 设计的系统：米色背景、番茄红用于下单、香草绿用于配送和成功状态、大圆角的美食卡片、胶囊按钮，以及 48px 触控区域。它的页面有实时预览、完整的 DESIGN.md 和 shadcn 主题。
常见问题
这个外卖点餐 App 模板免费吗？
免费。它是 MIT 协议的开源项目，包括菜品插画在内，个人和商业项目都可以用。
可以在 Figma 里用吗？
模板是 HTML，不是 Figma 文件，正因为这样 AI agent 才能直接读懂和修改。截图可以当作参考，DESIGN.md 里的颜色和字体也可以在 Figma 里设成样式。
有深色模式吗？
有。在任意屏幕的 <html> 标签上加 class="dark"，就会切换成 Pantry 的深色模式。