figma-restoration-tools/src/restoration-tips/README.md

Professional Figma Component Restoration Kit - MCP tools with snapDOM-powered high-quality screenshots, intelligent shadow detection, and smart debugging for Vue component restoration. Includes figma_compare and snapdom_screenshot tools.

# 🧠 Figma组件还原经验知识库

## 📋 目录介绍
本目录用于存储Figma组件还原过程中遇到的问题和解决方案，形成可复用的技术经验库。

## 📝 文件命名规范

### 格式
`{问题类型}-{核心关键词}.md`

### 示例
- `冗余元素识别-透明度为0的边界元素.md`
- `flex布局优化-文件夹图标位置偏移问题.md`
- `字体渲染优化-PingFangSC抗锯齿设置.md`
- `截图对比-背景色差异导致还原度低.md`

### 问题类型分类
- **冗余元素识别**: 识别和移除不必要的Figma元素
- **flex布局优化**: 布局相关的问题和解决方案
- **字体渲染优化**: 字体、文本相关的还原问题
- **截图对比**: 截图和对比分析相关的问题
- **素材处理**: 图标、图片等素材相关问题
- **组件结构**: Vue组件结构设计相关问题
- **CSS样式**: 样式实现相关的技术难点

## 📚 内容结构模板

```markdown
# {问题类型}：{详细标题}

## 问题描述
详细描述遇到的问题，包括现象、影响等

## 问题分析  
分析问题的根本原因，可以包含：
- 技术原因
- Figma设计特殊性
- 工具限制等

## 解决方案
详细的解决步骤和方法

### 1. 子步骤一
具体操作和代码

### 2. 子步骤二
具体操作和代码

## 代码示例
\`\`\`css/javascript/vue
关键代码片段
\`\`\`

## 改进效果
量化的改进数据，如：
- 还原度提升: xx% → yy%
- 性能提升: xx ms → yy ms

## 关键经验
核心的技术要点和原理

## 注意事项
需要特别注意的点，避免踩坑

## 适用场景
这个解决方案适用的场景和条件
```

## 🔄 使用流程

### 记录经验时机
1. **发现新的技术难点**时
2. **创新性解决方案**时  
3. **用户明确指出**需要保存的经验时
4. **还原度显著提升**的关键操作时

### 创建流程
1. 按命名规范创建文件
2. 使用模板填写内容
3. 包含具体的代码示例
4. 记录量化的改进效果

### 查找使用
1. 按问题类型快速定位
2. 搜索关键词找到相关经验
3. 复用解决方案和代码
4. 根据具体情况调整应用

## 📊 当前经验统计

### 已收录经验
- [flex布局优化-文件夹列表项尺寸匹配问题.md](./flex布局优化-文件夹列表项尺寸匹配问题.md)
- [素材识别-容器节点vs具体素材元素判断策略.md](./素材识别-容器节点vs具体素材元素判断策略.md) 🆕
- [截图对比-3倍图缩放与样式尺寸设置.md](./截图对比-3倍图缩放与样式尺寸设置.md) 🆕
- [布局分析-FolderItem大面积差异问题.md](./布局分析-FolderItem大面积差异问题.md)

### 待补充领域
- 冗余元素识别方法
- 字体渲染优化技巧
- 复杂布局还原策略
- 组件性能优化方案
- SVG优化技巧
- 浏览器渲染差异处理

## 🎯 目标
通过持续积累和分享经验，提升Figma组件还原的：
- **准确性**: 更高的还原度
- **效率性**: 更快的还原速度  
- **一致性**: 更统一的实现方案
- **可维护性**: 更规范的代码质量

---

💡 **提示**: 当你在还原过程中遇到问题或找到好的解决方案时，请及时记录到这个知识库中！