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": "프롬프트 요청",
"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": "프롬프트 생성",
"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": "사이트로 이동",
"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": "프롬프트 웹페이지 가져오기",
"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": "웹페이지 표시",
"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": {
"fc337c72-6ce9-43fa-96b2-1581b54983ca": {
"main": [
[
{
"node": "f036c843-4723-47e8-8eb0-3b5ec639e0c6",
"type": "main",
"index": 0
}
]
]
},
"f036c843-4723-47e8-8eb0-3b5ec639e0c6": {
"main": [
[
{
"node": "3292f7f6-cd6a-47d8-a58a-e57d2bf61871",
"type": "main",
"index": 0
}
]
]
},
"430f2ed6-ccbe-4ccd-844b-c7458d0e87b0": {
"ai_languageModel": [
[
{
"node": "f036c843-4723-47e8-8eb0-3b5ec639e0c6",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"f0949115-9ea1-4507-963f-b75c9d5bfb7e": {
"main": [
[
{
"node": "294a6d6c-2312-4c3e-91b0-e1e03ab1fea0",
"type": "main",
"index": 0
}
]
]
}
}
}자주 묻는 질문
이 워크플로우를 어떻게 사용하나요?
위의 JSON 구성 코드를 복사하여 n8n 인스턴스에서 새 워크플로우를 생성하고 "JSON에서 가져오기"를 선택한 후, 구성을 붙여넣고 필요에 따라 인증 설정을 수정하세요.
이 워크플로우는 어떤 시나리오에 적합한가요?
고급 - 인공지능
유료인가요?
이 워크플로우는 완전히 무료이며 직접 가져와 사용할 수 있습니다. 다만, 워크플로우에서 사용하는 타사 서비스(예: OpenAI API)는 사용자 직접 비용을 지불해야 할 수 있습니다.
관련 워크플로우 추천
자동 n8n 업데이터 (Docker)
자동 n8n 업데이터 (Docker)
If
Set
Ssh
+
If
Set
Ssh
26 노드Lucas Peyrin
인공지능
기술 레이더
사용SQL데이터库、RAG및路由에이전트构建AI驱动의技术雷达顾问
If
Code
Cron
+
If
Code
Cron
53 노드Sean Lon
엔지니어링
프롬프트 생성기
AI 프롬프트 생성기 워크플로우
Form
Merge
Split Out
+
Form
Merge
Split Out
21 노드Anurag Srivastava
엔지니어링
Mistral OCR 및 Gemini AI 이력서 분석을 사용한 후보자 스크리닝 자동화
Mistral OCR과 Gemini AI 이력서 분석을 사용한 후보자 스크리닝 자동화
Mistral Ai
Form Trigger
Google Sheets
+
Mistral Ai
Form Trigger
Google Sheets
18 노드Lucas Peyrin
인사
자동화된 멀티플랫폼 판매 에이전트
RAG, CRM 및 결제 처리를 사용한 멀티 플랫폼 세일즈 에이전트
If
Set
Switch
+
If
Set
Switch
83 노드Electrabot
영업
AI 대리인과 n8n 양식 기반의 대화식 인터뷰
AI 대리인과 n8n 양식을 기반으로 한 대화식 인터뷰
If
Set
Form
+
If
Set
Form
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에서 보기 →
이 워크플로우 공유