# @antfu/design 中文文档

规范地址：https://npmcn.com/package/%40antfu/design/

版本：0\.6\.0
npm 元数据更新时间：2026-10-01T01:56:22.788Z
中文译文更新时间：2026-11-06T08:14:56.732Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：419 kB，190 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：vue ^3\.5\.0，unocss \>=66\.0\.0，reka-ui ^2\.0\.0，dompurify ^3\.0\.0，colorjs\.io ^0\.6\.0，playwright ^1\.0\.0，splitpanes ^4\.0\.0，vue-afloat ^0\.1\.0，@antfu/utils ^9\.0\.0，@unocss/core \>=66\.0\.0，@axe-core/playwright ^4\.0\.0，@tanstack/vue-virtual ^3\.0\.0，@iconify-json/catppuccin ^1\.0\.0
- 首次发布：2026-06-28T12:38:28.468Z
- 最新版本发布：2026-10-01T01:56:22.459Z
- 近 30 天下载量：3932（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

适用于devtools-style Vue apps的自定义可调和设计系统——UnoCSS预设,Vue原始人,设计技能,以及11y对比检查

## 安装

```sh
npm install @antfu/design
```

也可以使用：`pnpm add @antfu/design`、`yarn add @antfu/design`、`bun add @antfu/design`

## README

# @antfu/设计

> 一个可定制的, **可堆叠** devtools-style Vue apps的设计系统: a UnoCSS 预设 (`presetAnthonyDesign`),一组Vue原始人,一个地基上 设计技能, 和颜色相通的a11y检查。 介于组件之间的东西 图书馆和阴影.

## 安装

```bash
pnpm add @antfu/design unocss vue
```

## 快开始

```ts
// uno.config.ts
import { presetAnthonyDesign } from '@antfu/design/unocss'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetIcons, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetAnthonyDesign({ primary: '#49833E' }),
    presetWind4(), // a base preset is required — bring your own
    presetIcons(),
    presetWebFonts({ fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
  ],
  // Required — most shipped styles recolor overlays with token `--at-apply`
  // directives; this transformer expands them (and lets you reuse tokens in CSS).
  // (vue-afloat.css is the exception — it themes via vue-afloat's own
  // `--vue-afloat-*` CSS variables and needs no transformer.)
  transformers: [transformerDirectives()],
  // The preset ships no z-index scale (stacking is the app's to own) and blocks
  // plain `z-<number>`. Define the named layers the overlay components use here —
  // these values are yours; tune them to fit your app's stack.
  shortcuts: {
    'z-nav': 'z-[30]',
    'z-dropdown': 'z-[40]',
    'z-tooltip': 'z-[45]',
    'z-toast': 'z-[50]',
    'z-modal-backdrop': 'z-[60]',
    'z-modal-content': 'z-[70]',
    'z-drawer-backdrop': 'z-[80]',
    'z-drawer-content': 'z-[90]',
  },
})
```

