龙井：DeepSeek + n8n + Gemini + 即梦4.5 = 电商详情页批量神器

龙井：DeepSeek + n8n + Gemini + 即梦4.5 = 电商详情页批量神器 龙井：DeepSeek + n8n + Gemini + 即梦4.5 = 电商详情页批量神器 Modified January 17 No access 电商详情图演示【优化】 00:00 Ctrl + F: 查找script 复制n8n中的Test URL：（因为我们这是测试环境，如果是生产环境就换成生产环境的url） 回到html代码中，放到对应位置，一定要记得保存！！ 现在回到文件夹，双击打开： 打开后放在后台别管： 在n8n中添加一个Respond to Webhook节点： 现在测试一下前端html与后端n8n是否可以连接： 回到刚刚打开的html页面，输入测试数据： No access 电商详情图演示【优化】 00:00 No access 电商详情图演示【优化】 00:00 Ctrl + F: 查找script 复制n8n中的Test URL：（因为我们这是测试环境，如果是生产环境就换成生产环境的url） 回到html代码中，放到对应位置，一定要记得保存！！ 现在回到文件夹，双击打开： 打开后放在后台别管： 在n8n中添加一个Respond to Webhook节点： 现在测试一下前端html与后端n8n是否可以连接： 回到刚刚打开的html页面，输入测试数据： 现在清理一下，把没有用到的节点删掉（原来的表单节点），最终的工作流长这样： 使用方法： 1.先在n8n中点击运行： 2.回到前端输入数据： 3.开始执行： 4.执行成功会将图片返回前端: 5.选择合适的图片点击下载： 执行的时候就丢后台不管他，6分钟后切回来选合适的图，还是很愉悦的 注意事项：在执行中不要切换网络，否则容易出现Connection error. 写在最后： 我是龙井，一个活跃的AI探索者 如果你对n8n 还有更多好奇，或者在实操中遇到了卡壳，欢迎加我的微信：longjing aiagent 找我聊聊天，或者围观我的朋友圈，我会持续为你磨平信息差 写在前面： 我用 Gemini 写了个前端界面，用 n8n 搭了后端工作流 用户只需要输入【产品参数 + 产品亮点 + 产品图片】，系统就能自动生成 10 屏商品详情页，结果直接返回前端展示 实现效果（生成一张图的成本为0.25元，是即梦4.5 API的成本）： 想看完整演示？👇（省流：视频约6分钟，5分50秒开始出结果，可以直接空降）： 正文： 要搭建这个工作流，我们分两步走： 1. 先搭后端：完成 n8n 工作流，实现批量生成商品详情图 2. 再做前端：用 AI 写一个网页界面，与后端打通 为什么不一步到位呢？ 因为我自己也是一点点迭代出来的，一个稳定的 n8n 工作流，必须经过反复调试、慢慢优化，才能跑得稳。 这篇教程，会让你以搭建者视角，跟我一起从零搭建。 搭建n8n工作流 💡 环境说明 • n8n 版本：2.2.4 • 部署方式：Docker 本地部署（小白可参考：https://mp.weixin.qq.com/s/fhtcPEPBWxjo6xZLEKCRzw） 💡 环境说明 • n8n 版本：2.2.4 • 部署方式：Docker 本地部署（小白可参考：https://mp.weixin.qq.com/s/fhtcPEPBWxjo6xZLEKCRzw） 一、触发节点：表单上传 我们需要让用户上传三样东西： 💡 1. 产品参数 2. 产品亮点 3. 产品图片 1. 产品参数 2. 产品亮点 3. 产品图片 搭建一个表单节点可以满足我们的需求，配置如下： 运行测试： 上传数据试试效果（如果你手头没有测试数据，可以直接用下面这份，均由AI生成）： 测试图片： 提交表单，数据成功上传： 二、产品原型描述：让 AI看懂你的产品 这个节点的作用是：让大模型仔细观察你上传的商品图，用文字详细描述产品外观，提高后续生图的一致性 主要注意的点是：必须要选择一个有视觉理解能力的模型 提示词： 节点配置： 开启图片传递，才能把图片传递到这个节点： 添加大模型： 我使用火山引擎上的豆包1.6视觉模型，在n8n中，对于一些没有在n8n中内置的模型，都可以通过OpenAI Chat Model节点连接： 创建一个鉴权： 先改个名字，便于区分 现在我们去火山引擎申请API Key ： 1.申请API key：https://console.volcengine.com/ark/region:ark+cn beijing/apiKey?apikey=%7B%7D，没有火山引擎账号就申请注册一个 登录后点击创建API key： 2.申请之后，需要开通模型服务才可以正常使用模型：https://console.volcengine.com/ark/region:ark+cn beijing/openManagement?LLM=%7B%7D&advancedActiveKey=model， 在火山引擎中需要用什么模型，需要对应开通模型服务，我们直接全部开通，省得后面再折腾 刷新一下界面（显示已开通就ok）： 3.把复制好的API Key放到n8n的节点中，base url填写：https://ark.cn beijing.volces.com/api/v3 显示连接成功说明配置好了： 配置如下： 测试效果： 三、电商详情页文案：AI 策划 10 屏内容 这个节点负责：根据产品参数和亮点，自动策划 10 屏详情页的文案结构 设置用户提示词： 用户提示词如下，直接粘贴上去： 设置系统提示词： 系统提示词如下，直接粘贴上去： )，不要输出任何解释性文字。 【输出示例格式】： { "slides": [ { "id": 1, "title": "静享自由", "copy": "48dB深度降噪，喧嚣止步", "scene desc": "Cinematic shot, soft volumetric lighting, minimalist concrete background, floating feather indicating lightness" }, { "id": 2, "title": "蓝牙5.3", "copy": "0.038s无感延迟，音画同步", "scene desc": "Cyberpunk neon lighting, blurred motion background, high tech data stream visualization" } ] } Code block JavaScript Copy // 只取第一个 item const item = $input.first(); // 把 output 里的字符串解析成对象 const parsed = JSON.parse(item.json.output); // 返回 slides 数组作为新的 items return parsed.slides.map(slide = ({ json: slide, })); Code block Bash Copy 产品视觉呈现： {{ $('产品原型描述').item.json.output }} 产品描述： {{$json.scene desc}} 需渲染文字（必须完全精准呈现）： 主标题："{{$json.title}}" 副标题："{{$json.copy}}" 设计要求： 制作一张竖版电商海报（画面比例 9:16）。 产品必须作为视觉核心，与上述场景自然融合。 文字排版：将主标题与副标题美观地置于画面留白区域（顶部或底部）。文字需清晰易读、风格精致，与背景形成高对比度。 整体风格：高端商业广告质感，C4D 渲染效果，版式简洁大气，达到获奖级海报设计水准。 重点注意：必须严格按照原文，将 "{{ $json.title }}" 和 "{{ $json.copy }}" 精准呈现在图像上，不得出现任何拼写错误，仅生成指定的主副标题，画面其他区域（尤其是四角）禁止出现任何额外文字 / 伪文字” Code block Markdown Copy 角色 你是一名精通即梦4.0 模型的 AI 绘图提示词工程师。 你的任务是将 产品视觉呈现 与 产品描述 整合为一段逻辑连贯、高质量的绘图提示词。 格式 输出格式要求：仅提交提示词文本，无需附加任何解释说明。 严格限制： 仅生成指定的主副标题，画面所有区域（包括但不限于四角、边缘、背景）严禁出现任何数字、符号类文字，尤其是 “9:16” 相关字样，确保画面纯净无额外文字干扰。 Code block Markdown Copy Role 你是一名精通 n8n 工作流对接的高级前端开发工程师。你的任务是编写一个单文件 HTML（包含 CSS 和 JS），作为 n8n AI 生图工作流的本地前端控制台。 Goal 生成一个极具科技感（赛博朋克/暗黑风格）的 Web 界面，左侧为输入区，右侧为结果展示区。用户填写信息并上传图片后，通过 Webhook 发送给 n8n，并展示返回的生成图片，支持批量下载。 Visual Style Requirements 1. 布局 ：左右分栏布局。左侧 30% 为控制面板（固定），右侧 70% 为结果展示区（可滚动）。 2. 风格 ：Dark Mode（深色模式），使用霓虹色（如青色 00f3ff）作为强调色。 3. 交互 ：按钮要有 Hover 效果，生图过程中要有明显的 Loading 动画（遮罩层）。 4. 响应式 ：上传图片区域支持点击上传和文件拖拽预览。 Functional Requirements (JavaScript Logic) 1. 配置变量 ：在代码最顶部定义 ，方便用户修改。 2. 数据发送 ： 使用 API 发送 请求。 使用 格式封装数据。 字段名要求： 文本框1字段名： 文本框2字段名： 图片字段名： (二进制文件) 3. 数据接收与解析 ： n8n 返回的 JSON 格式可能为 或直接是数组。 需编写兼容性代码，提取出图片 URL 数组。 如果返回空数组或报错，需弹窗提示用户。 4. 防跨域批量下载 (Critical) ： 实现“一键下载所有图片”功能。 核心逻辑 ：必须实现双重保障机制以解决 CORS 跨域问题。 优先方案 ：使用 获取 Blob 创建 标签下载（支持自定义文件名）。 降级方案 ：如果 报错（CORS 拦截），自动捕获错误，并切换为 或 在新标签页打开图片。 下载循环之间添加 500ms 延时，防止浏览器拦截弹窗。 Output Format 请直接输出完整的 代码，无需解释 CSS 原理，但在 标签内的关键逻辑处（特别是下载和数据解析部分）添加中文注释。 ``` 使用： ⚠️需要注意的是：生成的界面可能有 bug，这很正常，不用追求一步到位，用对话方式慢慢调整就行。 ⚠️需要注意的是：生成的界面可能有 bug，这很正常，不用追求一步到位，用对话方式慢慢调整就行。 这是我的生成界面（我得到这个也是进行过一次调整的）： 当然，你也可以直接用我这个现成的： No access 电商详情图【优化】.html No access 电商详情图【优化】.html 修改n8n工作流 我们已经得到了前端，现在需要配置一下n8n工作流 一、用Webhook 节点作为触发节点 按照如下设置： 现在需要打开你的html进行编辑，使用你的编辑html的工具，如果你没有，可以下一个vscode：https://code.visualstudio.com/ 打开后：