UnoCSS 消费

import { defineConfig, presetWind4 } from 'unocss'
import { presetPotato } from '@potato-design/ui/preset'

export default defineConfig({
  presets: [presetWind4(), presetPotato({ previewTheme: 'latte' })],
})

在应用入口加载 CSS：

import '@potato-design/ui/styles.css'

之后直接使用语义 utility：

<button class="bg-primary text-primary-foreground focus-visible:ring-ring">
  保存
</button>
<aside class="bg-tip-subtle text-tip-subtle-foreground border-tip-border">
  推荐使用快捷键
</aside>

Color Preview 方案

preset 的颜色值形如：

var(--pd-color-primary, oklch(...))

CSS Variable 负责运行时主题，静态 OKLCH fallback 让 UnoCSS resolver 和编辑器能获得真实颜色。仓库根部保留独立 uno.config.ts，并推荐 UnoCSS 官方扩展、开启 unocss.colorPreview。

浏览器构建和 utility 解析可自动验证；VS Code gutter 中最终是否显示色块会受扩展版本影响，发布前需在实际编辑器执行一次人工验收。