mta-mcp 1.0.0 → 1.0.2

package/agents/flutter.agent.md

@@ -136,85 +136,26 @@ get_standard_by_id({ ids: ['flutter', 'flutter-ui-system'] })
 
 ---
 
-## 🎨 设计稿还原强制规范
-
-> ⚠️ 使用 Sketch/Figma MCP 时必须遵守
-
-### 🔴 全局样式优先（最高优先级）
-
-**在还原任何 UI 前，必须首先检查是否存在全局样式规范！**
-
-#### 强制检查流程
-
-1. **圆角** - 优先使用 `DesignRadius` 中的标准值：
-   | 设计值 | 使用常量 | 用途 |
-   |--------|----------|------|
-   | 20px | `DesignRadius.xl` | 大统计卡片 |
-   | 16px | `DesignRadius.lg` | 通用卡片、CTA按钮 |
-   | 14px | `DesignRadius.md` | Tab、选择框 |
-   | 12px | `DesignRadius.base` | 图标背景、中型按钮 |
-   | 10px | `DesignRadius.sm` | 小按钮 |
-   | 8px | `DesignRadius.xs` | 输入框 |
-
-2. **按钮高度** - 优先使用 `DesignButtonSizes`：
-   | 设计值 | 使用常量 | 用途 |
-   |--------|----------|------|
-   | 56px | `DesignButtonSizes.heightCTA` | 主CTA按钮 |
-   | 40px | `DesignButtonSizes.heightMedium` | 标准按钮 |
-   | 36px | `DesignButtonSizes.heightIcon` | 图标按钮 |
-   | 32px | `DesignButtonSizes.heightSmall` | 小按钮 |
-   | 28px | `DesignButtonSizes.heightWarning` | 警告按钮 |
-
-3. **阴影** - 优先使用 `DesignShadows`：
-   | 模式 | 使用常量 | 用途 |
-   |------|----------|------|
-   | (4,4,8) | `DesignShadows.raised` | 按钮、小卡片 |
-   | (6,6,12) | `DesignShadows.card` | 普通卡片 |
-   | (8,8,20) | `DesignShadows.elevated` | 大卡片 |
-   | CTA红色 | `DesignShadows.cta` | 主操作按钮 |
-
-4. **颜色** - 优先使用 `DesignColors`：
-   | 颜色 | 使用常量 |
-   |------|----------|
-   | #1C2B45 | `DesignColors.textPrimary` |
-   | #1C2B4599 | `DesignColors.textSecondary.withOpacity(0.6)` |
-   | #E8EDF5 | `DesignColors.pageBackground` |
-   | #EEF3FA→#D9E0EB | `DesignColors.cardGradient` |
-   | #D0121B | `DesignColors.primary` |
-   | #FF9800 | `DesignColors.warning` |
-
-#### 禁止事项
-- ❌ 硬编码 `BorderRadius.circular(16)` - 应使用 `DesignRadius.lg`
-- ❌ 硬编码 `height: 56` - 应使用 `DesignButtonSizes.heightCTA`
-- ❌ 硬编码 `Color(0xFF1C2B45)` - 应使用 `DesignColors.textPrimary`
-- ❌ 手写阴影参数 - 应使用 `DesignShadows` 预设
-
-### 强制要求：完整读取选中元素及其所有子集
-
-```javascript
-// 正确：一次性获取容器+所有子元素的完整信息
-function extractComplete(element) {
-  // 1. 容器信息
-  console.log(`容器: ${element.frame.width}x${element.frame.height}`);
-  
-  // 2. 所有子元素信息（关键！）
-  element.layers.forEach(child => {
-    console.log(`子元素: ${child.name}`);
-    console.log(`  位置: Y=${child.frame.y}px`);
-    console.log(`  尺寸: ${child.frame.width}x${child.frame.height}`);
-    if (child.type === 'Text') {
-      console.log(`  字号: ${child.style.fontSize}px`);
-      console.log(`  行高: ${child.frame.height / child.style.fontSize}`);
-    }
-  });
-}
-```
+## 🎨 设计稿还原
 
-### 禁止事项
-- ❌ 只读容器属性，忽略内部元素位置
-- ❌ 每次只查一个属性，分散多轮获取
-- ❌ 假设"差不多"而不验证精确像素值
-- ❌ 用"试错法"调整参数
+> ⚠️ 详细规范请调用：`get_standard_by_id({ id: 'design-restoration' })`
+
+### 快速提示
+
+| 关键点 | 说明 |
+|--------|------|
+| **渐变色** | 检查 `fillType` 后读取 `gradient.stops`，勿直接用 `color` 属性 |
+| **全局样式** | 还原前先 grep 搜索项目现有 Token（颜色、圆角、阴影） |
+| **新拟态阴影** | 双阴影：右下深色 + 左上高光 |
+| **行高** | Flutter `height` 是比例值，非像素（如 24px/16px = 1.5） |
+
+### 相关规范
+
+| 规范 | 调用方式 |
+|------|----------|
+| 设计稿还原流程 | `get_standard_by_id({ id: 'design-restoration' })` |
+| Sketch MCP 用法 | `get_standard_by_id({ id: 'sketch-mcp' })` |
+| 跨框架语法映射 | `get_standard_by_id({ id: 'syntax-mapping' })` |
 
 ---
 

