klbr/n8nworkflows.xyz
1
0
Fork 0
mirror of https://github.com/khoaliber/n8nworkflows.xyz.git synced 2026-04-28 00:29:22 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
05d7d54346e4e368472ebdc4ec6cf183b8358cb7
n8nworkflows.xyz/workflows/Generate Diverse Names for UX-UI Mockups with OpenAI-8214/readme-8214.md
T
nusquama 27298bb80e creation
2025-11-13 14:16:47 +01:00

13 KiB
Raw Blame History

Generate Diverse Names for UX/UI Mockups with OpenAI

https://n8nworkflows.xyz/workflows/generate-diverse-names-for-ux-ui-mockups-with-openai-8214

Generate Diverse Names for UX/UI Mockups with OpenAI

1. Workflow Overview

This workflow is designed to generate diverse, realistic names for UX/UI mockups using an AI language model (LLM) such as OpenAI’s GPT-4.1 Mini. It targets UX/UI designers, developers, and content creators who need culturally authentic, easy-to-pronounce placeholder names for user personas, prototypes, testimonials, or team member lists.

Logical Blocks:

  • 1.1 Input Reception: Receives HTTP POST requests containing parameters controlling the name generation (gender, count, optional reference name).
  • 1.2 AI Processing: Constructs a prompt based on input parameters and sends it to an LLM agent that uses OpenAI GPT-4.1 Mini to generate culturally diverse names.
  • 1.3 Response Formatting: Parses the raw AI output, cleans and formats it into a structured JSON array.
  • 1.4 Response Delivery: Sends the formatted JSON response back to the requester via the webhook.

2. Block-by-Block Analysis

1.1 Input Reception

Overview:
This block receives incoming HTTP POST requests with parameters that specify the desired gender, quantity, and optionally a reference name style for the name generation process.

Nodes Involved:

  • Webhook Trigger (Name Request)
  • Webhook Input Note (Sticky Note)

Node Details:

  • Webhook Trigger (Name Request)

    • Type: Webhook Trigger
    • Role: Entry point of the workflow, listens for POST requests at path /generate-names.
    • Configuration: HTTP Method POST, responseMode set to responseNode to delay responding until workflow completes.
    • Input: HTTP POST JSON body with keys gender (string), count (integer), reference_name (optional string).
    • Output: Passes received JSON to next node.
    • Edge cases: Missing or malformed input parameters could cause downstream prompt generation errors. No explicit input validation here.
    • Version: v2 webhook node.

  • Webhook Input Note

    • Type: Sticky Note
    • Role: Documentation describing expected input parameters for the webhook.
    • Position: Left of the webhook node, color-coded for visibility.
    • No runtime impact.

1.2 AI Processing

Overview:
This block builds a dynamic prompt from the input parameters to instruct the AI agent to generate culturally diverse names. It uses a LangChain Agent node to manage prompt and response and an OpenAI LLM node as the language model backend.

Nodes Involved:

  • AI Name Generator Agent
  • OpenAI GPT-4.1 Mini
  • AI Generation Note (Sticky Note)

Node Details:

  • AI Name Generator Agent

    • Type: LangChain Agent node specialized for AI prompt management.
    • Role: Constructs a prompt dynamically depending on whether reference_name is provided; requests a specified number of names (count) with gender preference (gender).
    • Key Configuration:
      • Prompt text uses expressions to insert parameters into the instruction, e.g.: 
        Generate {count} {gender} names similar in style to: "{reference_name}"
        or 
        Generate {count} random {gender} names
      • System message defines detailed instructions for name diversity, cultural authenticity, output formatting (one name per line, no numbering), and regional distribution requirements.
    • Input: Receives JSON from webhook containing parameters.
    • Output: Sends prompt result (plain text with names) to output.
    • Edge cases:
      • If input parameters are missing or invalid, prompt may be malformed, leading to unexpected AI output.
      • AI API errors (timeout, quota, auth) could interrupt flow.
    • Version: v2.

  • OpenAI GPT-4.1 Mini

    • Type: LangChain OpenAI Chat LLM node
    • Role: Executes the language model request.
    • Configuration: Model set to “gpt-4.1-mini”, max tokens 150, temperature 0.7 for creative yet consistent output.
    • Credentials: Uses configured OpenAI API key (placeholder “Dummy OpenAI” in template).
    • Input: Receives prompt from AI Name Generator Agent.
    • Output: Passes AI-generated text to agent node.
    • Edge cases: API quota limits, network failures, invalid credentials.
    • Version: 1.2.

  • AI Generation Note

    • Type: Sticky Note
    • Role: Explains that this block generates names using OpenAI with specialized UX/UI prompts.
    • No runtime effect.

1.3 Response Formatting

Overview:
This block takes the raw AI output (a plain text list of names), sanitizes it by removing numbering and empty lines, filters out overly long entries, and structures it into a JSON response object including metadata.

Nodes Involved:

  • Format Name Results (Code node)
  • Response Formatting Note (Sticky Note)

