UI 样式技能

UI 样式技能 是做什么的？

综合技能，用于创建美观、可访问的用户界面，结合 shadcn/ui 组件、Tailwind CSS 实用程序样式和画布视觉设计系统。

参考

• shadcn/ui：https://ui.shadcn.com/llms.txt
• Tailwind CSS：https://tailwindcss.com/docs

使用时机

在以下情况下使用：

• 使用 React 框架（Next.js、Vite、Remix、Astro）构建 UI
• 实现可访问组件（对话框、表单、表格、导航）
• 采用实用程序优先 CSS 方法进行样式设计
• 创建响应式、移动端优先的布局
• 实现深色模式和主题定制
• 使用一致的设计令牌构建设计系统
• 生成视觉设计、海报或品牌素材
• 快速原型设计，实现即时视觉反馈
• 添加复杂 UI 模式（数据表格、图表、命令面板）

核心栈

组件层：shadcn/ui

• 通过 Radix UI 原语构建的可访问组件
• 复制粘贴分发模型（组件位于你的代码库中）
• TypeScript 优先，完全类型安全
• 可组合原语，用于复杂 UI
• 基于 CLI 的安装和管理

样式层：Tailwind CSS

• 实用程序优先的 CSS 框架
• 构建时处理，零运行时开销
• 移动端优先的响应式设计
• 一致的设计令牌（颜色、间距、排版）
• 自动死代码消除

视觉设计层：画布

• 博物馆级视觉构图
• 哲学驱动的设计方法
• 精密的视觉传达
• 极简文字，最大视觉冲击
• 系统化模式和精致美学

快速入门

组件 + 样式设置

安装 shadcn/ui 和 Tailwind：

npx shadcn@latest init

CLI 会提示选择框架、TypeScript、路径和主题偏好。这将同时配置 shadcn/ui 和 Tailwind CSS。

添加组件：

npx shadcn@latest add button card dialog form

结合实用程序样式使用组件：

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">查看你的指标</p>
          <Button variant="default" className="w-full">
            查看详情
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

备选方案：仅使用 Tailwind

Vite 项目：

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

组件库指南

全面的组件目录，包含使用模式、安装和组合示例。

请参阅：references/shadcn-components.md

涵盖：

• 表单和输入组件（Button、Input、Select、Checkbox、Date Picker、Form 验证）
• 布局和导航（Card、Tabs、Accordion、Navigation Menu）
• 覆盖层和对话框（Dialog、Drawer、Popover、Toast、Command）
• 反馈和状态（Alert、Progress、Skeleton）
• 显示组件（Table、Data Table、Avatar、Badge）

主题和定制

主题配置、CSS 变量、深色模式实现和组件定制。

请参阅：references/shadcn-theming.md

涵盖：

• 使用 next-themes 进行深色模式设置
• CSS 变量系统
• 颜色定制和调色板
• 组件变体定制
• 主题切换实现

无障碍模式

ARIA 模式、键盘导航、屏幕阅读器支持和可访问组件用法。

请参阅：references/shadcn-accessibility.md

涵盖：

• Radix UI 无障碍功能
• 键盘导航模式
• 焦点管理
• 屏幕阅读器播报
• 表单验证无障碍

Tailwind 实用程序

用于布局、间距、排版、颜色、边框和阴影的核心实用程序类。

请参阅：references/tailwind-utilities.md

涵盖：

• 布局实用程序（Flexbox、Grid、定位）
• 间距系统（内边距、外边距、间距）
• 排版（字体大小、粗细、对齐、行高）
• 颜色和背景
• 边框和阴影
• 自定义样式的任意值

响应式设计

移动端优先断点、响应式实用程序和自适应布局。

请参阅：references/tailwind-responsive.md

涵盖：

• 移动端优先方法
• 断点系统（sm、md、lg、xl、2xl）
• 响应式实用程序模式
• 容器查询
• 最大宽度查询
• 自定义断点

Tailwind 定制

配置文件结构、自定义实用程序、插件和主题扩展。

请参阅：references/tailwind-customization.md

涵盖：

• @theme 指令用于自定义令牌
• 自定义颜色和字体
• 间距和断点扩展
• 自定义实用程序创建
• 自定义变体
• 层组织（@layer base、components、utilities）
• Apply 指令用于组件提取

视觉设计系统

基于画布的设计理念、视觉传达原则和精密构图。

请参阅：references/canvas-design-system.md

涵盖：

• 设计理念方法
• 视觉传达优于文字
• 系统化模式和构图
• 颜色、形状和空间设计
• 极简文本集成
• 博物馆级执行
• 多页面设计系统

实用脚本

用于组件安装和配置生成的 Python 自动化工具。

shadcn_add.py

添加 shadcn/ui 组件，支持依赖处理：

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

生成 tailwind.config.js 并包含自定义主题：

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

最佳实践

1. 组件组合：从简单、可组合的原语构建复杂 UI
2. 实用程序优先样式：直接使用 Tailwind 类；仅在真正重复时提取组件
3. 移动端优先响应式：从移动端样式开始，叠加响应式变体
4. 无障碍优先：利用 Radix UI 原语，添加焦点状态，使用语义化 HTML
5. 设计令牌：使用一致的间距、色彩、排版系统
6. 深色模式一致性：对所有主题元素应用深色变体
7. 性能：利用自动 CSS 清理，避免动态类名
8. TypeScript：充分利用类型安全，提升开发者体验
9. 视觉层次：让构图引导注意力，有意使用间距和颜色
10. 专家匠心：每个细节都很重要——将 UI 视为一门手艺

参考导航

组件库

• references/shadcn-components.md - 完整组件目录
• references/shadcn-theming.md - 主题和定制
• references/shadcn-accessibility.md - 无障碍模式

样式系统

• references/tailwind-utilities.md - 核心实用程序类
• references/tailwind-responsive.md - 响应式设计
• references/tailwind-customization.md - 配置和扩展

视觉设计

• references/canvas-design-system.md - 设计理念和画布工作流

自动化

• scripts/shadcn_add.py - 组件安装
• scripts/tailwind_config_gen.py - 配置生成

常见模式

带验证的表单：

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>邮箱</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">登录</Button>
      </form>
    </Form>
  )
}

带深色模式的响应式布局：

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            内容
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

资源

• shadcn/ui 文档：https://ui.shadcn.com
• Tailwind CSS 文档：https://tailwindcss.com
• Radix UI：https://radix-ui.com
• Tailwind UI：https://tailwindui.com
• Headless UI：https://headlessui.com
• v0（AI UI 生成器）：https://v0.dev