# 🎨 设计稿测量模板

> 适用于 Sketch MCP、Figma 等设计工具的测量脚本模板

---

## 🤖 Agent 使用指令

**触发词**：
- "测量选中的组件"
- "获取设计稿边距"
- "分析图层样式"
- "获取渐变色参数"

**自动匹配模板**：

| 场景 | 对应模板 |
|------|----------|
| 分析整体结构 | `structure-overview.js` |
| 测量单个组件 | `component-measurement.js` |
| 计算间距关系 | `gap-measurement.js` |
| 提取样式参数 | `style-extraction.js` |
| 分析嵌套Symbol | `nested-symbol-analysis.js` |

---

## 📁 模板文件

### 1. structure-overview.js
用途：分析选中元素的整体结构和层级

### 2. component-measurement.js  
用途：测量单个组件的尺寸、边距、内边距（自动计算相对值）

### 3. gap-measurement.js
用途：计算同级元素之间的间距

### 4. style-extraction.js
用途：提取颜色、渐变、阴影、圆角等样式参数

### 5. nested-symbol-analysis.js
用途：递归分析 Symbol 内部嵌套结构

---

## 🔧 使用方式

### 方式一：直接调用 MCP 工具
```
调用 get_standard_by_id({ id: 'sketch-mcp' }) 获取完整脚本
```

### 方式二：复制模板脚本
```javascript
// 从模板文件中复制脚本到 mcp_sketch_run_code
```

---

## ⚠️ 核心原则

1. **测量 = 记录 + 计算**
   - 记录绝对坐标
   - 立即计算相对边距
   - 转换为目标框架可用的值

2. **坐标系转换**
   - iOS SafeArea 偏移：44px（刘海屏）/ 20px（非刘海）
   - Android 状态栏：24-48dp
   - Web：通常不需要

3. **渐变角度转换**
   - Sketch: from{x,y} → to{x,y}（0-1 范围）
   - CSS: `linear-gradient(angle, ...)`
   - Flutter: `Alignment(x, y)`（-1 到 1 范围）

---

**维护者**: MTA工作室  
**版本**: v1.0  
**创建日期**: 2025-01-21