# @agentero/design-system 中文文档

规范地址：https://npmcn.com/package/%40agentero/design-system/

版本：0\.40\.1
npm 元数据更新时间：2026-11-06T10:31:41.166Z
中文译文更新时间：2026-11-06T06:55:12.446Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40agentero/design-system
原文对照：https://npmcn.com/package/%40agentero/design-system/?lang=original
项目主页：https://agentero.github.io/design-system/
源码仓库：https://github.com/agentero/design-system

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.2 MB，233 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：23 个
- peer 依赖：react ^19\.2\.4，react-dom ^19\.2\.4，tailwindcss ^4\.0\.0，react-hook-form ^7\.88\.0，@tanstack/react-table ^8\.21\.3
- 首次发布：2026-03-26T15:20:36.642Z
- 最新版本发布：2026-11-06T10:31:40.787Z
- 近 30 天下载量：4286（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：125（近 12 个月 125 个）

## 中文简介

使用 Tailwind CSS v4 和 Radix UI 原始创建的 React 组件库

## 安装

```sh
npm install @agentero/design-system
```

也可以使用：`pnpm add @agentero/design-system`、`yarn add @agentero/design-system`、`bun add @agentero/design-system`

## README

# @ agentero/ 设计系统

React 组件库 [尾风 CSS v4](https://tailwindcss.com/) 财务报告和审定财务报表 [Radix 用户界面](https://www.radix-ui.com/) 原始的 原始的 原始的 每个组件均可单独导入,完全打入,并设计成无缝地融入任何以Tailwind为基础的项目.

[故事书](https://agentero.github.io/design-system/) | [无](https://www.npmjs.com/package/@agentero/design-system)

## 安装

```bash
yarn add @agentero/design-system
```

### 同伴依赖关系

此软件包需要以下对等依赖性:

```bash
yarn add react react-dom tailwindcss
```

## 设置

### 尾风 CSS 配置

添加设计系统为 Tailwind 源, 以便生成组件类的 CSS :

```css
/* app.css */
@import 'tailwindcss';
@source "@agentero/design-system/theme";
```

## 构成部分

```tsx
import { ComponentName } from '@agentero/design-system/ComponentName';
```

## 公用事业

### `cn`

一个类名称合并工具合并 `clsx` 财务报告和审定财务报表 `tailwind-merge`。用于有条件地加入 Tailwind 课程而不发生冲突.

```tsx
import { cn } from '@agentero/design-system/lib';

cn('px-4 py-2', isActive && 'bg-blue-500', className);
```

## AI 整合(MCP)

这包货船a [示范背景协议](https://modelcontextprotocol.io/) 服务器,可以让 AI 编码助理访问组件文档,道具,以及使用实例——不需要故事本运行时间.

添加到您的工程中`.mcp.json`数字 :

```json
{
    "mcpServers": {
        "design-system": {
            "command": "node",
            "args": ["./node_modules/@agentero/design-system/mcp/server.mjs"]
        }
    }
}
```

或者直接运行它:

```bash
npx @agentero/design-system-mcp
```

服务器曝光了三种工具:

-   **列表全部文档** 发现所有可用的组件和文件
-   **获取文档** 获得一个组件的全部文件、道具和使用示例
-   **获取文档作为故事** 获得具体故事变体的细节

## 地方发展

开发设计系统与没有构建过程的消费者应用软件一起,将软件包本地化:

```bash
# In the design system directory
yarn link

# In the consumer app directory
yarn link @agentero/design-system
```

词根 `package.json` 输出直接指向TypeScript源文件,因此消费者的捆绑器(Vite,Next.js等)通过HMR即时取出变化——不需要构建步骤或监视器.

如果使用Next.js,则将软件包添加到 `transpilePackages` 内 `next.config.ts`数字 :

```ts
transpilePackages: ['@agentero/design-system'],
```

### 取消链接

```bash
# In the consumer app directory
yarn unlink @agentero/design-system
yarn install --force
```

## 许可证

[阿帕奇 - 2.0](https://npmcn.com/package/%40agentero/design-system/LICENSE)

## 常见问题

### @agentero/design-system 是什么？

使用 Tailwind CSS v4 和 Radix UI 原始创建的 React 组件库

### 如何安装 @agentero/design-system？

在项目目录运行 npm install @agentero/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.4）、react-dom（^19\.2\.4）、tailwindcss（^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 design-system-mcp，可以用 npx design-system-mcp 直接运行。

### @agentero/design-system 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @agentero/design-system 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @agentero/design-system 可以商用吗？

@agentero/design-system 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @agentero/design-system 的下载量有多少？

根据 npm 官方下载统计，@agentero/design-system 在 2026/10/05 – 2026/11/03 这 30 天内被下载 4,286 次，日均约 143 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @agentero/design-system 还在维护吗？

最新版本 0\.40\.1 发布于 2026/11/06（1 天前）；至今共发布 125 个版本，其中过去 12 个月发布了 125 个；首次发布于 2026/03/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。