Back to Details

design-handoff-spec

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Handoff Specialist

Design Handoff专家

Эксперт по созданию спецификаций для передачи дизайна в разработку.
专注于创建设计到开发交付的规范专家。

Core Competencies

核心能力

Precision & Clarity

精准清晰

  • Exact measurements and spacing
  • Consistent units (px, rem, em)
  • Color values in multiple formats
  • Absolute and relative measurements
  • 精确的尺寸与间距
  • 统一的单位（px, rem, em）
  • 多格式的颜色值
  • 绝对与相对测量值

Developer-Focused

面向开发者

  • CSS-structured properties
  • Component hierarchies
  • Interactive state transitions
  • Responsive breakpoints
  • CSS结构化属性
  • 组件层级
  • 交互状态过渡
  • 响应式断点

Asset Management

资源管理

  • Export formats and sizes
  • Naming conventions
  • Compression requirements
  • Accessibility considerations
  • 导出格式与尺寸
  • 命名规范
  • 压缩要求
  • 无障碍设计考量

Component Specification Template

组件规范模板

markdown
undefined
markdown
undefined

Component: [Name]

Component: [Name]

Overview

Overview

  • Type: Atom / Molecule / Organism
  • Status: Ready for development
  • Figma Link: [link]
  • Type: Atom / Molecule / Organism
  • Status: Ready for development
  • Figma Link: [link]

Usage Context

Usage Context

  • Where this component appears
  • Related components
  • Usage guidelines
  • Where this component appears
  • Related components
  • Usage guidelines

Variants

Variants

VariantDescriptionUse Case
PrimaryMain actionCTAs, forms
SecondaryAlternative actionCancel, back
TertiaryLow emphasisLinks in text
DestructiveDangerous actionDelete, remove
undefined
VariantDescriptionUse Case
PrimaryMain actionCTAs, forms
SecondaryAlternative actionCancel, back
TertiaryLow emphasisLinks in text
DestructiveDangerous actionDelete, remove
undefined

Layout & Positioning

布局与定位

css
/* Component Structure */
.button {
  /* Box Model */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Dimensions */
  min-width: 120px;
  height: 44px;
  padding: 12px 24px;

  /* Position Context */
  position: relative;
  z-index: 1;
}

/* Spacing Relationships */
.button-group {
  display: flex;
  gap: 12px; /* Between buttons */
}

.form-field + .button {
  margin-top: 24px; /* Form to button */
}
css
/* Component Structure */
.button {
  /* Box Model */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Dimensions */
  min-width: 120px;
  height: 44px;
  padding: 12px 24px;

  /* Position Context */
  position: relative;
  z-index: 1;
}

/* Spacing Relationships */
.button-group {
  display: flex;
  gap: 12px; /* Between buttons */
}

.form-field + .button {
  margin-top: 24px; /* Form to button */
}

Typography Specifications

排版规范

yaml
Button Text:
  font-family: "Inter", -apple-system, sans-serif
  font-size: 14px / 0.875rem
  font-weight: 600
  line-height: 20px / 1.43
  letter-spacing: 0.01em
  text-transform: none
  color: #FFFFFF

Label Text:
  font-family: "Inter", sans-serif
  font-size: 12px / 0.75rem
  font-weight: 500
  line-height: 16px / 1.33
  letter-spacing: 0.02em
  color: #6B7280
yaml
Button Text:
  font-family: "Inter", -apple-system, sans-serif
  font-size: 14px / 0.875rem
  font-weight: 600
  line-height: 20px / 1.43
  letter-spacing: 0.01em
  text-transform: none
  color: #FFFFFF

Label Text:
  font-family: "Inter", sans-serif
  font-size: 12px / 0.75rem
  font-weight: 500
  line-height: 16px / 1.33
  letter-spacing: 0.02em
  color: #6B7280

Color Specifications

颜色规范

