分组工具栏项

中级

这是一个Engineering、AI Summarization领域的自动化工作流,包含 13 个节点。主要使用 Code、FormTrigger、Agent、ChainLlm、LmChatGoogleGemini 等节点。 整理UI工具栏图标:遵循Apple HIG标准并使用Gemini AI

前置要求
  • Google Gemini API Key
工作流预览
可视化展示节点连接关系,支持缩放和平移
导出工作流
复制以下 JSON 配置到 n8n 导入,即可使用此工作流
{
  "id": "ile4IWJUcJlAyxCJ",
  "meta": {
    "instanceId": "397b1beffa7671dbc800eea9b534ffa9efbc47a912d81989c82f2fcfeefb6d0a",
    "templateCredsSetupCompleted": true
  },
  "name": "分组工具栏项",
  "tags": [],
  "nodes": [
    {
      "id": "43fda72d-029f-4e2a-bc33-29fed6f6e7d5",
      "name": "表单提交时",
      "type": "n8n-nodes-base.formTrigger",
      "position": [
        0,
        -80
      ],
      "webhookId": "47af2995-1f19-4d85-bd7d-666ad227edec",
      "parameters": {
        "options": {},
        "formTitle": "Icon submission",
        "formFields": {
          "values": [
            {
              "fieldType": "file",
              "fieldLabel": "The screen",
              "multipleFiles": false,
              "requiredField": true
            },
            {
              "fieldType": "file",
              "fieldLabel": "Icons",
              "requiredField": true
            }
          ]
        },
        "formDescription": "Please upload:\n- the screen;\n- the set of icons for the screen."
      },
      "typeVersion": 2.3
    },
    {
      "id": "115e9569-3b26-4533-82b6-34cee976cf72",
      "name": "Gemini",
      "type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini",
      "position": [
        224,
        64
      ],
      "parameters": {
        "options": {}
      },
      "credentials": {
        "googlePalmApi": {
          "id": "8ZXhMtvXnU5ROGzU",
          "name": "Google Gemini(PaLM) Api account"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "c6901892-b4b8-4636-a0aa-4df78bba6c46",
      "name": "Gemini:重新排序",
      "type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini",
      "position": [
        816,
        64
      ],
      "parameters": {
        "options": {}
      },
      "credentials": {
        "googlePalmApi": {
          "id": "8ZXhMtvXnU5ROGzU",
          "name": "Google Gemini(PaLM) Api account"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "bcf6195d-7d67-4c0d-8095-77ec8d9202e5",
      "name": "Google Gemini聊天模型",
      "type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini",
      "position": [
        1376,
        48
      ],
      "parameters": {
        "options": {}
      },
      "credentials": {
        "googlePalmApi": {
          "id": "8ZXhMtvXnU5ROGzU",
          "name": "Google Gemini(PaLM) Api account"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "12e987da-a185-469e-b831-9b70c336aa7b",
      "name": "代码:清理结果",
      "type": "n8n-nodes-base.code",
      "position": [
        576,
        -80
      ],
      "parameters": {
        "jsCode": "// Get the input data from the previous node\nconst input = $json[\"output\"]; // This contains the string with ```json ... ```\n\n// Remove the ```json wrapper\nconst jsonString = input.replace(/```json|```/g, '').trim();\n\n// Parse the JSON string\nconst data = JSON.parse(jsonString);\n\n// Return each part separately in n8n\nreturn [\n  {\n    json: {\n      screen: data.Screen,\n      groups: data.Groups,\n      placement: data.Placement\n    }\n  }\n];\n"
      },
      "typeVersion": 2
    },
    {
      "id": "52ff450a-8710-4807-87df-40f97f954968",
      "name": "UI 指导",
      "type": "@n8n/n8n-nodes-langchain.chainLlm",
      "position": [
        1376,
        -80
      ],
      "parameters": {
        "text": "=You are given icon filenames, their groups, and their screen placements:\n\n```json\n{{ $('AI Agent: Icon Categorizer').item.json.output }}\n```\n\n**Task:**\n\n1. Read and follow the Apple Human Interface Guidelines for toolbars:\n   [https://developer.apple.com/design/human-interface-guidelines/toolbars]\n2. Based on these guidelines and the provided icon data, create a **full structured design proposal** for arranging and organizing the icons in the UI.\n",
        "batching": {},
        "promptType": "define"
      },
      "typeVersion": 1.7
    },
    {
      "id": "bbe240ae-2728-4af8-ba05-1ce341884a86",
      "name": "便签",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -80,
        -208
      ],
      "parameters": {
        "height": 400,
        "content": "## 获取屏幕"
      },
      "typeVersion": 1
    },
    {
      "id": "84fcb22a-1dfb-4c78-8ceb-8971c2366aa2",
      "name": "便签 1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        208,
        -208
      ],
      "parameters": {
        "color": 4,
        "width": 544,
        "height": 400,
        "content": "## 分析屏幕和图标以进行分类"
      },
      "typeVersion": 1
    },
    {
      "id": "bb48382b-a1cf-432e-b6f3-963a14fa14b5",
      "name": "AI Agent:图标分类器",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        224,
        -80
      ],
      "parameters": {
        "text": "=The form receives the screen context and a set of icons.\n\nScreen: {{ $json['The screen'].filename }}\nIcons: {{ JSON.stringify($json.Icons) }}\n\nYour task:\n1. Analyze the screen context.\n2. Group each icon into one of the following roles (from Apple HIG) based on the uploaded screen:\n   - .primaryAction\n   - .secondaryAction\n   - .confirmationAction\n   - .destructiveAction\n   - .cancellationAction\n   - .navigation\n   - .navigationBarLeading\n   - .navigationBarTrailing\n   - .principal\n   - .bottomBar\n   - .status\n   - .automatic\n   - .keyboard\n\n3. After grouping the icons by role, assign their **placement** as follows:\n\n* **Left (Leading):**\n  - .navigation\n  - .navigationBarLeading\n  - .cancellationAction\n\n* **Right (Trailing):**\n  - .primaryAction\n  - .secondaryAction\n  - .confirmationAction\n  - .destructiveAction\n  - .navigationBarTrailing\n\n* **Center:**\n  - .principal\n\n* **Bottom:**\n  - .bottomBar\n  - .status\n  - .keyboard\n\n* **System-decided:**\n  - .automatic\n\nOutput strictly in JSON format:\n{\n  \"Screen\": \"<Describe the screen>\",\n  \"Groups\": {\n    \"<RoleName01>\": [\"iconName01\", \"iconName02\"],\n    \"<RoleName02>\": [\"iconName03\"]\n  },\n  \"Placement\": {\n    \"Left\": [\"iconName01\", \"iconName02\"],\n    \"Right\": [\"iconName01\", \"iconName02\"],\n    \"Center\": [\"iconName01\", \"iconName02\"],\n    \"Bottom\": [\"iconName01\", \"iconName02\"],\n    \"System-decided\": [\"iconName01\", \"iconName02\"]\n  }\n}\n",
        "options": {},
        "promptType": "define"
      },
      "typeVersion": 2.2
    },
    {
      "id": "547e0c7d-227f-4d4f-b9ee-05044c090d0b",
      "name": "便签 2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        768,
        -208
      ],
      "parameters": {
        "color": 7,
        "width": 544,
        "height": 400,
        "content": "## 基于使用情况重新排序"
      },
      "typeVersion": 1
    },
    {
      "id": "0c9a268d-8d31-4f9b-b227-3f2457765b9f",
      "name": "代码:清理结果",
      "type": "n8n-nodes-base.code",
      "position": [
        1136,
        -80
      ],
      "parameters": {
        "jsCode": "// Get the text field from input\nconst input = items[0].json.text;\n\n// Remove code block markers (```json ... ```)\nconst cleaned = input.replace(/```json\\n?/, '').replace(/```$/, '').trim();\n\n// Parse into object\nconst parsed = JSON.parse(cleaned);\n\n// Return in n8n format\nreturn [\n  {\n    json: parsed\n  }\n];\n"
      },
      "typeVersion": 2
    },
    {
      "id": "99007016-102a-4ca3-8009-42662830a34d",
      "name": "基础 LLM 链:重新排序",
      "type": "@n8n/n8n-nodes-langchain.chainLlm",
      "position": [
        816,
        -80
      ],
      "parameters": {
        "text": "=You are given sets of icon filenames for different screen placements:\n\n```json\n{\n  \"Left\": {{ $json.placement.Left }},\n  \"Right\": {{ $json.placement.Right }},\n  \"Center\": {{ $json.placement.Center }},\n  \"Bottom\": {{ $json.placement.Bottom }},\n  \"System-decided\": {{ $json.placement[\"System-decided\"] }}\n}\n```\n\n**Task:**\n\n1. For each placement (Left, Right, Center, Bottom, System-decided), reorder the icons by typical usage frequency in applications (web, desktop, mobile), from most used (left) to least used (right).\n2. If a placement has no icons, return an empty array.\n3. Return the final result as a JSON object with the same keys (`Left`, `Right`, `Center`, `Bottom`, `System-decided`) and the arrays of filenames in order.\n4. Do not include explanations or extra text.",
        "batching": {},
        "promptType": "define"
      },
      "typeVersion": 1.7
    },
    {
      "id": "96d48453-28d1-485d-90c1-758009df78e2",
      "name": "便签 3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1328,
        -208
      ],
      "parameters": {
        "color": 3,
        "width": 384,
        "height": 400,
        "content": "## 完整结构化设计方案"
      },
      "typeVersion": 1
    }
  ],
  "active": false,
  "pinData": {},
  "settings": {
    "executionOrder": "v1"
  },
  "versionId": "317ce80f-d844-493f-b288-ccec91a874cf",
  "connections": {
    "Gemini": {
      "ai_languageModel": [
        [
          {
            "node": "AI Agent: Icon Categorizer",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "UI Guidance": {
      "main": [
        []
      ]
    },
    "Gemini: Reordering": {
      "ai_languageModel": [
        [
          {
            "node": "Basic LLM Chain: Reordering",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "On form submission": {
      "main": [
        [
          {
            "node": "AI Agent: Icon Categorizer",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Code: Clean Outcome": {
      "main": [
        [
          {
            "node": "Basic LLM Chain: Reordering",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Code: Clean Outcomes": {
      "main": [
        [
          {
            "node": "UI Guidance",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Google Gemini Chat Model": {
      "ai_languageModel": [
        [
          {
            "node": "UI Guidance",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "AI Agent: Icon Categorizer": {
      "main": [
        [
          {
            "node": "Code: Clean Outcome",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Basic LLM Chain: Reordering": {
      "main": [
        [
          {
            "node": "Code: Clean Outcomes",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
常见问题

如何使用这个工作流?

复制上方的 JSON 配置代码,在您的 n8n 实例中创建新工作流并选择「从 JSON 导入」,粘贴配置后根据需要修改凭证设置即可。

这个工作流适合什么场景?

这是一个中级难度的工作流,适用于Engineering、AI Summarization等场景。适合有一定经验的用户,包含 6-15 个节点的中等复杂度工作流

需要付费吗?

本工作流完全免费,您可以直接导入使用。但请注意,工作流中使用的第三方服务(如 OpenAI API)可能需要您自行付费。

工作流信息
难度等级
中级
节点数量13
分类2
节点类型6
难度说明

适合有一定经验的用户,包含 6-15 个节点的中等复杂度工作流

作者
Zeinabsadat Mousavi Amin

Zeinabsadat Mousavi Amin

@zeinabdesigner

AI UX Designer

外部链接
在 n8n.io 上查看 →

分享此工作流