SaaS 

 section使

清晰、可扩展的页面结构

预置 9 个页面:Home、Features、Pricing、Blog、Changelog、About、Contact、Elements、404。层级、间距和字体规则已经统一,新增页面时不用重新做一遍判断。

  • 9 个预置页面模板
  • 基于 token 的间距系统(4 / 8 / 12 / 16 / 24 ...)
  • 1200px 主容器,800px 内容容器
  • 移动优先响应式(375 / 768 / 1024 / 1440)
Hero

模块化 section,拿来就能组合

每个 section 都是独立 Astro 组件,并保持相近的 props 结构。Hero、Features、Pricing、Steps、FAQ、FinalCTA 可以按项目需要重排。

  • 15+ 可复用 section 组件
  • 一致的 props API(title、description、items)
  • 可组合、可重排,减少布局冲突
  • 在 /elements 中提供快速参考
Hero
Features
Pricing
FAQ

完整 MDX 内容支持

Blog 和 Changelog 基于 Astro Content Layer。正文使用 Markdown,需要交互时再在 MDX 中引入 Astro 组件,不需要一开始就接 CMS。

  • Astro Content Layer + glob loader
  • MDX 中可引入组件
  • 内置 TOC、阅读进度和分享入口
  • 自动生成 /rss.xml
---
title: "Launching v1.2"
publishDate: 2026-03-18
tags: ["Release"]
---
## 本次更新
v1 发布三个月后,RicoFast
今天带来 v1.2。
<Callout type="success">
Lighthouse 95+ across the board
</Callout>

克制且有目的的动效

AOS 负责滚动入场,motion.js 用于需要编排的动效,Hero 文本使用错落入场。动效服务于层级和反馈,不做无意义装饰。

  • AOS 滚动入场,配合 `data-aos-once`
  • motion.js 用于时间线编排
  • AnimatedText 支持 Hero 错落展示
  • 遵循 prefers-reduced-motion
错落入场

默认就很快

Astro 默认零 JavaScript,只有需要交互的 islands 才加载脚本。全新安装后即可获得 Lighthouse 95+ 的性能、可访问性和 SEO 基线。

  • 默认零 JS(Astro Islands)
  • Sharp 自动图片优化
  • 静态输出,部署平台不限
  • 全新安装 Lighthouse 95+
98
性能
90
A11y
100
实践
95
SEO
Lighthouse · 首页

由 token 驱动的设计系统

颜色、字体、间距、圆角和动效时长都以 CSS 自定义属性维护,并记录在 docs/DESIGN.md。品牌替换优先改一个文件,整站跟随变化。

  • 约 30 个有文档说明的 CSS tokens
  • 集成 Tailwind v4 @theme
  • 内置无闪烁暗黑模式
  • /elements 页面可作为实时参考
@theme {
--color-primary: #2d6dc3;
--color-accent: #fad13b;
--font-brand: Source Han Sans SC;
}

直接看实际效果

先浏览在线演示。确认适合后,fork 仓库并替换成你的产品内容。

Logo

一个基于 Astro 和 Tailwind CSS 的高质感 SaaS 模板。开源、轻量,适合快速搭建产品官网。

© 2026 RicoUI. 基于 MIT License 发布。

v1.0.0 Built with Astro & Tailwind Twitter Github RSS