⚡

UI样式设计技能Skill ui-styling

该技能专注于使用shadcn/ui组件、Tailwind CSS实用样式和画布可视化设计创建美观、可访问的用户界面。适用于前端开发，用于构建响应式布局、实现暗模式、自定义主题，并建立一致的设计系统。关键词包括：UI设计、前端开发、shadcn/ui、Tailwind CSS、响应式设计、暗模式、可视化设计、可访问组件。

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

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

UI 样式设计技能

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

参考

何时使用此技能

在以下情况下使用：

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

核心技术栈

组件层: shadcn/ui

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

样式层: Tailwind CSS

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

视觉设计层: 画布

  • 博物馆质量的视觉构图
  • 基于哲学的设计方法
  • 复杂的视觉沟通
  • 最少文本，最大视觉影响
  • 系统化模式和精炼美学

快速开始

组件 + 样式设置

使用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">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </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基础、组件、实用工具）
  • 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>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</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">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

资源