Back to Details

component-interface-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI Designer

Shadcn UI 设计器

Core Design Prompt

核心设计提示

When designing any UI, apply this philosophy:
"Design a modern, clean UI following Shadcn principles: apply minimalism with ample white space and simple sans-serif typography; use strategic, subtle shadows for depth and hierarchy; ensure accessibility with high-contrast neutrals and scalable elements; provide beautiful defaults for buttons, cards, and forms that compose modularly; incorporate fluid, non-intrusive animations; maintain a professional palette of soft grays, whites, and minimal accents like purple; output as responsive, customizable React code with Tailwind CSS."
在设计任何UI时，请遵循以下设计理念：
"设计现代、简洁的UI，遵循Shadcn原则：采用极简风格，搭配充足留白与简洁无衬线字体；运用策略性的细微阴影营造层次感与深度；通过高对比度中性色与可缩放元素确保可访问性；为按钮、卡片和表单提供美观的默认样式，支持模块化组合；融入流畅、不突兀的动画；采用以柔和灰色、白色为主，少量紫色等点缀的专业配色方案；输出基于Tailwind CSS的响应式、可定制React代码。"

Design Rules

设计规则

1. Typography Rule

1. 排版规则

  • Limit to 2-3 font weights and sizes per screen
  • Use Inter or system fonts for consistency
tsx
<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>
  • 每个屏幕限制使用2-3种字重和字号
  • 使用Inter或系统字体以保证一致性
tsx
<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>

2. Spacing Rule

2. 间距规则

  • 4px-based scale: 4px, 8px, 16px, 24px, 32px
  • Tailwind utilities: 
    p-1
    , 
    p-2
    , 
    p-4
    , 
    p-6
    , 
    p-8
tsx
<div className="p-6 space-y-4">
  <div className="mb-8">...</div>
</div>
  • 4px基准缩放：4px、8px、16px、24px、32px
  • Tailwind工具类：
    p-1
    , 
    p-2
    , 
    p-4
    , 
    p-6
    , 
    p-8
tsx
<div className="p-6 space-y-4">
  <div className="mb-8">...</div>
</div>

3. Color Rule

3. 配色规则

  • Base on OKLCH for perceptual uniformity
  • Use 50-950 scale grays (background, foreground, muted)
  • Subtle accents at 10% opacity to avoid visual noise
tsx
<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>
  • 基于OKLCH实现感知均匀性
  • 使用50-950灰度等级（背景色、前景色、弱化色）
  • 细微点缀色使用10%透明度，避免视觉干扰
tsx
<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. Shadow Rule

4. 阴影规则

  • 3 levels only: 
    • shadow-sm
      : Subtle lift (0 1px 2px) - for cards
    • shadow-md
      : Medium depth (0 4px 6px) - for dropdowns
    • shadow-lg
      : High elevation (0 10px 15px) - for modals
tsx
<Card className="shadow-sm hover:shadow-md transition-shadow">
  • 仅使用3个层级： 
    • shadow-sm
      ：轻微悬浮效果（0 1px 2px）- 适用于卡片
    • shadow-md
      ：中等深度（0 4px 6px）- 适用于下拉菜单
    • shadow-lg
      ：高抬升效果（0 10px 15px）- 适用于模态框
tsx
<Card className="shadow-sm hover:shadow-md transition-shadow">

5. Animation Rule

5. 动画规则

  • 200-300ms durations
  • ease-in-out curves for transitions
  • Subtle feedback only (hovers, state changes) - no decorative flourishes
tsx
<Button className="transition-colors duration-200 hover:bg-primary/90">
<Card className="transition-transform duration-200 hover:scale-105">
  • 200-300ms时长
  • 过渡效果使用ease-in-out曲线
  • 仅添加细微反馈动画（如悬停、状态变化）- 避免装饰性冗余动画
tsx
<Button className="transition-colors duration-200 hover:bg-primary/90">
<Card className="transition-transform duration-200 hover:scale-105">

6. Accessibility Rule

6. 可访问性规则

  • ARIA labels on all interactive elements
  • WCAG 2.1 AA contrast ratios (4.5:1 minimum)
  • Keyboard-focus styles matching hover states
  • Semantic HTML structure
tsx
<button
  aria-label="Submit form"
  className="focus:ring-2 focus:ring-primary focus:outline-none"
>
  Submit
</button>
  • 所有交互元素添加ARIA标签
  • 符合WCAG 2.1 AA对比度标准（最低4.5:1）
  • 键盘聚焦样式与悬停状态匹配
  • 使用语义化HTML结构
