mta-mcp 3.4.0 → 3.5.1

package/agents/flutter.agent.md

@@ -1,7 +1,7 @@
 # Flutter 开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.4.0 | 最后更新: 2026-01-23
+> 版本: v3.5.0 | 最后更新: 2026-01-23
 
 ---
 
@@ -133,6 +133,33 @@ get_standard_by_id({ ids: ['flutter', 'flutter-ui-system'] })
 | `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 禁止规则
 
 | ❌ 禁止 | ✅ 正确 |

package/agents/mta.agent.md

@@ -111,7 +111,55 @@ MTA 不是传统的"编码规范管理器"，而是一个**智能编码助手技
 | `sequentialthinking` | 分步推理 | 复杂问题分解、多步规划 |
 
 ---
+## 🎨 Sketch 设计稿还原规范
 
+### 强制流程
+
+**在还原任何 Sketch 设计稿前，必须先调用 SketchMeasureHD 插件测量：**
+
+```
+1. 用户提供 Sketch 文件 → 先提醒："需要先在 Sketch 中选中目标图层"
+2. 调用 @sketch mcp 工具
+3. 使用脚本：mcp-server/ui/sketch/sketch_measure_hd.js
+4. 获取完整测量数据（绝对坐标、内边距、布局意图）
+5. 基于测量数据精准还原 UI
+```
+
+### 测量数据必备字段
+
+调用 SketchMeasureHD 后，你会得到以下关键数据：
+
+| 字段 | 用途 | 示例 |
+|------|------|------|
+| `absoluteRect` | 元素相对于画板的绝对位置 | `{ x: 16, y: 100, width: 361, height: 120 }` |
+| `relativePosition` | 元素相对于父容器的内边距 | `{ paddingLeft: 16, paddingTop: 12 }` |
+| `siblingGaps` | 兄弟元素间的间距 | `{ direction: "COLUMN", uniformVerticalGap: 12 }` |
+| `layoutIntent` | 布局意图（居中、填充等） | `{ alignment: ["HORIZONTAL_CENTER"], sizing: { width: "FILL" } }` |
+| `flutterHints` | 直接可用的 Flutter 代码 | `{ suggestedWidget: "Column", padding: "EdgeInsets.all(16)" }` |
+
+### 还原检查清单
+
+- [ ] 使用 `absoluteRect` 而非 `frame`（避免相对坐标错误）
+- [ ] 使用 `relativePosition` 计算内边距（避免硬编码）
+- [ ] 使用 `siblingGaps` 确定元素间距（而非猜测）
+- [ ] 使用 `layoutIntent` 判断布局方式（Column/Row/Center）
+- [ ] 参考 `flutterHints` 生成代码（提高准确度）
+
+### 禁止事项
+
+❌ **禁止**在未调用测量插件的情况下凭感觉还原设计稿  
+❌ **禁止**使用简单的 `Positioned` 绝对定位所有元素  
+❌ **禁止**硬编码内边距值（如 `padding: 16`）而不基于测量数据  
+❌ **禁止**忽略 `layoutIntent` 字段，导致嵌套层级错误
+
+### 应用到其他 Agent
+
+此规范应同步到以下 Agent：
+- `agents/flutter.agent.md` - Flutter 开发
+- `agents/vue3.agent.md` - Vue3 开发（参考 Sketch 设计稿时）
+- `agents/wechat-miniprogram.agent.md` - 小程序开发
+
+---
 ## 📁 知识库结构
 
 MTA 的知识分为两类，明确区分：

package/agents/vue3.agent.md

@@ -1,7 +1,7 @@
 # Vue 3 + TypeScript 开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.4.0 | 最后更新: 2026-01-23
+> 版本: v3.5.0 | 最后更新: 2026-01-23
 
 ---
 
@@ -165,6 +165,44 @@ get_standard_by_id({ ids: ['vue3-composition', 'element-plus', 'i18n'] })
 | `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 禁止规则
 
 | ❌ 禁止 | ✅ 正确 |

package/agents/wechat-miniprogram.agent.md

@@ -1,7 +1,7 @@
 # 微信小程序开发代理
 
 > 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
-> 版本: v3.4.0 | 最后更新: 2026-01-23
+> 版本: v3.5.0 | 最后更新: 2026-01-23
 
 ---
 
@@ -112,6 +112,56 @@ miniprogram/
 | `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) | 说明 |

package/package.json

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

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

@@ -147,9 +147,19 @@ function deepMeasureForRestoration() {
       relativePosition: null,
       // 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;
@@ -354,6 +364,104 @@ function deepMeasureForRestoration() {
     return 400;
   }
   
+  // ========== 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 坐标排序检测垂直排列
@@ -385,6 +493,10 @@ function deepMeasureForRestoration() {
       gap: null,
       isGapUniform: true,
       gaps: [],
+      // 新增：对齐检测
+      alignment: detectChildrenAlignment(children),
+      // 新增：响应式建议
+      responsiveHint: generateResponsiveHint(children),
     };
     
     if (avgVGap > 0 && avgHGap <= 0) {
@@ -411,10 +523,42 @@ function deepMeasureForRestoration() {
   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📊 测量完成，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;
 }