figma-mcp-stdio 1.1.2 → 1.1.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 +35 -14
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -37,18 +37,19 @@ const taskList = [
|
|
|
37
37
|
- 若不存在打标图片节点ID, 则不下载图片
|
|
38
38
|
【注】下载图片时统一使用 PNG 格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下`,
|
|
39
39
|
"4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能",
|
|
40
|
-
"5.
|
|
41
|
-
"6.
|
|
40
|
+
"5. 调用【获取打标组件名称】工具，获取打标组件名称",
|
|
41
|
+
"6. 调用【获取组件库信息任务】，从知识库中获取组件库信息，组件名称需要从【获取打标组件名称】工具中获取",
|
|
42
|
+
"7. 使用【获取图片详情工具】获取截图详情，并注入到上下文中，数据名称 imageDetails",
|
|
42
43
|
"【生成页面】:",
|
|
43
|
-
`
|
|
44
|
+
`8. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
44
45
|
`,
|
|
45
46
|
'【代码优化】:',
|
|
46
|
-
`
|
|
47
|
+
`9. 进行代码优化，调用【前端代码优化工具】优化页面`,
|
|
47
48
|
"【自检流程】:",
|
|
48
|
-
`
|
|
49
|
+
`10. 使用浏览器工具 @cursor/browser 执行UI还原度对比流程，执行【还原度对比】工具自检
|
|
49
50
|
- ⚠️ 重要提示：不允许跳过，必须执行
|
|
50
51
|
`,
|
|
51
|
-
"
|
|
52
|
+
"11. @cursor/browser 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
|
|
52
53
|
];
|
|
53
54
|
const taskModuleList = [
|
|
54
55
|
"你是一个专业的Figma页面生成工程师，请严格执行以下步骤，Figma设计稿生成页面,确保页面样式与设计稿一致，并实现设计稿中的交互逻辑和用户体验；每执行一步都输出执行结果",
|
|
@@ -74,13 +75,14 @@ const taskModuleList = [
|
|
|
74
75
|
- 若不存在打标图片节点ID, 则不下载图片
|
|
75
76
|
【注】下载图片时统一使用 PNG 格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下`,
|
|
76
77
|
"4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能",
|
|
77
|
-
"5.
|
|
78
|
-
"6.
|
|
78
|
+
"5. 调用【获取打标组件名称】工具，获取打标组件名称",
|
|
79
|
+
"6. 调用【获取组件库信息任务】，从知识库中获取组件库信息，组件名称需要从【获取打标组件名称】工具中获取",
|
|
80
|
+
"7. 使用【获取图片详情工具】获取截图详情，并注入到上下文中，数据名称 imageDetails",
|
|
79
81
|
"【生成页面】:",
|
|
80
|
-
`
|
|
82
|
+
`8. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
81
83
|
`,
|
|
82
84
|
'【代码优化】:',
|
|
83
|
-
`
|
|
85
|
+
`9. 进行代码优化，调用【前端代码优化工具】优化页面`,
|
|
84
86
|
];
|
|
85
87
|
// 问题修复工具
|
|
86
88
|
server.addTool({
|
|
@@ -133,10 +135,11 @@ server.addTool({
|
|
|
133
135
|
description: "获取组件库信息任务",
|
|
134
136
|
parameters: z.object({
|
|
135
137
|
libraryName: z.string().describe("组件库名称,分析当前工程获取，如package.json文件，获取组件库名称").optional(),
|
|
136
|
-
componentsName: z.string().describe("
|
|
138
|
+
componentsName: z.string().describe("从【获取打标组件名称】工具中获取的组件名称；如果没有就以用户输入为准，如果用户没有输入就传空字符串").optional(),
|
|
137
139
|
useComponentFilePath: z.string().describe("使用组件库的figma nodeId").optional(),
|
|
138
140
|
}),
|
|
139
141
|
execute: async (args) => {
|
|
142
|
+
console.log(args);
|
|
140
143
|
if (!args.libraryName || !args.componentsName) {
|
|
141
144
|
return String(`
|
|
142
145
|
无组件库不查询
|
|
@@ -229,9 +232,27 @@ server.addTool({
|
|
|
229
232
|
execute: async (args) => {
|
|
230
233
|
return String(`
|
|
231
234
|
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
232
|
-
2.
|
|
233
|
-
|
|
234
|
-
|
|
235
|
+
2. 在结构化数据中，使用字符串匹配name属性值以 "-image" 结尾的节点
|
|
236
|
+
- 示例：name 为 "Frame1-image" 的节点需要下载；
|
|
237
|
+
- 示例：name 为 "Union" 的节点不需要下载。
|
|
238
|
+
3. 最终仅返回匹配到的节点 ID，未匹配到则返回空字符串
|
|
239
|
+
4. 仅下载匹配到的节点，若未匹配到但是节点类型是 IMAGE-SVG 也不需要下载
|
|
240
|
+
`);
|
|
241
|
+
},
|
|
242
|
+
});
|
|
243
|
+
// 获取打标组件节点ID
|
|
244
|
+
server.addTool({
|
|
245
|
+
name: "figma_get_components_name",
|
|
246
|
+
description: "获取打标组件名称",
|
|
247
|
+
execute: async (args) => {
|
|
248
|
+
return String(`
|
|
249
|
+
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
250
|
+
2. 在结构化数据中，使用字符串匹配name属性值以 -cp 结尾的节点
|
|
251
|
+
3. 对于每个匹配的节点，从 name 中提取位于最后一个 "-" 与 "-cp" 之间的字段作为组件名称。
|
|
252
|
+
- name: "Group1-popup-cp" → 组件名称为 "popup"
|
|
253
|
+
- name: "Frame-container-header-cp" → 组件名称为 "header"
|
|
254
|
+
- name: "Group1" → 不返回
|
|
255
|
+
4. 最终仅返回匹配到的节点 ID，未匹配到则返回空字符串
|
|
235
256
|
`);
|
|
236
257
|
},
|
|
237
258
|
});
|