workflows.fit
Back to n8n workflows
n8n templateFreeBy Zeinabsadat Mousavi Amin

Organizing UI toolbar icons: Apple HIG standards and Gemini AI

Overview When designing user interfaces, toolbar icons often get overlooked, even though their placement and grouping dramatically impact usability and user flow. This workflow leverages Gemini AI to automatically ana...

DevelopmentCore NodesAILangchainForm TriggerLm Chat Google GeminiCodeChain Llm
Loading interactive preview...

Template notes

Overview

When designing user interfaces, toolbar icons often get overlooked, even though their placement and grouping dramatically impact usability and user flow. This workflow leverages Gemini AI to automatically analyze UI screens, classify toolbar icons based on Apple’s Human Interface Guidelines (HIG), and suggest optimal placements.

By combining AI analysis with structured placement logic, this workflow helps designers build more consistent, efficient, and user-friendly interfaces—without spending hours manually arranging icons.

---

🚀 Features

AI Classification: Uses Gemini AI to analyze screenshots and classify icons into roles like .primaryAction, .navigation, .confirmationAction, and more. HIG-Based Placement: Automatically assigns icons to the correct toolbar areas—Leading (Left), Trailing (Right), Center, Bottom, or System-decided. Usage-Aware Reordering: Reorders icons based on frequency of use so the most relevant actions appear where users expect them. JSON Output: Delivers structured results for seamless integration into design tools or documentation.

---

🔧 Setup Instructions