figma-mcp-stdio 1.1.1 → 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 +39 -17
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -27,7 +27,7 @@ const taskList = [
|
|
|
27
27
|
`【页面生成要求】:
|
|
28
28
|
- 下列属性严格遵循Figma中的属性设置：borderRadius、fontWeight、fontSize禁止任何调整`,
|
|
29
29
|
'【前期准备】:',
|
|
30
|
-
"1.
|
|
30
|
+
"1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson，不要保存文件到本地",
|
|
31
31
|
"2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
|
|
32
32
|
`3. 按照规则下载图片
|
|
33
33
|
- ⚠️ 重要提示：不要额外下载类型为IMAGE的图片
|
|
@@ -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设计稿生成页面,确保页面样式与设计稿一致，并实现设计稿中的交互逻辑和用户体验；每执行一步都输出执行结果",
|
|
@@ -64,7 +65,7 @@ const taskModuleList = [
|
|
|
64
65
|
`【页面生成要求】:
|
|
65
66
|
- 下列属性严格遵循Figma中的属性设置：borderRadius、fontWeight、fontSize禁止任何调整`,
|
|
66
67
|
'【前期准备】:',
|
|
67
|
-
"1.
|
|
68
|
+
"1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson，不要保存文件到本地",
|
|
68
69
|
"2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
|
|
69
70
|
`3. 按照规则下载图片
|
|
70
71
|
- ⚠️ 重要提示：不要额外下载类型为IMAGE的图片
|
|
@@ -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({
|
|
@@ -93,6 +95,7 @@ server.addTool({
|
|
|
93
95
|
- Design-token转换：查看figmajson原始数据，进行Design-token样式转换，例：textStyle: Func/Body/B2/B2-R，直接使用Design-Token的原始值 font：Func/Body/B2/B2-R ，无需转换为变量和原始css值，打包工具会自动转换
|
|
94
96
|
注：由Func/xxx 格式的为Design-token，其他格式的不变
|
|
95
97
|
- 最外层容器不要设置为375px、1440px等固定宽度，响应式布局，宽度为100%
|
|
98
|
+
- 设置了 width: 100% 的元素必须同时加上 box-sizing: border-box;否则在存在 padding 时会导致实际宽度溢出
|
|
96
99
|
- 样式生成时gap转换为margin、font-weight: 600转换为font-weight: bold
|
|
97
100
|
`);
|
|
98
101
|
},
|
|
@@ -100,7 +103,7 @@ server.addTool({
|
|
|
100
103
|
// 自动生成页面工具-印尼专用
|
|
101
104
|
server.addTool({
|
|
102
105
|
name: "figma_generate_page_tasks",
|
|
103
|
-
description: "获取Figma
|
|
106
|
+
description: "获取Figma生成页面所需要的任务列表",
|
|
104
107
|
parameters: z.object({
|
|
105
108
|
pluginToolNames: z.array(z.string()).optional().describe("插件名称，如果不提供从环境变量 PLUGIN_TOOL_NAMES 里取"),
|
|
106
109
|
}),
|
|
@@ -132,10 +135,11 @@ server.addTool({
|
|
|
132
135
|
description: "获取组件库信息任务",
|
|
133
136
|
parameters: z.object({
|
|
134
137
|
libraryName: z.string().describe("组件库名称,分析当前工程获取，如package.json文件，获取组件库名称").optional(),
|
|
135
|
-
componentsName: z.string().describe("
|
|
138
|
+
componentsName: z.string().describe("从【获取打标组件名称】工具中获取的组件名称；如果没有就以用户输入为准，如果用户没有输入就传空字符串").optional(),
|
|
136
139
|
useComponentFilePath: z.string().describe("使用组件库的figma nodeId").optional(),
|
|
137
140
|
}),
|
|
138
141
|
execute: async (args) => {
|
|
142
|
+
console.log(args);
|
|
139
143
|
if (!args.libraryName || !args.componentsName) {
|
|
140
144
|
return String(`
|
|
141
145
|
无组件库不查询
|
|
@@ -228,9 +232,27 @@ server.addTool({
|
|
|
228
232
|
execute: async (args) => {
|
|
229
233
|
return String(`
|
|
230
234
|
1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据
|
|
231
|
-
2.
|
|
232
|
-
|
|
233
|
-
|
|
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，未匹配到则返回空字符串
|
|
234
256
|
`);
|
|
235
257
|
},
|
|
236
258
|
});
|