figma-designer

Figma Designer

“以像素级精度将 Figma 设计稿转化为可直接用于实现的规格说明”

概览

此技能通过可用的 Figma 集成分析 Figma 设计稿，并生成设计证据。prd-planner 负责产品需求和技术 PRD 方法；此技能则提供视觉事实和未解决的设计问题。

前置条件

Figma MCP 服务

使用此技能前，请确保宿主已提供 Figma MCP 服务或插件。工具名称会因宿主和插件版本而异，因此请检查当前会话中可用的 Figma 工具，而不要假设名称固定。所需能力包括：

• 读取文件或页面元数据
• 读取选定节点或节点详情
• 在可用时读取组件和样式信息

此技能的触发条件

在以下情况下触发：

• 提供 Figma 链接（https://www.figma.com/file/...）
• 上传设计截图并提及“Figma”
• 表示“分析此设计”或“提取设计规格”
• 要求“根据 Figma 创建 PRD”

设计分析工作流

阶段 1：获取设计数据

Input: Figma URL or File Key
  ↓
Extract File Key from URL
  ↓
Call the available Figma metadata tool
  ↓
Call the available Figma node/detail tool
  ↓
Parse frame, component, and text nodes

阶段 2：提取设计令牌

创建全面的设计令牌清单：

// Design Token Structure
interface DesignTokens {
  colors: {
    primary: string[];
    secondary: string[];
    neutral: string[];
    semantic: {
      success: string;
      warning: string;
      error: string;
      info: string;
    };
  };
  typography: {
    fontFamilies: Record<string, string>;
    fontSizes: Record<string, number>;
    fontWeights: Record<string, number>;
    lineHeights: Record<string, number>;
    letterSpacing: Record<string, number>;
  };
  spacing: {
    scale: number;  // 4, 8, 12, 16, etc.
    values: Record<string, number>;
  };
  borders: {
    radii: Record<string, number>;
    widths: Record<string, number>;
  };
  shadows: Array<{
    name: string;
    values: string[];
  }>;
}

阶段 3：分析组件层级

File
├── Frames (Pages/Screens)
│   ├── Component Instances
│   │   ├── Primary Button
│   │   ├── Input Field
│   │   └── Card
│   └── Text Layers
│       ├── Headings
│       ├── Body
│       └── Labels

对于每个组件，提取：

• 属性：尺寸、变体、状态
• 布局：弹性方向、对齐方式、间距、内边距
• 样式：填充、描边、效果
• 内容：文本内容、图标、图像
• 约束：响应式行为

阶段 4：生成视觉规格说明

为每个屏幕使用以下模板：

## Screen: [Screen Name]

### Layout Structure

┌─────────────────────────────────────────┐ │ [Header/Nav] │ ├─────────────────────────────────────────┤ │ │ │ [Main Content] │ │ ┌───────────┐ ┌───────────┐ │ │ │ Card 1 │ │ Card 2 │ │ │ └───────────┘ └───────────┘ │ │ │ ├─────────────────────────────────────────┤ │ [Footer] │ └─────────────────────────────────────────┘

### Design Specifications

#### Colors

| Token | Value | Usage |
|-------|-------|-------|
| Primary | `#007AFF` | Primary buttons, links |
| Background | `#FFFFFF` | Screen background |
| Surface | `#F5F5F7` | Cards, sections |
| Text Primary | `#1C1C1E` | Headings, body |
| Text Secondary | `#8E8E93` | Captions, labels |

#### Typography

| Style | Font | Size | Weight | Line Height | Letter Spacing |
|-------|------|------|--------|------------|---------------|
| Display Large | SF Pro Display | 28px | Bold (700) | 34px | -0.5px |
| Heading 1 | SF Pro Display | 24px | Bold (700) | 32px | -0.3px |
| Heading 2 | SF Pro Display | 20px | Semibold (600) | 28px | -0.2px |
| Body Large | SF Pro Text | 17px | Regular (400) | 24px | -0.4px |
| Body | SF Pro Text | 15px | Regular (400) | 22px | -0.3px |
| Caption | SF Pro Text | 13px | Regular (400) | 18px | -0.1px |

#### Spacing

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Icon padding |
| sm | 8px | Tight spacing |
| md | 12px | Card padding |
| lg | 16px | Section spacing |
| xl | 24px | Large gaps |
| 2xl | 32px | Page margins |

#### Component: Primary Button