yaml
Primary Button:
  background:
    default: "#2563EB"  # Blue-600
    hover: "#1D4ED8"    # Blue-700
    active: "#1E40AF"   # Blue-800
    disabled: "#93C5FD" # Blue-300

  text:
    default: "#FFFFFF"
    disabled: "#DBEAFE" # Blue-100

  border:
    default: "transparent"
    focus: "#3B82F6"    # Blue-500 (ring)

Secondary Button:
  background:
    default: "#F3F4F6"  # Gray-100
    hover: "#E5E7EB"    # Gray-200
    active: "#D1D5DB"   # Gray-300
    disabled: "#F9FAFB" # Gray-50

  text:
    default: "#374151"  # Gray-700
    disabled: "#9CA3AF" # Gray-400
yaml
Primary Button:
  background:
    default: "#2563EB"  # Blue-600
    hover: "#1D4ED8"    # Blue-700
    active: "#1E40AF"   # Blue-800
    disabled: "#93C5FD" # Blue-300

  text:
    default: "#FFFFFF"
    disabled: "#DBEAFE" # Blue-100

  border:
    default: "transparent"
    focus: "#3B82F6"    # Blue-500 (ring)

Secondary Button:
  background:
    default: "#F3F4F6"  # Gray-100
    hover: "#E5E7EB"    # Gray-200
    active: "#D1D5DB"   # Gray-300
    disabled: "#F9FAFB" # Gray-50

  text:
    default: "#374151"  # Gray-700
    disabled: "#9CA3AF" # Gray-400

Interactive States

交互状态

yaml
States:
  default:
    description: "Initial state"
    cursor: pointer

  hover:
    description: "Mouse over"
    transition: "all 150ms ease-in-out"
    transform: "translateY(-1px)"
    shadow: "0 4px 6px -1px rgba(0,0,0,0.1)"

  active:
    description: "Mouse down / touch"
    transform: "translateY(0)"
    shadow: "0 1px 2px 0 rgba(0,0,0,0.05)"

  focus:
    description: "Keyboard focus"
    outline: "none"
    ring: "2px solid #3B82F6"
    ring-offset: "2px"

  disabled:
    description: "Not interactive"
    cursor: "not-allowed"
    opacity: 0.5
    pointer-events: "none"

  loading:
    description: "Action in progress"
    cursor: "wait"
    content: "Spinner icon"
yaml
States:
  default:
    description: "Initial state"
    cursor: pointer

  hover:
    description: "Mouse over"
    transition: "all 150ms ease-in-out"
    transform: "translateY(-1px)"
    shadow: "0 4px 6px -1px rgba(0,0,0,0.1)"

  active:
    description: "Mouse down / touch"
    transform: "translateY(0)"
    shadow: "0 1px 2px 0 rgba(0,0,0,0.05)"

  focus:
    description: "Keyboard focus"
    outline: "none"
    ring: "2px solid #3B82F6"
    ring-offset: "2px"

  disabled:
    description: "Not interactive"
    cursor: "not-allowed"
    opacity: 0.5
    pointer-events: "none"

  loading:
    description: "Action in progress"
    cursor: "wait"
    content: "Spinner icon"

Responsive Breakpoints

响应式断点

yaml
Breakpoints:
  mobile:
    range: "320px - 767px"
    button-height: 48px
    button-padding: "14px 20px"
    font-size: 16px
    full-width: true

  tablet:
    range: "768px - 1023px"
    button-height: 44px
    button-padding: "12px 24px"
    font-size: 14px
    full-width: false

  desktop:
    range: "1024px+"
    button-height: 40px
    button-padding: "10px 20px"
    font-size: 14px
    full-width: false
yaml
Breakpoints:
  mobile:
    range: "320px - 767px"
    button-height: 48px
    button-padding: "14px 20px"
    font-size: 16px
    full-width: true

  tablet:
    range: "768px - 1023px"
    button-height: 44px
    button-padding: "12px 24px"
    font-size: 14px
    full-width: false

  desktop:
    range: "1024px+"
    button-height: 40px
    button-padding: "10px 20px"
    font-size: 14px
    full-width: false