package/agents/vue3.agent.md

@@ -136,39 +136,26 @@ get_standard_by_id({ ids: ['vue3-composition', 'element-plus', 'i18n'] })
 
 ---
 
-## 🎨 设计稿还原强制规范（跨平台通用）
+## 🎨 设计稿还原
 
-> ⚠️ 还原 Sketch/Figma 设计稿时必须遵守
+> ⚠️ 详细规范请调用：`get_standard_by_id({ id: 'design-restoration' })`
 
-### 🔴 全局样式优先（最高优先级）
+### 快速提示
 
-**在还原任何 UI 前，必须首先检查项目是否存在全局样式规范！**
+| 关键点 | 说明 |
+|--------|------|
+| **渐变色** | 检查 `fillType` 后读取 `gradient.stops`，勿直接用 `color` 属性 |
+| **全局样式** | 还原前先搜索项目现有 CSS 变量 / Token |
+| **渐变语法** | `background: linear-gradient(135deg, #E01020, #B8101A)` |
+| **阴影语法** | `box-shadow: 8px 8px 20px rgba(28,43,69,0.15)` |
 
-#### 检查顺序
+### 相关规范
 
-1. **检查项目设计 Token** - 如 `design_constants.dart`、`design-tokens.ts`
-2. **优先使用语义化常量** - 而非硬编码数值
-3. **颜色/圆角/阴影/间距** - 必须使用全局定义
-
-#### 常见样式对照表
-
-| 类型 | 常见值 | 应使用 |
-|------|--------|--------|
-| **圆角** | 16px | `$radius.lg` / CSS 变量 `--radius-lg` |
-| **圆角** | 12px | `$radius.base` |
-| **圆角** | 8px | `$radius.xs` |
-| **按钮高度** | 56px | `$button.heightCTA` |
-| **按钮高度** | 40px | `$button.heightMedium` |
-| **按钮高度** | 32px | `$button.heightSmall` |
-| **阴影** | 拟物卡片 | `$shadow.card` |
-| **主色** | 红色CTA | `$color.primary` |
-| **文字色** | 深色 | `$color.textPrimary` |
-
-#### 禁止事项
-- ❌ 硬编码 `border-radius: 16px` - 应使用 CSS 变量或常量
-- ❌ 硬编码 `height: 56px` - 应使用按钮尺寸常量
-- ❌ 硬编码 `color: #1C2B45` - 应使用颜色变量
-- ❌ 手写 `box-shadow` - 应使用预设阴影 mixin
+| 规范 | 调用方式 |
+|------|----------|
+| 设计稿还原流程 | `get_standard_by_id({ id: 'design-restoration' })` |
+| Sketch MCP 用法 | `get_standard_by_id({ id: 'sketch-mcp' })` |
+| 跨框架语法映射 | `get_standard_by_id({ id: 'syntax-mapping' })` |
 
 ---
 

package/agents/wechat-miniprogram.agent.md

@@ -85,5 +85,28 @@ miniprogram/
 
 ---
 
