Back to Details

design-to-component-translator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design-to-Component Translator

设计转组件转换器

Convert design specifications into pixel-perfect, production-ready React components.
将设计规范转换为像素级精准、可投入生产的React组件。

Core Workflow

核心工作流程

  1. Analyze design specs: Extract spacing, colors, typography, dimensions
  2. Map to tokens: Convert design values to design system tokens
  3. Generate structure: Create semantic HTML structure
  4. Apply styles: Implement Tailwind/CSS with exact measurements
  5. Add states: Include hover, focus, active, disabled states
  6. Handle responsive: Implement breakpoint-specific rules
  7. Ensure accessibility: Add ARIA labels, keyboard navigation
  8. Document variants: List all visual states and props
  1. 分析设计规范：提取间距、颜色、排版、尺寸
  2. 映射到令牌：将设计值转换为设计系统令牌
  3. 生成结构：创建语义化HTML结构
  4. 应用样式：使用精确尺寸实现Tailwind/CSS样式
  5. 添加状态：包含悬停、聚焦、激活、禁用状态
  6. 处理响应式：实现断点专属规则
  7. 确保可访问性：添加ARIA标签、键盘导航支持
  8. 记录变体：列出所有视觉状态与属性

Design Spec Analysis

设计规范分析

Extract from Figma/Design

从Figma/设计文件提取信息

Spacing & Layout:
  • Padding: 
    p-4
    (16px), 
    px-6
    (24px horizontal)
  • Margin: 
    m-2
    (8px), 
    mt-4
    (16px top)
  • Gap: 
    gap-3
    (12px between flex items)
  • Width/Height: 
    w-64
    (256px), 
    h-10
    (40px)
Typography:
  • Font family: 
    font-sans
    , 
    font-mono
  • Font size: 
    text-sm
    (14px), 
    text-base
    (16px), 
    text-lg
    (18px)
  • Font weight: 
    font-normal
    (400), 
    font-medium
    (500), 
    font-semibold
    (600)
  • Line height: 
    leading-tight
    , 
    leading-normal
    , 
    leading-relaxed
  • Letter spacing: 
    tracking-tight
    , 
    tracking-normal
    , 
    tracking-wide
Colors:
  • Background: 
    bg-blue-500
    , 
    bg-gray-100
  • Text: 
    text-gray-900
    , 
    text-white
  • Border: 
    border-gray-300
    , 
    border-blue-600
  • Opacity: 
    bg-opacity-50
    , 
    text-opacity-75
Borders & Radius:
  • Border width: 
    border
    , 
    border-2
    , 
    border-t-4
  • Border radius: 
    rounded
    (4px), 
    rounded-md
    (6px), 
    rounded-lg
    (8px), 
    rounded-full
Shadows:
  • shadow-sm
    , 
    shadow
    , 
    shadow-md
    , 
    shadow-lg
    , 
    shadow-xl
间距与布局：
  • 内边距：
    p-4
    （16px）、
    px-6
    （水平24px）
  • 外边距：
    m-2
    （8px）、
    mt-4
    （顶部16px）
  • 间隙：
    gap-3
    （弹性项目间12px）
  • 宽/高：
    w-64
    （256px）、
    h-10
    （40px）
排版：
  • 字体族：
    font-sans
    、
    font-mono
  • 字号：
    text-sm
    （14px）、
    text-base
    （16px）、
    text-lg
    （18px）
  • 字重：
    font-normal
    （400）、
    font-medium
    （500）、
    font-semibold
    （600）
  • 行高：
    leading-tight
    、
    leading-normal
    、
    leading-relaxed
  • 字间距：
    tracking-tight
    、
    tracking-normal
    、
    tracking-wide
颜色：
  • 背景：
    bg-blue-500
    、
    bg-gray-100
  • 文本：
    text-gray-900
    、
    text-white
  • 边框：
    border-gray-300
    、
    border-blue-600
  • 透明度：
    bg-opacity-50
    、
    text-opacity-75
边框与圆角：
  • 边框宽度：
    border
    、
    border-2
    、
    border-t-4
  • 圆角：
    rounded
    （4px）、
    rounded-md
    （6px）、
    rounded-lg
    （8px）、
    rounded-full
阴影：
  • shadow-sm
    , 
    shadow
    , 
    shadow-md
    , 
    shadow-lg
    , 
    shadow-xl

Design Token Mapping

设计令牌映射

Create Token System

创建令牌系统

