Usar OpenAI y Gemini para generar logotipos personalizados desde sitios web

Intermedio

Este es unautomatización que contiene 13 nodos.Utiliza principalmente nodos como Webhook, HttpRequest, Agent, RespondToWebhook, GoogleGemini. Usar OpenAI y Gemini para generar logos personalizados a partir de sitios web

Requisitos previos
  • Punto final de HTTP Webhook (n8n generará automáticamente)
  • Pueden requerirse credenciales de autenticación para la API de destino
  • Clave de API de OpenAI

Categoría

-
Vista previa del flujo de trabajo
Visualización de las conexiones entre nodos, con soporte para zoom y panorámica
Exportar flujo de trabajo
Copie la siguiente configuración JSON en n8n para importar y usar este flujo de trabajo
{
  "meta": {
    "instanceId": "3d7eb9567ae690bf8c9bba1cb43396e6e40c18e15eb5889cf9673ed1713da6db",
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "4c829734-83d0-43ef-8111-2b8222bff6ee",
      "name": "Cuando se recibe la URL del sitio web",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -1136,
        2224
      ],
      "webhookId": "15a007b2-0c35-47f6-8387-5b3548c2e295",
      "parameters": {
        "path": "175b3350-1d0c-48c5-99d1-06e3b209a68097t657yi97",
        "options": {},
        "httpMethod": "POST",
        "responseMode": "responseNode"
      },
      "typeVersion": 2.1
    },
    {
      "id": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
      "name": "Capturar captura de pantalla del sitio web",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -976,
        2224
      ],
      "parameters": {
        "url": "=https://api.screenshotone.com/take",
        "options": {},
        "sendQuery": true,
        "queryParameters": {
          "parameters": [
            {
              "name": "access_key",
              "value": "[Your ScreenshotOne Access Key]"
            },
            {
              "name": "url",
              "value": "={{ $json.body.websiteUrl }}"
            },
            {
              "name": "format",
              "value": "jpg"
            },
            {
              "name": "block_ads",
              "value": "true"
            },
            {
              "name": "block_cookie_banners",
              "value": "true"
            },
            {
              "name": "block_banners_by_heuristics",
              "value": "false"
            },
            {
              "name": "block_trackers",
              "value": "true"
            },
            {
              "name": "delay",
              "value": "0"
            },
            {
              "name": "timeout",
              "value": "60"
            },
            {
              "name": "response_type",
              "value": "=json"
            },
            {
              "name": "image_quality",
              "value": "80"
            }
          ]
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
      "name": "Obtener contenido del sitio web",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -816,
        2224
      ],
      "parameters": {
        "url": "={{ $('When Website URL Received').item.json.body.websiteUrl }}",
        "options": {}
      },
      "typeVersion": 4.2
    },
    {
      "id": "5995ca13-7f6b-4899-88fb-d85e18921143",
      "name": "Generar prompt para logotipo",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        -640,
        2224
      ],
      "parameters": {
        "text": "=Write a prompt to create a logo for this website based of the content of the site and a screenshot of the front page\n\nScreenshot: {{ $('Capture Website Screenshot').item.json.screenshot_url }}\nWebsite data:{{ $json.data }}\n\nOutput the prompt in \"Prompt\"",
        "options": {
          "passthroughBinaryImages": true
        },
        "promptType": "define"
      },
      "typeVersion": 2.2
    },
    {
      "id": "5b7b8344-4acc-46df-8412-30cdaeb49273",
      "name": "Generar imagen del logotipo",
      "type": "@n8n/n8n-nodes-langchain.googleGemini",
      "position": [
        -352,
        2224
      ],
      "parameters": {
        "prompt": "={{ $json.output }}",
        "modelId": {
          "__rl": true,
          "mode": "list",
          "value": "models/gemini-2.5-flash-image",
          "cachedResultName": "models/gemini-2.5-flash-image (Nano Banana)"
        },
        "options": {},
        "resource": "image"
      },
      "credentials": {
        "googlePalmApi": {
          "id": "7v8o9EaQkl33woxm",
          "name": "v9"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
      "name": "Responder con el logotipo",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        -176,
        2224
      ],
      "parameters": {
        "options": {},
        "respondWith": "binary"
      },
      "typeVersion": 1.4
    },
    {
      "id": "f1bc68c6-ccf3-4fdf-97c5-5a86928838f7",
      "name": "Nota: Disparador Disparador Webhook",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1248,
        2000
      ],
      "parameters": {
        "color": 6,
        "width": 344,
        "height": 212,
        "content": "## 📥 When Website URL Received\n\n**Purpose:** Triggers workflow on POST request with website URL.\n\n**Note:** Body format: {\"websiteUrl\": \"https://example.com\"}"
      },
      "typeVersion": 1
    },
    {
      "id": "a1cef014-ddd9-4db2-8333-a7579608008e",
      "name": "Nota: Captura de pantalla",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1168,
        2464
      ],
      "parameters": {
        "color": 3,
        "width": 312,
        "height": 212,
        "content": "## 🖼️ Capture Website Screenshot\n\n**Purpose:** Fetches site screenshot via ScreenshotOne API for visual analysis.\n\n**Note:** Replace placeholder with your API key; outputs JSON with screenshot_url."
      },
      "typeVersion": 1
    },
    {
      "id": "62e394c1-363f-4164-81f5-39cde9ca7b22",
      "name": "Nota: Obtención de contenido",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -816,
        2000
      ],
      "parameters": {
        "color": 5,
        "width": 216,
        "height": 196,
        "content": "## 🌐 Fetch Website Content\n\n**Purpose:** Scrapes HTML from the URL for text-based site analysis.\n"
      },
      "typeVersion": 1
    },
    {
      "id": "21b9ad9a-cbb4-4ad2-94d7-6424bf906478",
      "name": "Nota: Generación de prompt",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -528,
        2464
      ],
      "parameters": {
        "color": 5,
        "width": 312,
        "height": 212,
        "content": "## ✍️ Generate Logo Prompt\n\n**Purpose:** AI agent crafts logo prompt using OpenAI from content and screenshot.\n\n**Note:** Multimodal input; outputs refined prompt for image gen."
      },
      "typeVersion": 1
    },
    {
      "id": "cb688126-2285-4ff0-9beb-259c9d0f7c43",
      "name": "Nota: Generación de logotipo",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -368,
        2000
      ],
      "parameters": {
        "color": 2,
        "width": 280,
        "height": 180,
        "content": "## 🎨 Generate Logo Image\n\n**Purpose:** Creates logo via Google Gemini using the AI-crafted prompt.\n\n**Note:** Image resource; returns binary data for response."
      },
      "typeVersion": 1
    },
    {
      "id": "d470c3e0-e75b-455c-b514-7e242fe664dc",
      "name": "Nota general 5",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1888,
        1808
      ],
      "parameters": {
        "color": 4,
        "width": 600,
        "height": 1100,
        "content": "# 🤖 AI Logo Generator from Website URL\n\n## 📋 What This Template Does\nThis workflow receives a website URL via webhook, captures a screenshot and fetches page content, uses OpenAI to craft a logo prompt from visuals and text, then generates the image with Google Gemini for binary response.\n\n## 🔧 Prerequisites\n- n8n instance with webhook support\n- ScreenshotOne account\n- OpenAI account\n- Google AI Studio account\n\n## 🔑 Required Credentials\n\n### ScreenshotOne API Setup\n1. Sign up at screenshotone.com → Dashboard → API Keys\n2. Generate access key\n3. Replace placeholder in \"Capture Website Screenshot\" node\n\n### OpenAI API Setup\n1. platform.openai.com → API Keys\n2. Create secret key\n3. Add as \"OpenAI API\" credential\n\n### Google Gemini API Setup\n1. aistudio.google.com/app/apikey\n2. Create API key\n3. Add as \"Google PaLM API\" credential\n\n## ⚙️ Configuration Steps\n1. Import JSON workflow\n2. Assign credentials to nodes\n3. Replace API key placeholder\n4. Activate webhook\n5. Test with POST {\"websiteUrl\": \"https://example.com\"}\n\n## 🎯 Use Cases\n- Marketing: Generate client logo prototypes\n- Developers: Auto-match logos for sites\n- Designers: Inspire from competitors\n- Education: Demo AI design\n\n## ⚠️ Troubleshooting\n- Screenshot timeout: Increase to 120s, check URL\n- Empty prompt: Verify OpenAI quota\n- Blank logo: Add style to prompt, check limits\n- No trigger: Confirm POST JSON body"
      },
      "typeVersion": 1
    },
    {
      "id": "ae9beb67-4ce8-43be-a73c-37fb446517fd",
      "name": "GPT-5 mini",
      "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
      "position": [
        -640,
        2400
      ],
      "parameters": {
        "model": {
          "__rl": true,
          "mode": "list",
          "value": "gpt-5-mini",
          "cachedResultName": "gpt-5-mini"
        },
        "options": {}
      },
      "credentials": {
        "openAiApi": {
          "id": "ymMvgDroJHalwvRf",
          "name": "OpenAI"
        }
      },
      "typeVersion": 1.2
    }
  ],
  "pinData": {},
  "connections": {
    "ae9beb67-4ce8-43be-a73c-37fb446517fd": {
      "ai_languageModel": [
        [
          {
            "node": "5995ca13-7f6b-4899-88fb-d85e18921143",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "5b7b8344-4acc-46df-8412-30cdaeb49273": {
      "main": [
        [
          {
            "node": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "5995ca13-7f6b-4899-88fb-d85e18921143": {
      "main": [
        [
          {
            "node": "5b7b8344-4acc-46df-8412-30cdaeb49273",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17": {
      "main": [
        [
          {
            "node": "5995ca13-7f6b-4899-88fb-d85e18921143",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "4c829734-83d0-43ef-8111-2b8222bff6ee": {
      "main": [
        [
          {
            "node": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb": {
      "main": [
        [
          {
            "node": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
Preguntas frecuentes

¿Cómo usar este flujo de trabajo?

Copie el código de configuración JSON de arriba, cree un nuevo flujo de trabajo en su instancia de n8n y seleccione "Importar desde JSON", pegue la configuración y luego modifique la configuración de credenciales según sea necesario.

¿En qué escenarios es adecuado este flujo de trabajo?

Intermedio

¿Es de pago?

Este flujo de trabajo es completamente gratuito, puede importarlo y usarlo directamente. Sin embargo, tenga en cuenta que los servicios de terceros utilizados en el flujo de trabajo (como la API de OpenAI) pueden requerir un pago por su cuenta.

Información del flujo de trabajo
Nivel de dificultad
Intermedio
Número de nodos13
Categoría-
Tipos de nodos7
Descripción de la dificultad

Adecuado para usuarios con experiencia intermedia, flujos de trabajo de complejidad media con 6-15 nodos

Autor
Daniel Nkencho

Daniel Nkencho

@daniel-automates

AI Automation Consultant | Helping Business Owners Implement AI Systems for Growth and Lead Gen

Enlaces externos
Ver en n8n.io

Compartir este flujo de trabajo

Categorías

Categorías: 34