# @appquality/unguess-design-system 中文文档

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

版本：4\.1\.10
npm 元数据更新时间：2026-11-05T09:13:21.517Z
中文译文更新时间：2026-11-06T22:26:51.412Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：3.8 MB，18 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：56 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0，formik ^2\.2\.9，react-dom ^17\.0\.0 \|\| ^18\.0\.0，styled-components 6\.3\.6
- 首次发布：2022-03-01T13:48:57.496Z
- 最新版本发布：2026-11-05T09:13:21.152Z
- 近 30 天下载量：2258（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：578（近 12 个月 46 个）

## 中文简介

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

## 安装

```sh
npm install @appquality/unguess-design-system
```

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

## README

# UNGUESS 设计系统

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

## 用于

-   [解析平台](https://app.unguess.io/)

## 技术堆栈

建筑构件

-   🪴 [禅桌花园](https://garden.zendesk.com/) 作为基础设计系统
-   ⚛️ [反应](https://reactjs.org/) 以声明成分为中心的UI
-   📚 [故事书](https://storybook.js.org/) 用于开发UI组件 [自动生成的文件](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
-   👩‍🎤 [样式组件](https://styled-components.com/) 用于组件范围型号

维护该系统

-   📦 [雅伦](https://yarnpkg.com/) 软件包管理
-   📦 [国家预防机制](https://www.npmjs.com/) 分发
-   ✅ [色谱](https://www.chromatic.com/) 来防止组件中的 UI 错误( 通过故事本维护者)

## 为什么

Ungues设计系统将现有的UI组件编码为中央,维护良好的存储器. 它的建立是为了解决一次又一次地将相同的组件粘入多个项目的问题. 这简化了建筑UI与"故事书"的设计模式.

## 安装

```bash
yarn
```

## 全球样式

设计系统内的组件假设已经配置出一组全局风格. 根据申请的需要,可以采取以下几种方式:

#### 备选案文1: `GlobalStyle` 组件

不需要习惯的时候有用 `body` 应用程序中的样式, 通常会放置在覆盖所有页面的布局组件中, 或是顶层 `App` 组件.

```javascript
import { global } from '@storybook/design-system';
const { GlobalStyle } = global;
```

```javascript
/* Render the global styles once per page */
<GlobalStyle />
```

#### 备选案文2:使用 `bodyStyles` 用于应用样式

当你想在共享的全球造型上更上一层楼的时候就有用.

```javascript
import { Global, css } from '@storybook/theming';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;

const customGlobalStyle = css`
  body {
    ${bodyStyles}// Custom body styling for the app
  }
`;

const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
```

```javascript
/* Render the global styles once per page */
<CustomGlobalStyle />
```

## 常见问题

### 如何安装 @appquality/unguess-design-system？

在项目目录运行 npm install @appquality/unguess-design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0）、formik（^2\.2\.9）、react-dom（^17\.0\.0 \|\| ^18\.0\.0）、styled-components（6\.3\.6）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appquality/unguess-design-system 支持 TypeScript 吗？

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

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

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

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

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

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

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

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

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