AI提示制作器
高级
这是一个AI领域的自动化工作流，包含 16 个节点。主要使用 Form, Webhook, FormTrigger, RespondToWebhook, ChainLlm 等节点，结合人工智能技术实现智能自动化。 AI提示制作器
前置要求
- •HTTP Webhook 端点（n8n 会自动生成）
- •Google Gemini API Key
分类
工作流预览
可视化展示节点连接关系，支持缩放和平移
导出工作流
复制以下 JSON 配置到 n8n 导入，即可使用此工作流
{
"meta": {
"instanceId": "e409ea34548a2afe2dffba31130cd1cf2e98ebe2afaeed2a63caf2a0582d1da0",
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "430f2ed6-ccbe-4ccd-844b-c7458d0e87b0",
"name": "Gemini 2.5 Flash",
"type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini",
"position": [
-580,
480
],
"parameters": {
"options": {
"temperature": 0
},
"modelName": "models/gemini-2.5-flash"
},
"credentials": {
"googlePalmApi": {
"id": "AXawYbABK5aZbGBE",
"name": "IA2S"
}
},
"typeVersion": 1
},
{
"id": "fc337c72-6ce9-43fa-96b2-1581b54983ca",
"name": "Prompt Request",
"type": "n8n-nodes-base.formTrigger",
"position": [
-1180,
40
],
"webhookId": "bef818b2-581a-44ad-bd07-a8b26cfb5b8c",
"parameters": {
"options": {
"path": "prompt-maker",
"customCss": "/* --- ROOT VARIABLES (DARK THEME) --- */\n:root {\n\t/* --- FONT MAPPING --- */\n\t--font-family: 'Inter', sans-serif;\n\t--font-weight-normal: 400;\n\t--font-weight-bold: 600;\n\t--font-size-body: 12px;\n\t--font-size-label: 14px;\n\t--font-size-test-notice: 12px;\n\t--font-size-input: 14px;\n\t--font-size-header: 20px;\n\t--font-size-paragraph: 14px;\n\t--font-size-link: 12px;\n\t--font-size-error: 12px;\n\t--font-size-html-h1: 28px;\n\t--font-size-html-h2: 20px;\n\t--font-size-html-h3: 16px;\n\t--font-size-html-h4: 14px;\n\t--font-size-html-h5: 12px;\n\t--font-size-html-h6: 10px;\n\t--font-size-subheader: 14px;\n\n\t/* --- COLOR MAPPING (Dark Theme) --- */\n\t--color-background: #1a1b26;\n\t--color-card-bg: #24283b;\n\t--color-input-bg: #1e202e;\n\t--color-card-border: #414868;\n\t--color-header: #ffffff;\n\t--color-label: #c0caf5;\n\t--color-input-text: #c0caf5;\n\t--color-header-subtext: #c0caf5;\n\t--color-html-text: #c0caf5;\n\t--color-input-border: #414868;\n\t--color-focus-border: #7aa2f7;\n\t--color-link: #9eceff;\n\t--color-html-link: #7aa2f7;\n\t--color-submit-btn-bg: #7aa2f7;\n\t--color-submit-btn-hover-bg: #9eceff;\n\t--color-submit-btn-text: #ffffff; /* CORRECTED: Changed back to white for better readability */\n\t--color-clear-button-bg: #414868;\n\t--color-error: #f7768e;\n\t--color-required: #f7768e;\n\t--color-test-notice-text: #c0caf5;\n\t--color-test-notice-bg: #2a2f41;\n\t--color-test-notice-border: #7aa2f7;\n\n\t/* --- BORDER RADII & SPACING --- */\n\t--border-radius-card: 12px;\n\t--border-radius-input: 6px;\n\t--border-radius-clear-btn: 50%;\n\t--card-border-radius: 12px;\n\t--padding-container-top: 24px;\n\t--padding-card: 24px;\n\t--padding-test-notice-vertical: 12px;\n\t--padding-test-notice-horizontal: 24px;\n\t--margin-bottom-card: 16px;\n\t--padding-form-input: 12px;\n\t--card-padding: 24px;\n\t--card-margin-bottom: 16px;\n\n\t/* --- DIMENSIONS --- */\n\t--container-width: 500px;\n\t--submit-btn-height: 48px;\n\t--checkbox-size: 18px;\n\n\t/* --- OTHER MAPPINGS --- */\n\t--box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);\n\t--color-card-shadow: rgba(0, 0, 0, 0.3);\n\t--opacity-placeholder: 0.5;\n}\n\n/* === GLOBAL & ELEMENT-SPECIFIC FIXES === */\n\n/* 1. Add the dot grid background to the page */\nbody {\n background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);\n background-size: 20px 20px;\n}\n\n/* 2. Explicitly style the TEXTAREA */\n/* Targets the specific class n8n uses */\ntextarea.form-input {\n background-color: var(--color-input-bg);\n color: var(--color-input-text);\n font-family: var(--font-family); /* Force font inheritance */\n}\ntextarea.form-input::placeholder {\n color: var(--color-input-text);\n opacity: var(--opacity-placeholder);\n}\n\n/* 3. Explicitly style the BUTTON */\nbutton.submit-btn {\n transition: background-color 0.2s ease;\n font-family: var(--font-family); /* Force font inheritance */\n font-weight: var(--font-weight-bold);\n color: var(--color-submit-btn-text); /* Ensure text color is applied */\n}\nbutton.submit-btn:hover {\n background-color: var(--color-submit-btn-hover-bg);\n}\n\n/* 4. Completely new CHECKBOX styling for n8n's structure */\n/* Target the label that wraps the checkbox and text */\nlabel.multiselect-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n/* Target the text part of the label */\nlabel.multiselect-label span {\n padding-left: 12px; /* Space between box and text */\n}\n/* Hide the default browser checkbox */\nlabel.multiselect-label input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n/* Create a custom checkbox box using a pseudo-element on the text span */\nlabel.multiselect-label span::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n background-color: var(--color-input-bg);\n border: 1px solid var(--color-input-border);\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n/* Style the custom box when the (hidden) checkbox is checked */\nlabel.multiselect-label input[type=\"checkbox\"]:checked + span::before {\n background-color: var(--color-focus-border);\n border-color: var(--color-focus-border);\n /* Add a checkmark using an embedded SVG */\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n background-position: center;\n background-repeat: no-repeat;\n}\n/* Add a focus ring for accessibility */\nlabel.multiselect-label input[type=\"checkbox\"]:focus-visible + span::before {\n outline: 2px solid var(--color-focus-border);\n outline-offset: 2px;\n}",
"buttonLabel": "Create Prompt",
"appendAttribution": false
},
"formTitle": "AI Prompt Maker",
"formFields": {
"values": [
{
"fieldType": "textarea",
"fieldLabel": "What prompt do you want ?",
"placeholder": "Talk about the goal of the prompt, any related context and any input format (e.g. input variables). You can also provide output examples.",
"requiredField": true
},
{
"fieldType": "dropdown",
"fieldLabel": "Select Sections",
"multiselect": true,
"fieldOptions": {
"values": [
{
"option": "System Instructions"
},
{
"option": "Examples"
},
{
"option": "Inputs"
}
]
}
}
]
},
"responseMode": "lastNode",
"formDescription": "Let AI create your perfect prompt.."
},
"typeVersion": 2.2
},
{
"id": "f036c843-4723-47e8-8eb0-3b5ec639e0c6",
"name": "Generate Prompt",
"type": "@n8n/n8n-nodes-langchain.chainLlm",
"position": [
-680,
40
],
"parameters": {
"text": "={{ $json['What prompt do you want ?'] }}",
"batching": {},
"messages": {
"messageValues": [
{
"message": "=You are an expert prompt generator for AI language models. This is what you output :\n{{ $json['Select Sections'].includes('System Instructions') ? \"\\n<role>\\nThe role that the AI should take (for the system prompt)\\n</role>\\n\" : \"\" }}\n<instructions>\n<goal>\nThe goal or task at hand\n</goal>\n\n<context>\nAll the context for the task or goal\n</context>\n{{ $json['Select Sections'].includes('Examples') ? \"\\n<examples>\\n<example_1>\\n<inputs>\\n<...>\\n...\\n</...>\\n</inputs>\\n<output>\\n...\\n</output>\\n</example_1>\\n...\\n</examples>\\n\" : \"\" }}\n\n<output_format>\n...\n</output_format>\n</instructions>{{ $json['Select Sections'].includes('Inputs') ? \n\"\\n\\n<inputs>\\n<[input_tag]>\\n[USE FILLER TEXT TO EXPLAIN WHAT TO PUT HERE]\\n</[input_tag]>\\n...\\n</inputs>\" : \"\" }}"
}
]
},
"promptType": "define"
},
"typeVersion": 1.7
},
{
"id": "3292f7f6-cd6a-47d8-a58a-e57d2bf61871",
"name": "Go to Site",
"type": "n8n-nodes-base.form",
"position": [
-20,
40
],
"webhookId": "65b26fc2-22c6-424f-85c9-f91502a02d72",
"parameters": {
"operation": "completion",
"redirectUrl": "={{ $env.WEBHOOK_URL + ($env.N8N_ENDPOINT_WEBHOOK ?? \"webhook\") }}/prompt/result?prompt={{ $json.text.urlEncode() }}",
"respondWith": "redirect"
},
"typeVersion": 1
},
{
"id": "f0949115-9ea1-4507-963f-b75c9d5bfb7e",
"name": "Get Prompt Webpage",
"type": "n8n-nodes-base.webhook",
"position": [
-1180,
1040
],
"webhookId": "99651075-3d83-4d67-963f-06c7a5e6a3d3",
"parameters": {
"path": "prompt/result",
"options": {},
"responseMode": "responseNode"
},
"typeVersion": 2
},
{
"id": "294a6d6c-2312-4c3e-91b0-e1e03ab1fea0",
"name": "Display Webpage",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
-620,
1040
],
"parameters": {
"options": {
"responseHeaders": {
"entries": [
{
"name": "Content-Type",
"value": "text/html; charset=UTF-8"
}
]
}
},
"respondWith": "text",
"responseBody": "=<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Prompt Viewer</title>\n \n <!-- Fonts from Google Fonts for a professional look -->\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400;500&display=swap\" rel=\"stylesheet\">\n\n <style>\n /* --- Reset and Base Styles --- */\n :root {\n --bg-color: #1a1b26;\n --card-bg: #24283b;\n --code-bg: #1e202e; /* Slightly different bg for the code block */\n --text-color: #c0caf5;\n --header-color: #ffffff;\n --accent-color: #7aa2f7;\n --accent-hover: #9eceff;\n --success-color: #9ece6a;\n --border-color: #414868;\n --shadow-color: rgba(0, 0, 0, 0.3);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n padding: 2rem;\n background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);\n background-size: 20px 20px;\n }\n\n /* --- Main Container --- */\n .container {\n width: 100%;\n max-width: 900px;\n background-color: var(--card-bg);\n border-radius: 12px;\n border: 1px solid var(--border-color);\n box-shadow: 0 10px 30px var(--shadow-color);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n /* --- Card Header --- */\n .header {\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--border-color);\n }\n\n .header h1 {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--header-color);\n margin-bottom: 0.25rem;\n }\n\n .header p {\n font-size: 1rem;\n color: var(--text-color);\n }\n\n /* --- Prompt Content --- */\n .prompt-content {\n position: relative;\n padding: 2rem;\n padding-top: 4.5rem; /* Space for the copy button */\n }\n\n /* --- Markdown-style Code Block --- */\n pre {\n background-color: var(--code-bg);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 1.5rem;\n font-family: 'Fira Code', monospace;\n font-size: 0.9rem;\n line-height: 1.6;\n color: var(--text-color);\n \n /* KEY FOR TEXT WRAPPING */\n white-space: pre-wrap;\n overflow-wrap: break-word;\n }\n\n /* --- Copy Button --- */\n .copy-button {\n position: absolute;\n top: 1.5rem;\n right: 1.5rem;\n background-color: var(--border-color);\n color: var(--text-color);\n border: none;\n border-radius: 6px;\n padding: 0.6rem 1rem;\n font-family: 'Inter', sans-serif;\n font-weight: 500;\n font-size: 0.9rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: background-color 0.2s ease, color 0.2s ease;\n z-index: 10; /* Ensure it's above the <pre> block */\n }\n\n .copy-button:hover {\n background-color: var(--accent-color);\n color: var(--header-color);\n }\n\n .copy-button.copied {\n background-color: var(--success-color);\n color: var(--bg-color);\n }\n\n .copy-button svg {\n width: 16px;\n height: 16px;\n stroke-width: 2;\n }\n\n /* --- Footer --- */\n .footer {\n text-align: center;\n padding: 1rem;\n font-size: 0.8rem;\n color: var(--border-color);\n border-top: 1px solid var(--border-color);\n }\n\n .footer a {\n color: var(--accent-color);\n text-decoration: none;\n transition: color 0.2s ease;\n }\n\n .footer a:hover {\n color: var(--accent-hover);\n }\n </style>\n</head>\n<body>\n\n <div class=\"container\">\n <header class=\"header\">\n <h1>Your Custom Prompt</h1>\n <p>Use the button below to copy the entire prompt to your clipboard.</p>\n </header>\n\n <main class=\"prompt-content\">\n <button id=\"copy-btn\" class=\"copy-button\">\n <svg id=\"copy-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>\n <svg id=\"check-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display: none;\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>\n <span id=\"copy-text\">Copy</span>\n </button>\n\n <!-- \n This block is now a simple placeholder.\n We will populate it using JavaScript to ensure the prompt text,\n including all its tags, is displayed literally.\n -->\n <pre><code id=\"prompt-display-code\"></code></pre>\n </main>\n \n <footer class=\"footer\">\n <p>Generated with ❤️ by <a href=\"https://n8n.partnerlinks.io/g3yh568uv03t\" target=\"_blank\" rel=\"noopener noreferrer\">n8n</a></p>\n </footer>\n </div>\n\n <!-- \n This is the most important part for perfect copy/display.\n We embed the raw prompt data into a JavaScript variable.\n JSON.stringify() escapes any special characters, making it a valid JS string.\n -->\n <script>\n const rawPromptToCopy = {{ JSON.stringify($json.query.prompt) }};\n </script>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n // --- Part 1: Display the prompt safely ---\n const promptDisplayElement = document.getElementById('prompt-display-code');\n if (promptDisplayElement) {\n // Using .textContent is the key. It tells the browser to treat\n // the string as plain text, not as HTML. This automatically\n // displays '<' and '>' characters correctly.\n promptDisplayElement.textContent = rawPromptToCopy;\n }\n\n // --- Part 2: Handle the copy functionality ---\n const copyButton = document.getElementById('copy-btn');\n const copyText = document.getElementById('copy-text');\n const copyIcon = document.getElementById('copy-icon');\n const checkIcon = document.getElementById('check-icon');\n\n copyButton.addEventListener('click', () => {\n // The clipboard API copies the raw, unmodified string.\n navigator.clipboard.writeText(rawPromptToCopy)\n .then(() => {\n // Success feedback\n copyText.textContent = 'Copied!';\n copyButton.classList.add('copied');\n copyIcon.style.display = 'none';\n checkIcon.style.display = 'inline-block';\n\n // Reset the button after 2 seconds\n setTimeout(() => {\n copyText.textContent = 'Copy';\n copyButton.classList.remove('copied');\n copyIcon.style.display = 'inline-block';\n checkIcon.style.display = 'none';\n }, 2000);\n })\n .catch(err => {\n console.error('Failed to copy: ', err);\n copyText.textContent = 'Error';\n setTimeout(() => { copyText.textContent = 'Copy'; }, 2000);\n });\n });\n });\n </script>\n\n</body>\n</html>"
},
"typeVersion": 1.1
},
{
"id": "29733433-2142-4177-9f5f-9a05de1c5436",
"name": "便签",
"type": "n8n-nodes-base.stickyNote",
"position": [
-2180,
-440
],
"parameters": {
"color": 6,
"width": 760,
"content": "## Workflow Overview\nThis n8n workflow provides a user-friendly web interface to generate structured prompts for Large Language Models (LLMs) using Google Gemini. Users can describe their desired prompt, specify which sections (e.g., System Instructions, Examples, Inputs) they want included, and the workflow will leverage AI to create a well-formatted prompt. The generated prompt is then displayed on a dedicated webpage, ready to be copied."
},
"typeVersion": 1
},
{
"id": "bbbb0e8a-ccc4-469e-bb54-e7f1d298071f",
"name": "便签1",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1380,
-440
],
"parameters": {
"color": 7,
"width": 500,
"height": 640,
"content": "### 1. Prompt Request (Form Trigger)\n* **Purpose:** Serves as the public-facing entry point for the workflow. It presents a customizable web form to collect user requirements for the AI prompt.\n* **Configuration:**\n * **Form Title:** \"AI Prompt Maker\"\n * **Form Description:** \"Let AI create your perfect prompt..\"\n * **Form Fields:**\n * \"What prompt do you want ?\": A required textarea for the user to describe the prompt's goal, context, input format, and examples.\n * \"Select Sections\": A multi-select dropdown allowing users to choose whether to include \"System Instructions\", \"Examples\", and \"Inputs\" sections in the generated prompt.\n * **Webhook Path:** `/prompt-maker`\n * **Custom CSS:** Includes extensive CSS to style the form for a modern and cherent appearance with the webage.\n* **Logic:** Upon form submission, it captures the user's input and passes it to the next node for prompt generation."
},
"typeVersion": 1
},
{
"id": "aa874d0f-3551-48f3-9926-ae556d2c2c73",
"name": "便签2",
"type": "n8n-nodes-base.stickyNote",
"position": [
-860,
-300
],
"parameters": {
"color": 7,
"width": 620,
"height": 500,
"content": "### 2. Generate Prompt (LLM Chain)\n* **Purpose:** This node acts as the orchestrator for the prompt generation. It constructs a meta-prompt based on user selections and sends it to the connected LLM.\n* **Configuration:**\n * **Text:** Uses the user's input from the \"What prompt do you want ?\" field.\n * **Messages:** Contains a system message that instructs the LLM (Gemini) to act as an expert prompt generator. This message dynamically includes placeholders for <role>, <examples>, and <inputs> based on the user's \"Select Sections\" choices. The core structure includes <goal>, <context>, and <output_format>.\n* **Logic:** It dynamically builds the prompt for the LLM, ensuring the generated output adheres to a specific, structured format (e.g., using XML-like tags for sections)."
},
"typeVersion": 1
},
{
"id": "d153908d-ac4c-4af1-ba29-ac468142aece",
"name": "便签3",
"type": "n8n-nodes-base.stickyNote",
"position": [
-740,
220
],
"parameters": {
"color": 7,
"width": 400,
"height": 380,
"content": "### 3. Gemini 2.5 Flash (Google Gemini Chat)\n* **Purpose:** This is the Large Language Model (LLM) that performs the actual prompt generation.\n* **Configuration:**\n * **Model Name:** `models/gemini-2.5-flash` (a fast and cost-effective model, but smart enough to build prompts).\n * **Temperature:** `0` (ensures deterministic and consistent output, ideal for structured generation).\n* **Logic:** Receives the meta-prompt from \"Generate Prompt\" and returns the newly created, structured AI prompt."
},
"typeVersion": 1
},
{
"id": "88ca6809-5621-48c8-ba70-171508137a1c",
"name": "便签4",
"type": "n8n-nodes-base.stickyNote",
"position": [
-220,
-300
],
"parameters": {
"color": 7,
"width": 480,
"height": 500,
"content": "### 4. Go to Site (Form)\n* **Purpose:** After the prompt is generated, this node redirects the user's browser to a new URL where the generated prompt will be displayed.\n* **Configuration:**\n * **Respond With:** `redirect`\n * **Redirect URL:** Dynamically constructed using n8n environment variables (`WEBHOOK_URL`, `N8N_ENDPOINT_WEBHOOK`) and the URL-encoded generated prompt (`$json.text.urlEncode()`). This URL points to the \"Get Prompt Webpage\" webhook.\n* **Logic:** Ensures a seamless transition from the form submission to the prompt display page.\n"
},
"typeVersion": 1
},
{
"id": "0fddd040-5e20-4bb0-be61-ac4cf8772548",
"name": "便签5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1380,
640
],
"parameters": {
"color": 7,
"width": 520,
"height": 560,
"content": "### 5. Get Prompt Webpage (Webhook)\n* **Purpose:** This webhook serves as the target for the redirect from \"Go to Site\". It receives the generated prompt as a URL query parameter.\n* **Configuration:**\n * **Path:** `/prompt/result`\n * **Response Mode:** `Using Respond to Webhook Node` (delegates the response generation to the next node).\n* **Logic:** Listens for incoming requests to the `/prompt/result` path and extracts the `prompt` query parameter."
},
"typeVersion": 1
},
{
"id": "19ce7d51-ad08-491e-bb1a-4ad7d4348130",
"name": "便签6",
"type": "n8n-nodes-base.stickyNote",
"position": [
-840,
640
],
"parameters": {
"color": 7,
"width": 600,
"height": 560,
"content": "### 6. Display Webpage (Respond to Webhook)\n* **Purpose:** Renders a custom HTML page to beautifully display the generated prompt and provide a \"copy to clipboard\" functionality.\n* **Configuration:**\n * **Respond With:** `text`\n * **Response Body:** Contains a complete HTML document with embedded CSS for styling and JavaScript for handling the prompt display and copy functionality.\n * **Content-Type Header:** `text/html; charset=UTF-8`\n* **Logic:**\n * The HTML page is designed with a dark theme and a code block (<pre><code>) to present the prompt.\n * A JavaScript snippet safely embeds the received prompt (from `$json.query.prompt`) into a variable using `JSON.stringify()` to handle special characters.\n * Another JavaScript snippet then populates the <code> block with the prompt using `textContent` (to display it literally, including angle brackets) and implements the copy-to-clipboard feature."
},
"typeVersion": 1
},
{
"id": "f21a289d-1665-4888-9a4c-9c59d390375c",
"name": "便签7",
"type": "n8n-nodes-base.stickyNote",
"position": [
-2180,
-260
],
"parameters": {
"color": 5,
"width": 760,
"height": 680,
"content": "## Required Credentials\n* **Google Palm API:** This workflow requires an n8n credential for the Google Palm API (which supports Gemini models) to connect to the Google Gemini service. The example credential name is \"IA2S\".\n\n## Setup & Configuration\n\n1. **Import the Workflow:**\n * Copy the provided workflow JSON.\n * In your n8n instance, go to \"Workflows\" and click \"New\".\n * Click the \"Import from JSON\" button and paste the JSON.\n\n2. **Configure Google Palm API Credential:**\n * Ensure you have an active Google Gemini API credential configured in n8n.\n * If not, open the \"Gemini 2.5 Flash\" node, click \"New Credential\", and follow the instructions to set it up (you'll need an API key from Google AI Studio).\n\n3. **Environment Variables (Optional but Recommended):**\n * This workflow uses `WEBHOOK_URL` and `N8N_ENDPOINT_WEBHOOK` environment variables for constructing the redirect URL. They will be in red, but this is normal.\n * `WEBHOOK_URL`: This is usually automatically set by n8n to your instance's base URL.\n * `N8N_ENDPOINT_WEBHOOK`: If your n8n instance is behind a reverse proxy or has a custom webhook path (e.g., `https://yourdomain.com/custom-path`), you might need to set this environment variable in your n8n configuration. By default, n8n's webhook path is `webhook`.\n\n4. **Activate the Workflow:**\n * After importing and configuring credentials, activate the workflow by toggling the \"Active\" switch in the top right corner of the workflow editor (To make the webhook accessible)."
},
"typeVersion": 1
},
{
"id": "dc720dcd-784e-4368-9b11-f2115deaf215",
"name": "便签8",
"type": "n8n-nodes-base.stickyNote",
"position": [
-2180,
440
],
"parameters": {
"color": 4,
"width": 760,
"height": 500,
"content": "## Usage\n\n1. **Access the Prompt Maker Form:**\n * Once the workflow is active, navigate to the \"Prompt Request\" node.\n * Copy the \"Public URL\" displayed in the node's settings (e.g., `https://YOUR_N8N_URL/form/prompt-maker`).\n * Open this URL in your web browser.\n\n2. **Fill Out the Form:**\n * Enter a detailed description of the prompt you want to create in the \"What prompt do you want ?\" textarea.\n * Select the desired sections (System Instructions, Examples, Inputs) using the \"Select Sections\" options.\n\n3. **Generate and View Prompt:**\n * Click the \"Create Prompt\" button.\n * The workflow will execute, generate the prompt, and redirect your browser to a new page displaying the generated prompt.\n\n4. **Copy the Prompt:**\n * On the prompt display page, click the \"Copy\" button to copy the entire generated prompt to your clipboard."
},
"typeVersion": 1
},
{
"id": "7cd9e2ea-5e68-4b1d-a5b1-da17bb1063d8",
"name": "便签9",
"type": "n8n-nodes-base.stickyNote",
"position": [
-2180,
960
],
"parameters": {
"color": 3,
"width": 760,
"height": 520,
"content": "## Troubleshooting\n\n* **Form Not Loading (404 Error):**\n * Ensure the workflow is active.\n * Verify the \"Public URL\" for the \"Prompt Request\" node is correct and accessible.\n * Check your n8n instance's `N8N_ENDPOINT_WEBHOOK` environment variable if you are using a custom webhook path or reverse proxy.\n* **Prompt Generation Fails (LLM Error):**\n * Check the n8n execution logs for the \"Generate Prompt\" and \"Gemini 2.5 Flash\" nodes.\n * Verify your Google Palm API credential is valid and has sufficient permissions.\n * Ensure your Google Gemini API key is correctly configured and not expired.\n * Check for API rate limits on the Google Gemini side.\n* **Redirect Not Working / Blank Page:**\n * Confirm the workflow is active.\n * Verify that the `WEBHOOK_URL` and `N8N_ENDPOINT_WEBHOOK` environment variables are correctly set in your n8n instance. The redirect URL must be valid and point back to your n8n instance.\n * Check the execution logs for the \"Go to Site\" and \"Get Prompt Webpage\" nodes for any errors.\n* **Prompt Not Displaying Correctly on Page:**\n * While unlikely due to the `JSON.stringify` and `textContent` usage, very unusual characters in the generated prompt might cause rendering issues.\n * Ensure your browser's JavaScript is enabled."
},
"typeVersion": 1
}
],
"pinData": {
"Generate Prompt": [
{
"text": "<instructions>\n<goal>\nSay \"Hello, World!\".\n</goal>\n\n<context>\nThis is a basic test to ensure the model is functioning and can produce a simple output.\n</context>\n\n<output_format>\nHello, World!\n</output_format>\n</instructions>"
}
]
},
"connections": {
"Prompt Request": {
"main": [
[
{
"node": "Generate Prompt",
"type": "main",
"index": 0
}
]
]
},
"Generate Prompt": {
"main": [
[
{
"node": "Go to Site",
"type": "main",
"index": 0
}
]
]
},
"Gemini 2.5 Flash": {
"ai_languageModel": [
[
{
"node": "Generate Prompt",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"Get Prompt Webpage": {
"main": [
[
{
"node": "Display Webpage",
"type": "main",
"index": 0
}
]
]
}
}
}常见问题
如何使用这个工作流？
复制上方的 JSON 配置代码，在您的 n8n 实例中创建新工作流并选择「从 JSON 导入」，粘贴配置后根据需要修改凭证设置即可。
这个工作流适合什么场景？
高级 - 人工智能
需要付费吗？
本工作流完全免费，您可以直接导入使用。但请注意，工作流中使用的第三方服务（如 OpenAI API）可能需要您自行付费。
相关工作流推荐
自动n8n更新器（Docker）
自动n8n更新器（Docker）
If
Set
Ssh
+6
26 节点Lucas Peyrin
人工智能
技术雷达
使用SQL数据库、RAG和路由代理构建AI驱动的技术雷达顾问
If
Code
Cron
+22
53 节点Sean Lon
工程
提示生成器
AI提示生成器工作流
Form
Merge
Split Out
+7
21 节点Anurag Srivastava
工程
使用Mistral OCR和Gemini AI简历分析自动化候选人筛选
使用Mistral OCR和Gemini AI简历分析自动化候选人筛选
Mistral Ai
Form Trigger
Google Sheets
+5
18 节点Lucas Peyrin
人力资源
自动化多平台销售代理
使用 RAG、CRM 和支付处理的多平台销售代理
If
Set
Switch
+24
83 节点Electrabot
销售
基于 AI 代理和 n8n 表单的对话式面试
基于 AI 代理和 n8n 表单的对话式面试
If
Set
Form
+13
40 节点Jimleuk
产品
工作流信息
难度等级
高级
节点数量16
分类1
节点类型7
作者
Lucas Peyrin
@lucaspeyrinInnovative builder with a passion for crafting automation solutions that solve real-world challenges. From streamlining workflows to driving efficiency, my work empowers teams and individuals to achieve more with less effort. Experienced in developing scalable tools and strategies that deliver results with n8n, supabase and cline.
外部链接
在 n8n.io 查看 →
分享此工作流