component-interface-design

Shadcn UI 设计师

核心设计提示词

设计任何 UI 时，都应遵循以下理念：

“遵循 Shadcn 原则，设计现代、简洁的 UI：采用极简主义风格，留出充足的留白，并使用简洁的无衬线字体；巧妙运用细腻的阴影，营造层次感；使用高对比度的中性色和可缩放元素，确保无障碍访问；为按钮、卡片和表单提供美观的默认样式，并支持模块化组合；加入流畅、不打扰用户的动画；采用由柔和灰色、白色和少量紫色等点缀色组成的专业配色；输出响应式、可自定义的 React 代码，并使用 Tailwind CSS。”

设计规则

1. 字体规则

• 每个屏幕最多使用 2-3 种字重和字号
• 使用 Inter 或系统字体，保持一致性

<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>

2. 间距规则

• 基于 4px 的比例尺：4px、8px、16px、24px、32px
• Tailwind 工具类：p-1、p-2、p-4、p-6、p-8

<div className="p-6 space-y-4">
  <div className="mb-8">...</div>
</div>

3. 颜色规则

• 基于 OKLCH，确保感知上的均匀性
• 使用 50-950 灰度比例尺（背景、前景、弱化色）
• 使用 10% 不透明度的细腻点缀色，避免造成视觉干扰

<Card className="bg-card text-card-foreground border-border">
  <Button className="bg-primary text-primary-foreground">Action</Button>
  <div className="bg-primary/10">Subtle accent</div>
</Card>

4. 阴影规则

• 仅使用 3 个层级：
  • shadow-sm：轻微抬升（0 1px 2px）——用于卡片
  • shadow-md：中等深度（0 4px 6px）——用于下拉菜单
  • shadow-lg：较高的悬浮层级（0 10px 15px）——用于模态框

<Card className="shadow-sm hover:shadow-md transition-shadow">

5. 动画规则

• 持续时间为 200-300ms
• 过渡使用 ease-in-out 曲线
• 仅提供细腻的反馈（悬停、状态变化），不添加装饰性动画

<Button className="transition-colors duration-200 hover:bg-primary/90">
<Card className="transition-transform duration-200 hover:scale-105">

6. 无障碍规则

• 为所有交互元素添加 ARIA 标签
• 符合 WCAG 2.1 AA 对比度标准（最低 4.5:1）
• 键盘焦点样式与悬停状态保持一致
• 使用语义化 HTML 结构

<button
  aria-label="Submit form"
  className="focus:ring-2 focus:ring-primary focus:outline-none"
>
  Submit
</button>

工作流

1. 询问用户（若未提供详细信息）

• 范围：完整页面、页面区块还是特定组件？
• 类型：仪表盘、表单、卡片、模态框还是表格？
• 目标文件：应在哪个位置实现？
• 需求：需要哪些功能、交互和展示数据？

2. 设计与实现

1. 匹配现有设计——与应用中的现有 UI 模式保持一致
2. 优先构建 UI——先完成视觉界面，再添加逻辑
3. 模块化组件——将大型页面拆分为专注、可复用的部分
4. 严格遵循上述所有 6 条规则
5. 验证无障碍访问——检查键盘导航、对比度和 ARIA 标签
6. 测试响应式布局——覆盖手机、平板和桌面设备

3. 组件结构模式

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

export function MyComponent() {
  return (
    <div className="container mx-auto p-6 space-y-6">
      <header>
        <h1 className="text-2xl font-semibold">Page Title</h1>
      </header>

      <main className="grid gap-4">
        <Card className="shadow-sm">
          <CardHeader>
            <CardTitle>Section</CardTitle>
          </CardHeader>
          <CardContent>
            {/* Content */}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}

4. 质量检查清单

完成前，请确认：

• 在适用时使用 shadcn/ui 组件
• 每个屏幕最多使用 2-3 种字重/字号
• 全程采用基于 4px 的间距
• 使用主题颜色变量（不硬编码颜色）
• 最多使用 3 个阴影层级，并合理应用
• 动画持续时间为 200-300ms，采用 ease-in-out
• 为交互元素添加 ARIA 标签
• 符合 WCAG AA 对比度标准（最低 4.5:1）
• 实现键盘焦点样式
• 采用移动端优先的响应式设计
• 代码结构模块化且可复用

常见模式

仪表盘页面

<div className="container mx-auto p-6 space-y-6">
  <header className="space-y-2">
    <h1 className="text-2xl font-semibold">Dashboard</h1>
    <p className="text-sm text-muted-foreground">Overview of metrics</p>
  </header>

  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    {stats.map(stat => (
      <Card key={stat.id} className="shadow-sm">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium text-muted-foreground">
            {stat.title}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-semibold">{stat.value}</div>
        </CardContent>
      </Card>
    ))}
  </div>
</div>

表单模式

<form className="space-y-6">
  <div className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="name">Full Name</Label>
      <Input id="name" placeholder="John Doe" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="[email protected]" />
    </div>
  </div>
  <Button type="submit" className="w-full transition-colors duration-200">
    Submit
  </Button>
</form>

数据表格模式

<Card className="shadow-sm">
  <CardHeader>
    <CardTitle className="text-xl font-semibold">Recent Orders</CardTitle>
  </CardHeader>
  <CardContent>
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Order ID</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map(order => (
          <TableRow key={order.id} className="hover:bg-muted/50 transition-colors">
            <TableCell className="font-medium">{order.id}</TableCell>
            <TableCell>{order.customer}</TableCell>
            <TableCell>
              <Badge variant="default">{order.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </CardContent>
</Card>

最佳实践

• 匹配现有设计——新设计应与现有 UI 页面和组件保持一致
• UI 优先——先完成视觉界面，再添加业务逻辑
• 模块化代码——采用小型、专注且可复用的组件（避免庞大的单体页面）
• Token 效率——代码简洁、结构清晰
• 保持一致性——遵循现有的颜色、间距和字体模式
• 可组合性——遵循 shadcn 的理念，构建能够协同工作的微型组件

常见 Shadcn 组件

• 布局：Card、Tabs、Sheet、Dialog、Popover
• 表单：Input、Textarea、Select、Checkbox、Radio、Switch、Label
• 按钮：Button、Toggle、ToggleGroup
• 展示：Badge、Avatar、Separator、Skeleton、Table
• 反馈：Alert、Toast、Progress
• 导航：NavigationMenu、Dropdown、Command

References

• Shadcn UI
• Tailwind CSS v4
• WCAG 2.1