暖白与苔绿，三角与细线。让界面拥有清晰的秩序与克制的节奏。
在线预览 · 快速接入 · 组件 · 设计规范 · AI Skills · 参与贡献 · 版本记录
Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、管理界面和数据密集型应用。它将设计规范、66 个组件和动效示例放在一起，帮助团队建立一致、可复用的界面语言。
- 一致的视觉语言：色彩、字体、文字层级、间距、几何与焦点规则。
- 66 个可组合组件：覆盖布局、表单、数据、导航、浮层和反馈。
- 可验证的动效：12 组播放 / 重播 / 复位演示，以及三角构架启动编排。
- 面向开发协作：组件契约、交互展台和 AI skill 帮助设计与实现保持一致。
**0.4.0 新增能力：**主题 API、三套内置主题，以及导航、表单流程与健康时间轴组件；在线展台跟随 main，安装前请核对版本记录。新增组件及选型见交互规范，参考项目见GitHub 调研。
基于 React 与 Radix UI，采用 Apache-2.0 许可证。
0.5.0 新增能力：新增背景与多侧栏、复杂表单、受控数据表、媒体与监控图表，共 59 个组件。API、最小接入与版本边界见应用组件契约。npm 0.4.0 不含这些能力。
0.8.0 新增能力：三主题 Three.js 艺术分别为折纸鸟、源石晶簇与草莓甜甜圈，保留原始轨道切换；新增 NeutronStarBackdrop、StatusTimelineList 、AppShellToggle 与 ButtonLink，公共组件总数为 66。包含暂停、减少动态、静态降级与资源清理。安装前核对版本记录与 registry；在线展台跟随 main。
0.8.0 同时提供 ButtonLink 与可传规则的一行 TimelineLegend；紧凑摘要与凭证操作规范说明无框摘要、历史详情与必要操作的组合。真实展台为 /#compact-account。
本轮新增 API 与交互已逐项核对 Ant Design / MUI，修复及明确保留的差异见对标清单。
0.8.0 新增：新增 主题预览与选择、设置弹窗导航及浮层缩放修复。0.7.0 候选未发布；本版承接其全部已接受功能。
需要 React 19。当前已验证的构建环境为 Vite，开发建议使用 Node 24。
在你的 React 项目中安装：
npm install --save-exact @linhey/rhine-design@0.9.1包与版本信息见 npm。如需使用未发版的源码，可安装 git+https://github.com/linhay/rhine-design.git#<commit>；建议固定版本并提交 lockfile。
0.9.1 修复：紧凑账号时间轴尾距与事实列对齐、纯表格 Surface padding="none"、窄容器中完整原生日期编辑区。默认行为兼容，完整说明见版本记录。0.9.0 的 ListFilterBar 搜索、主条件与更多筛选能力继续保留。
import { Button, Inline, Stack, Surface, Text } from '@linhey/rhine-design';
export function Welcome() {
return (
<div className="rhine-theme">
<Surface>
<Stack gap={4}>
<Stack gap={2}>
<Text as="h1" variant="title">开始新的工作</Text>
<Text tone="muted">用统一的组件，构建属于你的工作空间。</Text>
</Stack>
<Inline gap={2}>
<Button onClick={() => { /* 在这里处理点击 */ }}>继续</Button>
</Inline>
</Stack>
</Surface>
</div>
);
}入口自动加载样式，用 .rhine-theme 包裹页面即可使用默认主题。布局和颜色变量使用 --rhine-* 前缀；完整定义见 tokens.css。
0.5.0 提供 Background 与 AppShell，npm 0.4.0 不含这两项能力。背景层级、最小接入及兼容范围见背景与应用外壳契约，真实展台见 场景背景 和 背景与侧栏。
OrbitBackdrop 承接授权移交的轨道动画，保留环节点、曲线、箭头、光晕与透视，并提供暂停、减少动态和离屏停帧。它是纯装饰，不表示加载或业务进度。契约与接入见轨道背景，真实展台见轨道星空。
NeutronStarBackdrop 承接另一套独立的中子星艺术，使用按需加载的 Three.js 绘制；内置暂停、减少动态、离屏停帧与静态降级。主题切换不重播，正文与控件不模糊。最小接入、生命周期及版本边界见中子星契约，源码展台入口为 /#neutron-star。不要用轨道组件替换中子星的原视觉配方。
展台右上角可切换并记忆主题。新增 橙趣 · 粗描边：浅灰蓝点阵背景、米白圆角卡片、黑色粗边、向右下偏移的硬阴影与亮橙主按钮。打开 在线订阅管理示例，体验卡片详情、管理菜单与演示表单；本地开发访问 http://127.0.0.1:18309/?theme=neo-brutalism#subscriptions。
从 0.4.0 接入，入口自动加载内置主题，页面只需包裹一次：
import { Button, Surface } from '@linhey/rhine-design';
import { ThemeProvider, useTheme } from '@linhey/rhine-design/theme';
function Appearance() {
const { setTheme } = useTheme();
return <Button onClick={() => setTheme('arknights')}>切换战术主题</Button>;
}
export function App() {
return <ThemeProvider defaultTheme="neo-brutalism">
<Surface><Appearance /></Surface>
</ThemeProvider>;
}受控模式、主题列表、存储职责、浮层继承和迁移方式见 主题 API 接入。第一版支持并列 Provider，不支持嵌套覆盖；偏好由宿主管理，库不读写本地存储。此 API 自 0.4.0 提供。
完整变量、类型标签、交互与减少动态规则见 橙趣主题规范。现有 CSS-only 用法仍支持；展台装饰独立放在 preview/theme-*.css。
0.5.0 新增六类场景背景配置：画布、正文、侧栏、卡片表单、浮层和媒体。正文默认无纹理，支持局部配色与纹理覆盖；本地展台 http://127.0.0.1:18309/#backgrounds 可查看当前主题的六类场景，并通过主题选择器切换。
类名、CSS 变量、动画名称与动态设置统一使用 rhine- 命名空间。升级到 0.3.0 时请同步迁移主题根、自定义样式与动效属性，具体见 迁移说明。
- 包导出 TS/TSX、CSS 和 SVG 源码，构建器需支持 CSS 导入与 Vite 的 SVG
?no-inline引用；目前未验证其他构建器和 SSR。 - 浮层挂载到最近的
.rhine-theme。请将主题根放在页面根部，避免对它使用transform、裁剪或contain。 - 组件提供呈现与交互，应用负责数据请求、搜索、分页和操作结果。
- 默认使用暖白主题；0.4.0 还提供可选的战术终端与橙趣主题。Logo 的深浅配色独立于界面主题。
| 类别 | 组件 |
|---|---|
| 品牌与文字 | Logo · Text |
| 操作 | Button · ButtonLink⁴ · Icon · IconButton · Link · CopyButton |
| 布局与背景 | Surface · Toolbar · Divider · Stack · Inline · Grid · Background² · AppShell² · AppShellToggle⁴ · OrbitBackdrop³ · NeutronStarBackdrop⁴ |
| 表单与选择 | TextField · Fieldset¹ · ErrorSummary¹ · Textarea · Select · Checkbox · RadioGroup · Switch · SearchField · Combobox · SelectionCard · DateField² · DateRangePicker² · NumberField² · TreeSelect² · RemoteMultiSelect² |
| 导航与展开 | SideNav¹ · Breadcrumbs¹ · Steps¹ · Tabs · SegmentedControl · Disclosure |
| 数据与媒体 | Metric · KeyValue · DataTable · Pagination · StatusTimeline¹ · StatusTimelineList⁴ · TimelineLegend¹ · TrendChart² · StackedBar² · MediaCard² · MediaViewer² |
| 浮层 | Drawer¹ · Dialog · ConfirmDialog · Popover · Menu · Tooltip |
| 状态与反馈 | Badge · Notice · Toast · Progress · Skeleton · EmptyState |
¹ 自 0.4.0 提供。² 自 0.5.0 提供。³ 自 0.6.0 提供。⁴ 自 0.8.0 提供。
无需安装即可打开 在线组件展台，体验组件与动效。
| 主题 | 文档 | 在线预览 |
|---|---|---|
| 视觉基础与组合原则 | 设计规范 | 视觉基础 |
| 间距、分组与卡片组合 | Spacing | 间距与组合 |
| 字体、文字层级与数值 | Typography | 字体与文字 |
| 品牌几何与 Logo | Logo 契约 | 品牌标志 |
| 动效、交互与减少动态 | Motion | 动效实验室 |
| 启动动画与就绪衔接 | Startup | 启动动画 |
| 轨道装饰、暂停与静态降级 | OrbitBackdrop | 轨道星空 |
| 中子星艺术、主题与 WebGL 生命周期 | NeutronStarBackdrop（0.8.0） | 中子星展台 |
| 场景与交互选型 | 使用规范 | 场景指南 |
| 日期快捷项、范围草稿与确认 | 日期筛选组合 | 日期筛选 |
| 无框摘要、一行图例与凭证操作消融 | 紧凑组合 | 紧凑账号 |
| 导航与表单流程 | 组件契约 | 导航 · 表单 |
| 系统覆盖与演进方向 | 组件系统对照 | — |
展台采用左侧分组目录、右侧单章节工作区；目录与内容独立滚动，当前章节高亮，原有锚点可直接分享并支持浏览器前进/后退。窄屏使用可展开目录，选择章节后自动收起。动效偏好跨章节保留。
展台包含组件状态、键盘操作、长文本、加载与错误示例。动效可播放、重播、复位和慢放，并支持减少动态模式。离开章节会卸载其演示，返回后重新开始。在线版本跟随 main 更新；如需本地运行：
git clone https://github.com/linhay/rhine-design.git
cd rhine-design
npm ci
npm run dev打开 http://127.0.0.1:18309/，使用相同的 #foundation、#motion 等锚点访问对应章节。
rhine-design skill 帮助 AI 编程助手查找组件 API、遵循字体与动效规范，并优先复用已有组件。它适用于支持 SKILL.md 的工具；Codex 可通过 $rhine-design 调用。
安装组件包后，在你的项目根目录执行：
mkdir -p .agents/skills
cp -R node_modules/@linhey/rhine-design/skills/rhine-design .agents/skills/然后向助手提出具体任务，例如：
使用 $rhine-design 设计一个设置页面，包含搜索、选项开关和保存反馈；复用现有组件，并提供键盘操作与减少动态效果。
skill 中提供以下参考入口：
| 文件 | 用途 |
|---|---|
| SKILL.md | 使用范围、设计先行流程、版本与源码定位 |
| TASK_MAP.md | 按字体、表单、数据、浮层、动效等任务选择规范 |
| API_MAP.md | 按组件名定位真实实现和公开入口 |
| integration.md | 主题、构建、数据所有权与迁移注意事项 |
升级组件时请同步更新 skill；如果已做本地定制，先比较差异再合并。其他工具请将同一 skill 目录放入其支持的技能路径。
欢迎提交问题、文档改进和组件提案。遇到问题时，请在 Issues 提供组件名、版本、预期行为及最小复现。
开发环境、验证命令和 PR 说明见 贡献指南。版本变化和升级说明见 CHANGELOG。
Apache License 2.0。版权声明见 NOTICE。第三方依赖遵循各自的许可证。