⚡

UI设计与样式技能Skill ui-styling

该技能用于创建美观、可访问的用户界面，结合shadcn/ui组件库、Tailwind CSS实用样式和canvas-based视觉设计系统，适用于前端开发、UI设计、响应式布局和可访问性优化。关键词：UI设计、前端开发、响应式布局、可访问性、Tailwind CSS、shadcn/ui、视觉设计、React框架、深色模式、设计系统。

前端开发 1 次安装 2 次浏览 更新于 3/14/2026

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

UI样式技能

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

参考

何时使用此技能

使用当：

  • 使用基于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、Grid、定位）
  • 间距系统（内边距、外边距、间隙）
  • 排版（字体大小、字重、对齐、行高）
  • 颜色和背景
  • 边框和阴影
  • 自定义样式的任意值

响应式设计

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

参见: 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>

资源