教學步驟示意圖 / 流程圖

用途

把一個操作流程或教學步驟（3–7 步）轉成乾淨的視覺示意圖，適合放課程 slide、教學影片截圖、部落格文章插圖或 SOP 文件配圖，讓讀者「掃一眼就懂順序」。

何時用

• 適合：課程操作 SOP 示意、工作坊講義流程圖、部落格文章「X 步驟做到 Y」的視覺補充、說明書或提案書中的流程說明頁
• 不要用：需要 BPMN / UML 正式符號的工程流程圖（那類請用 draw.io / Mermaid）；也不要用來替代有條件判斷分支的複雜決策樹（AI 生成的箭頭邏輯容易錯）

Prompt

【中文描述】
製作一張{{步驟數，例如：5}}步驟的教學流程示意圖，主題：「{{流程主題，例如：n8n Webhook 建置流程 / Claude 提示詞優化步驟}}」。
每個步驟包含：數字圓圈 + 步驟名稱（繁中）+ 一行說明（≤ 15 字）。
步驟之間用向右箭頭（橫向）或向下箭頭（直向）串聯。
排列方式：{{橫向 left→right（適合 16:9 簡報）/ 直向 top→bottom（適合直式手機截圖）}}。
風格：現代扁平 flat，線條清晰，數字用{{主色，例如：深藍 #1A56DB}}實心圓圈白字，
步驟卡片用淡灰白色背景，細邊框。
最後一個步驟用{{完成色，例如：綠色 #22C55E}}突顯「完成 / 達成目標」狀態。
避免：手寫感、陰影過重、箭頭與步驟重疊、多餘裝飾圖形、密集小字。
長寬比：16:9（橫向）或 9:16（直向）

【English prompt — for better model accuracy】
Create a clean step-by-step process diagram for "{{process title, e.g.: 5-Step Webhook Setup in n8n / Prompt Optimization Workflow}}".
Number of steps: {{N}}.
Each step: numbered circle (bold white numeral on {{primary color, e.g.: #1A56DB}} background) + step title + one-line descriptor (≤ 15 characters).
Flow direction: {{horizontal left-to-right with right-pointing arrows / vertical top-to-bottom with downward arrows}}.
Style: modern flat design, clean line icons optional beside each step title.
Step cards: light gray-white (#F8FAFC) background, thin border, subtle drop shadow.
Final step card: highlighted in {{completion color, e.g.: green #22C55E}} to indicate goal reached.
Avoid: handwriting style, heavy drop shadows, overlapping arrows, decorative clutter, dense text blocks.
Aspect ratio: 16:9. Minimal, scannable, high contrast.
White background overall, generous spacing between steps.

範例 / 變體

• 填好變數：5 步驟「n8n Workflow 上線流程」，橫向排列，主色深藍，完成色綠，每步 ≤ 12 字說明，16:9 → 直接插入課程 slide 第 3 頁
• 變體（直向手機版）：排列改直向，長寬比 9:16，步驟卡片加寬佔滿畫面，適合 IG Stories 教學卡或 LINE 貼文截圖
• 變體（加入圖示版）：每個步驟圓圈旁加一個 line-icon（例如：扳手、閃電、勾選符號），讓步驟在沒文字的情況下也能快速辨識，適合多語言課程或國際版教材

🎯 範例輸出（實測）

在 ChatGPT 跑這句、把 {{變數}} 填成「5 步驟 n8n Webhook 建置流程 / 橫向排列 / 主色深藍 #1A56DB / 完成色綠 #22C55E / 16:9」的結果：

點開看 AI 實際輸出

精修後的英文 prompt（用於 ChatGPT DALL-E 3）：

Create a clean horizontal step-by-step process diagram titled "5-Step n8n Webhook Setup".
Number of steps: 5. Flow direction: horizontal left-to-right with right-pointing arrows.

Step 1: numbered circle "1" — "建立 Webhook 節點" — 在 n8n 新增觸發節點
Step 2: numbered circle "2" — "設定監聽路徑" — 指定 URL path 與 HTTP 方法
Step 3: numbered circle "3" — "連接資料處理" — 串接後續 Function / Filter 節點
Step 4: numbered circle "4" — "測試與驗證" — 用 Postman 送測試請求
Step 5: numbered circle "5" (green highlight) — "啟動 Workflow" — 切換 Active 完成上線

Each numbered circle: bold white numeral on deep blue #1A56DB background (steps 1-4),
step 5 circle uses green #22C55E background to signal completion.
Step cards: light gray-white #F8FAFC background, thin #E2E8F0 border, very subtle drop shadow.
Right-pointing arrows in #CBD5E0 between each card.
Style: modern flat design, clean geometric sans-serif font.
Avoid: handwriting style, heavy drop shadows, overlapping arrows, decorative clutter, dense text.
Aspect ratio 16:9. White #FFFFFF background, generous equal spacing between steps.
High contrast, scannable at a glance.

預期畫面：5 張卡片水平排列，深藍數字圓圈整齊對齊，每張卡上方數字圈 + 中文步驟標題 + 一行說明，灰色箭頭銜接，最後一張卡轉為綠色底（完成感強烈）。整體可直接插入課程 slide 第 3 頁作為「流程總覽」，學員掃一眼就能掌握整段教學順序。

Canva 疊字方案：若 AI 生成的文字跑掉（很常見），用 Canva 建立同尺寸畫布，用白色遮蓋 AI 版文字，再疊上正確繁中字即可，底圖仍然好用。

🎨 沒有真實截圖（繪圖 AI 需在對話框手動跑）── 把上方精修 prompt 複製進去試試： ChatGPT（GPT-4o / image） · Gemini · Midjourney

💡 實測心得：在 prompt 裡把每個 Step 的「中文標題 + 一行說明」直接列出來，即使 ChatGPT 的中文渲染跑版，AI 也會把版面比例配對正確——後製用 Canva 補字比從零排版省很多時間。

延伸

重點來了：如果步驟超過 7 個，強烈建議先分群（Phase 1 / Phase 2），再讓每個 Phase 內部跑 3–4 步，這樣視覺不會擠爆、受眾也更容易記憶。
延伸場景：資訊圖表 Infographic · 簡報章節配圖