SaaS 官网模板。
一套完整的 SaaS 产品官网：示例产品是一个叫 Fjordly 的团队计划工具，8 个响应式页面，从首页、价格到客户案例、更新日志、博客文章、注册和联系销售都有。文案像真实产品，价格和数字在各页之间对得上，而且都是纯 HTML 加 Tailwind，Codex 或 Claude Code 可以直接克隆下来，改成你的官网。
更新于 2026年11月7日
网站 · 8 个页面 · 免费开源
01首页 
02功能 
03价格 
04客户案例 
05更新日志 
06博客文章 
07注册 
08联系销售
克隆
npx degit ummydev/ui-templates/sites/saas my-app
只把这个模板复制到一个新文件夹，不会下载仓库里的其他内容。
改成你的产品
这是 codexdesign.io 的 SaaS 官网 模板。把它改名为[你的产品]，把示例数据换成[你的功能]，所有界面都继续遵循 DESIGN.md 里的设计系统。
在新文件夹里，把这段话粘贴到 Codex 或 Claude Code。
- 技术栈
- HTML · Tailwind CSS v4 · Lucide icons
模板里有什么
| 页面 | 内容 |
|---|---|
| 首页 | 一句话说清产品、用 HTML 画的产品界面、核心功能、客户和价格 |
| 功能 | 计划、执行、日程、周报、沟通 5 节，每节配一个产品界面 |
| 价格 | 免费、团队、企业三档，按月和按年切换，功能对比表和常见问题 |
| 客户案例 | 一个完整案例，有改进前后的数字，下面还有更多案例 |
| 更新日志 | 按日期排列的版本，标注新功能、改进和修复 |
| 博客文章 | 作者、目录、列表、引用、代码块和相关文章 |
| 注册 | Google 或邮箱注册，旁边是能得到什么和一段客户评价 |
| 联系销售 | 预约演示的表单，填团队人数和需求，以及预约前的常见问题 |
内容在各页之间是一致的。价格是：10 人以内免费；团队版按年付每人每月 8 美元，按月付 10 美元；企业版按需报价。首页的客户评价和客户案例是同一家货运公司：周一例会从 90 分钟缩到 25 分钟，周报从 3 小时缩到 20 分钟。更新日志里最新的一条，就是首页标成「New」的那个功能。客户名字都是虚构的，没有占位人名，也没有 lorem ipsum。
每个页面都是一个 HTML 文件，用 Tailwind CSS v4 和共用的 tokens.css。每一页从 390 像素宽的手机到宽屏电脑都能正常显示，手机上的菜单不需要 JavaScript。产品界面是用 HTML 画的，不是贴进去的图片，所以 agent 可以和网站其他部分一起改样式。用浏览器直接打开任意文件即可，不需要安装或构建。
在 Codex 或 Claude Code 里使用
从 ui-templates 仓库只复制这一个模板：
npx degit ummydev/ui-templates/sites/saas my-saas-site
然后让 agent 改成你的产品：
这个文件夹是一个 SaaS 官网模板。把它改成[你的产品]的官网，这个产品为[目标用户][做什么]。保留 DESIGN.md 和 tokens.css 作为设计系统，把产品界面、功能、价格、客户案例和更新日志换成[你的内容]，并保证价格和数字在各页之间前后一致。然后用[Next.js / Astro / 你的技术栈]实现。
因为设计系统已经写在 DESIGN.md 里，agent 之后新加的页面（比如文档、关于我们、竞品对比页）也会和这 8 页保持一致。
基于 Nordic 设计系统
这个模板用的是 Nordic，一套为效率工具设计的沉静风格设计系统：Manrope 字体、低饱和的峡湾蓝、12px 圆角和柔和的阴影。它的页面有实时预览、完整的 DESIGN.md 和 shadcn 主题。
常见问题
这个 SaaS 官网模板免费吗？
免费。它是 MIT 协议的开源项目，个人和商业项目都可以用。
可以用在 Next.js、Astro 或 React 里吗？
可以。页面是纯 HTML 加 Tailwind 类名，agent 可以把它们拆成任何框架的组件。让它保留 tokens.css 和 DESIGN.md 不动，迁移之后设计就不会走样。
有深色模式吗？
有。在任意页面的 <html> 标签上加 class="dark"，就会切换成 Nordic 的深色模式。