> 说对了 [`@unocss/eslint-plugin`](https://unocss.dev/integrations/eslint) 对于反馈回路——它会显示块列表提示(例如平面) `z-50`(单位:千美元) 您的编辑器和CI 而不是静静地在建设时间下降.

```ts
// Components are imported by full path (no barrel) — categorized and prefixed:
import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
import '@antfu/design/styles.css' // everything, incl. splitpanes/reka/vue-afloat overrides
```

`styles.css` 捆绑每个覆盖引擎的覆盖。 如果你不全部使用他们, 樱桃选手没有使用(`splitpanes`编号 :`reka-ui`海军陆战队从来就没有过船:

```ts
import '@antfu/design/styles/base.css'
import '@antfu/design/styles/scrollbar.css'
import '@antfu/design/styles/vue-afloat.css' // only if you use tooltips
```

货船 **原始内容 `.ts` 编号 : `.vue` 来源** (不捆绑)——你的建筑 编成. 没有额外 `content` 需要配置: UnoCSS 默认扫描匹配 `.vue`编号 :`.tsx` (仅将其默认排除为CSS,而非 `node_modules`, (中文(简体) ), 因此您导入的组件会被自动取出 。 狦 _对_ 设定 `content.pipeline.include`,注意这一点 **替换** 默认扫描而不是 扩展它 —— 重复默认值, 否则您自己的源已停止生成 .

这是一个 **单人** 预设为 **非自定义**: 它只贡献 antfu设计层(主题符号,语义快捷键,动态规则,严重程度). 由您组成基础预设,图标,字体和重置自己——并添加 `@unocss/transformer-directives` (运出样式使用符号) `--at-apply` +,建议, `@unocss/eslint-plugin` 用于反馈循环.

## 出口

| 子路径 | 什麽 |
| --- | --- |
| `./components/*` | 一个可读 `.vue` 每个组件(例如:. `./components/Display/DisplayBadge.vue`(中文(简体) ) |
| `./unocss` | 单曲 `presetAnthonyDesign` 预设 |
| `./utils` | 颜色、格式、路径、成像、对比、密钥绑定的帮助者(纯、无国籍) |
| `./composables/*` | 帮助者 : `colorScheme` (备选方案背景)和 `toast` (单位:千美元)`useToast` 队列) |
| `./a11y` | 程序色相相扫描 |
| `./styles.css`, (中文(简体) ), `./styles/*` | 所有样式, 或每个关联文件 |
| `./splitpanes.d.ts` | 旧的选入后退类型 `splitpanes` (v4.1.2+ 船舶本身) |

> 软件包是 **无国籍人** ——无暗相/剪贴板/托斯状态. 构成部分 不同计划的不同 `colorScheme` 道具;道克被控制. 使用 Vue 用户 直接为州.
> 
> 两个 **选入** 帮助者减少锅炉板而不添加全局状态: `provideColorScheme(() => isDark ? 'dark' : 'light')` (从) `@antfu/design/composables/colorScheme`(中文(简体) ) 让了解计划的组成部分继承计划,而不是对道具进行线化,以及 `useToast()` (从) `@antfu/design/composables/toast`) 拥有敬酒队 `FeedbackToasts`两者都只读到你的状态.

## 正在移动已存在的应用程序

如果你的应用早于设计系统, 收养主要是 **删除**数字 :

-   **删除本地符号快捷键 .** 应用软件已经在 `*-base` 方言 (单位:千美元)`bg-base`, (中文(简体) ), `color-base`, (中文(简体) ), `border-base`, (中文(简体) ), `op-fade`, (中文(简体) ), `btn-action`, (中文(简体) ), `badge-color-*`, (中文(简体) ), `color-scale-*`,...)可以放下手卷 `uno.config.ts` `shortcuts` 块 -- -- 经常为20-170行 -- -- 并从 `presetAnthonyDesign`设置 `primary` 编号 : `darkBackground` 切换到您的现有值 (并保持你现有的 `presetWebFonts` 配置为- is —— 此预设没有 关于字体的意见),用于近零可视的diff.
-   **地方公用事业** 输入 `@antfu/design/utils`: 已复制 `getHashColorFromString` 编号 : `getPluginColor`, 字节 / 持续时间 / 时间 格式化器,模块-id / 路径解析器,以及 semver-range 解析器都存在那里.
-   **跳出遗产 `presetUno` 别名.** `presetUno` 是旧名 `presetWind3`; 切换到当前基数 (`presetWind4` 建议,或 `presetWind3`因此语义快捷键有可以扩展为的公用功能. 还是你 带上自己的图标、字体和 `@unocss/reset` ——预设的捆绑没有.
-   **绕行计划,不是状态.** 软件包没有暗/托斯状态:通过 `:color-scheme` (或打电话) `provideColorScheme()` 移动 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}必须的土司单子 `useToast()` 队列.

那就跟着 **重新设计协议** 技术`advanced-patterns`: 原始地图 彩色 符号 一次将原始元素交换给一个家庭 然后运行 每一步后,对比扫描为光+暗.

## 嵌入阴影根

将组件挂入阴影根内——网络组件,devtools码头, 被支持的插入上覆线,但有两样东西不会在 他们自己的:

-   **计划课开始 _祖先_,从不在您风格的元素上.** 这个 暗变体编译为 a **后裔** 选择器( e)`.dark .bg-base`),所以一个节点 那个 _实值_ `.dark` 这不符合它自己的黑暗规则 有光主题的暗黑主机 切换 `dark`编号 :`light` (和 `color-scheme`在一个 包装.. `display: contents` 工作,所以不花费布局——放地表 对孩子的公用事业. `:host(.dark)` 这不是一个替代办法: 后人选取者,而相去相去相去也.
-   **Global CSS无法穿透分界线——内含样式.** `@antfu/design/styles/*` (crollbar,reka-ui动画,vue-afloat,.) 必须是工作表的一部分你 与 UnoCSS 输出一起注入根。 他们写着 `*` 编号 : 未瞄准的选取者 正好让他们在任一地点工作 添加 `scrollbar-gutter: stable` 在您自己的滚动容器上,如果您想要地沟 保留.

门户内容不需要设置 。 每个传送的组件——对话框 (单位:千美元)`OverlayModal`, (中文(简体) ), `OverlayDrawer`, (中文(简体) ), `OverlayConfirm`),即弹出者`FormSelect`, (中文(简体) ), `FormCombobox`, (中文(简体) ), `OverlayDropdown`, (中文(简体) ), `OverlayHoverCard`, (中文(简体) ), `OverlayContextMenu`, (中文(简体) ), `LayoutMenubar`和 `FeedbackToasts` ——检测被包围的阴影根并 电传传送器装入附在容器内的容器,该容器还反映 `dark`编号 :`light` 最接近的图案包装器的分类 如此黑暗的代号 总是在那里解决。 过 明确 `to` (一个选择器或元素)来覆盖目标. 这个 **水电/电车** 故事把它们都挂在了阴影根里.

