流程可視化 · Playground

把你的工作流程畫成一張可以點的圖

新同事問你「你每篇文章是怎麼做出來的？」你開始口頭講、講到第三步發現自己跳了一步、回過頭補、講完對方還是一臉茫然。這種「我的工作流長什麼樣」用文字講最慘——攤平了所有步驟、看不到誰先誰後、誰平行、誰是花最多時間的瓶頸。畫成一張可以點的圖、每一步寫清楚「在做什麼 / 用什麼工具 / 多久」就解了。

玩法：下面是我自己每篇社群貼文的產製流程。點任一步驟、右邊會展開「這步在做什麼 / 我用什麼工具 / 大概多久」。
第 1 步 選題 這週要寫什麼 第 2 步 研究 + 對標 查資料、看別人怎寫 第 3 步 寫長文 部落格主體 ⇶ 第 4 步 · 同時做 摘錄成串文 主文 + 4-5 串 第 4 步 · 同時做 做輪播圖卡 9 張一組 第 4 步 · 同時做 生插圖 用 AI 畫角色圖 第 5 步 自我審查 8 維度品質 第 6 步 發佈 三平台各自發 第 7 步 互動 + 復盤 回留言、看數據
實線 = 依序做 虛線 = 同時做 橘色 = 目前選中
點上面任一步驟、這裡會展開細節（做什麼 / 工具 / 多久）。

叫 AI 給你一個

把下面 prompt 的 [括號] 換成你自己的流程、貼進 ChatGPT / Claude / Gemini：

幫我把我的工作流程畫成一張可以點的圖，輸出成單一 HTML 檔案。

我的流程是 [內容產製 / 客戶 onboarding / 新人入職 / 招募 / 你自己的流程]：

第 1 步：[做什麼]，用 [工具]，大概 [多久]
第 2 步：[做什麼]，用 [工具]，大概 [多久]
第 3 步：[做什麼]，用 [工具]，大概 [多久]
（依序列你的每一步，5-8 步最剛好）

如果其中有「同時做」的步驟、請標出來（例如：第 4 步同時做 A、B、C）。

請：
1. 用 SVG 畫水平流程圖（手機看不下就改成兩排）
2. 每個步驟畫成圓角方塊、上面標步驟編號 + 一個圖示 + 步驟名
3. 互動：點任一步驟、整個方塊變橘色、底下展開「這步在做什麼 / 用哪些工具 / 大概多久」
4. 「同時做」的步驟用虛線連接，依序做的用實線箭頭
5. inline CSS 和 JS、一個 HTML 檔，我可以右鍵存檔直接打開
6. 用繁體中文、不要工程術語
7. mobile 友善、手機可看可點（水平爆版改可滑動）