typescript
// tokens.ts
export const tokens = {
  colors: {
    primary: {
      50: "#eff6ff",
      100: "#dbeafe",
      500: "#3b82f6",
      600: "#2563eb",
      700: "#1d4ed8",
    },
    gray: {
      100: "#f3f4f6",
      300: "#d1d5db",
      500: "#6b7280",
      700: "#374151",
      900: "#111827",
    },
  },
  spacing: {
    xs: "0.25rem", // 4px
    sm: "0.5rem", // 8px
    md: "1rem", // 16px
    lg: "1.5rem", // 24px
    xl: "2rem", // 32px
  },
  fontSize: {
    xs: ["0.75rem", { lineHeight: "1rem" }],
    sm: ["0.875rem", { lineHeight: "1.25rem" }],
    base: ["1rem", { lineHeight: "1.5rem" }],
    lg: ["1.125rem", { lineHeight: "1.75rem" }],
    xl: ["1.25rem", { lineHeight: "1.75rem" }],
  },
  borderRadius: {
    sm: "0.25rem", // 4px
    md: "0.375rem", // 6px
    lg: "0.5rem", // 8px
    full: "9999px",
  },
  shadows: {
    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
    md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
  },
};
typescript
// tokens.ts
export const tokens = {
  colors: {
    primary: {
      50: "#eff6ff",
      100: "#dbeafe",
      500: "#3b82f6",
      600: "#2563eb",
      700: "#1d4ed8",
    },
    gray: {
      100: "#f3f4f6",
      300: "#d1d5db",
      500: "#6b7280",
      700: "#374151",
      900: "#111827",
    },
  },
  spacing: {
    xs: "0.25rem", // 4px
    sm: "0.5rem", // 8px
    md: "1rem", // 16px
    lg: "1.5rem", // 24px
    xl: "2rem", // 32px
  },
  fontSize: {
    xs: ["0.75rem", { lineHeight: "1rem" }],
    sm: ["0.875rem", { lineHeight: "1.25rem" }],
    base: ["1rem", { lineHeight: "1.5rem" }],
    lg: ["1.125rem", { lineHeight: "1.75rem" }],
    xl: ["1.25rem", { lineHeight: "1.75rem" }],
  },
  borderRadius: {
    sm: "0.25rem", // 4px
    md: "0.375rem", // 6px
    lg: "0.5rem", // 8px
    full: "9999px",
  },
  shadows: {
    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
    md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
  },
};

Tailwind Config

Tailwind配置

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          100: "#dbeafe",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
        },
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
      fontSize: {
        "2xs": "0.625rem",
      },
    },
  },
};
javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          100: "#dbeafe",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
        },
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
      fontSize: {
        "2xs": "0.625rem",
      },
    },
  },
};

Component Translation Examples

组件转换示例

Button from Figma Spec

基于Figma规范的按钮组件

Figma Specs:
  • Height: 40px
  • Padding: 12px 24px
  • Border radius: 6px
  • Font: Inter Medium 14px
  • Background: #3B82F6
  • Text: #FFFFFF
  • Hover: #2563EB
  • Shadow: 0 1px 3px rgba(0,0,0,0.1)
Translated Component:
typescript
import { cn } from "@/lib/utils";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";
}

