记账 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/budgeting my-app
只把这个模板复制到一个新文件夹，不会下载仓库里的其他内容。
改成你的产品
这是 codexdesign.io 的 记账 App 模板。把它改名为[你的产品]，把示例数据换成[你的功能]，所有界面都继续遵循 DESIGN.md 里的设计系统。
在新文件夹里，把这段话粘贴到 Codex 或 Claude Code。
- 技术栈
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
模板包含什么
| 屏幕 | 内容 |
|---|---|
| 概览 | 本月余额、收入和支出、预算进度、最近的交易 |
| 记一笔 | 支出或收入、金额键盘、类别、账户、日期和备注 |
| 交易 | 搜索、筛选，以及按天分组并显示每日合计的交易 |
| 交易详情 | 金额、类别、账户、日期、备注、收据和拆分账单 |
| 预算 | 本月还能花多少、各类别的预算，以及超支提醒 |
| 统计 | 各类别支出构成、最近 6 个月的趋势和花得最多的商户 |
| 账户 | 银行、储蓄、现金、信用卡和投资账户，以及净资产 |
| 我的 | 个人资料、连续记账天数、货币、提醒、数据导出和设置 |
示例数据是一个人用美元记的 11 月：收入 $5,500.00、支出 $2,674.38，8 个预算合计 $3,020.00，净资产等于各账户之和。收入用绿色加「+」号，支出用正文颜色加「−」号，红色只用在超支的那个类别上。
每个屏幕是一个 390×844 的 HTML 文件，用 Tailwind CSS v4 和一个共用的 tokens.css 写成，图表用 SVG 画。用浏览器直接打开就能看，不用安装，也不用构建。
用 Codex 或 Claude Code 改成你的 App
从 ui-templates 仓库里只复制这一个模板：
npx degit ummydev/ui-templates/apps/budgeting my-budget-app
然后让 agent 改成你的产品：
这个文件夹是一个记账 App 的 UI 模板。把它改成[你的 App 名字]，面向[你的目标用户]。保留 DESIGN.md 和 tokens.css 作为设计系统，把货币换成[你的货币]，类别换成[你的类别]，并保证各个屏幕上的合计金额前后一致。然后用[Expo / SwiftUI / 你的技术栈]把这些屏幕实现出来。
因为设计系统已经写在 DESIGN.md 里，agent 之后新加的屏幕（比如储蓄目标、定期账单）也会和这 8 个保持一致。
基于 Wallet 设计系统
这个模板用的是 Wallet，一套为金融类 App 设计的系统：Manrope 字体加等宽数字的清晰余额、一个沉稳的绿色、18px 圆角，以及 48px 触控区域。它的页面有实时预览、完整的 DESIGN.md 和 shadcn 主题。
常见问题
这个记账 App 模板免费吗？
免费。它是 MIT 协议的开源项目，个人和商业项目都可以用。
数字真的都对得上吗？
对得上。余额、预算、图表百分比和净资产在 8 个屏幕之间都是一致的。所以你或 agent 改了一个数字，顺着改下去，设计依然说得通。
有深色模式吗？
有。在任意屏幕的 <html> 标签上加 class="dark"，就会切换成 Wallet 的深色模式。