figma-restoration-mcp-vue-tools/src/restoration-tips/快速参考卡片.md

Professional Figma Component Restoration Kit - MCP tools with snapDOM-powered high-quality screenshots, intelligent shadow detection, and advanced diff analysis for Vue component restoration. Features enhanced figma_compare with color-coded region analysi

# 🚀 快速参考卡片

> 团队成员的随身工具包 - 常见问题的即时解决方案

## 🆘 紧急救援

### 还原度<90% 急救包
```bash
# 1. 检查边框问题
outline → border + 调整尺寸

# 2. 检查尺寸理解
图片尺寸 ÷ 3 = CSS尺寸

# 3. 检查盒模型
添加 box-sizing: border-box

# 4. 检查内容裁剪
添加 overflow: hidden
```

### 截图失败急救
```bash
# 1. 检查边框实现
outline → border

# 2. 检查元素可见性
display: none → display: block

# 3. 检查开发服务器
端口1932是否正常运行

# 4. 检查组件路径
确认组件名称和路径正确
```

## 📏 尺寸速查表

| Figma显示 | 实际CSS | 说明 |
|-----------|---------|------|
| 192px | 64px | 3倍图 ÷ 3 |
| 300px | 100px | 3倍图 ÷ 3 |
| 600px | 200px | 3倍图 ÷ 3 |

### 边框尺寸计算
```
strokeAlign: OUTSIDE
最终尺寸 = Figma尺寸 + (边框宽度 × 2)

strokeAlign: INSIDE  
最终尺寸 = Figma尺寸 (使用border-box)

strokeAlign: CENTER
最终尺寸 = Figma尺寸 + 边框宽度
```

## 🎨 样式速查

### 常用CSS模板
```css
/* 基础组件模板 */
.component {
  box-sizing: border-box;
  display: flex;
  /* 根据Figma layout设置 */
}

/* 边框模板 */
.with-border {
  border: 2px solid #000;
  /* 不要用outline！ */
}

/* 文本优化模板 */
.text-optimized {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 内容裁剪模板 */
.clips-content {
  overflow: hidden;
}
```

## 🔍 问题诊断流程图

```
还原度不达标？
├── <90%
│   ├── 检查边框实现 → outline改border
│   ├── 检查尺寸设置 → 图片尺寸÷3
│   └── 检查基础布局 → flex vs absolute
├── 90-95%
│   ├── 检查文本渲染 → 字体平滑优化
│   ├── 检查间距精度 → gap vs margin
│   └── 检查特殊效果 → 考虑素材化
└── 95-98%
    ├── 像素级调优 → 精确数值匹配
    ├── 边缘效果处理 → 阴影、圆角等
    └── 浏览器差异 → 跨浏览器测试
```

## 📱 工具命令速查

### MCP工具调用
```javascript
// 获取Figma数据
mcp_figma_context_get_figma_data({
  nodeId: "2836:1478",
  fileKey: "hdyf6u2eqRkmXY0I7d9S98",
  savePath: "/absolute/path/to/figma-data"
})

// 下载图片
mcp_figma_context_download_figma_images({
  fileKey: "hdyf6u2eqRkmXY0I7d9S98",
  nodes: [{"nodeId": "2836:1478", "fileName": "expected.png"}],
  localPath: "/absolute/path/to/results",
  pngScale: 3
})

// 截图对比
mcp_figma_restoration_mcp_vue_tools_figma_compare({
  projectPath: "/absolute/path/to/project",
  componentName: "ComponentName",
  threshold: 0.02
})
```

### 开发服务器
```bash
# 启动开发服务器
npm run dev
# 或
yarn dev

# 检查端口1932
lsof -i :1932

# 重启服务器
pkill -f "vite.*1932"
npm run dev
```

## 🏆 还原度等级

| 等级 | 还原度 | 图标 | 行动 |
|------|--------|------|------|
| 完美 | ≥99% | 🏆 | 记录最佳实践 |
| 优秀 | 98-99% | 🥇 | 可以发布 |
| 良好 | 95-98% | 🥈 | 继续优化 |
| 一般 | 90-95% | 🥉 | 重点改进 |
| 不合格 | <90% | ❌ | 需要返工 |

## 🎯 优化优先级

### 高优先级（影响>5%）
1. **边框问题** - outline → border
2. **尺寸错误** - 3倍图理解
3. **布局错位** - 盒模型设置
4. **内容溢出** - clipsContent处理

### 中优先级（影响2-5%）
1. **文本渲染** - 字体平滑优化
2. **间距精度** - gap vs margin
3. **特殊效果** - 阴影、圆角等
4. **素材处理** - 复杂元素素材化

### 低优先级（影响<2%）
1. **微调优化** - 像素级精确
2. **性能优化** - 代码简化
3. **兼容性** - 跨浏览器测试
4. **可维护性** - 代码规范

## 📞 求助渠道

### 技术问题
1. **搜索知识库** - 先查现有文档
2. **查看案例** - 参考成功案例
3. **询问专家** - @技术专家
4. **团队讨论** - 技术群组

### 工具问题
1. **检查配置** - MCP服务器状态
2. **重启服务** - 开发服务器重启
3. **查看日志** - 控制台错误信息
4. **更新工具** - 确保版本最新

---

💡 **使用提示**: 将此卡片加入书签，遇到问题时快速查找对应解决方案！