🎬 實戰分享｜把 n8n Workflow 變成真正的網站（附 工作流 + 提示詞）

 大家好，我是 Jack。

這支影片我完整示範了一件我平常一直在做、
但很多 n8n 使用者其實都還停在「後台」的事情：

👉 把一個 n8n 工作流，直接做成一個可以操作的網站。

📺 影片在這裡：
https://youtu.be/TNROzZtVj1U

如果你已經會用 n8n，
但開始覺得：

• 工作流邏輯寫得出來

• 卻只能自己在後台操作

• 或只能用 Notion / Google Sheets 當控制面板

那這支影片，就是為了這個階段準備的。

📦 本篇你可以下載與使用的內容

1️⃣ 影片中使用的 n8n 工作流（JSON）

我已經把影片中示範的 n8n 工作流匯出成 JSON，
你可以直接下載後：

• 匯入 n8n 使用

• 或作為範例，練習把「工作流 → 網站介面」

👉 這個工作流本身就是完整的後端邏輯。

2️⃣ 影片中實際使用的「工作流 → Web App 提示詞」

你可以直接把下面這段 提示詞（Prompt）
丟給你習慣使用的 AI / Vibe Coding Agent，
照著影片的方式，把 n8n 工作流重做成一個本地可執行的網站。

⚠️ 提示：
這個練習的重點不是寫前端，
而是學會 如何把已完成的工作流，變成「人可以操作的工具」。

你是一位全端工程師。 我會提供一份 n8n workflow.json。 請你閱讀並理解這個 workflow，然後用「同樣的邏輯」在本地端重做成一個簡單的 Web App。 需求： - 只需在本地端執行 - 不需要登入、不需要資料庫 - 做一個簡單的操作介面（表單 + Run 按鈕 + 結果顯示） - 介面的輸入欄位需對應 workflow 的輸入 - 按下 Run 後，用程式執行該 workflow 的流程 - 輸出結果需與 workflow 的最終輸出一致 - 若需要 API key 或設定，請在介面中輸入，僅保存在記憶體中 - 不要新增功能、不要改變 workflow 的行為 請先： 1) 簡要說明這個 workflow 在做什麼 2) 列出需要的輸入與設定 再來： 3) 建立本地 Web App（前端 + 後端） 4) 提供本機啟動與測試方式 閱讀 sora2-video-generator.json 並開始。

🧠 我希望你從這個練習真正理解的一件事

這個練習的重點 不是工具本身，
而是這個觀念：

n8n 工作流只是後端邏輯，
當你幫它補上一個介面，
它才真正變成一個「人可以用的東西」。

當你跨過這一步，你會發現：

• 工作流不再只是後台流程

• 而是可以被包裝、被使用、被擴充

• 甚至是之後做成產品或服務的基礎