+## 🎨 设计稿还原
+
+> ⚠️ 详细规范请调用：`get_standard_by_id({ id: 'design-restoration' })`
+
+### 快速提示
+
+| 关键点 | 说明 |
+|--------|------|
+| **渐变色** | 检查 `fillType` 后读取 `gradient.stops`，勿直接用 `color` 属性 |
+| **全局样式** | 还原前先搜索项目现有变量（app.wxss 中的 CSS 变量） |
+| **rpx 换算** | 设计稿 px * 2 = rpx（基于 750px 设计稿） |
+| **阴影语法** | `box-shadow: 8px 8px 20px rgba(28,43,69,0.15)` |
+
+### 相关规范
+
+| 规范 | 调用方式 |
+|------|----------|
+| 设计稿还原流程 | `get_standard_by_id({ id: 'design-restoration' })` |
+| Sketch MCP 用法 | `get_standard_by_id({ id: 'sketch-mcp' })` |
+| 跨框架语法映射 | `get_standard_by_id({ id: 'syntax-mapping' })` |
+
+---
+
 **维护团队**: MTA工作室  
 **设计理念**: Agent 只提供获取指引，详细规范由 MCP 工具从 npm 包动态获取

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mta-mcp",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "MTA - 智能项目分析与编码规范管理 MCP 服务器",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -0,0 +1,349 @@
+# Sketch MCP 最佳实践
+
+> 使用 Sketch MCP 工具准确测量设计稿的规范指南
+
+## 📋 概述
+
+Sketch MCP 是用于从 Sketch 设计文件中提取 UI 参数的工具。本文档记录了使用过程中发现的问题和最佳实践。
+
+---
+
+## ⚠️ 已知问题与解决方案
+
+### 问题 1：渐变色被读取为单色
+
+**严重程度**: 🔴 高
+
+**现象**：
+```javascript
+layer.style.fills[0].color  // 返回 "#4a60b2ff"
+layer.style.fills[0].fillType  // 返回 "Gradient"
+```
+
+当 `fillType` 是 `Gradient` 时，`color` 属性返回的是一个"代表色"，而非实际的渐变颜色。
+
+**解决方案**：
+
+```javascript
+function getLayerColor(layer) {
+  const fills = layer.style?.fills?.filter(f => f.enabled);
+  if (!fills || fills.length === 0) return null;
+  
+  const fill = fills[0];
+  
+  // 关键：先判断 fillType
+  if (fill.fillType === 'Gradient' && fill.gradient) {
+    const g = fill.gradient;
+    return {
+      type: 'gradient',
+      gradientType: g.gradientType,  // Linear | Radial | Angular
+      direction: { from: g.from, to: g.to },
+      colors: g.stops.map(s => ({
+        position: s.position,
+        color: s.color
+      }))
+    };
+  }
+  
+  return {
+    type: 'solid',
+    color: fill.color
+  };
+}
+```
+
+### 问题 2：Symbol 内部样式读取
+
+**严重程度**: 🟡 中
+
+**现象**：Symbol 实例的内部图层样式可能需要通过 `expandedLayers` 访问。
+
+**解决方案**：
+
+```javascript
+if (layer.type === 'SymbolInstance') {
+  layer.expandedLayers.forEach(nestedLayer => {
+    // 递归处理嵌套图层
+    measureLayer(nestedLayer);
+  });
+}
+```
+
+### 问题 3：阴影数组顺序
+
+**严重程度**: 🟢 低
+
+**现象**：多重阴影的顺序可能与视觉效果不一致。
+
+**解决方案**：记录所有阴影，并按 blur 值或 enabled 状态排序。
+
+---
+
+## 📐 标准测量脚本
+
+### 完整测量函数
+
+```javascript
+const sketch = require('sketch');
+
+/**
+ * 完整的图层测量函数
+ * 正确处理渐变色、阴影、圆角等
+ */
+function measureLayerComplete(layer) {
+  const result = {
+    name: layer.name,
+    type: layer.type,
+    frame: {
+      x: Math.round(layer.frame.x),
+      y: Math.round(layer.frame.y),
+      width: Math.round(layer.frame.width),
+      height: Math.round(layer.frame.height),
+    },
+  };
+  
+  if (!layer.style) return result;
+  
+  // ========== 填充色 ==========
+  const enabledFills = layer.style.fills?.filter(f => f.enabled) || [];
+  if (enabledFills.length > 0) {
+    result.fills = enabledFills.map(fill => {
+      if (fill.fillType === 'Gradient' && fill.gradient) {
+        const g = fill.gradient;
+        return {
+          type: 'gradient',
+          gradientType: g.gradientType,
+          from: g.from,
+          to: g.to,
+          stops: g.stops.map(s => ({
+            position: s.position,
+            color: s.color
+          }))
+        };
+      }
+      return {
+        type: 'solid',
+        color: fill.color
+      };
+    });
+  }
+  
+  // ========== 边框 ==========
+  const enabledBorders = layer.style.borders?.filter(b => b.enabled) || [];
+  if (enabledBorders.length > 0) {
+    result.borders = enabledBorders.map(b => ({
+      color: b.color,
+      thickness: b.thickness,
+      position: b.position  // inside | outside | center
+    }));
+  }
+  
+  // ========== 阴影 ==========
+  const enabledShadows = layer.style.shadows?.filter(s => s.enabled) || [];
+  if (enabledShadows.length > 0) {
+    result.shadows = enabledShadows.map(s => ({
+      color: s.color,
+      blur: s.blur,
+      x: s.x,
+      y: s.y,
+      spread: s.spread || 0,
+      isInner: s.isInnerShadow || false
+    }));
+  }
+  
+  // ========== 内阴影 ==========
+  const innerShadows = layer.style.innerShadows?.filter(s => s.enabled) || [];
+  if (innerShadows.length > 0) {
+    result.innerShadows = innerShadows.map(s => ({
+      color: s.color,
+      blur: s.blur,
+      x: s.x,
+      y: s.y,
+      spread: s.spread || 0
+    }));
+  }
+  
+  // ========== 圆角 ==========
+  if (layer.style.corners) {
+    const radii = layer.style.corners.radii;
+    // 检查是否四角相同
+    if (radii.every(r => r === radii[0])) {
+      result.borderRadius = radii[0];
+    } else {
+      result.borderRadius = radii;  // [topLeft, topRight, bottomRight, bottomLeft]
+    }
+  }
+  
+  // ========== 文字属性 ==========
+  if (layer.type === 'Text') {
+    result.text = {
+      content: layer.text,
+      fontSize: layer.style.fontSize,
+      fontFamily: layer.style.fontFamily,
+      fontWeight: layer.style.fontWeight,
+      textColor: layer.style.textColor,
+      alignment: layer.style.alignment,
+      lineHeight: layer.style.lineHeight,
+      letterSpacing: layer.style.kerning
+    };
+  }
+  
+  // ========== 透明度 ==========
+  if (layer.style.opacity !== undefined && layer.style.opacity !== 1) {
+    result.opacity = layer.style.opacity;
+  }
+  
+  // ========== 模糊效果 ==========
+  if (layer.style.blur?.enabled) {
+    result.blur = {
+      type: layer.style.blur.blurType,
+      radius: layer.style.blur.radius
+    };
+  }
+  
+  return result;
+}
+
+/**
+ * 递归测量整个画板
+ */
+function measureArtboard(artboard) {
+  const results = [];
+  
+  function traverse(layer, depth = 0) {
+    if (layer.hidden) return;
+    
+    const data = measureLayerComplete(layer);
+    data.depth = depth;
+    results.push(data);
+    
+    // 递归子图层
+    if (layer.layers) {
+      layer.layers.forEach(child => traverse(child, depth + 1));
+    }
+    
+    // Symbol 展开图层
+    if (layer.expandedLayers) {
+      layer.expandedLayers.forEach(child => traverse(child, depth + 1));
+    }
+  }
+  
+  traverse(artboard);
+  return results;
+}
+
+// 使用示例
+const doc = sketch.getSelectedDocument();
+const artboard = doc.selectedLayers.layers[0];
+const measurements = measureArtboard(artboard);
+console.log(JSON.stringify(measurements, null, 2));
+```
+
+---
+
+## 🎨 颜色转换
+
+### Sketch 颜色到各框架
+
+```javascript
+/**
+ * 将 Sketch 颜色转换为各框架格式
+ * @param {string} sketchColor - Sketch 颜色格式 "#rrggbbaa"
+ * @param {string} framework - 目标框架
+ */
+function convertColor(sketchColor, framework) {
+  // Sketch 格式: #rrggbbaa
+  const r = parseInt(sketchColor.slice(1, 3), 16);
+  const g = parseInt(sketchColor.slice(3, 5), 16);
+  const b = parseInt(sketchColor.slice(5, 7), 16);
+  const a = parseInt(sketchColor.slice(7, 9), 16) / 255;
+  
+  switch (framework) {
+    case 'flutter':
+      // Flutter: Color(0xAARRGGBB)
+      const flutterHex = sketchColor.slice(7, 9) + sketchColor.slice(1, 7);
+      return `Color(0x${flutterHex.toUpperCase()})`;
+    
+    case 'css':
+      // CSS: rgba(r, g, b, a)
+      if (a === 1) {
+        return sketchColor.slice(0, 7);
+      }
+      return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+    
+    case 'react-native':
+      // React Native: '#RRGGBBAA' 或 'rgba(...)'
+      if (a === 1) {
+        return `'${sketchColor.slice(0, 7)}'`;
+      }
+      return `'rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})'`;
+    
+    default:
+      return sketchColor;
+  }
+}
+
+// 渐变转换
+function convertGradient(gradient, framework) {
+  const colors = gradient.stops.map(s => 
+    convertColor(s.color, framework)
+  );
+  
+  switch (framework) {
+    case 'flutter':
+      return `LinearGradient(
+  begin: Alignment(${gradient.from.x * 2 - 1}, ${gradient.from.y * 2 - 1}),
+  end: Alignment(${gradient.to.x * 2 - 1}, ${gradient.to.y * 2 - 1}),
+  colors: [${colors.join(', ')}],
+)`;
+    
+    case 'css':
+      const angle = Math.atan2(
+        gradient.to.y - gradient.from.y,
+        gradient.to.x - gradient.from.x
+      ) * 180 / Math.PI + 90;
+      return `linear-gradient(${angle}deg, ${colors.join(', ')})`;
+    
+    default:
+      return colors;
+  }
+}
+```
+
+---
+
+## ✅ 使用检查清单
+
+### 开始测量前
+
+- [ ] 确认选中正确的画板/Frame
+- [ ] 检查是否有隐藏图层需要测量
+- [ ] 确认设计稿是最新版本
+
+### 测量过程中
+
+- [ ] 对每个颜色检查 `fillType` 是否为 Gradient
+- [ ] 阴影检查是否有多重阴影
+- [ ] 圆角检查四角是否相同
+- [ ] 文字检查行高是否有定义
+
+### 测量完成后
+
+- [ ] 与设计稿视觉对比
+- [ ] 渐变色验证（最容易出错）
+- [ ] 透明度验证
+- [ ] 响应式适配验证
+
+---
+
+## 📚 相关资源
+
+- [Sketch JavaScript API 文档](https://developer.sketch.com/reference/api/)
+- [设计稿还原规范](../workflows/design-restoration.md)
+- [颜色系统规范](../color-system.md)
+
+---
+
+**维护者**: MTA工作室  
+**创建日期**: 2026-01-20  
+**最后更新**: 2026-01-20

package/standards/syntax-mapping.md

@@ -0,0 +1,256 @@
+# 跨框架样式语法映射表
+
+> 设计稿参数到各框架代码的转换参考
+
+## 📋 概述
+
+本文档提供设计稿参数到不同框架（Flutter、Vue/CSS、React Native、小程序）的语法映射，用于设计稿还原时的快速查阅。
+
+---
+
+## 📐 尺寸与布局
+
+### 宽高
+
+| 设计稿 | Flutter | Vue/CSS | React Native | 小程序 |
+|--------|---------|---------|--------------|--------|
+| width: 100px | `width: 100` | `width: 100px` | `width: 100` | `width: 200rpx` |
+| height: 50px | `height: 50` | `height: 50px` | `height: 50` | `height: 100rpx` |
+| 100% 宽度 | `double.infinity` | `width: 100%` | `width: '100%'` | `width: 100%` |
+
+### 内边距 (Padding)
+
+| 设计稿 | Flutter | Vue/CSS | React Native | 小程序 |
+|--------|---------|---------|--------------|--------|
+| 全部 16px | `padding: EdgeInsets.all(16)` | `padding: 16px` | `padding: 16` | `padding: 32rpx` |
+| 水平 16px | `padding: EdgeInsets.symmetric(horizontal: 16)` | `padding: 0 16px` | `paddingHorizontal: 16` | `padding: 0 32rpx` |
+| 垂直 12px | `padding: EdgeInsets.symmetric(vertical: 12)` | `padding: 12px 0` | `paddingVertical: 12` | `padding: 24rpx 0` |
+| 上20 右16 下12 左16 | `padding: EdgeInsets.fromLTRB(16, 20, 16, 12)` | `padding: 20px 16px 12px 16px` | `paddingTop: 20, ...` | `padding: 40rpx 32rpx 24rpx` |
+
+### 外边距 (Margin)
+
+| 设计稿 | Flutter | Vue/CSS | React Native | 小程序 |
+|--------|---------|---------|--------------|--------|
+| 底部 16px | `margin: EdgeInsets.only(bottom: 16)` | `margin-bottom: 16px` | `marginBottom: 16` | `margin-bottom: 32rpx` |
+| 水平居中 | `Container(alignment: Alignment.center)` | `margin: 0 auto` | `alignSelf: 'center'` | `margin: 0 auto` |
+
+---
+
+## 🎨 颜色
+
+### 纯色
+
+| 设计稿 | Flutter | Vue/CSS | React Native |
+|--------|---------|---------|--------------|
+| #1C2B45 | `Color(0xFF1C2B45)` | `#1C2B45` | `'#1C2B45'` |
+| #1C2B45 50%透明 | `Color(0x801C2B45)` | `rgba(28,43,69,0.5)` | `'rgba(28,43,69,0.5)'` |
+
+### 透明度换算
+
+| 透明度 | 十六进制 | 用法示例 |
+|--------|---------|---------|
+| 100% | FF | `0xFF1C2B45` |
+| 90% | E6 | `0xE61C2B45` |
+| 80% | CC | `0xCC1C2B45` |
+| 70% | B3 | `0xB31C2B45` |
+| 60% | 99 | `0x991C2B45` |
+| 50% | 80 | `0x801C2B45` |
+| 40% | 66 | `0x661C2B45` |
+| 30% | 4D | `0x4D1C2B45` |
+| 20% | 33 | `0x331C2B45` |
+| 15% | 26 | `0x261C2B45` |
+| 12% | 1F | `0x1F1C2B45` |
+| 10% | 1A | `0x1A1C2B45` |
+| 5% | 0D | `0x0D1C2B45` |
+| 0% | 00 | `0x001C2B45` |
+
+### 渐变色
+
+**设计稿**: 从 #E01020 到 #B8101A，左上到右下
+
+```dart
+// Flutter
+LinearGradient(
+  begin: Alignment.topLeft,
+  end: Alignment.bottomRight,
+  colors: [Color(0xFFE01020), Color(0xFFB8101A)],
+)
+```
+
+```css
+/* CSS */
+background: linear-gradient(135deg, #E01020 0%, #B8101A 100%);
+```
+
+```javascript
+// React Native (需要 react-native-linear-gradient)
+<LinearGradient
+  colors={['#E01020', '#B8101A']}
+  start={{x: 0, y: 0}}
+  end={{x: 1, y: 1}}
+/>
+```
+
+```css
+/* 小程序 */
+background: linear-gradient(135deg, #E01020, #B8101A);
+```
+
+---
+
+## 📦 圆角
+
+| 设计稿 | Flutter | Vue/CSS | React Native |
+|--------|---------|---------|--------------|
+| 全部 12px | `borderRadius: BorderRadius.circular(12)` | `border-radius: 12px` | `borderRadius: 12` |
+| 只有顶部 12px | `borderRadius: BorderRadius.vertical(top: Radius.circular(12))` | `border-radius: 12px 12px 0 0` | `borderTopLeftRadius: 12, borderTopRightRadius: 12` |
+| 各角不同 [8,12,16,20] | `borderRadius: BorderRadius.only(topLeft: Radius.circular(8), ...)` | `border-radius: 8px 12px 16px 20px` | 逐角设置 |
+
+---
+
+## 🌑 阴影
+
+### 单一阴影
+
+**设计稿**: x=8, y=8, blur=20, color=#1C2B45 15%
+
+```dart
+// Flutter
+BoxShadow(
+  color: Color(0x261C2B45),  // 15% = 0x26
+  blurRadius: 20,
+  offset: Offset(8, 8),
+  spreadRadius: 0,
+)
+```
+
+```css
+/* CSS */
+box-shadow: 8px 8px 20px 0px rgba(28, 43, 69, 0.15);
+```
+
+```javascript
+// React Native
+shadowColor: '#1C2B45',
+shadowOffset: { width: 8, height: 8 },
+shadowOpacity: 0.15,
+shadowRadius: 20,
+elevation: 8,  // Android
+```
+
+### 新拟态双阴影
+
+**设计稿**: 右下深色 + 左上浅色
+
+```dart
+// Flutter
+boxShadow: [
+  // 右下阴影（深色）
+  BoxShadow(
+    color: Color(0x261C2B45),  // 15%
+    blurRadius: 20,
+    offset: Offset(8, 8),
+  ),
+  // 左上高光（浅色）
+  BoxShadow(
+    color: Color(0xE6FFFFFF),  // 90%
+    blurRadius: 20,
+    offset: Offset(-8, -8),
+  ),
+]
+```
+
+```css
+/* CSS */
+box-shadow: 
+  8px 8px 20px rgba(28, 43, 69, 0.15),
+  -8px -8px 20px rgba(255, 255, 255, 0.9);
+```
+
+---
+
+## ✏️ 字体
+
+### 基础属性
+
+| 设计稿 | Flutter | Vue/CSS | React Native |
+|--------|---------|---------|--------------|
+| 字号 16px | `fontSize: 16` | `font-size: 16px` | `fontSize: 16` |
+| 字重 SemiBold(600) | `fontWeight: FontWeight.w600` | `font-weight: 600` | `fontWeight: '600'` |
+| 字重 Bold(700) | `fontWeight: FontWeight.bold` | `font-weight: bold` | `fontWeight: 'bold'` |
+| 行高 24px (字号16) | `height: 1.5` (比例!) | `line-height: 24px` | `lineHeight: 24` |
+| 字间距 0.5px | `letterSpacing: 0.5` | `letter-spacing: 0.5px` | `letterSpacing: 0.5` |
+
+### 字重映射
+
+| 名称 | 数值 | Flutter | CSS |
+|------|------|---------|-----|
+| Thin | 100 | `FontWeight.w100` | `font-weight: 100` |
+| ExtraLight | 200 | `FontWeight.w200` | `font-weight: 200` |
+| Light | 300 | `FontWeight.w300` | `font-weight: 300` |
+| Regular | 400 | `FontWeight.w400` / `FontWeight.normal` | `font-weight: 400` |
+| Medium | 500 | `FontWeight.w500` | `font-weight: 500` |
+| SemiBold | 600 | `FontWeight.w600` | `font-weight: 600` |
+| Bold | 700 | `FontWeight.w700` / `FontWeight.bold` | `font-weight: 700` |
+| ExtraBold | 800 | `FontWeight.w800` | `font-weight: 800` |
+| Black | 900 | `FontWeight.w900` | `font-weight: 900` |
+
+### ⚠️ Flutter 行高注意
+
+Flutter 的 `TextStyle.height` 是**比例值**，不是像素值！
+
+```dart
+// 设计稿：字号 16px，行高 24px
+TextStyle(
+  fontSize: 16,
+  height: 1.5,  // 24 / 16 = 1.5
+)
+```
+
+---
+
+## 🔲 边框
+
+| 设计稿 | Flutter | Vue/CSS | React Native |
+|--------|---------|---------|--------------|
+| 1px #E5E5E5 实线 | `border: Border.all(color: Color(0xFFE5E5E5), width: 1)` | `border: 1px solid #E5E5E5` | `borderWidth: 1, borderColor: '#E5E5E5'` |
+| 只有底边框 | `border: Border(bottom: BorderSide(...))` | `border-bottom: 1px solid #E5E5E5` | `borderBottomWidth: 1, ...` |
+
+---
+
+## 📱 单位换算
+
+### 小程序 rpx
+
+小程序设计稿通常基于 750px 宽度：
+
+```
+rpx = px * 2
+
+设计稿 16px → 小程序 32rpx
+设计稿 100px → 小程序 200rpx
+```
+
+### React Native
+
+React Native 使用逻辑像素（dp/pt），通常与设计稿 1:1：
+
+```javascript
+// 设计稿 16px
+style={{ fontSize: 16 }}
+```
+
+如需适配，使用 `PixelRatio` 或响应式方案。
+
+---
+
+## 📚 相关规范
+
+- [设计稿还原规范](./workflows/design-restoration.md)
+- [Sketch MCP 最佳实践](./mcp-tools/sketch-mcp.md)
+
+---
+
+**维护者**: MTA工作室  
+**创建日期**: 2026-01-20  
+**适用版本**: 通用

package/standards/workflows/design-restoration.md

@@ -0,0 +1,363 @@
+# 设计稿还原规范 (Design Restoration Standard)
+
+> 通用规范 - 适用于所有视觉化开发场景（跨平台/前端/全栈）
+
+## 📋 概述
+
+本规范定义了从设计工具（Sketch、Figma、Adobe XD 等）还原 UI 到代码的标准流程和注意事项，确保在不同框架（Flutter、Vue、React、小程序等）中都能准确还原设计稿。
+
+**适用场景**：
+- 使用 Sketch MCP、Figma MCP 等工具测量设计稿
+- 根据设计图片手动还原 UI
+- 跨平台/多框架项目的样式统一
+
+---
+
+## 🎯 核心原则
+
+### 1. 测量优先级
+
+按以下优先级获取设计参数：
+
+1. **MCP 工具直接读取** - 最准确，但需注意 API 陷阱
+2. **设计工具检查器** - 设计师侧边栏的属性面板
+3. **标注插件导出** - 如 Sketch Measure、Zeplin
+4. **肉眼估算** - 最后手段，需反复对比验证
+
+### 2. 验证闭环
+
+```
+测量 → 编码 → 截图对比 → 微调 → 确认
+```
+
+每个元素都必须完成这个闭环。
+
+### 3. 原子化记录
+
+将设计参数按类别记录，便于复用和维护。
+
+---
+
+## 📐 测量要素清单
+
+### 必须测量的参数
+
+| 类别 | 参数 | 说明 |
+|------|------|------|
+| **尺寸** | width, height | 精确到像素 |
+| **位置** | x, y, margin, padding | 相对于父容器 |
+| **颜色** | 填充色、边框色、阴影色 | ⚠️ 注意渐变 |
+| **圆角** | borderRadius | 四角可能不同 |
+| **字体** | family, size, weight, height | 行高很重要 |
+| **阴影** | color, blur, offset, spread | 多重阴影 |
+| **边框** | color, width, style | 虚线/实线 |
+
+### ⚠️ 常见陷阱
+
+#### 1. 渐变色读取错误
+
+**问题**：API 返回渐变的"代表色"而非实际渐变定义
+
+```javascript
+// ❌ 错误方式
+layer.style.fills[0].color  // 返回错误的单色
+
+// ✅ 正确方式
+if (fill.fillType === 'Gradient') {
+  fill.gradient.stops.map(s => s.color)  // 获取所有色标
+}
+```
+
+#### 2. 透明度丢失
+
+**问题**：颜色值可能不包含透明度信息
+
+```javascript
+// 确保读取完整的 RGBA
+color: "#1C2B4580"  // 包含透明度
+// 而不是
+color: "#1C2B45"    // 丢失透明度
+```
+
+#### 3. 字体权重映射
+
+设计稿中的字重名称需要映射为数值：
+
+| 设计稿名称 | 数值 | Flutter | CSS |
+|-----------|------|---------|-----|
+| Thin | 100 | FontWeight.w100 | font-weight: 100 |
+| Light | 300 | FontWeight.w300 | font-weight: 300 |
+| Regular | 400 | FontWeight.w400 | font-weight: 400 |
+| Medium | 500 | FontWeight.w500 | font-weight: 500 |
+| SemiBold | 600 | FontWeight.w600 | font-weight: 600 |
+| Bold | 700 | FontWeight.w700 | font-weight: 700 |
+
+#### 4. 行高计算差异
+
+不同框架对行高的处理不同：
+
+```
+设计稿行高: 24px, 字号: 16px
+
+Flutter: height = 24 / 16 = 1.5 (比例值)
+CSS: line-height: 24px 或 line-height: 1.5
+小程序: line-height: 24px
+```
+
+---
+
+## 🎨 颜色规范
+
+### 颜色提取完整流程
+
+```javascript
+function extractColor(fill) {
+  if (!fill || !fill.enabled) return null;
+  
+  switch (fill.fillType) {
+    case 'Color':
+      return { type: 'solid', color: fill.color };
+    
+    case 'Gradient':
+      return {
+        type: 'gradient',
+        gradientType: fill.gradient.gradientType,  // Linear/Radial/Angular
+        direction: {
+          from: fill.gradient.from,  // { x: 0, y: 0 }
+          to: fill.gradient.to       // { x: 1, y: 1 }
+        },
+        stops: fill.gradient.stops.map(s => ({
+          position: s.position,  // 0 ~ 1
+          color: s.color
+        }))
+      };
+    
+    case 'Pattern':
+      return { type: 'pattern', image: fill.pattern?.image };
+    
+    default:
+      return null;
+  }
+}
+```
+
+### 渐变方向映射
+
+| 设计稿方向 | Flutter | CSS |
+|-----------|---------|-----|
+| 左上→右下 | Alignment.topLeft → bottomRight | to bottom right |
+| 上→下 | Alignment.topCenter → bottomCenter | to bottom |
+| 左→右 | Alignment.centerLeft → centerRight | to right |
+
+### 颜色透明度表示
+
+```dart
+// Flutter - 使用 0x 前缀
+Color(0x801C2B45)  // 50% 透明度
+
+// CSS - 使用 rgba 或 8位十六进制
+rgba(28, 43, 69, 0.5)
+#1C2B4580
+
+// 小程序 - 同 CSS
+```
+
+---
+
+## 📦 框架语法映射
+
+### 容器/盒模型
+
+| 属性 | Flutter | Vue/CSS | React Native | 小程序 |
+|------|---------|---------|--------------|--------|
+| 宽度 | `width: 100` | `width: 100px` | `width: 100` | `width: 100rpx` |
+| 高度 | `height: 100` | `height: 100px` | `height: 100` | `height: 100rpx` |
+| 内边距 | `padding: EdgeInsets.all(16)` | `padding: 16px` | `padding: 16` | `padding: 32rpx` |
+| 外边距 | `margin: EdgeInsets.only(top: 8)` | `margin-top: 8px` | `marginTop: 8` | `margin-top: 16rpx` |
+| 圆角 | `borderRadius: BorderRadius.circular(12)` | `border-radius: 12px` | `borderRadius: 12` | `border-radius: 24rpx` |
+
+### 颜色
+
+| 场景 | Flutter | Vue/CSS | React Native |
+|------|---------|---------|--------------|
+| 纯色 | `Color(0xFF1C2B45)` | `#1C2B45` | `'#1C2B45'` |
+| 透明色 | `Color(0x801C2B45)` | `rgba(28,43,69,0.5)` | `'rgba(28,43,69,0.5)'` |
+| 渐变 | `LinearGradient(colors: [...])` | `linear-gradient(...)` | `LinearGradient` |
+
+### 阴影
+
+```dart
+// Flutter
+BoxShadow(
+  color: Color(0x261C2B45),
+  blurRadius: 20,
+  offset: Offset(8, 8),
+  spreadRadius: 0,
+)
+```
+
+```css
+/* CSS */
+box-shadow: 8px 8px 20px 0px rgba(28, 43, 69, 0.15);
+```
+
+```javascript
+// React Native
+shadowColor: '#1C2B45',
+shadowOffset: { width: 8, height: 8 },
+shadowOpacity: 0.15,
+shadowRadius: 20,
+elevation: 8,  // Android
+```
+
+### 字体
+
+| 属性 | Flutter | CSS | React Native |
+|------|---------|-----|--------------|
+| 字号 | `fontSize: 16` | `font-size: 16px` | `fontSize: 16` |
+| 字重 | `fontWeight: FontWeight.w600` | `font-weight: 600` | `fontWeight: '600'` |
+| 行高 | `height: 1.5` (比例) | `line-height: 24px` | `lineHeight: 24` |
+| 颜色 | `color: Color(0xFF1C2B45)` | `color: #1C2B45` | `color: '#1C2B45'` |
+
+---
+
+## 🔧 MCP 工具使用规范
+
+### Sketch MCP
+
+#### 正确的测量脚本模板
+
+```javascript
+const sketch = require('sketch');
+const doc = sketch.getSelectedDocument();
+const artboard = doc.selectedLayers.layers[0];
+
+function measureLayer(layer) {
+  const result = {
+    name: layer.name,
+    type: layer.type,
+    frame: {
+      x: Math.round(layer.frame.x),
+      y: Math.round(layer.frame.y),
+      width: Math.round(layer.frame.width),
+      height: Math.round(layer.frame.height),
+    },
+  };
+  
+  // 样式
+  if (layer.style) {
+    // 填充色 - 正确处理渐变
+    if (layer.style.fills?.length > 0) {
+      result.fills = layer.style.fills
+        .filter(f => f.enabled)
+        .map(f => extractColor(f));
+    }
+    
+    // 边框
+    if (layer.style.borders?.length > 0) {
+      result.borders = layer.style.borders
+        .filter(b => b.enabled)
+        .map(b => ({
+          color: b.color,
+          thickness: b.thickness,
+        }));
+    }
+    
+    // 阴影
+    if (layer.style.shadows?.length > 0) {
+      result.shadows = layer.style.shadows
+        .filter(s => s.enabled)
+        .map(s => ({
+          color: s.color,
+          blur: s.blur,
+          x: s.x,
+          y: s.y,
+          spread: s.spread,
+        }));
+    }
+    
+    // 圆角
+    if (layer.style.corners) {
+      result.cornerRadius = layer.style.corners.radii;
+    }
+  }
+  
+  // 文字特有属性
+  if (layer.type === 'Text') {
+    result.text = {
+      content: layer.text,
+      fontSize: layer.style.fontSize,
+      fontFamily: layer.style.fontFamily,
+      fontWeight: layer.style.fontWeight,
+      textColor: layer.style.textColor,
+      alignment: layer.style.alignment,
+      lineHeight: layer.style.lineHeight,
+    };
+  }
+  
+  return result;
+}
+```
+
+### Figma MCP（预留）
+
+```javascript
+// Figma API 颜色读取
+function getFigmaColor(paint) {
+  if (paint.type === 'SOLID') {
+    return {
+      type: 'solid',
+      color: rgbaToHex(paint.color, paint.opacity),
+    };
+  } else if (paint.type === 'GRADIENT_LINEAR') {
+    return {
+      type: 'gradient',
+      stops: paint.gradientStops.map(s => ({
+        position: s.position,
+        color: rgbaToHex(s.color),
+      })),
+    };
+  }
+}
+```
+
+---
+
+## ✅ 还原检查清单
+
+### 每个元素必查
+
+- [ ] 尺寸是否精确匹配
+- [ ] 位置/间距是否正确
+- [ ] 颜色是否正确（特别注意渐变）
+- [ ] 圆角是否正确
+- [ ] 阴影效果是否还原
+- [ ] 字体样式是否匹配
+
+### 整体验收
+
+- [ ] 与设计稿截图叠加对比
+- [ ] 不同屏幕尺寸下的适配
+- [ ] 交互状态（hover、active、disabled）
+- [ ] 暗黑模式（如有）
+
+---
+
+## 📚 相关规范
+
+- [Sketch MCP 最佳实践](./mcp-tools/sketch-mcp.md)
+- [Figma MCP 最佳实践](./mcp-tools/figma-mcp.md)（计划中）
+- [颜色系统规范](./color-system.md)（计划中）
+
+---
+
+## 🔄 版本历史
+
+| 版本 | 日期 | 更新内容 |
+|------|------|---------|
+| v1.0 | 2026-01-20 | 初始版本，包含渐变色读取问题解决方案 |
+
+---
+
+**维护者**: MTA工作室  
+**创建日期**: 2026-01-20