# @jocoding-ax-partners/design-system 中文文档

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

版本：5\.1\.0
npm 元数据更新时间：2026-11-01T13:51:13.938Z
中文译文更新时间：2026-11-01T14:01:12.966Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：85.5 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：tailwindcss ^4，@heroui/react ^3\.2\.4，@heroui/styles ^3\.2\.4
- 首次发布：2026-08-19T07:49:24.983Z
- 最新版本发布：2026-11-01T08:11:20.937Z
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

只基于css设计系统 [HeroUI v3](https://v3.heroui.com/).

## 安装

```sh
npm install @jocoding-ax-partners/design-system
```

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

## README

# @jocoding-ax-partners /设计系统

只基于css设计系统 [HeroUI v3](https://v3.heroui.com/).

**这个包不导出任何组件。** 从 `@heroui/react` 作为 通常的;这个包附带了一个样式表，用于重新设计样式，并注册一组样式表 设计令牌。没有提供程序，没有包装器，也没有JavaScript。

## 安装

```bash
npm install @jocoding-ax-partners/design-system @heroui/react@^3 @heroui/styles@^3 tailwindcss@^4
```

## 设置

添加一个导入到你的顺风CSS入口文件：

```css
@import "tailwindcss";
@import "@jocoding-ax-partners/design-system/styles";
```

这就是整个过程。 `@jocoding-ax-partners/design-system/styles` 导入 `@heroui/styles` 本身,所以 您不需要单独导入它——但它仍然是对等依赖项，必须安装。 将导入置于 `tailwindcss` 在任何样式表之后，它都应该重写。

您的框架的顺风v4是上游设置-请参阅 [顺风安装指南](https://tailwindcss.com/docs/installation)。相同 HeroUI的 [需求和快速入门](https://v3.heroui.com/docs/react/getting-started/quick-start).

```tsx
import { Button } from "@heroui/react"; // ✅
import { Button } from "@jocoding-ax-partners/design-system"; // ❌ does not exist
```

## 这个包增加了什么

### `data-*` 属性

HeroUI的prop类型不能扩展，所以额外的选项依赖于数据属性。

| 组件 | 属性 | 值 |
| --- | --- | --- |
| `Button` (轮廓,鬼) | `data-color` | `accent` `danger` `success` `warning` `info` |
| `ToggleButton` (默认情况下,鬼) | `data-color` | `accent` `danger` `success` `warning` `info` |
| `Chip` | `data-color` | `info` |
| `Checkbox.Control` | `data-size` | `md` |
| `Checkbox.Control` | `data-rounded` | `"true"` |
| `Radio.Control` | `data-size` | `md` |

```tsx
<Button variant="outline" data-color="danger">Delete</Button>
```

### 列表框选择

内部 `Select`， `ComboBox`， `Autocomplete` 和独立 `ListBox`，项目指示器 是隐藏的，而选定的项则用重音背景标记。

```tsx
<ListBox.Item id="florida" textValue="Florida">
  Florida
  <ListBox.ItemIndicator /> {/* opts this item into the accent background */}
</ListBox.Item>
```

呈现指示符就是将项选择到该样式中。没有一项的项目 保留heroi的外观，其中根本没有标记选择。

### 顺风公用事业

注册于股票Tailwind和HeroUI之上：

-   **颜色** - - - - - - `accent-50`…`accent-950`， `gray-850`，还有 `info` 家庭 （`info`， `info-soft`， `info-soft-foreground`，…)，英雄不发货
-   **半径** - - - - - - `rounded-button-xs|sm|md|lg`， `rounded-input`， `rounded-list-box`， `rounded-toast`， `rounded-dialog`， `rounded-card`,……
-   **间距** - - - - - - `h-button-sm|md|lg`， `size-input`， `gap-field`,……
-   **排版** - - - - - - `text-display-01`…`04`， `text-heading-01`…`05`， `text-body-01`…`03`， `text-caption-01|02`
-   **变体** - - - - - - `light:`，与HeroUI的对应 `dark:`

HeroUI自己的调色板的某些部分也被重新赋值，而不需要添加实用程序名称——the 灰度移至中性色块，并有若干语义、面和场 角色被覆盖。保持使用HeroUI的实用程序名称。

确切的值在附带的样式表中 （`node_modules/@jocoding-ax-partners/design-system/dist/styles/index.css`）. 他们故意不这样做 在这里复制，因为副本从源漂移。

## 组件的文档

这个包不记录HeroUI的组件——那是由HeroUI来维护的 这里的副本每次发布都会过期。按顺序使用：

1.  HeroUI MCP服务器(`@heroui/react-mcp`) - - - [设置](https://v3.heroui.com/docs/react/getting-started/mcp-server)
2.  [v3.heroui.com/docs/react/components](https://v3.heroui.com/docs/react/components)
3.  `node_modules/@heroui/react/dist/components/<name>/<name>.d.ts` -已安装的 版本，当文档与运行时行为不一致时获胜

## 与编码代理一起使用

`llms.txt` 在包内传递，并且是所有内容的面向代理的参考 以上。让你的代理人立刻去找它，例如在 `CLAUDE.md`：

```markdown
## @jocoding-ax-partners/design-system

This project uses @jocoding-ax-partners/design-system, a CSS-only design system on HeroUI v3.
Import all components from `@heroui/react`, never from `@jocoding-ax-partners/design-system`.
Read `node_modules/@jocoding-ax-partners/design-system/llms.txt` before writing UI code — it lists
the `data-*` extensions and design tokens this project adds on top of HeroUI.
```

## 许可证

麻省理工学院

## 常见问题

### @jocoding-ax-partners/design-system 是什么？

只基于css设计系统 HeroUI v3\.

### 如何安装 @jocoding-ax-partners/design-system？

在项目目录运行 npm install @jocoding-ax-partners/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（^4）、@heroui/react（^3\.2\.4）、@heroui/styles（^3\.2\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @jocoding-ax-partners/design-system 支持 TypeScript 吗？

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

### @jocoding-ax-partners/design-system 支持 ESM 还是 CommonJS？

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

### @jocoding-ax-partners/design-system 可以商用吗？

@jocoding-ax-partners/design-system 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @jocoding-ax-partners/design-system 还在维护吗？

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