## 无障碍

彩相扫描( 轴- 核心 + Playwright) 运行一个 URL **财务报告和审定财务报表** 阴暗 模式。 在程序上使用它:

```ts
import { formatContrastReport, runContrastScan } from '@antfu/design/a11y'

const result = await runContrastScan({ url: 'http://localhost:6006/iframe.html' })
console.log(formatContrastReport(result))
```

...或用 `tsx`数字 :

```bash
tsx node_modules/@antfu/design/a11y/cli.ts http://localhost:6006/iframe.html
```

## 构成部分

### 行动

| 构成部分 | 用它来 |
| --- | --- |
| `ActionButton` | 行动. `variant` 动作/主/正文,多态 `href`编号 :`as`, (中文(简体) ), `icon`, (中文(简体) ), `loading`。 。 。 . |
| `ActionIconButton` | 一个圆形的只包含图标的按钮 `tooltip`, (中文(简体) ), `active` 状态, `#badge`。用 VueUse 编曲 `useDark` 为了一个黑暗的跳跃. |
| `ActionToggle` | 单个按下/ 未按下切换按钮( u)`icon`, (中文(简体) ), `label`) (中文(简体) ). |
| `ActionToggleGroup` | 一组从 `options`,单项或多项选择(`multiple`),可选的图标. |

### 显示

| 构成部分 | 用它来 |
| --- | --- |
| `DisplayAvatar` | 一个回落到散列颜色首字母的图像外观 `name` 何时 `src` 缺席/失败. |
| `DisplayBadge` | 状态/类型/tag 芯片——从文本中以散列色来表示,调色板名称(`color="green"`),出声,或哑. `colorScheme`, (中文(简体) ), `variant`, (中文(简体) ), `icon`, (中文(简体) ), `rounded` (单位:千美元)`md`编号 :`full`\* 编号, `paddingX`编号 :`paddingY`; 以自己的尺寸 `font-size`。 。 。 . |
| `DisplayBytes` | 人性化的大小, `colorize`百分比(百分比) `total`。 。 。 . |
| `DisplayDate` | 相对时间 + 精确日期工具提示, `colorize` 按年龄划分, `live`。 。 。 . |
| `DisplayDonut` | 一个进步环. |
| `DisplayDuration` | 人类, `colorize` 以严重程度表示. |
| `DisplayFileIcon` | 通过一个可配置的规则列表( ext/ path = 图标)`rules`, (中文(简体) ), `folderRules`),带有 `invert` 逃出舱门,用于光表面的黑暗图标集. |
| `DisplayFilePath` | 复写、 淡化目录、 解码 `.pnpm`,图标,链接. |
| `DisplayIconifyRemoteIcon` | 从图标 API 中获取,使图标名称不包含捆绑的图标集. |
| `DisplayKbd` | 使和弦(例如:. `mod+k`作为平台格言. |
| `DisplayKeyValue` | 贴有标签的stat——入行或堆放, `mono` 数值, `#badge` 装饰. |
| `DisplayLabel` | 完全圆形 `DisplayBadge` GitHub 风格标签( 更紧贴) (`colorScheme`) (中文(简体) ). |
| `DisplayNumber` | 格式化编号(`Intl`),单相+表格, `prefix`编号 :`suffix`。 。 。 . |
| `DisplayNumberBadge` | (单位:千美元) `DisplayNumber` 在警徽外壳中——一粒计数药丸. |
| `DisplayPackageName` | 以散列为色( 以相干为色)`colorScheme`) (中文(简体) ). |
| `DisplayProgressBar` | 线性进展轨道——确定(`value` 0-1)或省略时不确定, `color`, (中文(简体) ), `rounded`。 。 。 . |
| `DisplayProportionBar` | 堆放比例栏. |
| `DisplaySafeImage` | a 一个 `<img>` 交换到 `#fallback` 丢失/ 失败的插槽 `src`,带有可选 `preload` 以避免闪光. |
| `DisplayTree` | 筑个平地 `items` 列表(通过 `getPath`)或预建 `nodes` 输入可扩展文件/文件夹样式树,并 `#leaf`编号 :`#default` 插槽覆盖 . |
| `DisplayVersion` | `vX.Y.Z` 前缀逻辑; 传递光谱/距离( )`workspace:*`, (中文(简体) ), `^1.2`通过未触及. |

