设计驱动 Astro + 博客 + 组件

由设计驱动的 Astro 启动模板

用 RicoUI 主题系统、设计文档和现成的博客模块搭出自己的网站，不带任何演示产品的包袱。

设计文档
组件库
GitHub
ricoui.com/templates

主题面板

TOKENS

v1.0

primary

--color-primary

canvas

--color-bg-primary

accent

--color-accent

dark

--color-bg-primary-dark

页面路由

/
/blog
/design
/elements

简洁的启动模板

简洁的 Astro 启动模板，自带博客、设计文档、组件库、Tailwind CSS v4、MDX 和可复用的主题系统。

主题优先

全局令牌定义了调色板、排版、圆角、表面和暗色模式，在页面开始倍增之前就已就绪。

包含设计文档

设计说明是模板的一部分，人类构建者和 AI 智能体可以遵循相同的视觉规则。

博客就绪

MDX 文章、RSS、分页、文章布局、目录和图片处理已经配置完成。

组件主题

按钮、徽章、卡片、排版、动效、表单控件和布局集中在一个参考页面中。

主题工作流

先定设计，再做产品

模板刻意精简：只给一套完整的视觉系统、一个内容层和一份组件参考。你的应用、品牌、截图和文案直接往上叠就行。

查看设计文档
浏览组件库
starter/theme-map
src/pages/index.astro
首页
src/pages/blog
MDX 博客路由
src/pages/design.astro
设计文档预览
src/pages/elements.astro
主题组件
src/styles/global.css
Tailwind v4 令牌
src/config/site.js
站点配置

从克隆到自定义站点的捷径

首次上手只需要改四个地方，其他都不用动。
01

站点配置

编辑 src/config/site.js

02

主题令牌

在 global.css 和 themes.css 中调整颜色

03

内容文章

在 src/content/post 中编写 MDX

04

页面组合

从组件库参考页面构建

最新文章

博客可用于文档、更新日志、随笔或产品动态。
查看全部文章

从主题出发，做出自己的作品

克隆模板，保留设计语言，用自己的内容和项目结构替换示例文案。

获取模板
RSS
Logo

设计驱动的 Astro 启动模板，自带博客、设计文档、组件库、Tailwind CSS v4 和可复用的 RicoUI 主题。

模板

资源

© 2026 RicoUI . 基于 MIT 协议开源。

v1.0.0 Astro 启动模板 Twitter
Github
RSS