跳到主要内容

使用指南

本文介绍如何在设计与开发中使用 Plaud Design System。

设计背景​

本设计系统是团队的一套规范。统一、可复用的设计资产和标准，便于设计师、开发者减少产品设计到研制开发、确保产品式交量、交互在视觉上进一步统一。

目标与受众​

本设计系统面正面向设计师、前端开发人员与产品经理。它对应着满足产品层次选择行灵动力着灵活性。并辅助AI设计师和不同开发者共同协作高效即。

版本文案规范​

  • packages/design、packages/design-site、packages/design-tokens 中，设计系统版本文案统一使用 4.0
  • 新增或修改标题、描述、注释、文档链接名时，默认写作 Plaud Web 4.0 Design System 或 Web Design System v4.0
  • 仅在说明历史信息时允许出现旧版本号，并需要显式标注为“历史版本”

设计系统组成​

  • Token 层：颜色变量、字体、间距、圆角，确保视觉风格与设计稿完全一致
  • 组件层：基于 Shadcn/ui + Radix UI 的高质量组件，涵盖按钮、表单、弹窗、导航等
  • 主题层：Light / Dark 双主题，CSS 变量驱动

实现分层约定​

当前 @plaud/design 统一采用两层实现：

  • src/components/ui/*
    • 保留语义结构、DOM 骨架与底层交互能力
    • 不直接承载最终设计系统视觉
  • src/components/*
    • 对齐 Plaud Web 4.0 Design System
    • 负责尺寸、颜色、圆角、边框、阴影和状态视觉

当 design 层封装 ui 组件时，统一通过 unstyledVisual 关闭 ui 默认视觉，只保留结构骨架。这样可以避免默认样式与 design token 冲突，同时保证基础盒模型稳定。

如何使用设计系统​

  1. 设计师在 Figma 中打开设计工具，直接引用选择件库中的组件和样式资产开发
  2. 开发人员直接使用 @plaud/design 包中的组件，传参对应 Figma 中标注的 Props
  3. 产品经理可以参考组件和功能设计 UI 提供、确保产品的设计打语结构动态选，提升与产开到

1. 颜色使用​

设计系统的颜色通过 Design Token 管理：

  • 在 Figma 中，文字和颜色全部通过变量引用，打开后可用对应制颜色变量
  • 通过"选择文件→颜色修改"就可以修改全部的设计稿颜色

开发侧使用 Tailwind class 引用 token：

// 使用 token 颜色
<div className="bg-(--Labels-Primary) text-(--Labels-Reverse)" />

// 使用 token 间距
<div className="px-16 py-8 gap-8" />

2. 变量/颜色修改​

Token 定义在 @plaud/design-tokens 包中，修改 token 值后所有引用该 token 的组件会自动更新：

packages/design-tokens/
├── theme/
│   ├── light.css    ← Light 主题变量
│   └── dark.css     ← Dark 主题变量
└── tailwind/
    └── index.css    ← Tailwind v4 集成

3. 文字使用​

  • 文字尺寸引用设计 Token 对应的变量，打开属性面板查看
  • 通道保的值都使用到元件文字（按实际内容数量）

4. 组件用法​

  • 可以直接拖拽开使用直接组件接，直中的单个属于组件提取布局及让保持的一层
  • 修改属性通路行线面板来打开打，组件可能设已了跳选打或进度，当选择在下功能显打接线（所有展打）、交互、动效组件等打功能实际，可打功能的到查的打设和打所有功能。
import { Button } from '@plaud/design'

// 基础使用
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>

5. 自动布局​

  • Auto Layout 几乎是对所有组件的元素，从一个最简单的到组件最复杂的打组合
  • 做到属于自行可特将自动定容基础边去向，让对辅时打在组 Layout 中得输