tsx
<button
  aria-label="Submit form"
  className="focus:ring-2 focus:ring-primary focus:outline-none"
>
  Submit
</button>

Workflow

工作流程

1. Interview User (if details not provided)

1. 与用户沟通（若细节未明确）

  • Scope: Full page, section, or specific component?
  • Type: Dashboard, form, card, modal, table?
  • Target file: Where should this be implemented?
  • Requirements: Features, interactions, data to display?
  • 范围：整页、区块还是特定组件？
  • 类型：仪表盘、表单、卡片、模态框、表格？
  • 目标文件：应在何处实现？
  • 需求：功能、交互、需展示的数据？

2. Design & Implement

2. 设计与实现

  1. Match existing design - align with current UI patterns in the app
  2. Build UI first - complete visual interface before adding logic
  3. Modular components - break large pages into focused, reusable pieces
  4. Apply all 6 rules above strictly
  5. Verify accessibility - keyboard navigation, contrast, ARIA labels
  6. Test responsiveness - mobile, tablet, desktop
  1. 匹配现有设计 - 与应用中当前的UI模式保持一致
  2. 先构建UI - 完成视觉界面后再添加逻辑
  3. 模块化组件 - 将大型页面拆分为专注、可复用的模块
  4. 严格遵循上述6条规则
  5. 验证可访问性 - 键盘导航、对比度、ARIA标签
  6. 测试响应性 - 移动端、平板、桌面端

3. Component Structure Pattern

3. 组件结构模式

tsx
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>
  )
}
tsx
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. Quality Checklist

4. 质量检查清单

Before completing, verify:
  • Uses shadcn/ui components where applicable
  • 2-3 font weights/sizes max per screen
  • 4px-based spacing throughout
  • Theme color variables (no hardcoded colors)
  • 3 shadow levels max, strategically applied
  • Animations 200-300ms with ease-in-out
  • ARIA labels on interactive elements
  • WCAG AA contrast ratios (4.5:1 min)
  • Keyboard focus styles implemented
  • Mobile-first responsive design
  • Modular, reusable code structure
完成前请验证：
  • 尽可能使用shadcn/ui组件
  • 每个屏幕最多使用2-3种字重/字号
  • 全程使用4px基准间距
  • 使用主题颜色变量（无硬编码颜色）
  • 最多使用3个阴影层级，且策略性应用
  • 动画时长为200-300ms，使用ease-in-out曲线
  • 交互元素添加ARIA标签
  • 符合WCAG AA对比度标准（最低4.5:1）
  • 实现键盘聚焦样式
  • 采用移动端优先的响应式设计
  • 模块化、可复用的代码结构

Common Patterns

常见模式

Dashboard Page

仪表盘页面

tsx
<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>
tsx
<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 Pattern

表单模式

tsx
<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="john@example.com" />
    </div>
  </div>
  <Button type="submit" className="w-full transition-colors duration-200">
    Submit
  </Button>
</form>
tsx
<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="john@example.com" />
    </div>
  </div>
  <Button type="submit" className="w-full transition-colors duration-200">
    Submit
  </Button>
</form>

Data Table Pattern

数据表格模式

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

Best Practices

最佳实践

  • Match existing design - new designs align with current UI screens and components
  • UI-first approach - complete visual interface before adding business logic
  • Modular code - small, focused, reusable components (avoid monolithic pages)
  • Token efficiency - concise, well-structured code
  • Consistency - follow existing color, spacing, and typography patterns
  • Composability - build with shadcn's philosophy of small components that work together
  • 匹配现有设计 - 新设计需与应用当前的UI界面和组件保持一致
  • UI优先方法 - 完成视觉界面后再添加业务逻辑
  • 模块化代码 - 小巧、专注、可复用的组件（避免单体式页面）
  • 代码简洁高效 - 结构清晰、精简的代码
  • 一致性 - 遵循现有的配色、间距和排版模式
  • 可组合性 - 遵循Shadcn的小组件协同工作理念

Common Shadcn Components

常用Shadcn组件

  • Layout: Card, Tabs, Sheet, Dialog, Popover
  • Forms: Input, Textarea, Select, Checkbox, Radio, Switch, Label
  • Buttons: Button, Toggle, ToggleGroup
  • Display: Badge, Avatar, Separator, Skeleton, Table
  • Feedback: Alert, Toast, Progress
  • Navigation: NavigationMenu, Dropdown, Command
  • 布局类：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

参考资料