Asset Requirements

资源要求

yaml
Icons:
  format: SVG (preferred), PNG fallback
  sizes:
    - 16x16 (small)
    - 20x20 (default)
    - 24x24 (large)
  naming: "icon-{name}-{size}.svg"
  color: "currentColor" for flexibility

Images:
  format: WebP (preferred), JPEG fallback
  sizes:
    - 1x: base size
    - 2x: retina
    - 3x: high-density mobile
  naming: "{name}@{scale}x.{format}"
  compression: 80% quality

Exports from Figma:
  - Export as SVG for icons
  - Export as PNG 1x, 2x, 3x for images
  - Use "Export for Web" preset
yaml
Icons:
  format: SVG (preferred), PNG fallback
  sizes:
    - 16x16 (small)
    - 20x20 (default)
    - 24x24 (large)
  naming: "icon-{name}-{size}.svg"
  color: "currentColor" for flexibility

Images:
  format: WebP (preferred), JPEG fallback
  sizes:
    - 1x: base size
    - 2x: retina
    - 3x: high-density mobile
  naming: "{name}@{scale}x.{format}"
  compression: 80% quality

Exports from Figma:
  - Export as SVG for icons
  - Export as PNG 1x, 2x, 3x for images
  - Use "Export for Web" preset

Animation Specifications

动画规范

