figma-mcp-stdio 1.0.1 → 1.0.3
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/build/index.js +36 -6
- package/package.json +4 -1
package/build/index.js
CHANGED
|
@@ -18,16 +18,36 @@ server.addTool({
|
|
|
18
18
|
execute: async (args) => {
|
|
19
19
|
return String(`
|
|
20
20
|
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
21
|
-
2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID
|
|
22
|
-
3.
|
|
21
|
+
2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图
|
|
22
|
+
3. 判断有无用户输入的图片描述，若无则【获取打标图片节点ID】，使用【下载Figma图片工具】下载图片，只下载打标图片节点，节点里面的图片不下载，入参的图片格式为png格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下
|
|
23
23
|
4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能
|
|
24
|
-
5.
|
|
25
|
-
6.
|
|
26
|
-
7.
|
|
24
|
+
5. 调用【获取组件库信息任务】，从知识库中获取组件库信息，在第6步生成页面时使用
|
|
25
|
+
6. 使用【获取图片详情工具】获取截图详情，根据详情内容生成页面，结合JSON数据优化样式，截图为主，JSON数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
26
|
+
7. 调用【检查页面工具】检查页面各个部分，确保都已经正确生成
|
|
27
|
+
8. 使用terminal命令删除页面截图(保存在images下的)，只保留用户指定下载的图片资源文件
|
|
27
28
|
质量要求：
|
|
28
29
|
- 交互功能：实现设计稿中的交互逻辑和用户体验
|
|
29
30
|
- 图片处理：正确替换和优化图片资源，语义化命名
|
|
30
31
|
- 完整样式：包含渐变背景、阴影效果、圆角、动画等所有视觉元素
|
|
32
|
+
图片下载要求
|
|
33
|
+
- 语义化命名
|
|
34
|
+
- 格式为png
|
|
35
|
+
- 保存到编辑文件同级的images目录下
|
|
36
|
+
- 张图片下载失败时自动重试 2-3 次
|
|
37
|
+
`);
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
server.addTool({
|
|
41
|
+
name: "get_ui_component_library_info",
|
|
42
|
+
description: "获取组件库信息任务",
|
|
43
|
+
parameters: z.object({
|
|
44
|
+
libraryName: z.string().describe("组件库名称,分析当前工程获取，如package.json文件，获取组件库名称"),
|
|
45
|
+
componentsName: z.string().describe("Figma json 中以-name-cp结尾的节点，如节点的name为Group1-popup-cp 或者指定使用组件的元素"),
|
|
46
|
+
}),
|
|
47
|
+
execute: async (args) => {
|
|
48
|
+
return String(`
|
|
49
|
+
从知识库中获取${args.libraryName}组件库中的${args.componentsName}组件及API文档
|
|
50
|
+
先查看知识库中有哪些可用的分类，在查询具体的文档，如果在知识库中找不到的话就不使用这个组件库，返回组件信息
|
|
31
51
|
`);
|
|
32
52
|
},
|
|
33
53
|
});
|
|
@@ -111,7 +131,7 @@ server.addTool({
|
|
|
111
131
|
execute: async (args) => {
|
|
112
132
|
return String(`
|
|
113
133
|
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
114
|
-
2. 找到JSON结构数据 ，name属性值以"-image"
|
|
134
|
+
2. 找到JSON结构数据 ，name属性值以"-image"结尾的节点, 例如节点name为xxx-image则需要下载，节点name为Union则不需要下载
|
|
115
135
|
3. 只返回图片节点ID，不要返回其他信息
|
|
116
136
|
3. 如果获取不到，则返回空字符串
|
|
117
137
|
`);
|
|
@@ -136,6 +156,16 @@ server.addTool({
|
|
|
136
156
|
};
|
|
137
157
|
},
|
|
138
158
|
});
|
|
159
|
+
// 图片检查工具
|
|
160
|
+
server.addTool({
|
|
161
|
+
name: "check_image",
|
|
162
|
+
description: "检查图片",
|
|
163
|
+
execute: async (args) => {
|
|
164
|
+
return String(`
|
|
165
|
+
1. 检查图片节点是否为图片，如果为图片则内部的节点不需要生成
|
|
166
|
+
`);
|
|
167
|
+
},
|
|
168
|
+
});
|
|
139
169
|
// 辅助函数 读取本地绝对路径图片并转为base64字符串
|
|
140
170
|
/**
|
|
141
171
|
* 读取本地绝对路径图片并转为base64字符串
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "figma-mcp-stdio",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A Model Context Protocol server",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
|
+
"engines": {
|
|
8
|
+
"node": ">=20.0.0"
|
|
9
|
+
},
|
|
7
10
|
"bin": {
|
|
8
11
|
"figma-mcp-stdio": "./build/index.js"
|
|
9
12
|
},
|