mta-mcp 3.3.0 → 3.5.0

package/agents/flutter.agent.md

@@ -1,7 +1,7 @@
 # Flutter 开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.3.0 | 最后更新: 2026-01-23
+> 版本: v3.5.0 | 最后更新: 2026-01-23
 
 ---
 
@@ -113,24 +113,70 @@ get_standard_by_id({ ids: ['flutter', 'flutter-ui-system'] })
 
 **触发词**：精确还原、深度还原、像素级还原、完美还原
 
-当用户使用以上触发词时，执行深度还原流程：
+当用户使用以上触发词时，执行 Flutter 专属深度还原流程：
 
 ```
 1. 检查用户是否已选中 Sketch 画板（未选中则提示）
-2. 调用深度测量脚本获取完整元素树
-3. 分析每个元素的 layoutHints（CENTER/COLUMN/ROW 等）
-4. 计算响应式参数（禁止硬编码尺寸）
-5. 生成适配多设备的代码
+2. 调用深度测量脚本获取 Layout Intent
+3. 按照 Flutter 转换规范映射代码
+4. 使用 Token 系统（$c, $t, $s, $r）替代硬编码
+5. 在多设备尺寸验证
 ```
 
-> 📖 **完整脚本和流程**：`get_standard_by_id({ id: 'sketch-mcp' })`
+#### Flutter Layout Intent 快速映射
+
+| Layout Intent | Flutter 代码 |
+|---------------|-------------|
+| `CENTER` | `Center(child: ...)` |
+| `HORIZONTAL_CENTER` | `Row(mainAxisAlignment: MainAxisAlignment.center)` |
+| `FILL + margin:16` | `Padding(horizontal: 16) + SizedBox(width: double.infinity)` |
+| `COLUMN + gap:16` | `Column(children: [..., Gap(16), ...])` |
+| `ROW + gap:12` | `Row(children: [..., Gap.h(12), ...])` |
+
+#### Icon 使用规范（重要）
+
+**检测到 icon 时的处理流程**：
+
+```
+1. 深度测量脚本会标记 `isIcon: true` 并提示导出为 SVG 200h
+2. 将 SVG 文件放入 assets/icons/ 目录
+3. 在 pubspec.yaml 中声明 assets
+4. 使用 flutter_svg 包加载
+```
+
+**Flutter Icon 使用方式**：
+
+| 场景 | 代码示例 | 说明 |
+|------|---------|------|
+| **SVG Icon** | `SvgPicture.asset('assets/icons/menu.svg', width: 24, height: 24, colorFilter: ColorFilter.mode($c.iconPrimary, BlendMode.srcIn))` | 推荐，支持颜色替换 |
+| **系统 Icon** | `Icon(Icons.menu, size: 24, color: $c.iconPrimary)` | 优先使用 Material Icons |
+| **固定尺寸** | `SizedBox(width: 24, height: 24, child: icon)` | 确保 icon 不被拉伸 |
+
+**⚠️ Icon 禁止规则**：
+
+| ❌ 禁止 | ✅ 正确 |
+|--------|--------|
+| `Image.asset('icon.png')` | `SvgPicture.asset('icon.svg')` |
+| `width: 32, height: 28` | 保持 1:1 宽高比或使用原始比例 |
+| 硬编码颜色 | `colorFilter: ColorFilter.mode($c.iconPrimary, ...)` |
+
+#### Flutter 禁止规则
+
+| ❌ 禁止 | ✅ 正确 |
+|--------|--------|
+| `width: 343` | `MediaQuery.of(context).size.width - 32` |
+| `Color(0xFF...)` | `$c.primary` |
+| `fontSize: 14` | `$t.bodyMd` |
+| `SizedBox(height: 16)` | `Gap(16)` 或 `$s.md` |
+
+> 📖 **完整转换规范**：`get_standard_by_id({ id: 'sketch-mcp' })` 查看 "Flutter 深度还原转换规范" 章节
 
 ### 核心原则：测量 + 计算
 
-**绝不直接使用测量数据！必须分析计算后再转换为代码参数。**
+**绝不直接使用测量数据！必须分析 Layout Intent 后再转换。**
 
 ```
-测量 → 分析（理解设计意图） → 计算（转换参数） → 编码
+测量 → Layout Intent → Flutter 映射 → Token 替换 → 验证
 ```
 
 ### 配合 Sketch MCP 使用测量模板

package/agents/vue3.agent.md

@@ -1,7 +1,7 @@
 # Vue 3 + TypeScript 开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.0.0 | 最后更新: 2026-01-16
+> 版本: v3.5.0 | 最后更新: 2026-01-23
 
 ---
 
@@ -140,6 +140,80 @@ get_standard_by_id({ ids: ['vue3-composition', 'element-plus', 'i18n'] })
 
 > ⚠️ 详细规范请调用：`get_standard_by_id({ id: 'design-restoration' })`
 