export const Button = ({
  variant = "primary",
  size = "md",
  className,
  children,
  ...props
}: ButtonProps) => {
  return (
    <button
      className={cn(
        // Base styles
        "inline-flex items-center justify-center rounded-md font-medium",
        "transition-colors duration-200",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
        "disabled:pointer-events-none disabled:opacity-50",
        // Variant: Primary (matches Figma)
        variant === "primary" && [
          "bg-primary-500 text-white shadow-sm",
          "hover:bg-primary-600",
          "active:bg-primary-700",
        ],
        // Size: Medium (40px height, 12px 24px padding)
        size === "md" && "h-10 px-6 text-sm",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
};
Figma规范：
  • 高度：40px
  • 内边距：12px 24px
  • 圆角：6px
  • 字体：Inter Medium 14px
  • 背景：#3B82F6
  • 文本：#FFFFFF
  • 悬停状态：#2563EB
  • 阴影：0 1px 3px rgba(0,0,0,0.1)
转换后的组件：
typescript
import { cn } from "@/lib/utils";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";
}

export const Button = ({
  variant = "primary",
  size = "md",
  className,
  children,
  ...props
}: ButtonProps) => {
  return (
    <button
      className={cn(
        // 基础样式
        "inline-flex items-center justify-center rounded-md font-medium",
        "transition-colors duration-200",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
        "disabled:pointer-events-none disabled:opacity-50",
        // 变体：主按钮（匹配Figma）
        variant === "primary" && [
          "bg-primary-500 text-white shadow-sm",
          "hover:bg-primary-600",
          "active:bg-primary-700",
        ],
        // 尺寸：中等（40px高度，12px 24px内边距）
        size === "md" && "h-10 px-6 text-sm",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
};

Card from Design Spec

基于设计规范的卡片组件

Figma Specs:
  • Padding: 24px
  • Border radius: 12px
  • Background: #FFFFFF
  • Border: 1px solid #E5E7EB
  • Shadow: 0 1px 3px rgba(0,0,0,0.1)
  • Max width: 400px
Translated Component:
typescript
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  elevated?: boolean;
}

export const Card = ({
  elevated = false,
  className,
  children,
  ...props
}: CardProps) => {
  return (
    <div
      className={cn(
        // Base from Figma
        "max-w-sm rounded-xl bg-white p-6",
        "border border-gray-200",
        // Conditional shadow
        elevated ? "shadow-lg" : "shadow-sm",
        // Hover state (not in Figma, but good UX)
        "transition-shadow duration-200 hover:shadow-md",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
};
Figma规范：
  • 内边距：24px
  • 圆角：12px
  • 背景：#FFFFFF
  • 边框：1px solid #E5E7EB
  • 阴影：0 1px 3px rgba(0,0,0,0.1)
  • 最大宽度：400px
转换后的组件：
typescript
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  elevated?: boolean;
}

export const Card = ({
  elevated = false,
  className,
  children,
  ...props
}: CardProps) => {
  return (
    <div
      className={cn(
        // 基础样式（来自Figma）
        "max-w-sm rounded-xl bg-white p-6",
        "border border-gray-200",
        // 条件阴影
        elevated ? "shadow-lg" : "shadow-sm",
        // 悬停状态（Figma未定义，但提升UX）
        "transition-shadow duration-200 hover:shadow-md",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
};

Interaction States

交互状态

Hover States

悬停状态

typescript
// Figma: Background changes from #3B82F6 to #2563EB on hover
className={cn(
  'bg-primary-500',
  'hover:bg-primary-600',
  'transition-colors duration-200'
)}
typescript
// Figma：背景从#3B82F6变为#2563EB
className={cn(
  'bg-primary-500',
  'hover:bg-primary-600',
  'transition-colors duration-200'
)}

Focus States

聚焦状态

typescript
// Accessible focus ring
className={cn(
  'focus:outline-none',
  'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
)}
typescript
// 可访问的聚焦环
className={cn(
  'focus:outline-none',
  'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
)}

Active/Pressed States

激活/按压状态

typescript
// Figma: Slightly darker on click
className={cn(
  'active:bg-primary-700',
  'active:scale-[0.98]', // Slight scale down
  'transition-all duration-100'
)}
typescript
// Figma：点击时颜色略深
className={cn(
  'active:bg-primary-700',
  'active:scale-[0.98]', // 轻微缩小
  'transition-all duration-100'
)}

Disabled States

禁用状态

typescript
// Figma: 50% opacity, no interactions
className={cn(
  'disabled:opacity-50',
  'disabled:cursor-not-allowed',
  'disabled:pointer-events-none'
)}
typescript
// Figma：50%透明度，无交互
className={cn(
  'disabled:opacity-50',
  'disabled:cursor-not-allowed',
  'disabled:pointer-events-none'
)}

Responsive Design Translation

响应式设计转换

Breakpoint Mapping

断点映射

typescript
// Figma artboards → Tailwind breakpoints
// Mobile (375px): default (no prefix)
// Tablet (768px): md:
// Desktop (1024px): lg:
// Wide (1280px): xl:

<div
  className={cn(
    // Mobile: Stack vertically, full width
    "flex flex-col gap-4 w-full",
    // Tablet: Side by side, 50% each
    "md:flex-row md:gap-6",
    // Desktop: Max width container
    "lg:max-w-6xl lg:mx-auto"
  )}
/>
typescript
// Figma画板 → Tailwind断点
// 移动端（375px）：默认（无前缀）
// 平板端（768px）：md:
// 桌面端（1024px）：lg:
// 宽屏（1280px）：xl:

<div
  className={cn(
    // 移动端：垂直堆叠，全宽
    "flex flex-col gap-4 w-full",
    // 平板端：横向排列，各占50%
    "md:flex-row md:gap-6",
    // 桌面端：最大宽度容器
    "lg:max-w-6xl lg:mx-auto"
  )}
/>

Responsive Typography

响应式排版

typescript
// Figma mobile: 14px, desktop: 16px
<h1 className="text-sm md:text-base lg:text-lg font-semibold">
  Responsive Heading
</h1>
typescript
// Figma移动端：14px，桌面端：16px
<h1 className="text-sm md:text-base lg:text-lg font-semibold">
  响应式标题
</h1>

Responsive Spacing

响应式间距

typescript
// Figma mobile: 16px padding, desktop: 24px
<div className="p-4 md:p-6 lg:p-8">Content</div>
typescript
// Figma移动端：16px内边距，桌面端：24px
<div className="p-4 md:p-6 lg:p-8">内容</div>

Design System Integration

设计系统集成

Using shadcn/ui Patterns

使用shadcn/ui模式

typescript
// Leveraging shadcn's composable approach
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);
typescript
// 利用shadcn的组合式方法
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

Color System Translation

颜色系统转换

From Figma to CSS Variables

从Figma到CSS变量

css
/* Figma colors → CSS variables */
:root {
  /* Primary from Figma #3B82F6 */
  --primary: 221 83% 60%;
  --primary-foreground: 0 0% 100%;

  /* Secondary from Figma #6B7280 */
  --secondary: 220 9% 46%;
  --secondary-foreground: 0 0% 100%;

  /* Backgrounds */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  /* Borders */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 221 83% 60%;

  /* Radius from Figma */
  --radius: 0.5rem;
}
css
/* Figma颜色 → CSS变量 */
:root {
  /* 主色来自Figma #3B82F6 */
  --primary: 221 83% 60%;
  --primary-foreground: 0 0% 100%;

  /* 次要颜色来自Figma #6B7280 */
  --secondary: 220 9% 46%;
  --secondary-foreground: 0 0% 100%;

  /* 背景色 */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  /* 边框色 */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 221 83% 60%;

  /* 圆角来自Figma */
  --radius: 0.5rem;
}

Using in Components

在组件中使用

typescript
<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">Button</button>
</div>
typescript
<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">按钮</button>
</div>

Animation & Transitions

动画与过渡

Micro-interactions from Figma

来自Figma的微交互

typescript
// Figma: Button scales slightly on hover
<button className={cn(
  'transition-all duration-200',
  'hover:scale-105',
  'active:scale-95'
)}>
  Hover me
</button>

// Figma: Card lifts on hover
<div className={cn(
  'transition-all duration-300',
  'hover:-translate-y-1 hover:shadow-lg'
)}>
  Card content
</div>

// Figma: Fade in on mount
<div className="animate-in fade-in duration-500">
  Fading content
</div>
typescript
// Figma：按钮悬停时轻微放大
<button className={cn(
  'transition-all duration-200',
  'hover:scale-105',
  'active:scale-95'
)}>
  悬停我
</button>

// Figma：卡片悬停时上移
<div className={cn(
  'transition-all duration-300',
  'hover:-translate-y-1 hover:shadow-lg'
)}>
  卡片内容
</div>

// Figma：挂载时淡入
<div className="animate-in fade-in duration-500">
  淡入内容
</div>

Measurement Conversion

尺寸转换

Figma Pixels → Tailwind Classes

Figma像素 → Tailwind类名

FigmaTailwindValue
2px0.50.125rem
4px10.25rem
8px20.5rem
12px30.75rem
16px41rem
20px51.25rem
24px61.5rem
32px82rem
40px102.5rem
48px123rem
FigmaTailwind数值
2px0.50.125rem
4px10.25rem
8px20.5rem
12px30.75rem
16px41rem
20px51.25rem
24px61.5rem
32px82rem
40px102.5rem
48px123rem

Custom Values

自定义数值

typescript
// Figma: 18px (not in default Tailwind)
<div className="w-[18px] h-[18px]">{/* or add to config */}</div>
typescript
// Figma：18px（不在默认Tailwind中）
<div className="w-[18px] h-[18px]">{/* 或添加到配置中 */}</div>

Accessibility Mapping

可访问性映射

From Visual Design to A11y

从视觉设计到无障碍支持

typescript
// Figma shows disabled state
<button
  disabled={isDisabled}
  aria-disabled={isDisabled}
  className={cn(
    isDisabled && 'opacity-50 cursor-not-allowed'
  )}
>
  Submit
</button>

// Figma shows error state
<input
  aria-invalid={hasError}
  aria-describedby={hasError ? 'error-message' : undefined}
  className={cn(
    hasError && 'border-red-500 focus:ring-red-500'
  )}
/>
typescript
// Figma显示禁用状态
<button
  disabled={isDisabled}
  aria-disabled={isDisabled}
  className={cn(
    isDisabled && 'opacity-50 cursor-not-allowed'
  )}
>
  提交
</button>

// Figma显示错误状态
<input
  aria-invalid={hasError}
  aria-describedby={hasError ? 'error-message' : undefined}
  className={cn(
    hasError && 'border-red-500 focus:ring-red-500'
  )}
/>

Common Patterns

常见模式

Form Input Translation

表单输入框转换

Figma Specs:
  • Height: 44px
  • Padding: 12px 16px
  • Border: 1px #D1D5DB
  • Border radius: 8px
  • Focus border: 2px #3B82F6
typescript
<input
  className={cn(
    "h-11 w-full rounded-lg border border-gray-300 px-4",
    "text-base text-gray-900 placeholder:text-gray-500",
    "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-0",
    "disabled:cursor-not-allowed disabled:opacity-50"
  )}
/>
Figma规范：
  • 高度：44px
  • 内边距：12px 16px
  • 边框：1px #D1D5DB
  • 圆角：8px
  • 聚焦边框：2px #3B82F6
typescript
<input
  className={cn(
    "h-11 w-full rounded-lg border border-gray-300 px-4",
    "text-base text-gray-900 placeholder:text-gray-500",
    "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-0",
    "disabled:cursor-not-allowed disabled:opacity-50"
  )}
/>

Icon Button Translation

图标按钮转换

Figma Specs:
  • Size: 40x40px
  • Icon: 20x20px centered
  • Border radius: 8px
  • Background hover: #F3F4F6
typescript
<button
  className={cn(
    "flex h-10 w-10 items-center justify-center rounded-lg",
    "text-gray-700 transition-colors",
    "hover:bg-gray-100",
    "focus-visible:ring-2 focus-visible:ring-primary-500"
  )}
>
  <Icon className="h-5 w-5" />
</button>
Figma规范：
  • 尺寸：40x40px
  • 图标：20x20px居中
  • 圆角：8px
  • 悬停背景：#F3F4F6
typescript
<button
  className={cn(
    "flex h-10 w-10 items-center justify-center rounded-lg",
    "text-gray-700 transition-colors",
    "hover:bg-gray-100",
    "focus-visible:ring-2 focus-visible:ring-primary-500"
  )}
>
  <Icon className="h-5 w-5" />
</button>

Best Practices

最佳实践

  1. Measure twice: Verify all measurements match Figma exactly
  2. Use design tokens: Map to tokens, not hardcoded values
  3. All states: Include hover, focus, active, disabled, error
  4. Responsive: Implement all breakpoints from design
  5. Accessibility: Add ARIA where Figma shows states
  6. Animations: Match transition timings to design
  7. Dark mode: If designs exist, implement with class variants
  8. Component variants: Create reusable variant props
  9. Documentation: Note any deviations from design
  10. Review: Get designer approval on implementation
  1. 反复核对：确保所有尺寸与Figma完全匹配
  2. 使用设计令牌：映射到令牌而非硬编码值
  3. 覆盖所有状态：包含悬停、聚焦、激活、禁用、错误状态
  4. 响应式实现：实现设计中所有断点规则
  5. 可访问性：在Figma显示状态的位置添加ARIA属性
  6. 动画匹配：与设计中的过渡时长保持一致
  7. 深色模式：若有设计稿，使用类变体实现
  8. 组件变体：创建可复用的状态属性
  9. 文档记录：标注所有与设计不符的实现
  10. 审核确认：获取设计师对实现的认可

Output Checklist

输出检查清单

Every design-to-component translation should include:
  • Exact spacing matching Figma measurements
  • Typography scales and weights
  • All color values from design system
  • Border radius and shadows
  • Hover state styling
  • Focus state styling (accessible)
  • Active/pressed state styling
  • Disabled state styling
  • Responsive breakpoint rules
  • Design token mapping documented
  • Accessibility attributes
  • Component variants for states
每一次设计转组件转换都应包含：
  • 与Figma尺寸完全匹配的精确间距
  • 排版缩放与字重
  • 设计系统中的所有颜色值
  • 圆角与阴影
  • 悬停状态样式
  • 可访问的聚焦状态样式
  • 激活/按压状态样式
  • 禁用状态样式
  • 响应式断点规则
  • 已记录的设计令牌映射
  • 可访问性属性
  • 组件状态变体