figma-mcp-stdio 1.1.2 → 1.1.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 +36 -17
- 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({
|
|
@@ -101,8 +103,7 @@ server.addTool({
|
|
|
101
103
|
// 自动生成页面工具-印尼专用
|
|
102
104
|
server.addTool({
|
|
103
105
|
name: "figma_generate_page_tasks",
|
|
104
|
-
description: "
|
|
105
|
-
parameters: z.object({
|
|
106
|
+
description: "用于从 Figma 设计稿生成【完整页面】，对应独立路由、完整布局结构。 【必须调用本工具的条件】： - 用户明确要求生成“完整页面”或“页面路由” - 生成结果作为独立页面存在，而非被其他页面引用 - 用户未提及“模块 / 组件 / 可复用” - **用户描述了“某操作后进入的新页面 / 跳转到新页面 / 新页面展示结果”，且提供页面级 Figma 设计稿用户以业务或产品语言描述页面结果，但未显式说明“生成页面代码”（需自动补全为页面生成意图）**【禁止调用本工具的条件】： - 用户明确提到“模块”、“组件”、“AI 组件” - 用户说明“页面仅作为参考” - 用户目标是生成可被嵌入的结构单元 当存在模块或组件语义时，不得调用本工具。", parameters: z.object({
|
|
106
107
|
pluginToolNames: z.array(z.string()).optional().describe("插件名称，如果不提供从环境变量 PLUGIN_TOOL_NAMES 里取"),
|
|
107
108
|
}),
|
|
108
109
|
execute: async (args) => {
|
|
@@ -123,7 +124,7 @@ server.addTool({
|
|
|
123
124
|
// 自动生成模块工具
|
|
124
125
|
server.addTool({
|
|
125
126
|
name: "figma_generate_module_tasks",
|
|
126
|
-
description: "
|
|
127
|
+
description: "用于从 Figma 设计稿生成【可复用模块 / 组件】，而非完整页面。 【必须调用本工具的条件（满足任意一条即可）】： - 用户明确提到“模块生成”、“组件生成”、“AI 组件”、“可复用组件” - 用户描述中包含“生成模块任务”、“获取模块生成任务”等明确模块语义 - 用户要求：生成内容将被嵌入到页面中，而不是作为完整页面路由存在 【禁止调用页面生成任务的条件】（⚠️ 强约束）： - 即使用户提到“页面”或“参考页面” - 即使输出文件是 .tsx - 即使位于 src/pages 目录下 只要核心目标是“模块 / 组件”，必须使用模块生成任务。 【典型用户示例】： - “获取 figma 模块生成任务” - “从 Figma 生成 AI 组件” - “生成一个可复用模块，页面仅作为参考”",
|
|
127
128
|
execute: async (args) => {
|
|
128
129
|
return taskModuleList.join("\n");
|
|
129
130
|
},
|
|
@@ -133,7 +134,7 @@ server.addTool({
|
|
|
133
134
|
description: "获取组件库信息任务",
|
|
134
135
|
parameters: z.object({
|
|
135
136
|
libraryName: z.string().describe("组件库名称,分析当前工程获取，如package.json文件，获取组件库名称").optional(),
|
|
136
|
-
componentsName: z.string().describe("
|
|
137
|
+
componentsName: z.string().describe("从【获取打标组件名称】工具中获取的组件名称；如果没有就以用户输入为准，如果用户没有输入就传空字符串").optional(),
|
|
137
138
|
useComponentFilePath: z.string().describe("使用组件库的figma nodeId").optional(),
|
|
138
139
|
}),
|
|
139
140
|
execute: async (args) => {
|
|
@@ -229,9 +230,27 @@ server.addTool({
|
|
|
229
230
|
execute: async (args) => {
|
|
230
231
|
return String(`
|
|
231
232
|
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
232
|
-
2.
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
2. 在结构化数据中，使用字符串匹配name属性值以 "-image" 结尾的节点
|
|
234
|
+
- 示例：name 为 "Frame1-image" 的节点需要下载；
|
|
235
|
+
- 示例：name 为 "Union" 的节点不需要下载。
|
|
236
|
+
3. 最终仅返回匹配到的节点 ID，未匹配到则返回空字符串
|
|
237
|
+
4. 仅下载匹配到的节点，若未匹配到但是节点类型是 IMAGE-SVG 也不需要下载
|
|
238
|
+
`);
|
|
239
|
+
},
|
|
240
|
+
});
|
|
241
|
+
// 获取打标组件节点ID
|
|
242
|
+
server.addTool({
|
|
243
|
+
name: "figma_get_components_name",
|
|
244
|
+
description: "获取打标组件名称",
|
|
245
|
+
execute: async (args) => {
|
|
246
|
+
return String(`
|
|
247
|
+
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
248
|
+
2. 在结构化数据中，使用字符串匹配name属性值以 -cp 结尾的节点
|
|
249
|
+
3. 对于每个匹配的节点，从 name 中提取位于最后一个 "-" 与 "-cp" 之间的字段作为组件名称。
|
|
250
|
+
- name: "Group1-popup-cp" → 组件名称为 "popup"
|
|
251
|
+
- name: "Frame-container-header-cp" → 组件名称为 "header"
|
|
252
|
+
- name: "Group1" → 不返回
|
|
253
|
+
4. 最终仅返回匹配到的节点 ID，未匹配到则返回空字符串
|
|
235
254
|
`);
|
|
236
255
|
},
|
|
237
256
|
});
|