

<div align="center"><a name="readme-top"></a>
  <img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
  <h1>Alibaba Cloud Spark Design</h1>
</div>

# 概述

Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
<br />
<br />

## ✨ 特性


- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
- 🧠 为 LLM 产品设计的各种场景组件。
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
- 🎨 多种预设主题。
- ☀️ 轻松切换明暗模式。

## 📦 安装


```bash
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
```


## Tree Shaking 支持

@agentscope-ai/design 默认基于 ES 模块支持 tree shaking

## TypeScript

@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。

## 内置主题

我们提供四种内置主题：

<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>

## 🏗️ 开源

[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。