AI-Powered UI Icon Placement and Reordering using Apple HIG - n8n Workflow

UI/UX Designers: Needing to quickly validate and standardize icon placement against industry best practices (Apple HIG).
Product Managers: Seeking automated feedback loops on design prototypes.
Automation Specialists: Interested in building complex, multi-step AI decision pipelines using an n8n workflow.
Developers: Looking for ready-to-use n8n templates for integrating multimodal AI analysis into design processes.

Maintaining compliance with design standards, such as the Apple Human Interface Guidelines (HIG), is critical for high-quality app development. Manually cross-referencing hundreds of icons against complex placement rules can be time-consuming.

This specialized n8n workflow solves this by utilizing Google Gemini's advanced multimodal capabilities. When triggered, the n8n automation analyzes an image of a UI screen and the associated icon assets, categorizing them into roles (e.g., primary action, navigation) and determining optimal placement (Left, Right, Center). The n8n workflow then reorders these icons based on anticipated usage frequency, generating a final, structured design proposal that adheres strictly to the defined HIG rules. This powerful n8n node sequence provides instant, actionable design feedback, greatly accelerating the design validation process.

This powerful n8n workflow begins with an explicit trigger and proceeds through several stages of AI analysis and data cleaning.

1. Start Trigger: The n8n trigger starts when a user submits data via the internal On form submission node, uploading 'The screen' image and a set of 'Icons' (filenames).


2. AI Categorization: The AI Agent: Icon Categorizer n8n node (powered by Gemini) receives the screen context and icon files. It analyzes the elements and classifies each icon into an Apple HIG role (e.g., .primaryAction, .navigation) and assigns an initial placement (Left, Right, Center, Bottom).


3. Data Cleaning (Step 1): The initial Code: Clean Outcome n8n node processes the AI output, which is often wrapped in markdown blocks (``json). It parses the strict JSON output and separates the categorized data (screen, groups, placement`) into distinct data fields for the next step in the n8n workflow.


4. Usage Reordering: The Basic LLM Chain: Reordering n8n node takes the categorized placements and instructs the LLM to reorder the icons within each placement group based on typical usage frequency, ensuring the most common actions are easily accessible.


5. Data Cleaning (Step 2): The Code: Clean Outcomes n8n node cleans the JSON output from the reordering step, preparing the final structured data.


6. Design Proposal Generation: Finally, the UI Guidance LLM Chain n8n node uses the cleaned, reordered data, referencing the Apple HIG documentation link provided in the prompt, to generate a comprehensive, structured design proposal for the toolbar layout. This final document is the output of the complete n8n workflow.

To utilize this advanced n8n workflow template, follow these steps:

1. Import: Copy the entire n8n workflow JSON provided and import it into your n8n instance via the 'Workflows' section using the 'Import from JSON' option.


2. Credentials Setup: This n8n workflow uses Google Gemini via the Langchain n8n nodes. You must configure your Google Gemini API key.

1. Activate Trigger: The workflow starts with an On form submission n8n trigger. After importing, save the workflow. Access the provided Webhook URL from the trigger node's configuration to use the form interface and begin testing the n8n automation.


2. Testing: Upload your screen context and the icon set. Execute the n8n workflow manually or via the form submission to observe the AI categorization and proposal generation.

This n8n workflow relies on a precise sequence of specialized n8n nodes:

On form submission (n8n trigger):
Function: Serves as the starting n8n trigger, capturing user input consisting of two file uploads: the main screen context and the set of icons to be analyzed.
Key Configuration: Configured with fields for 'The screen' (file type) and 'Icons' (file type).

AI Agent: Icon Categorizer (n8n node):
Function: The core AI analysis component. It uses Gemini to determine the functional role (Apple HIG standards) and initial placement for every uploaded icon based on the screen context.
Key Configuration: Contains a detailed prompt instructing the AI to output strictly structured JSON, using pre-defined roles like .primaryAction and placements like 'Left', 'Right', etc.

Code: Clean Outcome / Code: Clean Outcomes (n8n node):
Function: These custom n8n node instances are crucial for robust data flow. They use JavaScript to strip the markdown wrappers (``json) from the LLM text output and safely parse the result into usable JSON objects for downstream n8n nodes.
Key Configuration: Uses JSON.parse and string replacement logic (.replace(/``json|`/g, '')).

Basic LLM Chain: Reordering (n8n node):
Function: Refines the initial placement by instructing the AI to reorder the icons within their assigned groups based on estimated usage frequency, optimizing the UI layout.
Key Configuration: Prompt requests strict JSON output containing the reordered lists for 'Left', 'Right', 'Center', etc.

UI Guidance (n8n node):
Function: The final step in this n8n workflow. It compiles all analyzed, categorized, and reordered data into a final, comprehensive structured design proposal, citing the Apple HIG.
* Key Configuration: Uses the full context derived from the previous n8n nodes to write the detailed design document.