```typescript
interface PrimaryButtonProps {
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'tertiary';
  disabled?: boolean;
}

// Sizes
size.small = {
  height: 32px,
  paddingHorizontal: 12px,
  fontSize: 15,
  iconSize: 16,
}

size.medium = {
  height: 40px,
  paddingHorizontal: 16px,
  fontSize: 15,
  iconSize: 20,
}

size.large = {
  height: 48px,
  paddingHorizontal: 24px,
  fontSize: 17,
  iconSize: 24,
}

// Variants
variant.primary = {
  backgroundColor: '#007AFF',
  color: '#FFFFFF',
}

variant.secondary = {
  backgroundColor: '#F5F5F7',
  color: '#007AFF',
}

variant.tertiary = {
  backgroundColor: 'transparent',
  color: '#007AFF',
}

约束与响应式行为

元素	约束	响应式行为
页眉	左、右、上	滚动时固定
侧边栏	左、上、下	在移动设备上折叠为抽屉
内容	左、右（16px）	在移动设备上占满宽度

交互状态

元素	默认	悬停	按下	已禁用
主按钮	opacity: 1	opacity: 0.8	opacity: 0.6	opacity: 0.4
图标按钮	opacity: 1	background: rgba(0,0,0,0.05)	background: rgba(0,0,0,0.1)	opacity: 0.3
卡片	shadow: sm	shadow: md	-	opacity: 0.6

## Output Formats

### Option 1: Visual Spec Document (Default)

Generates a design specification document:

docs/{feature}-design-spec.md

### Option 2: PRD Evidence Pack

Provide screen intent, design tokens, component states, responsive rules,
accessibility observations, and open product questions as inputs to
`prd-planner`. Do not invent business requirements from visual design alone.

## Quick Reference: Design Token Categories

### Always Extract These

| Category | What to Extract | Why |
|----------|----------------|-----|
| **Colors** | Hex/RGBA values | Theme consistency |
| **Typography** | Font family, size, weight, spacing | Text hierarchy |
| **Spacing** | Padding, margin, gap values | Layout alignment |
| **Borders** | Radius, width values | Shape consistency |
| **Shadows** | Offset, blur, spread, color | Depth perception |
| **Icons** | Name, size, color | Visual consistency |
| **Images** | URL, dimensions, fit mode | Asset management |

## Design Review Checklist

Before generating design evidence, verify:

- [ ] All screens are accounted for
- [ ] Design tokens are extracted
- [ ] Component variants are documented
- [ ] Responsive behavior is specified
- [ ] Interaction states are defined
- [ ] Accessibility (WCAG) is considered
  - [ ] Color contrast ratio ≥ 4.5:1
  - [ ] Touch targets ≥ 44x44px
  - [ ] Focus indicators visible

## Frame Analysis Template

For each frame/screen in the Figma file:

```markdown
## Frame: {Frame Name}

### Purpose
{What this screen does}

### Elements

| Element | Type | Styles | Props |
|---------|------|--------|-------|
| {Name} | {Component/Text/Vector} | {css} | {props} |
| {Name} | {Component/Text/Vector} | {css} | {props} |

### Layout
- Container: {width, height, fill}
- Position: {absolute/relative}
- Constraints: {left, right, top, bottom}
- Auto Layout: {direction, spacing, padding, alignment}

### Content Hierarchy
1. {Primary element}
2. {Secondary element}
3. {Tertiary element}

### Notes
{Any special considerations}

与其他技能集成

典型工作流

Figma URL → figma-designer → Visual Specs
                                ↓
                           prd-planner → PRD
                                ↓
                           implementation → Code
                                ↓
                           code-reviewer → Quality Check

移交开发

生成规格说明后：

## Developer Handoff

### Design Files
- Figma: {url}
- Design Spec: {link}

### Design Tokens
- Generated: `tokens.ts`
- Color palette: `colors.ts`
- Typography: `typography.ts`

### Component Library
- Storybook: {url}
- Component docs: {link}

### Assets
- Icons: {folder}
- Images: {folder}
- Exports: {format}

最佳实践

应该做

✅ 为关键尺寸提取准确的像素值
✅ 记录组件变体和状态
✅ 纳入响应式断点
✅ 注明平台差异（iOS 与 Android）
✅ 纳入无障碍考量
✅ 将设计令牌导出为常量

不应该做

❌ 不要对间距值取整（使用准确的 4px/8px/12px）
❌ 不要忽略悬停/焦点状态
❌ 不要跳过约束行为
❌ 不要忘记空状态
❌ 不要遗漏加载状态
❌ 未经验证，不要假设平台默认值

示例与平台说明

完整示例输出及特定平台的注意事项，请参阅 references/example-output.md。