ChatGPT软件基础设施AI 评分 · 74/100AI 辅助编辑·未发现明显提示词注入风险n8n.io

使用 GPT、Gemini 和 Vercel 自动生成并部署落地页

聊天输入 → 会话记忆 → AI 生成图片与 HTML → 保存并部署到 Vercel → 返回公开链接

有一点经验步骤流程提示词
给谁
希望快速发布简单落地页、无需支付月费的用户；适合快速原型、批量生成、活动创意测试或 AI 网页草图
你会得到
从一条文本描述自动生成带主视觉图的响应式落地页，部署到 Vercel 并返回可分享的公开链接
你需要
n8n · openai · google-gemini · chat-trigger · http-request · code · data-table

硬约束

前置条件：n8n 实例；OpenAI API 密钥；Google Cloud Platform 上的 Gemini (PaLM) API 密钥；Cloudinary 账号；Vercel 账号；n8n Data Table（含 sessionID 和 html 两列）。需更新模板中的占位符：Cloudinary 云名称与上传预设、OpenAI 模型及 API 密钥、n8n 表名与字段映射、Vercel Header Auth 令牌。

他们做了什么

模板作者 ldec 在 n8n 上构建了一个工作流：接收公开聊天输入，查询 n8n Data Table 中的会话记忆，用 GPT-4o-mini 生成图片提示词，再用 Google Gemini（Nano Banana）生成主视觉图，经 Base64 处理和 Cloudinary 上传后，用 GPT-4o-mini 生成响应式 HTML 落地页，保存到数据表并部署到 Vercel，最终向用户返回公开链接。

效果如何

据作者描述，配置完成后工作流可在数秒内将任意创意转化为设计完整且已上线的落地页，自动生成主视觉图、构建 HTML 布局、部署到 Vercel 并即时提供可分享链接。（author_report）

值得知道

模板内含可选的清理子流，可删除旧 Vercel 部署（保留最近 2 个），但需谨慎使用。支持自定义：切换为 GPT-4o 或 Gemini 2.5 Flash 以获得更丰富的 HTML 输出；可将 Vercel 替换为 Netlify 或 GitHub Pages；可添加额外输入字段（标题、CTA、描述）以收集更丰富的上下文。多个节点需要更新占位符（凭证、表名、Cloudinary 云名称、Vercel 令牌），未正确配置将导致流程中断。本站未实际运行测试。

n8n 工作流模板

结构已检查 · 未实际运行

下载后在 n8n 选择“Import from File”，或复制 JSON 后粘贴到编辑器。先配置自己的账号，再用测试数据运行；模板默认未启用。

下载 JSON查看原模板

配置与测试清单

需要绑定的凭证

  • Generate an image1 节点：绑定Google Gemini/PaLM API 凭证。
  • Generate HTML (OpenAI) 节点：绑定OpenAI API 凭证。
  • Deploy to Vercel 节点：绑定HTTP Header Auth 凭证。
  • list deployments 节点：绑定HTTP Header Auth 凭证。
  • HTTP Request 节点：绑定HTTP Header Auth 凭证。
  • Generate Image Prompt 节点：绑定OpenAI API 凭证。
  • Fetch Latest Deployment URL1 节点：绑定HTTP Header Auth 凭证。
  • Make Deployment URL Public 节点：绑定HTTP Header Auth 凭证。

需要替换的配置

  • 源模板来自 n8n 公开库 #10447（约 29 个节点）。导入后先保持未启用，核对触发器、表达式与外部 API 端点。
  • Sticky Note 中的说明仅供参考；按自己的账号、表结构或频道 ID 替换占位配置。

测试输入与预期结果

  • 在测试环境手动执行一次主路径，确认每个需凭证的节点已连接且无鉴权错误。
  • 用一条合成/脱敏样例数据跑通，核对输出字段与下游写入目标，再考虑生产启用。

模板处理说明

  • 已移除原作者凭证绑定、webhookId 与执行数据，工作流设为未启用；节点、连线与原文提示词保持原样。未在 n8n 中实际运行。
  • 未改业务逻辑；运行前请自行核对密钥、配额与隐私合规。

模板获取日期: 2026-10-24

