mta-mcp 3.9.0 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,30 @@ v2.0 版本进行了重大设计调整：
|
|
|
20
20
|
|
|
21
21
|
**核心思想**：AI 比 MCP 更擅长理解用户意图和做决策，MCP 只需要提供高效的数据访问能力。
|
|
22
22
|
|
|
23
|
+
### 🎯 v3.10.0 架构原则强化
|
|
24
|
+
|
|
25
|
+
**工具职责边界**：
|
|
26
|
+
|
|
27
|
+
| 组件 | 职责 | 不做 |
|
|
28
|
+
|------|------|------|
|
|
29
|
+
| **插件/MCP** | 📊 数据提取（准确、完整、框架中立） | ❌ 生成特定框架代码 |
|
|
30
|
+
| **Chat AI** | 💻 代码生成（理解上下文、选择实现） | ❌ 手工解析设计数据 |
|
|
31
|
+
|
|
32
|
+
**为什么这样设计**：
|
|
33
|
+
- ✅ Chat AI 根据项目技术栈选择合适框架（Vue/React/Flutter/Web）
|
|
34
|
+
- ✅ 插件无法理解项目架构和技术栈，只提供原始数据
|
|
35
|
+
- ✅ 代码生成是 Chat 的强项，数据提取是插件的强项
|
|
36
|
+
- ✅ 各司其职，避免越权
|
|
37
|
+
|
|
38
|
+
**实战案例**：Sketch 渐变提取
|
|
39
|
+
- ❌ **错误**：插件生成 `flutterCode: "LinearGradient(...)"`
|
|
40
|
+
- ✅ **正确**：插件提供 `from: {x: 0.213, y: 0.090}` + 坐标系说明，Chat 根据项目选择 Flutter/CSS/React Native 实现
|
|
41
|
+
|
|
42
|
+
**v3.10.0 改进**：
|
|
43
|
+
- 移除所有框架特定的代码生成逻辑
|
|
44
|
+
- 提供原始 Sketch 数据 + 坐标系转换参考
|
|
45
|
+
- 由 Chat 根据项目决定如何实现
|
|
46
|
+
|
|
23
47
|
## 🎯 功能特性
|
|
24
48
|
|
|
25
49
|
### 核心功能
|
|
@@ -747,9 +771,69 @@ mcp-server/
|
|
|
747
771
|
│ ├── frameworks/
|
|
748
772
|
│ ├── libraries/
|
|
749
773
|
│ └── patterns/
|
|
774
|
+
├── ui/ # ⭐UI 测量工具（配合 @sketch MCP 使用）
|
|
775
|
+
│ └── sketch/
|
|
776
|
+
│ ├── artboard-measure.js # 智能测量工具（整合版）
|
|
777
|
+
│ └── README.md # 使用指南
|
|
750
778
|
└── build/ # 编译输出
|
|
751
779
|
```
|
|
752
780
|
|
|
781
|
+
## 🎨 Sketch 测量工具（UI 还原）
|
|
782
|
+
|
|
783
|
+
**配合 Sketch MCP 使用**，精确提取设计稿数据用于 Flutter/React Native 还原。
|
|
784
|
+
|
|
785
|
+
### 智能测量工具（整合版）
|
|
786
|
+
|
|
787
|
+
`artboard-measure.js` 包含两种测量模式，**自动智能检测**：
|
|
788
|
+
|
|
789
|
+
| 模式 | 用途 | 触发条件 |
|
|
790
|
+
|------|------|----------|
|
|
791
|
+
| **完整画板测量** | Layout Intent JSON | 大尺寸 Frame/Artboard |
|
|
792
|
+
| **快速样式检查** | 渐变/阴影/边框 | 小组件、Group、Symbol |
|
|
793
|
+
|
|
794
|
+
### 快速示例
|
|
795
|
+
|
|
796
|
+
```javascript
|
|
797
|
+
// 在 @sketch MCP 中调用（自动检测模式）
|
|
798
|
+
const fs = require('@skpm/fs')
|
|
799
|
+
const code = fs.readFileSync('ui/sketch/artboard-measure.js', 'utf8')
|
|
800
|
+
eval(code)
|
|
801
|
+
|
|
802
|
+
// 智能检测：
|
|
803
|
+
// - 选中按钮/小组件 → 自动使用快速样式检查
|
|
804
|
+
// - 选中画板/大Frame → 自动使用完整测量
|
|
805
|
+
// - 图层名包含 [quick] → 强制快速检查
|
|
806
|
+
// - 图层名包含 [full] → 强制完整测量
|
|
807
|
+
```
|
|
808
|
+
|
|
809
|
+
### 实战案例：修复按钮颜色
|
|
810
|
+
|
|
811
|
+
**问题**：Flutter 代码中按钮是蓝色 `#4A60B2`，但 Sketch 设计稿是红色
|
|
812
|
+
**原因**：Group 图层本身没有样式，实际样式在子图层的渐变填充中
|
|
813
|
+
**解决**：使用 `quick-style-inspector.js` 快速检查真实样式
|
|
814
|
+
|
|
815
|
+
```json
|
|
816
|
+
// 输出结果
|
|
817
|
+
{
|
|
818
|
+
"allStyles": [{
|
|
819
|
+
"path": "Retry Button > 编组 > Retry Button_background",
|
|
820
|
+
"style": {
|
|
821
|
+
"fills": [{
|
|
822
|
+
"type": "gradient",
|
|
823
|
+
"stops": [
|
|
824
|
+
{ "color": "#e01020ff" }, // 红色起始
|
|
825
|
+
{ "color": "#b8101aff" } // 深红色结束
|
|
826
|
+
]
|
|
827
|
+
}]
|
|
828
|
+
}
|
|
829
|
+
}]
|
|
830
|
+
}
|
|
831
|
+
```
|
|
832
|
+
|
|
833
|
+
**详细文档**：[ui/sketch/README.md](./ui/sketch/README.md)
|
|
834
|
+
|
|
835
|
+
---
|
|
836
|
+
|
|
753
837
|
## � 文档
|
|
754
838
|
|
|
755
839
|
- **[快速开始](./GETTING_STARTED.md)** - 新手入门指南
|