03 · Figma 转代码

从 Figma 到代码，有个翻译过程。你不需要成为专业设计师，但需要能把设计稿里的关键信息提取出来，告诉 Claude。

从设计稿截图到代码

Claude Code（通过 claude.ai 的多模态能力）可以直接看图。把 Figma 截图贴进去：

这是我们产品的「课程卡片」设计稿（截图已附上）。

帮我用 React + Tailwind CSS 实现这个组件：
- 严格还原设计中的圆角、间距、字体大小
- 图片用 Next.js 的 <Image> 组件（懒加载）
- 分类标签颜色从 Props 传入
- 完整的 TypeScript Props 类型

[附设计稿截图]

提取设计标注信息

从 Figma 手动提取关键数值，然后描述给 Claude：

实现以下设计规格的「用户头像 + 信息卡」组件：

尺寸：
- 卡片：宽度自适应，最小宽度 280px，padding 24px
- 头像：64x64px，圆形，有 2px 白色描边
- 姓名：18px / semibold / #1a1a1a
- 简介：14px / regular / #6b7280，最多 3 行

布局：
- 头像左对齐
- 姓名在头像右下方（绝对定位）
- 简介在头像下方，左对齐

交互：
- 卡片 hover 时有 0 2px 8px rgba(0,0,0,0.1) 阴影
- 头像 hover 时显示「查看主页」遮罩

批量转换设计稿

我有一套 6 个页面的设计稿，需要按以下顺序转换：

优先级顺序：
1. 首页（hero + 特色课程列表）
2. 课程详情页
3. 学员个人中心

每个页面：先读对应的设计描述文件（我会提供），
然后按我们已有的组件库（读 /src/components 了解现有组件），
尽量复用已有组件，只在必要时创建新组件。

我们从首页开始。

实现动效

Figma 里的动效信息：

实现这个「课程卡片悬停」的动效：

Figma 里的标注：
- 过渡时长：200ms
- 缓动：ease-out
- 变化：
  卡片整体上移 4px（translateY）
  shadow 从 0 1px 3px rgba(0,0,0,0.1) 变为 0 8px 24px rgba(0,0,0,0.15)
  图片区域轻微放大（scale 1.02）

用 Tailwind 的 transition + group hover 实现，不要用内联样式。