figma-mcp-stdio 1.0.17 → 1.0.19
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 -3
- 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. 使用能够获取Figma设计稿数据的工具提取页面的JSON
|
|
30
|
+
"1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据, 保存到编辑文件同级的figma/data.json中, 注入上下文中，数据名称 figmaJson",
|
|
31
31
|
"2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
|
|
32
32
|
`3. 按照规则下载图片
|
|
33
33
|
- ⚠️ 重要提示：不要额外下载类型为IMAGE的图片
|
|
@@ -45,10 +45,42 @@ const taskList = [
|
|
|
45
45
|
'【代码优化】:',
|
|
46
46
|
`8. 进行代码优化，调用【前端代码优化工具】优化页面`,
|
|
47
47
|
"【自检流程】:",
|
|
48
|
-
`9. 执行UI还原度对比流程，执行【还原度对比】工具自检
|
|
48
|
+
`9. 使用浏览器工具 @cursor/browser 执行UI还原度对比流程，执行【还原度对比】工具自检
|
|
49
49
|
- ⚠️ 重要提示：不允许跳过，必须执行
|
|
50
50
|
`,
|
|
51
|
-
"10. 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
|
|
51
|
+
"10. @cursor/browser 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
|
|
52
|
+
];
|
|
53
|
+
const taskModuleList = [
|
|
54
|
+
"你是一个专业的Figma页面生成工程师，请严格执行以下步骤，Figma设计稿生成页面,确保页面样式与设计稿一致，并实现设计稿中的交互逻辑和用户体验；每执行一步都输出执行结果",
|
|
55
|
+
`【质量要求】:
|
|
56
|
+
- 交互功能：实现设计稿中的交互逻辑和用户体验
|
|
57
|
+
- 图片处理：正确替换和优化图片资源，语义化命名
|
|
58
|
+
- 完整样式：包含渐变背景、阴影效果、圆角、动画等所有视觉元素`,
|
|
59
|
+
`【图片下载要求】:
|
|
60
|
+
- 语义化命名
|
|
61
|
+
- 格式为png
|
|
62
|
+
- 保存到编辑文件同级的images目录下
|
|
63
|
+
- 张图片下载失败时自动重试 2-3 次`,
|
|
64
|
+
`【页面生成要求】:
|
|
65
|
+
- 下列属性严格遵循Figma中的属性设置：borderRadius、fontWeight、fontSize禁止任何调整`,
|
|
66
|
+
'【前期准备】:',
|
|
67
|
+
"1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据, 保存到编辑文件同级的figma/data.json中, 注入上下文中，数据名称 figmaJson",
|
|
68
|
+
"2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
|
|
69
|
+
`3. 按照规则下载图片
|
|
70
|
+
- ⚠️ 重要提示：不要额外下载类型为IMAGE的图片
|
|
71
|
+
- 若有用户输入的图片描述，则使用【下载Figma图片工具】下载对应图片
|
|
72
|
+
- 若无用户输入的图片描述，则执行【获取打标图片节点ID】工具，获取打标图片节点ID
|
|
73
|
+
- 若存在打标图片节点ID, 则使用【下载Figma图片工具】下载图片，仅下载这些打标图片节点（不下载其内部图片）
|
|
74
|
+
- 若不存在打标图片节点ID, 则不下载图片
|
|
75
|
+
【注】下载图片时统一使用 PNG 格式，语义化命名，用于替换生成页面中的节点，下载的图片保存到编辑文件同级的images目录下`,
|
|
76
|
+
"4. 使用【批量压缩图片工具】对下载的所有图片文件进行压缩优化，减少文件大小提升页面加载性能",
|
|
77
|
+
"5. 调用【获取组件库信息任务】，从知识库中获取组件库信息",
|
|
78
|
+
"6. 使用【获取图片详情工具】获取截图详情，并注入到上下文中，数据名称 imageDetails",
|
|
79
|
+
"【生成页面】:",
|
|
80
|
+
`7. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
81
|
+
`,
|
|
82
|
+
'【代码优化】:',
|
|
83
|
+
`8. 进行代码优化，调用【前端代码优化工具】优化页面`,
|
|
52
84
|
];
|
|
53
85
|
// 问题修复工具
|
|
54
86
|
server.addTool({
|
|
@@ -87,6 +119,14 @@ server.addTool({
|
|
|
87
119
|
return tasks.join("\n");
|
|
88
120
|
},
|
|
89
121
|
});
|
|
122
|
+
// 自动生成模块工具
|
|
123
|
+
server.addTool({
|
|
124
|
+
name: "figma_generate_module_tasks",
|
|
125
|
+
description: "获取Figma生成模块所需要的任务列表",
|
|
126
|
+
execute: async (args) => {
|
|
127
|
+
return taskModuleList.join("\n");
|
|
128
|
+
},
|
|
129
|
+
});
|
|
90
130
|
server.addTool({
|
|
91
131
|
name: "get_ui_component_library_info",
|
|
92
132
|
description: "获取组件库信息任务",
|
|
@@ -232,6 +272,7 @@ server.addTool({
|
|
|
232
272
|
你是一名 UI 验收专家，具备像素级别的视觉识别能力
|
|
233
273
|
使用能控制网页浏览器的工具@cursor/browser将当前 UI（只截取当前视窗,fullPage=false） 与截图对比
|
|
234
274
|
【前置准备】
|
|
275
|
+
- 通过设计稿宽度判断是移动端项目还是官网项目
|
|
235
276
|
- 若是移动端项目，设计稿采用375px设计，选取一个对应的机型进行UI截图
|
|
236
277
|
- 若是官网项目，则无需选取机型，浏览器窗口宽度调整为1440px
|
|
237
278
|
【重点对比场景】
|