### 表单

| 构成部分 | 用它来 |
| --- | --- |
| `FormCheckbox` | 以 `v-model`。 。 。 . |
| `FormCombobox` | 可搜索、可过滤的选择(reka-ui) `Combobox`超过一个 `options` 列表中选择一个选项. |
| `FormField` | 用一个 `label`, (中文(简体) ), `description`,以及 `error` (作用="戒备"),, `required` 标记. |
| `FormNumberInput` | 数字输入 `min`编号 :`max`编号 :`step` 夹住和可选-/+分步 `controls`。 。 。 . |
| `FormRadioGroup` | 装有 `v-model`。 。 。 . |
| `FormSearchField` | a 搜索输入——图标+ `DisplayKbd` 快捷键提示 + 清除按钮. |
| `FormSegmentedControl` | 单选分块控件( reka- ui) `RadioGroup`超过一个 `options` 列表,包括有效的 `null` 部分. |
| `FormSelect` | 本地感觉选择带 `v-model`。 。 。 . |
| `FormSwitch` | 打开/关闭的开关,以 `v-model`。 。 。 . |
| `FormTextInput` | 单行文本输入, `icon`, (中文(简体) ), `invalid` 状态. |
| `FormTextarea` | 多行文本输入, `rows`, (中文(简体) ), `invalid` 状态, `resize` 切换. |

### 重叠

| 构成部分 | 用它来 |
| --- | --- |
| `OverlayConfirm` | 关于确认/撤销决定的警报日志, `variant="danger"` 破坏行动. |
| `OverlayContextMenu` (+ 数) `OverlayContextMenuItem`, (中文(简体) ), `OverlayContextMenuLabel`, (中文(简体) ), `OverlayContextMenuSeparator`(中文(简体) ) | 右键菜单. |
| `OverlayDrawer` | 任意一个滑入面板 `side` (以左/右/上/下为单位) `width`。 。 。 . |
| `OverlayDropdown` (+ 数) `OverlayDropdownCheckboxItem`, (中文(简体) ), `OverlayDropdownGroup`, (中文(简体) ), `OverlayDropdownLabel`, (中文(简体) ), `OverlayDropdownRadioGroup`, (中文(简体) ), `OverlayDropdownRadioItem`, (中文(简体) ), `OverlayDropdownSeparator`, (中文(简体) ), `OverlayDropdownSub`(中文(简体) ) | 一个触发障碍的倒下菜单. |
| `OverlayDropdownItem` | 可选择的下行 `icon`, (中文(简体) ), `variant="danger"`,跟踪 `shortcut` (通过 `DisplayKbd`) (中文(简体) ). |
| `OverlayHoverCard` | 悬浮起伏的弹出式弹出式相机 `openDelay`编号 :`closeDelay`。 。 。 . |
| `OverlayModal` | 居中对话框( e)`title`, (中文(简体) ), `description`, (中文(简体) ), `#trigger` 插槽). |
| `OverlayTooltip` | a vue- afloat 工具提示 - 文本 `content` 或 `#content` 可配置的槽 `placement`编号 :`delay`编号 :`triggers`,加上画布/图上覆盖的虚拟锁定模式. |

