今天，我們來動手用 n8n 這款強大的自動化工具，串接 CodePen RSS、Gemini AI 和 Discord，打造一個完全客製化的前端靈感通知流程
來到儀表板，新增一個流程「Create Workflow」
初始節點選擇「RSS Feed Trigger」
裡面可以讓我們選擇時間，URL 填上 Codepen 提供的 RSS
https://codepen.io/spark/feed
下個節點選擇「Basic LLM Chain」
Prompt 填入以下內容，並把「Require Specific Output Format」打開
你是一位資深的前端開發者與技術傳教士，你的任務是分析指定的 CodePen 作品，並以「正體中文 (台灣)」提供結構化的 JSON 格式的洞見。
請根據以下資訊，進行分析：
---
作品標題：{{ $json.title }}
作品描述：{{ $json.contentSnippet }}
---
請嚴格依照以下的 JSON 格式回覆，不要有任何額外的文字或 markdown 語法 (例如 ```json ... ```)。
{
"summary": "這裡是一句話總結這個 Pen 的核心亮點",
"tech": "分析可能用到的關鍵技術，例如：CSS Grid、GSAP 動畫、Three.js、Vue.js 等",
"learning": "說明從這個作品中可以學到什麼具體的技巧或設計模式",
"tags": ["CSS動畫", "UI設計", "互動效果"]
}
Model 可以選擇自己想要的，我是用「Gemini」
選擇想要的模型
接著到「Structured Output Parser」填入底下的範例 Schema
{
"summary": "這裡應該是一句話總結",
"tech": "這裡應該是分析出的關鍵技術",
"learning": "這裡應該是說明可以學到什麼",
"tags": ["標籤一", "標籤二", "標籤三"]
}
接著點選正下方的「Execute workflow」來試跑看看會拿到什麼資料
可以看到成功拿到 JSON 格式的內容
下個節點選擇 Discord 的「Send a message」來發送訊息
「Connection Type」選擇「Webhook」，憑證的串接在之前的文章有撰寫過，這邊就不重複惹
可以用底下的「Embeds」的卡片訊息來傳送，Input Methods 選擇「Raw JSON」
Value 填入底下的 JSON 內容
{
"title": "{{ $('RSS Feed Trigger').item.json.title }}",
"url": "{{ $('RSS Feed Trigger').item.json.link }}",
"description": "{{ $json.output.summary }}",
"color": 3447003,
"fields": [
{
"name": "💡 技術亮點",
"value": "{{ $json.output.tech }}",
"inline": false
},
{
"name": "🎓 學習點",
"value": "{{ $json.output.learning }}",
"inline": false
},
{
"name": "🏷️ 建議標籤",
"value": "{{ '#' + $json.output.tags.join(' #') }}",
"inline": false
}
],
"footer": {
"text": "由 n8n + Gemini AI 自動產生"
}
}
最後試跑看看可以在 Discord 拿到像這樣的訊息，代表成功囉
記得也要到設定裡面設定時區
Timezone 選擇台灣的時間
完整的畫布長的會像這樣，記得也要到上方切換為「Active」
你也可以自由擴充這個流程，例如將這些資料同時存到 Notion 或其他筆記軟體，打造更全面的知識管理系統哦
最後也附上完整的 JSON 內容
{
"nodes": [
{
"parameters": {
"pollTimes": {
"item": [
{
"mode": "everyWeek",
"weekday": "0"
}
]
},
"feedUrl": "https://codepen.io/spark/feed"
},
"type": "n8n-nodes-base.rssFeedReadTrigger",
"typeVersion": 1,
"position": [0, 0],
"id": "d0e53059-696c-442c-be02-937f49d0862e",
"name": "RSS Feed Trigger"
},
{
"parameters": {
"promptType": "define",
"text": "=你是一位資深的前端開發者與技術傳教士，你的任務是分析指定的 CodePen 作品，並以「正體中文 (台灣)」提供結構化的 JSON 格式的洞見。\n\n請根據以下資訊，進行分析：\n---\n作品標題：{{ $json.title }}\n作品描述：{{ $json.contentSnippet }}\n---\n\n請嚴格依照以下的 JSON 格式回覆，不要有任何額外的文字或 markdown 語法 (例如 ```json ... ```)。\n\n{\n \"summary\": \"這裡是一句話總結這個 Pen 的核心亮點\",\n \"tech\": \"分析可能用到的關鍵技術，例如：CSS Grid、GSAP 動畫、Three.js、Vue.js 等\",\n \"learning\": \"說明從這個作品中可以學到什麼具體的技巧或設計模式\",\n \"tags\": [\"CSS動畫\", \"UI設計\", \"互動效果\"]\n}",
"hasOutputParser": true,
"batching": {}
},
"type": "@n8n/n8n-nodes-langchain.chainLlm",
"typeVersion": 1.7,
"position": [220, 0],
"id": "dfc98ded-0af1-4541-8287-ec9cd617387d",
"name": "Basic LLM Chain"
},
{
"parameters": {
"modelName": "models/gemini-2.5-flash-lite",
"options": {}
},
"type": "@n8n/n8n-nodes-langchain.lmChatGoogleGemini",
"typeVersion": 1,
"position": [200, 220],
"id": "17722a10-8c59-41a1-81ef-02fa855976a0",
"name": "Google Gemini Chat Model"
},
{
"parameters": {
"jsonSchemaExample": "{\n \"summary\": \"這裡應該是一句話總結\",\n \"tech\": \"這裡應該是分析出的關鍵技術\",\n \"learning\": \"這裡應該是說明可以學到什麼\",\n \"tags\": [\"標籤一\", \"標籤二\", \"標籤三\"]\n}"
},
"type": "@n8n/n8n-nodes-langchain.outputParserStructured",
"typeVersion": 1.2,
"position": [368, 220],
"id": "c195f079-5444-47e8-b1d7-be7da7c74f8f",
"name": "Structured Output Parser"
},
{
"parameters": {
"authentication": "webhook",
"options": {},
"embeds": {
"values": [
{
"inputMethod": "json",
"json": "=\n {\n \"title\": \"{{ $('RSS Feed Trigger').item.json.title }}\",\n \"url\": \"{{ $('RSS Feed Trigger').item.json.link }}\",\n \"description\": \"{{ $json.output.summary }}\",\n \"color\": 3447003,\n \"fields\": [\n {\n \"name\": \"💡 技術亮點\",\n \"value\": \"{{ $json.output.tech }}\",\n \"inline\": false\n },\n {\n \"name\": \"🎓 學習點\",\n \"value\": \"{{ $json.output.learning }}\",\n \"inline\": false\n },\n {\n \"name\": \"🏷️ 建議標籤\",\n \"value\": \"{{ '#' + $json.output.tags.join(' #') }}\",\n \"inline\": false\n }\n ],\n \"footer\": {\n \"text\": \"由 n8n + Gemini AI 自動產生\"\n }\n }\n"
}
]
}
},
"type": "n8n-nodes-base.discord",
"typeVersion": 2,
"position": [580, 0],
"id": "a903c8bf-4e76-4acc-adf8-01eb9c3f9769",
"name": "Discord"
}
],
"connections": {
"RSS Feed Trigger": {
"main": [
[
{
"node": "Basic LLM Chain",
"type": "main",
"index": 0
}
]
]
},
"Basic LLM Chain": {
"main": [
[
{
"node": "Discord",
"type": "main",
"index": 0
}
]
]
},
"Google Gemini Chat Model": {
"ai_languageModel": [
[
{
"node": "Basic LLM Chain",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"Structured Output Parser": {
"ai_outputParser": [
[
{
"node": "Basic LLM Chain",
"type": "ai_outputParser",
"index": 0
}
]
]
}
},
"pinData": {},
"meta": {
"templateCredsSetupCompleted": true
}
}
iThome鐵人賽
看影片追技術