Node Details:

  • Format Name Results

    • Type: Code node (JavaScript)
    • Role: Parses AI output from previous node, processes text lines into an array of clean names.
    • Key functions:
      • Accesses AI output via $input.first().json.output or .text.
      • Splits string by newline, trims whitespace, removes numbering prefixes like 1., 2), etc.
      • Filters out empty or excessively long names (>50 chars).
      • Returns structured JSON with keys: success, names (array), count, generation timestamp, and input parameters echoed for traceability.
    • Input: Raw AI text output from agent.
    • Output: JSON object ready to send back to requester.
    • Edge cases:
      • If AI output is empty or missing, returns a failure JSON with error message.
      • Parsing errors caught and trigger failure response.
    • Version: v2.

  • Response Formatting Note

    • Type: Sticky Note
    • Role: Documents the responsibility of cleaning and formatting AI output into JSON.

1.4 Response Delivery

Overview:
Sends the final JSON object containing the list of generated names back to the original HTTP requester.

Nodes Involved:

  • Return Names Response

Node Details:

  • Return Names Response
    • Type: Respond to Webhook node
    • Role: Sends HTTP response to the webhook caller.
    • Configuration: Responds with JSON, body set to the output from Format Name Results node.
    • Input: JSON object with success, names, count, etc.
    • Output: HTTP response sent, ends workflow execution.
    • Edge cases: Network issues or client disconnect before response sent.
    • Version: 1.4.

3. Summary Table

Node Name Node Type Functional Role Input Node(s) Output Node(s) Sticky Note
Main Template Explanation Sticky Note Overview and detailed workflow doc — — Describes template purpose, use cases, API usage, and customization options.
Webhook Input Note Sticky Note Documents webhook input parameters — — Notes expected input parameters: gender, count, reference_name (optional).
AI Generation Note Sticky Note Documents AI name generation block — — Explains AI prompt generation and OpenAI usage.
Response Formatting Note Sticky Note Documents response formatting step — — Explains cleaning and formatting AI output into JSON array.
Webhook Trigger (Name Request) Webhook Trigger Receives POST requests with parameters — AI Name Generator Agent
AI Name Generator Agent LangChain Agent Builds prompt and manages AI interaction Webhook Trigger (Name Request) Format Name Results
OpenAI GPT-4.1 Mini LangChain OpenAI Chat LLM Executes text generation with GPT-4.1 Mini AI Name Generator Agent AI Name Generator Agent
Format Name Results Code Node (JavaScript) Parses and formats AI output AI Name Generator Agent Return Names Response
Return Names Response Respond to Webhook Sends final JSON response back Format Name Results —

4. Reproducing the Workflow from Scratch

  1. Create a Webhook Trigger node

    • Set HTTP Method: POST
    • Set Path: generate-names
    • Set Response Mode: responseNode (to respond later)

  2. Add a LangChain Agent node ("AI Name Generator Agent")

    • Connect Webhook Trigger output to this node input.
    • Configure prompt text with expression: 
      {{$json.body.reference_name ? `Generate ${$json.body.count} ${$json.body.gender} names similar in style to: "${$json.body.reference_name}"` : `Generate ${$json.body.count} random ${$json.body.gender} names`}}
    • Add systemMessage with detailed instructions on generating culturally diverse, realistic UX/UI names, exact output format (one name per line, no numbering), and regional distribution. Include current date/time via {{$now}}.
    • Set promptType to "define".

  3. Add a LangChain OpenAI Chat LLM node ("OpenAI GPT-4.1 Mini")

    • Set model to gpt-4.1-mini
    • Set maxTokens to 150, temperature to 0.7
    • Provide valid OpenAI API credentials (OAuth2 or API key).
    • Connect this LLM node as the languageModel input of the AI Name Generator Agent node.

  4. Add a Code node ("Format Name Results")

    • Connect AI Name Generator Agent output to this node.
    • Paste the provided JavaScript code that:
      • Extracts AI text output
      • Splits by newline, trims lines, removes numbering prefixes
      • Filters invalid or too long names
      • Returns structured JSON with success status, names array, count, generation timestamp, and original request parameters echoed.

  5. Add a Respond to Webhook node ("Return Names Response")

    • Connect Code node output here.
    • Configure to respond with JSON, body set to the incoming JSON from the Code node.

  6. (Optional) Add Sticky Notes

    • Add explanatory sticky notes describing input parameters, AI generation details, and response formatting at appropriate positions for clarity.

  7. Activate the workflow and test

    • Send POST requests with JSON body, for example: 
      {
  "gender": "masculine",
  "count": 5,
  "reference_name": "Alex Chen"
}
    • Confirm the JSON response contains an array of names meeting the criteria.

5. General Notes & Resources

Note Content Context or Link
This workflow is a highly customizable template for AI-powered name generation aimed at UX/UI design. General project description from Main Template Explanation sticky note.
Replace dummy OpenAI credentials with your own API key or preferred LLM credentials before use. Setup instructions in Main Template Explanation.
The AI prompt enforces continental diversity in names and UX/UI context suitability. AI Name Generator Agent system message.
Response formatting ensures easy integration with design tools by returning clean JSON arrays. Format Name Results code node and associated note.
Webhook URL can be integrated with Bubble apps, Figma, Sketch, or other design platforms. Main Template Explanation usage notes.

Disclaimer: The provided text and workflow originate exclusively from an automated n8n workflow built with compliance to content policies. All data processed is legal and public.

Reference in New Issue View Git Blame Copy Permalink