SaaS 后台模板。

一套完整的 SaaS 数据分析后台 Web App 界面：示例产品是一个叫 Tallywise 的订阅收入分析工具，8 个界面，从 MRR 总览、客户列表，到收入报表、发票、留存分析、团队设置和新账号引导都有。每个界面上的数字都对得上，而且都是纯 HTML 加 Tailwind，Codex 或 Claude Code 可以直接克隆下来，改成你的产品。

更新于 2026年11月7日

模板里有什么

示例数据是一家虚构公司 10 月的数据：MRR 62,500 美元，ARR 750,000 美元，712 个客户，流失率 3.9%。四个套餐加起来正好等于这些总数；本月的 MRR 变动也对得上（59,840 + 4,210 + 1,890 − 420 − 3,020 = 62,500）；收入报表的 12 个月最后落在和总览相同的 MRR 上。客户名字都是虚构的。

每个界面都是一个 HTML 文件，按 1440×900 设计，在 390 像素宽的手机上也能用：侧边栏收成菜单，表格可以横向滚动。样式用 Tailwind CSS v4 和共用的 tokens.css。数字用 IBM Plex Mono 等宽数字，图表用 SVG 画，表格行可以用键盘选中，图标用 Lucide。用浏览器直接打开任意文件即可，不需要安装或构建。

在 Codex 或 Claude Code 里使用

从 ui-templates 仓库只复制这一个模板：

npx degit ummydev/ui-templates/webapps/saas-dashboard my-dashboard

然后让 agent 改成你的产品：

这个文件夹是一个 SaaS 后台的 UI 模板。把它改成[你的产品]，面向[你的目标用户]。保留 DESIGN.md 和 tokens.css 作为设计系统，把指标、套餐、客户和图表换成[你的数据]，并保证各个界面上的合计前后一致。然后用[Next.js / React / 你的技术栈]实现，并接上[你的数据源]。

因为设计系统已经写在 DESIGN.md 里，agent 之后新加的界面（比如告警、客户分组、收入预测）也会和这 8 个保持一致。

基于 Ledger 设计系统

这个模板用的是 Ledger，一套为数据密集型工具设计的高密度深色设计系统：IBM Plex Sans 加 IBM Plex Mono 显示数字、6px 圆角，以及一个终端琥珀色的强调色，只用在当前状态和关键数值上。它的页面有实时预览、完整的 DESIGN.md 和 shadcn 主题。

常见问题

这个 SaaS 后台模板免费吗？

免费。它是 MIT 协议的开源项目，个人和商业项目都可以用。

可以用在 Next.js、React 或 shadcn/ui 里吗？

可以。界面是纯 HTML 加 Tailwind 类名，agent 可以把它们拆成任何框架的组件，Ledger 的页面里还有配色相同的 shadcn 主题。让它保留 tokens.css 和 DESIGN.md 不动，迁移之后设计就不会走样。

有浅色模式吗？

有。默认是深色，把任意界面 <html> 标签上的 class="dark" 去掉，就会切换成 Ledger 的浅色模式。

继续阅读

• SaaS 官网模板8 个响应式 SaaS 官网页面，基于 Nordic 设计系统。
• 给 AI agent 用的设计系统免费的网页和 App 设计系统，附 DESIGN.md 和 shadcn 主题。