figma-restoration-tools
Version:
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.
246 lines • 6.87 kB
JSON
{
"componentName": "FolderListItem",
"description": "文件夹列表项组件 - 深度优化后达到91.32%还原度",
"achievedQuality": {
"matchPercentage": 91.32,
"regionMatchPercentage": 97.61,
"qualityLevel": "良好",
"optimizedVersion": true
},
"visualElements": {
"folderIcon": "绿色立体文件夹图标",
"title": "新建文件夹",
"timestamp": "2023-09-01 14:36",
"count": "0",
"checkbox": "方形复选框",
"background": "浅灰色背景条"
},
"layout": {
"type": "flex",
"direction": "row",
"alignItems": "center",
"justifyContent": "flex-start",
"gap": "0px",
"padding": "0px",
"backgroundColor": "transparent",
"width": "100%",
"height": "64px"
},
"elements": [
{
"id": "mainContent",
"type": "container",
"layout": {
"type": "relative",
"width": "311px",
"height": "62px",
"backgroundColor": "#F7F7F7",
"borderRadius": "4px",
"position": "relative"
},
"renderingOptimizations": {
"fontSmoothing": "antialiased",
"gpuAcceleration": "translateZ(0)",
"description": "应用CSS渲染优化提升视觉精度"
},
"children": [
{
"id": "folderIcon",
"type": "asset",
"name": "folder-icon",
"fileName": "folder-icon.svg",
"styles": {
"position": "absolute",
"left": "8px",
"top": "10px",
"width": "40px",
"height": "40px"
},
"renderingOptimizations": {
"imageRendering": "crisp-edges",
"gpuAcceleration": "translateZ(0)"
},
"figmaId": "4211:72475"
},
{
"id": "titleText",
"type": "text",
"content": "新建文件夹",
"styles": {
"position": "absolute",
"left": "56px",
"top": "8px",
"width": "80px",
"height": "24px",
"fontFamily": "PingFang SC",
"fontWeight": 500,
"fontSize": "16px",
"lineHeight": "1.5em",
"color": "#212121"
},
"figmaId": "4211:72484"
},
{
"id": "metaInfo",
"type": "container",
"layout": {
"type": "flex",
"direction": "row",
"alignItems": "center",
"gap": "6px"
},
"styles": {
"position": "absolute",
"left": "56px",
"top": "36px"
},
"children": [
{
"id": "timestamp",
"type": "text",
"content": "2023-09-01 14:36",
"styles": {
"fontFamily": "PingFang SC",
"fontWeight": 400,
"fontSize": "12px",
"lineHeight": "1.33em",
"color": "#9C9C9C"
},
"figmaId": "4211:72477"
},
{
"id": "projectInfo",
"type": "container",
"layout": {
"type": "flex",
"direction": "row",
"alignItems": "center",
"gap": "2px"
},
"children": [
{
"id": "projectIcon",
"type": "asset",
"name": "project-icon",
"fileName": "project-icon.svg",
"styles": {
"width": "12px",
"height": "12px"
},
"renderingOptimizations": {
"imageRendering": "crisp-edges"
},
"figmaId": "4211:72480"
},
{
"id": "count",
"type": "text",
"content": "0",
"styles": {
"fontFamily": "PingFang SC",
"fontWeight": 400,
"fontSize": "12px",
"lineHeight": "1.33em",
"color": "#9C9C9C"
},
"figmaId": "4211:72481"
}
]
}
]
}
]
},
{
"id": "checkbox",
"type": "asset",
"name": "checkbox",
"fileName": "checkbox.svg",
"styles": {
"width": "48px",
"height": "64px",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
},
"renderingOptimizations": {
"imageRendering": "crisp-edges"
},
"figmaId": "4211:72485"
}
],
"assets": [
{
"name": "folder-icon",
"fileName": "folder-icon.svg",
"nodeId": "4211:72475",
"type": "svg",
"description": "绿色立体文件夹图标",
"optimized": true,
"sizeReduction": "26.86%"
},
{
"name": "project-icon",
"fileName": "project-icon.svg",
"nodeId": "4211:72480",
"type": "svg",
"description": "项目图标",
"optimized": true,
"sizeReduction": "30.11%"
},
{
"name": "checkbox",
"fileName": "checkbox.svg",
"nodeId": "4211:72485",
"type": "svg",
"description": "复选框图标",
"optimized": true,
"sizeReduction": "4.95%"
}
],
"redundantElementsFiltered": [
{
"id": "I4211:72475;1876:87586",
"name": "Bounds",
"reason": "opacity为0.00009999999747378752，视觉上完全不可见"
},
{
"id": "4211:72478",
"name": "Vector 297",
"reason": "width为0，无实际视觉效果"
},
{
"id": "I4211:72480;2464:128072",
"name": "Group 295",
"reason": "width和height都为0的空组"
}
],
"deepAnalysisFindings": {
"expectedPngAnalysis": "确认橙色边框为Figma开发模式的选中状态，非设计本身",
"diffPngAnalysis": "主要差异为字体渲染导致的像素差异，已可忽略",
"renderingOptimizations": [
"应用crisp-edges图像渲染",
"添加字体抗锯齿优化",
"启用GPU加速",
"禁用图像压缩提升精度"
],
"finalQuality": "91.32%还原度，区域匹配97.61%，达到良好等级"
},
"cssVariables": {
"backgroundColor": "#F7F7F7",
"titleColor": "#212121",
"metaColor": "#9C9C9C",
"borderColor": "#CCCCCC",
"fontFamily": "PingFang SC"
},
"optimizations": {
"correctTwoColumnLayout": true,
"useAbsolutePositioningInMainContent": true,
"simplifiedStructure": true,
"filteredRedundantElements": 3,
"visualDriven": true,
"renderingOptimized": true,
"svgOptimized": true,
"deepAnalysisCompleted": true
}
}