### 版式

| 构成部分 | 用它来 |
| --- | --- |
| `LayoutAccordion` | 相撞部分从 `items`; 1个条目=单节, `multiple` 数个同时打开. |
| `LayoutBreadcrumb` | 链接路径从 `items`; 最后一个 crumb 生成为纯文本. |
| `LayoutCard` | a 相邻内容表面. |
| `LayoutDataTable` | 可排序的通用数据表 `columns` + 键 `rows`选项 `stickyHeader`。 。 。 . |
| `LayoutExpandableList` | 单词"Show N more"短调. |
| `LayoutMenubar` | 桌面样式菜单栏 `menus` 清单 `MenubarMenuEntry`。 。 。 . |
| `LayoutPagination` | 页面编号导航. |
| `LayoutPanelGrids` | (单位:千美元) `dots`编号 :`grid` 空状态或画布的背景图案表面. |
| `LayoutScrollArea` | 自定义滚动条滚动容器. |
| `LayoutSeparator` | 横向/纵向分隔器,可选用中央分隔器 `label`。 。 。 . |
| `LayoutSideNav` | 垂直导航列表 `items`,通过 `v-model`。 。 。 . |
| `LayoutSplitPane` | 可重排分页窗格( wrap) `splitpanes`) (中文(简体) ). |
| `LayoutTabs` | 下划线/部分标签, `count` 筹码. |
| `LayoutToolbar` | 粘接的玻璃表面动作棒 `#start`编号 :`#search`编号 :`#end` 插槽 . |
| `LayoutVirtualList` | 虚拟化清单`@tanstack/vue-virtual`)用于大型藏品. |

### 反馈

| 构成部分 | 用它来 |
| --- | --- |
| `FeedbackEmptyState` | 一个空/零状态占位符——图标、标题、描述, `#action` 插槽 . |
| `FeedbackLoading` | 装入占位符包装 `FeedbackSpinner`。 。 。 . |
| `FeedbackSkeleton` | 用于装入内容的闪光占位符块. |
| `FeedbackSpinner` | 旋转甘油. |
| `FeedbackTip` | (a) 内调——信息/成功/警告/错误. |
| `FeedbackToasts` | 演示式土司堆栈( e)`items`, (中文(简体) ), `position`)——应用公司通过自己的程序拥有列表和id `useToast()`。 。 。 . |
|  |  |

