ICEN UI 设计系统
搜索组件… ⌘K
v0.3 统一抽象层：6 个交互基元 + --icen-* 原语 token

icen.ai 生态的
设计系统基础

设计 tokens + 无框架组件 CSS + 行为 JS。6 套色彩预设 × 3 种风格 × 明暗双模， 全部组件消费同一套 --token-*，换肤零改动。开源，开放代码。

开始使用 浏览组件
实时渲染 · 切换右上角预设 / 明暗查看换肤
支付表单
团队
林晚晴 沈 顾

暂无团队成员

邀请你的团队协作完成此项目。

安全设置

双重身份验证

通过电子邮件或手机号进行验证。

登录通知

新设备登录时推送提醒。

指标
1,280
用户总数
96.2%
本周可用性
12
待处理告警
构建状态
运行中 gateway · 3 分钟前
64%
排队 docs · 等待中
消息

构建成功

dist 产物已生成，耗时 42 秒。

配额将尽

本月构建时长已用 80%。

三层正交

色彩预设 × 风格 profile × 明暗，三层互不耦合，任意组合都自洽。

无框架

纯 CSS class 契约 + 按需 behavior JS，React / Vue / 原生都能接。

统一抽象层

6 个交互基元 class + --icen-* 原语 token，31 个组件共享同一套状态语义。

SSR 友好

全部 behavior 带 SSR 守卫，文本赋值只用 textContent，无注入面。

快速开始

1安装设计系统包

bun add @icen.ai/ui

2在入口引入 tokens 与全部组件样式

import '@icen.ai/ui/tokens.css';import '@icen.ai/ui/ui.css';

3在 <html> 上挂预设与明暗类

<html class="piano dark"> … </html>