分组工具栏项
中级
这是一个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)可能需要您自行付费。
相关工作流推荐
规划研究
使用Gemini AI、Google文档和人工反馈自动化UX研究规划
Code
Gmail
Google Docs
+5
33 节点Zeinabsadat Mousavi Amin
Document Extraction
选题捕手模板
使用Gemini分析Reddit、YouTube和X生成内容策略报告
If
Set
Code
+14
34 节点Sheryl
Market Research
n8n 工作流节点重命名器 by UpFastAI
使用 AI (Gemini/Claude) 自动重命名工作流节点以提高可读性
N8n
Set
Code
+6
12 节点Dr. Christoph Schorsch
Engineering
技术雷达
使用SQL数据库、RAG和路由代理构建AI驱动的技术雷达顾问
If
Code
Cron
+22
53 节点Sean Lon
Engineering
HireMind – AI驱动的简历智能处理流程
HR AI简历筛选与评估:GPT-4和Google Workspace
If
Code
Slack
+10
26 节点Trung Tran
HR
基于比较的简历筛选
使用Gemini AI和Google Sheets自动化简历筛选与候选人评分
Code
Merge
Form Trigger
+6
27 节点Asfandyar Malik
HR