有导入路径的完整目录 : [核心组件](https://npmcn.com/package/skills/antfu-design/references/core-components.md)。 。 。 .

## 键

### 语义快捷键( M)

| 脚本 | 扩展至 |
| --- | --- |
| `color-base` | `color-base-light dark:color-base-dark` |
| `color-base-light` | `color-neutral-800` |
| `color-base-dark` | `color-neutral-200` |
| `color-muted` | `color-neutral-600 dark:color-neutral-400` |
| `color-faint` | `color-neutral-500 dark:color-neutral-500` |
| `color-active` | `color-primary-600 dark:color-primary-300` |
| `bg-base` | `bg-white dark:bg-#111` |
| `bg-secondary` | `bg-#f6f6f6 dark:bg-#101010` |
| `bg-raised` | `bg-white/65 dark:bg-black/60` |
| `bg-sunken` | `bg-black/4 dark:bg-white/6` |
| `bg-active` | `bg-#99999920` |
| `bg-ambient` | `bg-#99999925` |
| `bg-hover` | `bg-#99999915` |
| `bg-code` | `bg-gray-500/5` |
| `bg-tooltip` | `bg-white/75 dark:bg-#111/75 backdrop-blur-8` |
| `bg-gradient-more` | `bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-#111 dark:via-#111/80 dark:to-#111/0` |
| `border-base` | `border-#9992` |
| `border-mute` | `border-#9991` |
| `border-active` | `border-primary-600/25 dark:border-primary-400/25` |
| `ring-base` | `ring-#9992` |
| `op-fade` | `op65` |
| `op-mute` | `op40` |
| `op-active` | `op100` |
| `op-disabled` | `op30` |
| `icon-catppuccin` | `invert-100 hue-rotate-180 brightness-80 dark:invert-0 dark:hue-rotate-0 dark:brightness-100` |
| `btn-action` | `border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-hover transition disabled:pointer-events-none disabled:op30! outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
| `btn-action-sm` | `btn-action text-sm` |
| `btn-action-active` | `color-active border-active! bg-active op100!` |
| `btn-icon` | `w-9 h-9 rounded-full op-fade hover:op100 hover:bg-hover transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
| `btn-icon-compact` | `w-6 h-6 rounded op-fade hover:op100 hover:bg-hover transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
| `btn-icon-square` | `w-9 h-9 rounded border border-base op-fade hover:op100 hover:bg-hover transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
| `btn-primary` | `px2 py1 rounded border border-transparent flex gap-2 items-center bg-primary-500 hover:bg-primary-600 text-white transition disabled:op50 disabled:pointer-events-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
| `btn-text` | `px2 py1 rounded border border-transparent inline-flex gap-2 items-center op75 hover:op100 hover:bg-hover transition disabled:pointer-events-none disabled:op30! outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
| `badge` | `inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-xs font-medium leading-none` |
| `badge-active` | `badge bg-active color-active` |
| `badge-muted` | `badge bg-#8881 color-muted` |
| `pad-safe-t` | `pt-[env(safe-area-inset-top)]` |
| `pad-safe-r` | `pr-[env(safe-area-inset-right)]` |
| `pad-safe-b` | `pb-[env(safe-area-inset-bottom)]` |
| `pad-safe-l` | `pl-[env(safe-area-inset-left)]` |
| `pad-safe-x` | `pad-safe-l pad-safe-r` |
| `pad-safe-y` | `pad-safe-t pad-safe-b` |
| `pad-safe` | `pad-safe-x pad-safe-y` |

### 严重性尺度

| 脚本 | 扩展至 |
| --- | --- |
| `color-scale-neutral` | `text-gray-700 dark:text-gray-300` |
| `color-scale-low` | `text-lime-700 dark:text-lime-300 dark:saturate-75` |
| `color-scale-medium` | `text-amber-700 dark:text-amber-300 dark:saturate-90` |
| `color-scale-high` | `text-orange-700 dark:text-orange-300` |
| `color-scale-critical` | `text-red-700 dark:text-red-300` |

### 类型大小

| 脚本 | 扩展至 |
| --- | --- |
| `text-micro` | `text-[10px] leading-[1.4]` |
| `text-mini` | `text-[11px] leading-[1.45]` |
| `text-compact` | `text-[12px] leading-[1.5]` |

### 动态

| 脚本 | 扩展至 |
| --- | --- |
| `badge-color-<name>` | 由任何调色板颜色名称( 暗视) 组成的晶片 |
| `bg-glass` 编号 : `bg-glass:<n>` | 半透明地表+ `backdrop-blur` |
| `bg-dots` 编号 : `bg-dots-<n>` | 光圈点网格背景, px 可变单元格大小( 默认 16) |
| `bg-grid` 编号 : `bg-grid-<n>` | 横切网格行背景, px 中的可变单元格大小( 默认 16) |
| `scroll-fade` 编号 : `scroll-fade-{x,y,t,b,l,r,s,e}` | 卷轴- 意识边缘已淡出( e)`scroll-fade-<n>`, (中文(简体) ), `scroll-fade-none`); 配对 `no-scrollbar` |
| `shimmer` 编号 : `shimmer-{once,reverse,none}` | 文本发光 `currentColor` (单位:千美元)`shimmer-{color,duration,spread,angle}-*`(中文(简体) ) |
|  |  |

## 许可证

[麻省理工学院](https://npmcn.com/package/%40antfu/design/LICENSE) © [傅安东尼](https://github.com/antfu)

## 常见问题

### @antfu/design 是什么？

适用于devtools-style Vue apps的自定义可调和设计系统——UnoCSS预设,Vue原始人,设计技能,以及11y对比检查

### 如何安装 @antfu/design？

在项目目录运行 npm install @antfu/design，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）、unocss（\>=66\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @antfu/design 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/antfu\_\_design 是否存在。

### @antfu/design 支持 ESM 还是 CommonJS？

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

### @antfu/design 可以商用吗？

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

### @antfu/design 的下载量有多少？

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

### @antfu/design 还在维护吗？

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