figma-mcp-stdio 1.0.14 → 1.0.16
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 +23 -7
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -29,7 +29,8 @@ const taskList = [
|
|
|
29
29
|
'【前期准备】:',
|
|
30
30
|
"1. 使用能够获取Figma设计稿数据的工具提取页面的JSON结构数据,注入上下文中，数据名称 figmaJson",
|
|
31
31
|
"2. 页面整体的nodeId节点ID需要转换，使用【Figma节点ID转换规则】来获取转换规则, 使用【下载Figma图片工具】下载页面截图",
|
|
32
|
-
`3.
|
|
32
|
+
`3. 按照规则下载图片
|
|
33
|
+
- ⚠️ 重要提示：不要额外下载类型为IMAGE的图片
|
|
33
34
|
- 若有用户输入的图片描述，则使用【下载Figma图片工具】下载对应图片
|
|
34
35
|
- 若无用户输入的图片描述，则执行【获取打标图片节点ID】工具，获取打标图片节点ID
|
|
35
36
|
- 若存在打标图片节点ID, 则使用【下载Figma图片工具】下载图片，仅下载这些打标图片节点（不下载其内部图片）
|
|
@@ -40,15 +41,30 @@ const taskList = [
|
|
|
40
41
|
"6. 使用【获取图片详情工具】获取截图详情，并注入到上下文中，数据名称 imageDetails",
|
|
41
42
|
"【生成页面】:",
|
|
42
43
|
`7. 根据截图详情imageDetails内容生成页面，结合 figmaJson数据优化样式，截图为主，figmaJson 数据为辅。分段生成代码，例如template、script、scss，防止任务过大超时
|
|
43
|
-
- ⚠️ 重要提示：样式生成时gap转换为margin、font-weight: 600转换为font-weight: bold
|
|
44
44
|
`,
|
|
45
|
+
'【代码优化】:',
|
|
46
|
+
`8. 进行代码优化，调用【前端代码优化工具】优化页面`,
|
|
45
47
|
"【自检流程】:",
|
|
46
|
-
"8. 执行自检流程，利用截图详情执行【检查页面】工具自检",
|
|
47
48
|
`9. 执行UI还原度对比流程，执行【还原度对比】工具自检
|
|
48
49
|
- ⚠️ 重要提示：不允许跳过，必须执行
|
|
49
50
|
`,
|
|
50
51
|
"10. 再次执行UI还原度对比流程，执行【还原度对比】工具自检",
|
|
51
52
|
];
|
|
53
|
+
// 问题修复工具
|
|
54
|
+
server.addTool({
|
|
55
|
+
name: "code_optimization",
|
|
56
|
+
description: "前端代码优化工具",
|
|
57
|
+
execute: async (args) => {
|
|
58
|
+
return String(`
|
|
59
|
+
你是一个专业的前端代码优化工程师，请严格执行以下步骤，每执行一步都输出执行结果
|
|
60
|
+
【规则】:
|
|
61
|
+
- Design-token转换：查看figmajson原始数据，进行Design-token样式转换，例：textStyle: Func/Body/B2/B2-R，直接使用Design-Token的原始值 font：Func/Body/B2/B2-R ，无需转换为变量和原始css值，打包工具会自动转换
|
|
62
|
+
注：由Func/xxx 格式的为Design-token，其他格式的不变
|
|
63
|
+
- 最外层容器不要设置为375px、1440px等固定宽度，响应式布局，宽度为100%
|
|
64
|
+
- 样式生成时gap转换为margin、font-weight: 600转换为font-weight: bold
|
|
65
|
+
`);
|
|
66
|
+
},
|
|
67
|
+
});
|
|
52
68
|
// 自动生成页面工具-印尼专用
|
|
53
69
|
server.addTool({
|
|
54
70
|
name: "figma_generate_page_tasks",
|
|
@@ -212,16 +228,16 @@ server.addTool({
|
|
|
212
228
|
description: "还原度对比工具",
|
|
213
229
|
execute: async (args) => {
|
|
214
230
|
return String(`
|
|
215
|
-
⚠️ 重要提示：不允许跳过，必须执行，采用@cursor/browser
|
|
216
|
-
|
|
231
|
+
⚠️ 重要提示：不允许跳过，必须执行，采用@cursor/browser浏览器工具进行对比，查看当前项目readme了解启动和访问项目的方式，查看当前项目的路由配置了解访问路径，项目启动后，通过navigate工具访问页面
|
|
232
|
+
你是一名 UI 验收专家，具备像素级别的视觉识别能力
|
|
217
233
|
使用能控制网页浏览器的工具@cursor/browser将当前 UI（只截取当前视窗,fullPage=false） 与截图对比
|
|
218
234
|
【前置准备】
|
|
219
235
|
- 若是移动端项目，设计稿采用375px设计，选取一个对应的机型进行UI截图
|
|
220
236
|
- 若是官网项目，则无需选取机型，浏览器窗口宽度调整为1440px
|
|
221
237
|
【重点对比场景】
|
|
222
|
-
⚠️ 重要提示:
|
|
238
|
+
⚠️ 重要提示: 严格执行以下对比禁止跳过
|
|
223
239
|
- 调整间距、颜色和排版以保持一致
|
|
224
|
-
-
|
|
240
|
+
- 检查是否有横向或纵向溢出，如果溢出则调整样式，让内容自然撑开
|
|
225
241
|
- 调用获取图片详情工具获取UI详情（右图）与截图详情imageDetails包含内容（左图）对比，与左图比右图相对应的按钮、文字是否都存在
|
|
226
242
|
- 若有按钮或文本不存在，通过滚动模拟用户行为，每屏单独截图对比，若还存在截断，此时不要调整视口高度，检查容器实际情况调整样式，通过修改容器的高度或宽度，让内容自然撑开
|
|
227
243
|
- 【弹窗】：调整弹窗的高度，让内容展示全
|