+### 🎯 深度还原模式（像素级）
+
+**触发词**：精确还原、深度还原、像素级还原、完美还原
+
+当用户使用以上触发词时，执行 Vue/CSS 专属深度还原流程：
+
+```
+1. 检查用户是否已选中 Sketch 画板（未选中则提示）
+2. 调用深度测量脚本获取 Layout Intent
+3. 按照 Vue/CSS 转换规范映射代码
+4. 使用 CSS 变量替代硬编码值
+5. 在 375px / 1920px 视口验证
+```
+
+#### Vue/CSS Layout Intent 快速映射
+
+| Layout Intent | CSS 代码 |
+|---------------|---------|
+| `CENTER` | `display: flex; justify-content: center; align-items: center;` |
+| `HORIZONTAL_CENTER` | `margin: 0 auto;` 或 `justify-content: center;` |
+| `FILL + margin:16` | `width: calc(100% - 32px); margin: 0 16px;` |
+| `COLUMN + gap:16` | `display: flex; flex-direction: column; gap: 16px;` |
+| `ROW + gap:12` | `display: flex; gap: 12px;` |
+| `GRID` | `display: grid; grid-template-columns: repeat(...); gap: 16px;` |
+
+#### Icon 使用规范（重要）
+
+**检测到 icon 时的处理流程**：
+
+```
+1. 深度测量脚本会标记 `isIcon: true` 并提示导出为 SVG 200h
+2. 将 SVG 文件放入 src/assets/icons/ 目录
+3. 在 Vue 组件中引入使用
+```
+
+**Vue Icon 使用方式**：
+
+| 场景 | 代码示例 | 说明 |
+|------|---------|------|
+| **直接引入 SVG** | `<img :src="menuIcon" class="icon" />` + `import menuIcon from '@/assets/icons/menu.svg'` | 推荐，便于维护 |
+| **内联 SVG** | `<svg>...</svg>` 直接复制 SVG 代码 | 支持 CSS 样式控制 |
+| **Icon 组件库** | `<el-icon><Menu /></el-icon>` | Element Plus 项目优先使用 |
+| **SVG Sprite** | `<svg><use xlink:href="#icon-menu"></use></svg>` | 多个 icon 复用时使用 |
+
+**⚠️ Icon 禁止规则**：
+
+| ❌ 禁止 | ✅ 正确 |
+|--------|--------|
+| `<img src="icon.png">` | `<img src="icon.svg">` 或 SVG sprite |
+| `width: 32px; height: 28px` | 保持 1:1 宽高比 `width: 24px; height: 24px;` |
+| 硬编码颜色 | `fill: var(--color-icon-primary);` |
+
+**CSS 样式控制**：
+
+```css
+.icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--color-icon-primary); /* SVG 内联时生效 */
+  color: var(--color-icon-primary); /* 部分 icon 组件库使用 */
+}
+```
+
+#### Vue/CSS 禁止规则
+
+| ❌ 禁止 | ✅ 正确 |
+|--------|--------|
+| `width: 343px` | `width: calc(100% - 32px)` |
+| `color: #3B82F6` | `color: var(--color-primary)` |
+| `font-size: 14px` | `font-size: var(--font-body-md)` |
+| `margin-bottom: 16px` | `gap: 16px`（在 flex 容器上） |
+
+> 📖 **完整转换规范**：`get_standard_by_id({ id: 'sketch-mcp' })` 查看 "Vue 3 / CSS 深度还原转换规范" 章节
+
 ### 快速提示
 
 | 关键点 | 说明 |

package/agents/wechat-miniprogram.agent.md

@@ -1,7 +1,7 @@
 # 微信小程序开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.0.0 | 最后更新: 2026-01-16
+> 版本: v3.5.0 | 最后更新: 2026-01-23
 
 ---
 
@@ -89,14 +89,107 @@ miniprogram/
 
 > ⚠️ 详细规范请调用：`get_standard_by_id({ id: 'design-restoration' })`
 
