v0.10.0 AI 原生组件族 · 图表通用层已发布

ICENDESIGN SYSTEM

冰点全生态 设计系统Design System

组件、图表和 AI 界面,共用一套设计令牌。 换肤不用改代码,UI 也能直接交给模型调用。

0组件入口
0行为模块
0图表类型
0AI 原生
0运行时依赖

WHY · 设计哲学

为下一个十年的界面而生

AI 原生族

做 AI 界面要用的零件都在:对话、推理、工具调用、审批。兼容主流模型协议,token 和成本自动记账。

图表通用层

一份 JSON,十四种图。悬停、点击、右键与图例开关全部内建,不依赖任何图表库。

三层正交

色彩、质感、明暗三层分开调,互不影响。129 个组件消费同一套令牌,换肤零改动。

零依赖无框架

零运行时依赖,不挑框架:React、Vue、原生 JS 都行,SSR 安全。

TOKENS · 色彩预设

一套令牌,色彩自由

现代、东韵、巨构、钢琴、莫奈、梵高,各带明暗双模。点一张色卡,整站即刻换装。

主题

129 个组件共享同一套设计令牌(--icen-token-*)——换肤不改一行组件代码。

SHOWCASE · 组件预览

简洁留给用户,复杂留给代码

下面都是实时渲染,不妨试试——悬停卡片看名字。

周活跃用户

8,642+12.4%
LIVE
1
三季度经营分析月报
销售额 3.42 亿,环比下滑 6.8%…
0.930
2
供应链季度复盘
交付周期从 14 天拉长到 21 天…
0.860
稳定 排队 失败
设计系统 AI 原生
自动
预览
音量40
基础 11 AI 原生 15 知识库 32 表单 14 数据展示 17 图表 20 浮层 6 反馈 7 导航 7

快速开始

1安装

bun add @icen.ai/ui

2引入样式

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

3选择预设与明暗

html
<html class=" " data-icen-theme="dark" data-icen-preset="piano"> … </html>