⚡

UI样式设计技能Skill ui-styling

这个技能用于创建美观、可访问的用户界面，结合shadcn/ui组件、Tailwind CSS工具样式和基于canvas的视觉设计系统。它适用于前端开发、响应式布局、可访问性设计、主题定制和视觉设计。关键词：UI设计、前端开发、Tailwind CSS、shadcn/ui、响应式布局、可访问性、暗模式、设计系统、视觉传达。

前端开发 0 次安装 6 次浏览 更新于 3/20/2026

名称: UI样式设计 描述: 使用shadcn/ui组件（基于Radix UI + Tailwind）、Tailwind CSS工具优先样式和基于canvas的视觉设计创建美观、可访问的用户界面。在构建用户界面、实施设计系统、创建响应式布局、添加可访问组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现暗模式、生成视觉设计和海报，或在应用程序中建立一致的样式模式时使用。 许可证: MIT 版本: 1.0.0

UI样式设计技能

全面的技能，用于创建美观、可访问的用户界面，结合shadcn/ui组件、Tailwind CSS工具样式和基于canvas的视觉设计系统。

参考

何时使用此技能

使用当：

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

核心堆栈

组件层: shadcn/ui

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

样式层: Tailwind CSS

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

视觉设计层: Canvas

  • 博物馆质量的视觉构图
  • 哲学驱动的设计方法
  • 复杂的视觉传达
  • 最小文本，最大视觉影响
  • 系统化的模式和精致的审美

快速开始

组件 + 样式设置

使用Tailwind安装shadcn/ui：

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">分析</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

涵盖：

  • 表单和输入组件（按钮、输入、选择、复选框、日期选择器、表单验证）
  • 布局和导航（卡片、标签页、手风琴、导航菜单）
  • 覆盖和对话框（对话框、抽屉、弹出框、吐司、命令）
  • 反馈和状态（警报、进度、骨架）
  • 显示组件（表格、数据表格、头像、徽章）

主题和自定义

主题配置、CSS变量、暗模式实现和组件自定义。

参见：references/shadcn-theming.md

涵盖：

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

可访问性模式

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

参见：references/shadcn-accessibility.md

涵盖：

  • Radix UI可访问性功能
  • 键盘导航模式
  • 焦点管理
  • 屏幕阅读器公告
  • 表单验证可访问性

Tailwind实用程序

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

参见：references/tailwind-utilities.md

涵盖：

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

响应式设计

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

参见：references/tailwind-responsive.md

涵盖：

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

Tailwind自定义

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

参见：references/tailwind-customization.md

涵盖：

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

视觉设计系统

基于canvas的设计哲学、视觉传达原则和复杂构图。

参见：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 - 设计哲学和canvas工作流

自动化

  • 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>

资源