+### 🎯 深度还原模式（像素级）
+
+**触发词**：精确还原、深度还原、像素级还原、完美还原
+
+当用户使用以上触发词时，执行小程序专属深度还原流程：
+
+```
+1. 检查用户是否已选中 Sketch 画板（未选中则提示）
+2. 调用深度测量脚本获取 Layout Intent
+3. 按照小程序转换规范映射代码（注意 rpx）
+4. 使用 CSS 变量替代硬编码值
+5. 在微信开发者工具多机型预览验证
+```
+
+#### 小程序 Layout Intent 快速映射
+
+| Layout Intent | WXSS 代码 |
+|---------------|----------|
+| `CENTER` | `display: flex; justify-content: center; align-items: center;` |
+| `FILL + margin:16` | `width: calc(100% - 64rpx); margin: 0 32rpx;` |
+| `COLUMN + gap:16` | `display: flex; flex-direction: column;` + 子元素 `margin-bottom: 32rpx;` |
+| `ROW + gap:12` | `display: flex;` + 子元素 `margin-right: 24rpx;` |
+
+#### Icon 使用规范（重要）
+
+**检测到 icon 时的处理流程**：
+
+```
+1. 深度测量脚本会标记 `isIcon: true` 并提示导出为 SVG 200h
+2. 将 SVG 转换为 Base64 或使用图片格式
+3. 放入 /images/icons/ 目录
+```
+
+**小程序 Icon 使用方式**：
+
+| 场景 | 代码示例 | 说明 |
+|------|---------|------|
+| **Image 组件** | `<image src="/images/icons/menu.svg" class="icon" mode="aspectFit" />` | SVG 支持有限，优先 PNG |
+| **字体图标** | `<text class="iconfont icon-menu"></text>` | 推荐，体积小，支持颜色 |
+| **Base64** | `<image src="data:image/svg+xml;base64,..." />` | 小图标可内联 |
+
+**⚠️ 小程序 Icon 限制**：
+
+| ❌ 禁止 | ✅ 正确 |
+|--------|--------|
+| 直接使用外部 SVG | 转换为 PNG 或使用字体图标 |
+| `width: 32rpx; height: 28rpx` | 保持 1:1 宽高比 `width: 48rpx; height: 48rpx;` |
+| 硬编码颜色 | `color: var(--icon-color-primary);` |
+
+**WXSS 样式控制**：
+
+```css
+.icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.iconfont {
+  font-size: 48rpx;
+  color: var(--icon-color-primary);
+}
+```
+
+**字体图标配置**（推荐）：
+
+```css
+/* app.wxss */
+@font-face {
+  font-family: 'iconfont';
+  src: url('data:font/woff2;base64,...');
+}
+```
+
+#### 小程序特殊规则（重要）
+
+| 设计稿 (px) | 小程序 (rpx) | 说明 |
+|------------|-------------|------|
+| 16px | 32rpx | 间距、边距 |
+| 343px | `calc(100% - 64rpx)` | 宽度优先用 calc |
+| 14px (字号) | 28rpx | 字号也需转换 |
+
+**⚠️ 小程序不支持 `gap` 属性**，需用 `margin` 模拟，配合 `:last-child { margin: 0; }` 移除最后一个元素的边距。
+
+#### 小程序禁止规则
+
+| ❌ 禁止 | ✅ 正确 |
+|--------|--------|
+| `width: 686rpx` | `width: calc(100% - 64rpx)` |
+| `color: #3B82F6` | `color: var(--color-primary)` |
+| `gap: 32rpx` | `margin-bottom: 32rpx`（不支持 gap） |
+
+> 📖 **完整转换规范**：`get_standard_by_id({ id: 'sketch-mcp' })` 查看 "微信小程序深度还原转换规范" 章节
+
 ### 快速提示
 
 | 关键点 | 说明 |
 |--------|------|
 | **渐变色** | 检查 `fillType` 后读取 `gradient.stops`，勿直接用 `color` 属性 |
 | **全局样式** | 还原前先搜索项目现有变量（app.wxss 中的 CSS 变量） |
-| **rpx 换算** | 设计稿 px * 2 = rpx（基于 750px 设计稿） |
-| **阴影语法** | `box-shadow: 8px 8px 20px rgba(28,43,69,0.15)` |
+| **rpx 换算** | 设计稿 px * 2 = rpx（基于 375px 设计稿） |
+| **阴影语法** | `box-shadow: 16rpx 16rpx 40rpx rgba(28,43,69,0.15)` |
 
 ### 相关规范
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mta-mcp",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "MTA - 智能编码助手 MCP 服务器（规范 + 技能 + 诊断 + 模板 + 记忆 + 思考）",
   "type": "module",
   "main": "./dist/index.js",

package/standards/mcp-tools/sketch-mcp.md

@@ -58,14 +58,27 @@ const alpha = parseInt(colorHex.slice(7, 9), 16) / 255;
 - "像素级还原 XX 页面"
 - "完美还原 XX 页面"
 
-### 模式说明
+### 架构说明
 
-深度还原模式用于需要 **100% 精确还原设计稿** 的场景。与普通还原不同，此模式会：
+深度还原采用 **双层架构**，确保通用性的同时不牺牲各框架的专业性：
 
-1. **完整提取**：递归获取画板下所有层级的元素数据
-2. **智能分析**：根据元素的实际展示效果推断设计意图
-3. **精确计算**：将绝对坐标转换为相对布局参数
-4. **响应式适配**：禁止硬编码，确保多设备适配
+```
+┌─────────────────────────────────────────────────────────┐
+│                    通用分析层（本文档）                    │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
+│  │ 深度测量脚本 │→ │ 布局意图分析 │→ │ Layout Intent  │  │
+│  │ (Sketch API)│  │ (算法识别)  │  │ (标准化输出)   │  │
+│  └─────────────┘  └─────────────┘  └────────┬────────┘  │
+└─────────────────────────────────────────────┼───────────┘
+                                              ↓
+┌─────────────────────────────────────────────┴───────────┐
+│                   框架专属转换层                          │
+│  ┌───────────┐  ┌───────────┐  ┌───────────┐  ┌───────┐ │
+│  │  Flutter  │  │   Vue 3   │  │  小程序    │  │ React │ │
+│  │ (详见下方) │  │ (详见下方) │  │ (详见下方) │  │ Native│ │
+│  └───────────┘  └───────────┘  └───────────┘  └───────┘ │
+└─────────────────────────────────────────────────────────┘
+```
 
 ### 强制前置检查
 