css
/* Transition Tokens */
:root {
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Button Hover Animation */
.button {
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Loading Spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.button-spinner {
  animation: spin 1s linear infinite;
}
css
/* Transition Tokens */
:root {
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Button Hover Animation */
.button {
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Loading Spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.button-spinner {
  animation: spin 1s linear infinite;
}

Accessibility Requirements

无障碍设计要求

yaml
WCAG Compliance:
  contrast:
    normal-text: "4.5:1 minimum"
    large-text: "3:1 minimum"
    ui-components: "3:1 minimum"

  focus:
    indicator: "visible focus ring"
    style: "2px solid, 2px offset"
    color: "meets contrast requirement"

  touch-target:
    minimum: "44x44px"
    recommended: "48x48px"

  screen-reader:
    - Meaningful button text
    - aria-label for icon-only buttons
    - aria-disabled for disabled state
    - aria-busy for loading state

Example:
  ```html
  <button
    class="button button--primary"
    aria-label="Submit form"
    aria-busy="false"
  >
    <span class="button__text">Submit</span>
  </button>
undefined
yaml
WCAG Compliance:
  contrast:
    normal-text: "4.5:1 minimum"
    large-text: "3:1 minimum"
    ui-components: "3:1 minimum"

  focus:
    indicator: "visible focus ring"
    style: "2px solid, 2px offset"
    color: "meets contrast requirement"

  touch-target:
    minimum: "44x44px"
    recommended: "48x48px"

  screen-reader:
    - Meaningful button text
    - aria-label for icon-only buttons
    - aria-disabled for disabled state
    - aria-busy for loading state

Example:
  ```html
  <button
    class="button button--primary"
    aria-label="Submit form"
    aria-busy="false"
  >
    <span class="button__text">Submit</span>
  </button>
undefined

Design Tokens

Design Tokens

json
{
  "color": {
    "primary": {
      "50": "#EFF6FF",
      "100": "#DBEAFE",
      "500": "#3B82F6",
      "600": "#2563EB",
      "700": "#1D4ED8"
    },
    "gray": {
      "50": "#F9FAFB",
      "100": "#F3F4F6",
      "700": "#374151",
      "900": "#111827"
    }
  },
  "spacing": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px"
  },
  "borderRadius": {
    "sm": "4px",
    "md": "6px",
    "lg": "8px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px 0 rgba(0,0,0,0.05)",
    "md": "0 4px 6px -1px rgba(0,0,0,0.1)",
    "lg": "0 10px 15px -3px rgba(0,0,0,0.1)"
  }
}
json
{
  "color": {
    "primary": {
      "50": "#EFF6FF",
      "100": "#DBEAFE",
      "500": "#3B82F6",
      "600": "#2563EB",
      "700": "#1D4ED8"
    },
    "gray": {
      "50": "#F9FAFB",
      "100": "#F3F4F6",
      "700": "#374151",
      "900": "#111827"
    }
  },
  "spacing": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px"
  },
  "borderRadius": {
    "sm": "4px",
    "md": "6px",
    "lg": "8px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px 0 rgba(0,0,0,0.05)",
    "md": "0 4px 6px -1px rgba(0,0,0,0.1)",
    "lg": "0 10px 15px -3px rgba(0,0,0,0.1)"
  }
}

Implementation Notes

实施说明

markdown
undefined
markdown
undefined

Z-Index Hierarchy

Z-Index层级

ElementZ-Index
Base content0
Dropdown10
Sticky header20
Modal backdrop30
Modal content40
Tooltip50
Toast notification60
ElementZ-Index
Base content0
Dropdown10
Sticky header20
Modal backdrop30
Modal content40
Tooltip50
Toast notification60

Performance Considerations

性能考量

  • Use CSS transforms over position changes
  • Avoid layout shifts on state changes
  • Lazy load images below the fold
  • Preload critical fonts
  • 使用CSS变换替代位置修改
  • 避免状态切换时的布局偏移
  • 懒加载视口下方的图片
  • 预加载关键字体

Browser Support

浏览器支持

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Dependencies

依赖项

  • Inter font (Google Fonts)
  • Heroicons for icons
  • Tailwind CSS utilities (optional)
undefined
  • Inter字体（Google Fonts）
  • Heroicons图标库
  • Tailwind CSS工具类（可选）
undefined

QA Checklist

QA检查清单

markdown
undefined
markdown
undefined

Visual Verification

视觉验证

  • Matches Figma design at all breakpoints
  • Colors match specifications exactly
  • Typography matches specs
  • Spacing is pixel-perfect
  • Icons render correctly
  • 在所有断点下与Figma设计一致
  • 颜色完全符合规范
  • 排版符合要求
  • 间距像素级精准
  • 图标渲染正确

Interactive Verification

交互验证

  • All states work correctly
  • Transitions are smooth
  • Focus states visible
  • Touch targets adequate
  • 所有状态正常工作
  • 过渡动画流畅
  • 焦点状态可见
  • 触摸目标尺寸达标

Accessibility Verification

无障碍验证

  • Contrast ratios pass WCAG AA
  • Focus indicators visible
  • Screen reader announces correctly
  • Keyboard navigation works
  • 对比度符合WCAG AA标准
  • 焦点指示器可见
  • 屏幕阅读器播报正确
  • 键盘导航正常

Cross-Browser

跨浏览器验证

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Mobile Safari
  • Chrome Android
undefined
  • Chrome
  • Firefox
  • Safari
  • Edge
  • Mobile Safari
  • Chrome Android
undefined

Лучшие практики

最佳实践

  1. Single source of truth — Figma как источник правды
  2. Design tokens — переменные вместо хардкода
  3. Component-first — документируйте компоненты, не страницы
  4. State completeness — все состояния задокументированы
  5. Accessibility built-in — a11y с самого начала
  6. Developer communication — регулярные синки с разработкой
  1. 单一事实来源 — 将Figma作为唯一可信来源
  2. Design Tokens — 使用变量而非硬编码
  3. 组件优先 — 记录组件而非页面
  4. 状态完整性 — 记录所有交互状态
  5. 内置无障碍支持 — 从初始阶段就考虑a11y
  6. 开发者沟通 — 与开发团队定期同步