figma-mcp-stdio 1.0.3 → 1.0.4
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 +44 -25
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -11,43 +11,62 @@ const server = new FastMCP({
|
|
|
11
11
|
name: "My Server",
|
|
12
12
|
version: getVersion(),
|
|
13
13
|
});
|
|
14
|
+
/**
|
|
15
|
+
* 7. 优化JSON数据，合并图层，生成新的 JSON 数据，识别JSON中卡片（Frame/Group），如果识别到模块，则合并模块内的所有节点如果模块没有 Frame/Group 包裹，而是子元素与其他元素平级，聚合元素结合图片辅助检查
|
|
16
|
+
- 检查初步分组是否合理（是否把两个卡片误合并？是否遗漏了卡片阴影等元素？）。
|
|
17
|
+
- 如果需要，调整分组。
|
|
18
|
+
*/
|
|
19
|
+
const taskList = [
|
|
20
|
+
"你是一个专业的Figma页面生成工程师，请严格执行以下步骤，Figma设计稿生成页面,确保页面样式与设计稿一致，并实现设计稿中的交互逻辑和用户体验；每执行一步都输出执行结果",
|
|
21
|
+
`【质量要求】:
|
|
22
|
+
- 交互功能：实现设计稿中的交互逻辑和用户体验
|
|
23
|
+
- 图片处理：正确替换和优化图片资源，语义化命名
|
|
24
|
+
- 完整样式：包含渐变背景、阴影效果、圆角、动画等所有视觉元素`,
|
|
25
|
+
`【图片下载要求】:
|
|
26
|
+
- 语义化命名
|
|
27
|
+
- 格式为png
|
|
28
|
+
- 保存到编辑文件同级的images目录下
|
|
29
|
+
- 张图片下载失败时自动重试 2-3 次`,
|
|
30
|
+
'【前期准备】:',
|
|
31
|
+
"1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson",
|
|
32
|
+
"2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
|
|
33
|
+
"3. 判断有无用户输入的图片描述，若无则【获取打标图片节点ID】，使用【下载Figma图片工具】下载图片，只下载打标图片节点，节点里面的图片不下载，入参的图片格式为png格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下",
|
|
34
|
+
"4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能",
|
|
35
|
+
"5. 调用【获取组件库信息任务】，从知识库中获取组件库信息",
|
|
36
|
+
"6. 使用【获取图片详情工具】获取截图详情",
|
|
37
|
+
"【生成页面】:",
|
|
38
|
+
`7. 根据截图详情内容生成页面，结合 figmaJson及offsetJSON 数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
39
|
+
`,
|
|
40
|
+
"【检查页面】:",
|
|
41
|
+
"9. 调用【检查页面工具】检查页面各个部分，确保都已经正确生成",
|
|
42
|
+
"【清理】:",
|
|
43
|
+
"10. 使用terminal命令删除页面截图(保存在images下的)，只保留用户指定下载的图片资源文件",
|
|
44
|
+
];
|
|
14
45
|
// 自动生成页面工具
|
|
15
46
|
server.addTool({
|
|
16
47
|
name: "figma_generate_page_tasks",
|
|
17
48
|
description: "获取Figma生成页面所需要的任务列表",
|
|
18
49
|
execute: async (args) => {
|
|
19
|
-
return
|
|
20
|
-
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
21
|
-
2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图
|
|
22
|
-
3. 判断有无用户输入的图片描述，若无则【获取打标图片节点ID】，使用【下载Figma图片工具】下载图片，只下载打标图片节点，节点里面的图片不下载，入参的图片格式为png格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下
|
|
23
|
-
4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能
|
|
24
|
-
5. 调用【获取组件库信息任务】，从知识库中获取组件库信息，在第6步生成页面时使用
|
|
25
|
-
6. 使用【获取图片详情工具】获取截图详情，根据详情内容生成页面，结合JSON数据优化样式，截图为主，JSON数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
26
|
-
7. 调用【检查页面工具】检查页面各个部分，确保都已经正确生成
|
|
27
|
-
8. 使用terminal命令删除页面截图(保存在images下的)，只保留用户指定下载的图片资源文件
|
|
28
|
-
质量要求：
|
|
29
|
-
- 交互功能：实现设计稿中的交互逻辑和用户体验
|
|
30
|
-
- 图片处理：正确替换和优化图片资源，语义化命名
|
|
31
|
-
- 完整样式：包含渐变背景、阴影效果、圆角、动画等所有视觉元素
|
|
32
|
-
图片下载要求
|
|
33
|
-
- 语义化命名
|
|
34
|
-
- 格式为png
|
|
35
|
-
- 保存到编辑文件同级的images目录下
|
|
36
|
-
- 张图片下载失败时自动重试 2-3 次
|
|
37
|
-
`);
|
|
50
|
+
return taskList.join("\n");
|
|
38
51
|
},
|
|
39
52
|
});
|
|
40
53
|
server.addTool({
|
|
41
54
|
name: "get_ui_component_library_info",
|
|
42
55
|
description: "获取组件库信息任务",
|
|
43
56
|
parameters: z.object({
|
|
44
|
-
libraryName: z.string().describe("组件库名称,分析当前工程获取，如package.json文件，获取组件库名称"),
|
|
45
|
-
componentsName: z.string().describe("Figma json
|
|
57
|
+
libraryName: z.string().describe("组件库名称,分析当前工程获取，如package.json文件，获取组件库名称").optional(),
|
|
58
|
+
componentsName: z.string().describe("从Figma json 中提取name以-xxx-cp结尾的节点（如节点的name为Group1-popup-cp，则使用了popup组件）；如果没有就以用户输入为准，如果用户没有输入就传空字符串").optional(),
|
|
59
|
+
useComponentFilePath: z.string().describe("使用组件库的figma nodeId").optional(),
|
|
46
60
|
}),
|
|
47
61
|
execute: async (args) => {
|
|
62
|
+
if (!args.libraryName || !args.componentsName) {
|
|
63
|
+
return String(`
|
|
64
|
+
无组件库不查询
|
|
65
|
+
`);
|
|
66
|
+
}
|
|
48
67
|
return String(`
|
|
49
|
-
|
|
50
|
-
|
|
68
|
+
使用ai-rag-c-component查找${args.libraryName}组件库中的${args.componentsName}组件所有使用事例和API文档
|
|
69
|
+
如果在知识库中找不到的话就不使用这个组件库，返回组件信息
|
|
51
70
|
`);
|
|
52
71
|
},
|
|
53
72
|
});
|
|
@@ -131,8 +150,8 @@ server.addTool({
|
|
|
131
150
|
execute: async (args) => {
|
|
132
151
|
return String(`
|
|
133
152
|
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
134
|
-
2.
|
|
135
|
-
3.
|
|
153
|
+
2. 找到页面JSON结构数据中name属性值以"-image"结尾的节点, 例如节点name:Frame1-image则需要下载，节点name:Union则不需要下载
|
|
154
|
+
3. 只返回节点ID，不要返回其他信息
|
|
136
155
|
3. 如果获取不到，则返回空字符串
|
|
137
156
|
`);
|
|
138
157
|
},
|