用途：该技能面向系统级设计系统编排，而非单个组件或通用样式。它指导用 Tailwind CSS（v4.1+）与 shadcn/ui 建立集中式设计系统，包括定义设计令牌、用 CSS 变量配置主题、封装 shadcn/ui 组件为受约束的设计系统原语，并保证全应用一致性。与 tailwind-css-patterns（工具类样式、响应式）和 shadcn-ui（单组件安装配置）互补。
主要能力：定义颜色、字体、间距、圆角、阴影等设计令牌为 CSS 变量；在 globals.css 中配置明暗主题；用 oklch 建立感知均匀的调色板；支持明暗之外的多品牌主题（如 data-theme）；将 shadcn/ui 组件封装为设计系统原语；从 JS 配置迁移到 CSS-first 配置。
使用方式：先检查并安装 Tailwind 与 shadcn/ui，命令如 npx tailwindcss --version、npx @tailwindcss/vite@latest init、npx shadcn@latest init、npx shadcn@latest add button card input -y。随后在 globals.css 定义 :root 与 .dark 令牌，用 @theme inline 将 CSS 变量桥接到 Tailwind 工具类，添加主题切换，封装组件，并用脚本校验必需令牌与构建。
适用场景：从零搭建设计系统、定义令牌、配置集中主题、构建令牌驱动组件库、迁移到 v4.1+ CSS-first 配置、建立 oklch 调色板、多主题支持。
限制：oklch 并非所有浏览器原生支持，需检查兼容性；令牌命名应遵循 shadcn/ui 约定；@theme inline 与 @theme 用途不同；封装组件应保持轻量；每个令牌都需定义暗色值；:root 令牌为全局，多主题用 data-theme 选择器；避免过多 CSS 变量链；@theme 为 v4.1+ 特性，v3 需用 tailwind.config.js。具体收费、价格与平台信息暂未提供。