RicoFast：基于 Astro 6 + Tailwind v4 的设计驱动 SaaS 模板

RicoFast 是一个以设计驱动的开源 SaaS 网站模板，基于 Astro 6 + Tailwind CSS v4 构建。它跟市面上大多数模板不同，不做功能堆砌，而是把精力放在视觉规范和设计系统上，让你能快速搭出一个有设计感的产品站。

项目简介

RicoFast 由设计师 Rico（ricocc）开发维护，在 GitHub 上已获得一定关注度。项目使用 TypeScript 编写，包含 11 个生产就绪页面和 15+ 可复用 section 组件，覆盖了 SaaS 产品站从首页到定价、博客、Changelog 的完整链路。

这个模板的定位很明确：不是骨架 starter（你得自己拼剩下 90%），也不是大而全的功能包（设计是短板）。它走的是设计驱动路线，有一套完整的 token 系统和文档化的设计规范，方便 AI 工具准确识别并生成视觉一致的页面。

核心特性

• 11 个生产就绪页面：首页（12 个 section）、Features、Pricing、Blog、Changelog、About、Contact、Sign in、Sign up、Elements、404
• 15+ 可复用 section 组件：Hero、FeatureGrid、FeatureDetail、Pricing cards、Comparison table、FAQ、Steps、Tech stack、Use cases、FinalCTA 等
• Auth 页面模板：登录/注册各含两种布局变体（分屏和居中卡片），接入你的 auth provider 即可使用
• Token 驱动的设计系统：约 30 个 CSS 自定义属性，全部文档化在 docs/DESIGN.md
• 内置暗黑模式：class-based 实现，无切换闪烁，对比度经过审核
• Lighthouse 95+：Performance、Accessibility、Best Practices、SEO 开箱即得
• MDX 驱动的 Blog & Changelog：基于 Astro 6 Content Layer API

技术栈

快速开始

环境要求

• Node.js >= 22.12.0
• pnpm >= 9

安装步骤

# 克隆仓库
git clone https://github.com/ricocc/ricoui-saas-template.git my-saas
cd my-saas

# 安装依赖
pnpm install

# 启动开发服务器（http://localhost:5200）
pnpm dev

环境变量

复制 .env.example 为 .env：

PUBLIC_SITE_URL=https://your-domain.com
PUBLIC_GA4_ID=your-google-analytics-id  # 可选
PUBLIC_UMAMI_ID=your-umami-id            # 可选

项目结构

├── docs/
│   └── DESIGN.md           # 设计 token、字号、间距规范
├── src/
│   ├── pages/              # 路由（index、features、pricing 等）
│   ├── layouts/            # Layout.astro（根）、PageLayout、PostLayout
│   ├── components/
│   │   ├── home/           # HeroSection
│   │   ├── sections/       # Header、Footer、FAQ、BlogSection
│   │   ├── cards/          # BlogCard
│   │   ├── ui/             # Button、Badge、AccordionItem、PricingToggle
│   │   └── widgets/        # Toc、Pagination、ToTop
│   ├── content/
│   │   ├── post/           # 博客 MDX 条目
│   │   └── changelog/      # 更新日志 MDX 条目
│   ├── config/site.js      # 站点配置（品牌、社交链接等）
│   └── styles/global.css   # 设计 token

自定义指南

90% 的定制工作集中在三个文件。

品牌身份 — src/config/site.js

export const siteConfig = {
  title: "你的 SaaS",
  author: "你的团队",
  url: "https://your-domain.com",
  mail: "hello@your-domain.com",
  meta: {
    title: "你的 SaaS — 一句话价值主张",
    description: "你的产品清晰描述。",
    keywords: "你的, 目标, 关键词",
    image: "/og.jpg",
  },
  social: {
    twitter: "https://x.com/your-handle",
    github: "https://github.com/your-org/your-repo",
  },
};

设计 Token — src/styles/global.css

@theme {
  --color-primary: #2d6dc3;          /* 品牌主色 */
  --color-primary-strong: #0066ff;   /* hover/强调 */
  --color-accent: #fad13b;            /* 徽章、高亮 */
  --color-bg-primary: #fdfaf5;        /* 页面底色 */
  --font-brand: "Instrument Serif", serif;
  --font-sans: "Inter", sans-serif;
}

完整的 token 列表（约 30 个变量）记录在 docs/DESIGN.md，覆盖颜色、字体、字号、间距、圆角、阴影等。

内容管理 — src/content/

博客与 changelog 使用 MDX 格式，frontmatter schema 定义在 src/content.config.js。新文章放在 src/content/post/<slug>/index.mdx，build 会自动识别。

设计系统

RicoFast 最大的差异化在它的设计系统文档。docs/DESIGN.md 记录了所有 token 的用法，包括：

• 颜色系统：primary、accent、neutral、semantic（success/warning/error）四层
• 字体规范：brand（衬线）和 sans-serif 的字号梯度（sm/base/lg/xl/2xl/3xl）
• 间距系统：统一的 section padding 和 container 约束
• 动效规范：AOS 入场参数和 motion.js 过渡时长

这套文档的意义不仅在于让人能快速修改视觉，更在于让 AI 编程助手（Claude Code、Cursor 等）能准确理解设计意图，生成的页面不容易跑偏。项目根目录的 CLAUDE.md 就是为这个目的写的。

页面与组件

页面一览

常用组件

• Button — primary/secondary/ghost/outline 四种变体
• Badge — 用于标注 "New"、"Free"、"Pro" 等
• AccordionItem — FAQ 折叠面板
• PricingToggle — 月付/年付切换
• BrowserFrame — 在浏览器窗口样式中展示截图
• SectionHeader — 统一的 section 标题区

部署

build 产物是纯静态文件，部署到任何静态托管平台都可以：

pnpm build  # astro check && astro build → dist/

SEO 与站点元数据

内置了完整的 SEO 支持：

• Open Graph / Twitter cards
• sitemap.xml 自动生成
• RSS feed
• canonical URL（基于 PUBLIC_SITE_URL）
• Google Analytics 4 和 Umami 集成（可选）

作者

Rico 是一位网页/UI 设计师，专注于网页设计和视觉落地。除了 RicoFast，他还开源了一个 Blog Template 和一个 Portfolio Template，风格保持一致。

项目信息

• GitHub 仓库：ricocc/ricoui-saas-template
• 在线演示：ricofast.pages.dev
• 设计参考：ricofast.pages.dev/elements
• 开源协议：MIT License