@@ -76,14 +89,18 @@ const alpha = parseInt(colorHex.slice(7, 9), 16) / 255;
 3. 确认选中后再执行深度测量脚本
 ```
 
-### 深度测量脚本
+---
+
+### 第一层：深度测量脚本（通用）
+
+此脚本提取设计稿数据并输出标准化的 **Layout Intent**，供各框架转换层使用。
 
 ```javascript
 const sketch = require('sketch');
 
 /**
  * 深度还原模式 - 完整测量脚本
- * 递归提取所有子元素的布局和样式数据
+ * 输出标准化的 Layout Intent，供各框架转换使用
  */
 function deepMeasureForRestoration() {
   const doc = sketch.getSelectedDocument();
@@ -107,12 +124,8 @@ function deepMeasureForRestoration() {
       height: artboard.frame.height,
     },
     elements: [],
-    layoutAnalysis: {
-      horizontalGroups: [],  // 水平排列的元素组
-      verticalGroups: [],    // 垂直排列的元素组
-      centeredElements: [],  // 居中的元素
-      spacingPatterns: [],   // 间距规律
-    }
+    // Layout Intent 汇总（框架转换时使用）
+    layoutIntents: [],
   };
   
   // 递归测量所有元素
@@ -132,12 +145,22 @@ function deepMeasureForRestoration() {
       },
       // 相对于父容器的位置（关键！）
       relativePosition: null,
-      // 布局分析结果
-      layoutHints: [],
+      // Layout Intent（标准化布局意图）
+      layoutIntent: {},
+      // Icon 检测标记
+      isIcon: false,
+      iconExportPath: null,
       children: [],
     };
     
-    // 计算相对位置
+    // ========== Icon 智能检测 ==========
+    element.isIcon = detectIfIcon(layer);
+    if (element.isIcon) {
+      element.iconExportPath = `icons/${sanitizeFileName(layer.name)}.svg`;
+      console.log(`🎨 检测到 Icon: ${layer.name} → 建议导出为 SVG 200h`);
+    }
+    
+    // 计算相对位置并生成 Layout Intent
     if (parentFrame) {
       const relLeft = layer.frame.x;
       const relTop = layer.frame.y;
@@ -151,34 +174,58 @@ function deepMeasureForRestoration() {
         bottom: Math.round(relBottom),
       };
       
-      // 分析布局意图
+      // ========== 生成 Layout Intent ==========
       const tolerance = 2; // 允许 2px 误差
+      const intent = {
+        alignment: [],
+        sizing: {},
+        spacing: {},
+      };
       
-      // 水平居中检测
-      if (Math.abs(relLeft - relRight) <= tolerance) {
-        element.layoutHints.push('HORIZONTAL_CENTER');
-      }
-      // 垂直居中检测
-      if (Math.abs(relTop - relBottom) <= tolerance) {
-        element.layoutHints.push('VERTICAL_CENTER');
-      }
-      // 完全居中
-      if (element.layoutHints.includes('HORIZONTAL_CENTER') && 
-          element.layoutHints.includes('VERTICAL_CENTER')) {
-        element.layoutHints = ['CENTER'];
-      }
-      // 左对齐（边距小于 5%）
-      if (relLeft < parentFrame.width * 0.05 && relRight > relLeft * 3) {
-        element.layoutHints.push('ALIGN_LEFT');
+      // 对齐意图
+      const isHCenter = Math.abs(relLeft - relRight) <= tolerance;
+      const isVCenter = Math.abs(relTop - relBottom) <= tolerance;
+      
+      if (isHCenter && isVCenter) {
+        intent.alignment = ['CENTER'];
+      } else {
+        if (isHCenter) intent.alignment.push('HORIZONTAL_CENTER');
+        if (isVCenter) intent.alignment.push('VERTICAL_CENTER');
+        if (relLeft < parentFrame.width * 0.05 && relRight > relLeft * 3) {
+          intent.alignment.push('ALIGN_START');  // 通用术语，非 left
+        }
+        if (relRight < parentFrame.width * 0.05 && relLeft > relRight * 3) {
+          intent.alignment.push('ALIGN_END');
+        }
       }
-      // 右对齐
-      if (relRight < parentFrame.width * 0.05 && relLeft > relRight * 3) {
-        element.layoutHints.push('ALIGN_RIGHT');
+      
+      // 尺寸意图
+      const widthRatio = layer.frame.width / parentFrame.width;
+      const heightRatio = layer.frame.height / parentFrame.height;
+      
+      if (isHCenter && relLeft < 30) {
+        intent.sizing.width = { type: 'FILL', margin: relLeft };
+      } else if (widthRatio > 0.9) {
+        intent.sizing.width = { type: 'MATCH_PARENT' };
+      } else {
+        intent.sizing.width = { type: 'FIXED', value: layer.frame.width };
       }
-      // 宽度占满（左右边距相等且较小）
-      if (Math.abs(relLeft - relRight) <= tolerance && relLeft < 30) {
-        element.layoutHints.push('FILL_WIDTH');
+      
+      if (heightRatio > 0.9) {
+        intent.sizing.height = { type: 'MATCH_PARENT' };
+      } else {
+        intent.sizing.height = { type: 'WRAP_CONTENT', minHeight: layer.frame.height };
       }
+      
+      // 边距意图（用于 padding 计算）
+      intent.spacing = {
+        paddingStart: relLeft,
+        paddingEnd: relRight,
+        paddingTop: relTop,
+        paddingBottom: relBottom,
+      };
+      
+      element.layoutIntent = intent;
     }
     
     // 提取样式
@@ -203,9 +250,9 @@ function deepMeasureForRestoration() {
       }
     });
     
-    // 分析子元素排列规律
+    // 分析子元素排列规律 → 生成容器 Layout Intent
     if (element.children.length > 1) {
-      analyzeChildrenLayout(element);
+      element.containerIntent = analyzeChildrenLayout(element.children);
     }
     
     return element;
@@ -292,7 +339,7 @@ function deepMeasureForRestoration() {
       }
     }
     