步骤

  1. 获取会话记忆并准备提示词

    从 n8n Data Table 查询当前 sessionID 的历史记录，将用户最新聊天输入与已有 HTML 合并。若用户输入包含 "start new"，则清空历史 HTML。输出包含 prompt、current_html、sessionId 的对象，供后续节点使用。 🔧 必填修改：将数据表名（如 html_memory_mini_loveable）替换为你自己的记忆表，并确保包含 sessionID 和 html 两列。

  2. 生成图片提示词并创建主视觉图

    先用 GPT-4o-mini 将用户的落地页创意转换为一段生动的场景描述（用于 DALL·E 的提示词），再通过 Google Gemini（Nano Banana 模型）生成主视觉图。 🔧 必填修改：替换 OpenAI 和 Gemini (PaLM) 的凭证为你自己的 API 密钥。Gemini (PaLM) API 密钥通过 Google Cloud Platform 获取。也可将 Gemini 节点替换为 OpenAI DALL·E 2 节点，更简单便宜但画质较低。

    运行提示词 · 来源原文。OpenAI 节点 'Generate Image Prompt' 的 system 消息字段

    You are a prompt generator for DALL·E. Convert the user’s landing-page idea into ONE concise, vivid scene description for a website hero image. Include composition, setting, lighting, color palette, mood, style. Exclude any UI text, logos, or typography. Output ONLY the description text—no preface or formatting.

  3. 处理图片以备上传

    将 Gemini 生成的图片转换为 Base64 字符串，再包装为 data:image/png;base64,… 格式的 Data URI，供上传或预览使用。

  4. 上传图片到 Cloudinary 并获取链接

    将 Base64 编码的图片通过 multipart/form-data 上传到 Cloudinary，输出公开可访问的图片 URL。 🔧 必填修改：将 URL 中的 <your_cloud_key> 替换为你的 Cloudinary 云名称。

  5. 生成落地页 HTML

    基于用户主题和设计输入，使用 GPT-4o-mini 生成响应式落地页 HTML 布局。编辑提示词指令可显著改善最终输出效果。 🔧 必填修改：更新 OpenAI 凭证为你自己的。可选切换为 GPT-4o 或 Gemini 2.5 Flash 以获得更丰富、更有创意的 HTML 输出。

    运行提示词 · 来源原文。OpenAI 节点 'Generate HTML (OpenAI)' 的 system 消息字段

    You are an expert web designer generating HTML websites. You always follow Apple's style of design.

  6. 保存 HTML 到记忆表并准备部署

    将生成的 HTML 按当前 sessionID 保存到 n8n Data Table（upsert 操作），同时准备干净的 JSON 载荷供 Vercel 部署使用。 🔧 必填修改：将数据表名（如 html_memory_mini_loveable）替换为你自己的表。

  7. 部署站点到 Vercel

    将 HTML 部署到 Vercel，获取新部署的 URL，将其设为公开访问，并格式化为易分享的链接返回给用户。 🔧 必填修改：更新 Vercel API 凭证或 Header Auth 令牌为你账号的访问令牌。

可复制提示词

搭建指导 · 本站建议版本。交给搭建助手，先确认输入和权限，再指导更新占位符与测试

这一段是提示词，页面不会在这里插入广告。

你是一个 n8n 工作流搭建助手。用户希望复现一个 AI 落地页生成器：从聊天输入开始，经过会话记忆、图片生成、HTML 生成，最终部署到 Vercel。请先确认用户已准备好以下前提：n8n 实例、OpenAI API 密钥、GCP Gemini API 密钥、Cloudinary 账号、Vercel 账号、以及包含 sessionID 和 html 列的 n8n Data Table。然后指导用户按步骤更新模板中的占位符（凭证、表名、云名称、令牌），最后建议先用简单提示词测试端到端流程。

先检查前提条件，再更新凭证占位符，最后测试

来源

Generate & deploy landing pages with GPT, Gemini and Vercel · ldec · n8n.io · 2025-11-02

留言与反馈

试过这个方法吗？分享效果、遇到的问题或改进建议。留言审核后公开，请勿填写敏感信息。

正在加载…

    相关用例