名称: UI组件创建描述: 使用shadcn/ui和设计系统模式创建UI组件

UI组件创建技能

shadcn/ui + 设计系统模式

使用时机: 创建新的UI组件时

关键: 先阅读设计系统

生成任何UI之前: 阅读 /DESIGN-SYSTEM.md

质量门槛: 最低9/10分，评估维度：

视觉独特性
品牌一致性
可访问性

模式: shadcn/ui组件

'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export function MyComponent({ data }: { data: any }) {
  return (
    <Card className="p-6 border-border-subtle bg-bg-card">
      <h2 className="text-xl font-semibold text-text-primary mb-4">
        {data.title}
      </h2>
      <p className="text-text-secondary mb-4">
        {data.description}
      </p>
      <Button variant="default" className="bg-accent-500 hover:bg-accent-600">
        操作
      </Button>
    </Card>
  );
}

设计令牌（必须使用）

使用这些，而不是原始值:

颜色:

bg-bg-card（不要用bg-white）
text-text-primary（不要用text-gray-900）
accent-500 (#ff6b35 橙色)
border-border-subtle

间距:

Tailwind类（p-4, mb-6等）

禁止模式

❌ bg-white（使用bg-bg-card） ❌ text-gray-600（使用text-text-secondary） ❌ grid grid-cols-3 gap-4 不加响应式（添加md:, lg:）

必需模式

✅ 使用设计系统中的设计令牌 ✅ 实现所有状态（悬停、聚焦、禁用） ✅ 响应式断点 ✅ 可访问性（aria标签）

标准: 使用设计令牌，实现所有状态，确保可访问性

名称: UI组件创建 描述: 使用shadcn/ui和设计系统模式创建UI组件