-    // 计算行高比例
+    // 计算行高比例（通用，各框架按需转换）
     if (layer.style.lineHeight) {
       info.lineHeight = layer.style.lineHeight;
       info.lineHeightRatio = (layer.style.lineHeight / layer.style.fontSize).toFixed(2);
@@ -304,7 +351,7 @@ function deepMeasureForRestoration() {
     return info;
   }
   
-  // 解析字重
+  // 解析字重（通用映射）
   function parseFontWeight(fontName) {
     const weightMap = {
       'Thin': 100, 'Ultralight': 200, 'Light': 300,
@@ -317,10 +364,106 @@ function deepMeasureForRestoration() {
     return 400;
   }
   
-  // 分析子元素排列规律
-  function analyzeChildrenLayout(element) {
-    const children = element.children;
+  // ========== Icon 智能检测 ==========
+  // 根据元素特征判断是否为 icon
+  function detectIfIcon(layer) {
+    const name = layer.name.toLowerCase();
+    const size = Math.max(layer.frame.width, layer.frame.height);
+    
+    // 规则 1: 名称特征
+    const iconKeywords = ['icon', 'ico', 'logo', 'symbol', 'arrow', 'close', 'menu', 'search', 'star', 'check'];
+    const hasIconKeyword = iconKeywords.some(keyword => name.includes(keyword));
+    
+    // 规则 2: 尺寸特征（icon 通常在 12-64px 之间）
+    const isIconSize = size >= 12 && size <= 64;
+    
+    // 规则 3: 形状特征（正方形或近似正方形）
+    const aspectRatio = layer.frame.width / layer.frame.height;
+    const isSquarish = aspectRatio >= 0.8 && aspectRatio <= 1.2;
+    
+    // 规则 4: 类型特征（Shape Path / Symbol Instance / Group 且子元素少）
+    const isVectorType = layer.type === 'ShapePath' || layer.type === 'SymbolInstance' || 
+                         (layer.type === 'Group' && (layer.layers?.length || 0) <= 5);
+    
+    // 规则 5: 无文本内容
+    const hasNoText = layer.type !== 'Text';
+    
+    // 综合判定（满足 3 个条件即认为是 icon）
+    const matchCount = [hasIconKeyword, isIconSize, isSquarish, isVectorType, hasNoText]
+      .filter(Boolean).length;
+    
+    return matchCount >= 3;
+  }
+  
+  // 文件名清理（用于 SVG 导出）
+  function sanitizeFileName(name) {
+    return name
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^a-z0-9-_]/g, '')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+  
+  // ========== 子元素对齐检测（优化布局分析）==========
+  function detectChildrenAlignment(children) {
+    if (children.length < 2) return null;
+    
+    const tolerance = 2; // 允许 2px 误差
+    const leftEdges = children.map(c => c.frame.x);
+    const rightEdges = children.map(c => c.frame.x + c.frame.width);
+    const centerXs = children.map(c => c.frame.x + c.frame.width / 2);
+    
+    // 检测左对齐
+    const leftAligned = leftEdges.every(x => Math.abs(x - leftEdges[0]) <= tolerance);
+    // 检测右对齐
+    const rightAligned = rightEdges.every(x => Math.abs(x - rightEdges[0]) <= tolerance);
+    // 检测水平居中对齐
+    const centerAligned = centerXs.every(x => Math.abs(x - centerXs[0]) <= tolerance);
+    
+    if (leftAligned) return 'START';
+    if (rightAligned) return 'END';
+    if (centerAligned) return 'CENTER';
+    return 'NONE';
+  }
+  
+  // ========== 响应式建议（增强交互准确性）==========
+  function generateResponsiveHint(children) {
+    if (children.length === 0) return null;
+    
+    const hint = {
+      wrapNeeded: false,
+      scrollNeeded: false,
+      expandableChildren: [],
+    };
+    
+    // 检测是否需要换行（子元素宽度总和超过容器）
+    const totalChildWidth = children.reduce((sum, c) => sum + c.frame.width, 0);
+    const parentWidth = children[0].frame.x; // 假设父容器信息存在
+    if (totalChildWidth > parentWidth * 0.9) {
+      hint.wrapNeeded = true;
+    }
+    
+    // 检测是否需要滚动（子元素高度总和超过容器）
+    const totalChildHeight = children.reduce((sum, c) => sum + c.frame.height, 0);
+    const parentHeight = children[0].frame.y;
+    if (totalChildHeight > parentHeight * 0.9) {
+      hint.scrollNeeded = true;
+    }
+    
+    // 检测哪些子元素应该可扩展（占据剩余空间）
+    children.forEach((child, index) => {
+      // 如果是容器且包含大量内容
+      if ((child.children?.length || 0) > 3) {
+        hint.expandableChildren.push(index);
+      }
+    });
     
+    return hint;
+  }
+  
+  // 分析子元素排列规律 → 生成容器级 Layout Intent
+  function analyzeChildrenLayout(children) {
     // 按 Y 坐标排序检测垂直排列
     const sortedByY = [...children].sort((a, b) => a.frame.y - b.frame.y);
     const verticalGaps = [];
@@ -339,34 +482,83 @@ function deepMeasureForRestoration() {
       horizontalGaps.push(Math.round(gap));
     }
     
-    // 判断主轴方向和间距规律
-    const avgVGap = verticalGaps.reduce((a, b) => a + b, 0) / verticalGaps.length;
-    const avgHGap = horizontalGaps.reduce((a, b) => a + b, 0) / horizontalGaps.length;
+    // 生成标准化的容器 Layout Intent
+    const avgVGap = verticalGaps.length > 0 
+      ? verticalGaps.reduce((a, b) => a + b, 0) / verticalGaps.length : 0;
+    const avgHGap = horizontalGaps.length > 0
+      ? horizontalGaps.reduce((a, b) => a + b, 0) / horizontalGaps.length : 0;
+    
+    const containerIntent = {
+      direction: null,
+      gap: null,
+      isGapUniform: true,
+      gaps: [],
+      // 新增：对齐检测
+      alignment: detectChildrenAlignment(children),
+      // 新增：响应式建议
+      responsiveHint: generateResponsiveHint(children),
+    };
     
     if (avgVGap > 0 && avgHGap <= 0) {
-      element.layoutHints.push(`COLUMN(gap: ${Math.round(avgVGap)})`);
-      // 检测间距是否统一
-      const isUniform = verticalGaps.every(g => Math.abs(g - avgVGap) <= 2);
-      if (!isUniform) {
-        element.layoutHints.push('⚠️ 间距不统一: [' + verticalGaps.join(', ') + ']');
-      }
+      containerIntent.direction = 'COLUMN';
+      containerIntent.gap = Math.round(avgVGap);
+      containerIntent.gaps = verticalGaps;
+      containerIntent.isGapUniform = verticalGaps.every(g => Math.abs(g - avgVGap) <= 2);
     } else if (avgHGap > 0 && avgVGap <= 0) {
-      element.layoutHints.push(`ROW(gap: ${Math.round(avgHGap)})`);
-      const isUniform = horizontalGaps.every(g => Math.abs(g - avgHGap) <= 2);
-      if (!isUniform) {
-        element.layoutHints.push('⚠️ 间距不统一: [' + horizontalGaps.join(', ') + ']');
-      }
+      containerIntent.direction = 'ROW';
+      containerIntent.gap = Math.round(avgHGap);
+      containerIntent.gaps = horizontalGaps;
+      containerIntent.isGapUniform = horizontalGaps.every(g => Math.abs(g - avgHGap) <= 2);
+    } else if (avgVGap > 0 && avgHGap > 0) {
+      // 网格布局
+      containerIntent.direction = 'GRID';
+      containerIntent.rowGap = Math.round(avgVGap);
+      containerIntent.columnGap = Math.round(avgHGap);
     }
+    
+    return containerIntent;
   }
   
   // 执行测量
   const rootElement = measureRecursively(artboard, 0, null);
   result.elements.push(rootElement);
   
+  // 收集所有 icon 元素
+  const icons = [];
+  function collectIcons(element) {
+    if (element.isIcon) {
+      icons.push({
+        name: element.name,
+        id: element.id,
+        exportPath: element.iconExportPath,
+        size: { width: element.frame.width, height: element.frame.height }
+      });
+    }
+    element.children.forEach(collectIcons);
+  }
+  collectIcons(rootElement);
+  
   // 输出结构化结果
-  console.log('\n📊 测量完成，数据结构：');
+  console.log('\n📊 测量完成，Layout Intent 数据：');
   console.log(JSON.stringify(result, null, 2));
   
+  // 输出 icon 导出指引
+  if (icons.length > 0) {
+    console.log('\n🎨 检测到 Icon，建议导出步骤：');
+    console.log('1️⃣  在 Sketch 中选中以下图层：');
+    icons.forEach(icon => {
+      console.log(`   - ${icon.name} (建议尺寸: ${icon.size.width}x${icon.size.height})`);
+    });
+    console.log('\n2️⃣  点击右下角"Make Exportable"');
+    console.log('3️⃣  选择格式: SVG');
+    console.log('4️⃣  设置高度: 200h（保持高宽比，高度200px）');
+    console.log('5️⃣  导出位置建议: assets/icons/ 或 src/assets/icons/');
+    console.log('\n📝 导出后的使用方式：');
+    icons.forEach(icon => {
+      console.log(`   ${icon.exportPath} → 在代码中引用`);
+    });
+  }
+  
   return result;
 }
 
@@ -374,73 +566,132 @@ function deepMeasureForRestoration() {
 deepMeasureForRestoration();
 ```
 
-### 分析与转换流程
+---
+
+### 第二层：框架专属转换规范
+
+**⚠️ 关键设计：各框架有独立的转换规范，确保深度还原效果不因通用化而降低。**
+
+获取 Layout Intent 后，根据目标框架调用对应的转换规范：
+
+#### 框架转换索引
+
+| 框架 | 规范位置 | 调用方式 |
+|------|---------|---------|
+| **Flutter** | 本文档下方 + flutter.agent.md | `get_standard_by_id({ id: 'sketch-mcp' })` |
+| **Vue 3 / CSS** | vue3.agent.md + design-restoration.md | `get_standard_by_id({ id: 'design-restoration' })` |
+| **微信小程序** | wechat-miniprogram.agent.md | `get_standard_by_id({ id: 'wechat-miniprogram' })` |
+| **React Native** | 参照 Flutter 规范 | Layout Intent 映射类似 |
+
+---
 
-获取测量数据后，按以下流程分析：
+### Flutter 深度还原转换规范
 
-#### Step 1: 识别布局结构
+#### Layout Intent → Flutter 代码映射
+
+| Layout Intent | Flutter 实现 | 说明 |
+|---------------|-------------|------|
+| `alignment: ['CENTER']` | `Center(child: ...)` 或 `Align(alignment: Alignment.center)` | 完全居中 |
+| `alignment: ['HORIZONTAL_CENTER']` | 外层 `Row` + `mainAxisAlignment: MainAxisAlignment.center` | 水平居中 |
+| `alignment: ['VERTICAL_CENTER']` | 外层 `Column` + `mainAxisAlignment: MainAxisAlignment.center` | 垂直居中 |
+| `alignment: ['ALIGN_START']` | `CrossAxisAlignment.start` 或 `Alignment.centerLeft` | 起始对齐 |
+| `sizing.width: { type: 'FILL', margin: 16 }` | `Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: SizedBox(width: double.infinity))` | 填充宽度 |
+| `sizing.width: { type: 'MATCH_PARENT' }` | `SizedBox(width: double.infinity)` 或 `Expanded` | 匹配父宽 |
+| `containerIntent.direction: 'COLUMN'` | `Column(children: [...])` | 垂直排列 |
+| `containerIntent.direction: 'ROW'` | `Row(children: [...])` | 水平排列 |
+| `containerIntent.gap: 16` | `Gap(16)` 或子元素间加 `SizedBox(height: 16)` | 间距 |
+| `containerIntent.isGapUniform: false` | 根据 `gaps` 数组逐个设置 | 非均匀间距 |
+
+#### Flutter 响应式禁止规则
+
+| ❌ 禁止 | 原因 | ✅ 正确做法 |
+|--------|------|-----------|
+| `width: 343` | 仅适配设计稿尺寸 | `MediaQuery.of(context).size.width - 32` |
+| `height: 812` | 仅适配特定设备 | `Expanded` / `Flexible` |
+| `left: 47` | 无法适配其他尺寸 | 分析 Layout Intent，用 `Alignment` |
+| `fontSize: 14` | 无响应式 | Token 如 `$t.bodyMd` |
+| `Color(0xFF...)` | 硬编码颜色 | Token 如 `$c.primary` |
+
+#### Flutter 验证清单
 
 ```
-根据 layoutHints 确定：
-- CENTER → 使用 Alignment.center
-- COLUMN(gap: X) → 使用 Column + Gap(X) 或 SizedBox
-- ROW(gap: X) → 使用 Row + Gap(X)
-- FILL_WIDTH → 使用 double.infinity 或 Expanded
+□ 所有尺寸使用相对值或 Token（$s.md, $r.lg）
+□ 间距使用 Gap() 或 SizedBox，值来自 Token
+□ 颜色使用项目 Token（$c.primary）
+□ 阴影使用 Token（$shadow.md）
+□ 文字样式使用 Token（$t.titleLg）
+□ 在 iPhone SE / iPhone 15 Pro Max 测试布局
+□ 与设计稿截图叠加对比
 ```
 
-#### Step 2: 计算响应式参数
+---
 
-```javascript
-// ❌ 禁止硬编码绝对值
-Container(width: 343)  // 错误！
-
-// ✅ 转换为相对值或约束
-// 方式1: 使用屏幕比例
-final width = MediaQuery.of(context).size.width - 32;  // 左右各 16 边距
-
-// 方式2: 使用 LayoutBuilder
-LayoutBuilder(
-  builder: (context, constraints) {
-    final width = constraints.maxWidth - 32;
-    return Container(width: width, ...);
-  }
-)
+### Vue 3 / CSS 深度还原转换规范
 
-// 方式3: 使用 Expanded/Flexible
-Row(children: [
-  Expanded(child: TextField(...)),  // 自动填充剩余空间
-  SizedBox(width: 16),
-  ElevatedButton(...),
-])
-```
+#### Layout Intent → Vue/CSS 代码映射
+
+| Layout Intent | CSS / Vue 实现 | 说明 |
+|---------------|---------------|------|
+| `alignment: ['CENTER']` | `display: flex; justify-content: center; align-items: center;` | 完全居中 |
+| `alignment: ['HORIZONTAL_CENTER']` | `margin: 0 auto;` 或 `justify-content: center;` | 水平居中 |
+| `alignment: ['VERTICAL_CENTER']` | `align-items: center;` | 垂直居中 |
+| `sizing.width: { type: 'FILL', margin: 16 }` | `width: calc(100% - 32px); margin: 0 16px;` | 填充宽度 |
+| `sizing.width: { type: 'MATCH_PARENT' }` | `width: 100%;` | 匹配父宽 |
+| `containerIntent.direction: 'COLUMN'` | `display: flex; flex-direction: column;` | 垂直排列 |
+| `containerIntent.direction: 'ROW'` | `display: flex; flex-direction: row;` | 水平排列 |
+| `containerIntent.gap: 16` | `gap: 16px;` | 间距 |
+| `containerIntent.direction: 'GRID'` | `display: grid; grid-template-columns: repeat(...); gap: 16px;` | 网格布局 |
 
-#### Step 3: 边距转换规则
+#### Vue 响应式禁止规则
 
-| 测量数据 | 分析结果 | Flutter 代码 |
-|----------|----------|-------------|
-| left=16, right=16 | 水平居中+固定边距 | `padding: EdgeInsets.symmetric(horizontal: 16)` |
-| left=16, right=不等 | 左对齐 | `padding: EdgeInsets.only(left: 16)` |
-| top=bottom | 垂直居中 | `alignment: Alignment.center` |
-| 元素宽度=父宽度-32 | 填充 | `Expanded` 或 `width: double.infinity` |
+| ❌ 禁止 | 原因 | ✅ 正确做法 |
+|--------|------|-----------|
+| `width: 343px` | 仅适配设计稿尺寸 | `width: calc(100% - 32px)` |
+| `height: 812px` | 仅适配特定设备 | `min-height: 100vh` / `flex: 1` |
+| `left: 47px` | 无法适配其他尺寸 | 分析 Layout Intent，用 flex |
+| `font-size: 14px` | 无响应式 | CSS 变量 `var(--font-body-md)` |
+| `color: #3B82F6` | 硬编码颜色 | CSS 变量 `var(--color-primary)` |
 
-#### Step 4: 验证清单
+#### Vue 验证清单
 
 ```
-□ 所有尺寸使用相对值或 Token
-□ 间距使用统一的间距系统（如 $s.md, Gap(16)）
-□ 颜色使用项目 Token（如 $c.primary）
-□ 在不同屏幕尺寸下测试布局
+□ 使用 CSS 变量（--spacing-md, --color-primary）
+□ 使用 flex/grid 布局，避免绝对定位
+□ 移动端使用 vw/vh 或 calc()
+□ 在 375px / 1920px 视口测试
 □ 与设计稿截图叠加对比
 ```
 
-### 禁止事项
+---
 
-| 禁止 | 原因 | 正确做法 |
-|------|------|---------|
-| `width: 343` | 仅适配设计稿尺寸 | 使用 `MediaQuery` 或 `Expanded` |
-| `height: 812` | 仅适配特定设备 | 使用 `Flexible` 或百分比 |
-| `left: 47` | 无法适配其他尺寸 | 分析是否居中，用 `Alignment` |
-| `fontSize: 14` | 无响应式 | 使用 Token 如 `$t.bodyMd` |
+### 微信小程序深度还原转换规范
+
+#### Layout Intent → 小程序代码映射
+
+| Layout Intent | WXML / WXSS 实现 | 说明 |
+|---------------|-----------------|------|
+| `alignment: ['CENTER']` | `display: flex; justify-content: center; align-items: center;` | 完全居中 |
+| `sizing.width: { type: 'FILL', margin: 16 }` | `width: calc(100% - 64rpx); margin: 0 32rpx;` | 填充宽度（注意 rpx） |
+| `containerIntent.direction: 'COLUMN'` | `display: flex; flex-direction: column;` | 垂直排列 |
+| `containerIntent.gap: 16` | 小程序不支持 gap，用 `margin-bottom: 32rpx;` | 间距（最后一个用 :last-child 移除） |
+
+#### 小程序特殊规则
+
+| 设计稿值 (px) | 小程序值 (rpx) | 转换公式 |
+|--------------|---------------|---------|
+| 16px | 32rpx | `rpx = px * 2`（基于 375 设计稿） |
+| 343px | 686rpx 或 `calc(100% - 64rpx)` | 宽度优先用 calc |
+| 14px (字号) | 28rpx | 字号也需转换 |
+
+#### 小程序验证清单
+
+```
+□ 所有 px 值已转换为 rpx（×2）
+□ 宽度使用 calc(100% - Xrpx) 而非固定 rpx
+□ 间距用 margin 模拟 gap
+□ 在微信开发者工具多机型预览
+□ 与设计稿截图叠加对比
+```
 
 ---