▲ 圖 1：啊～可知一切的來龍去脈為何～（Midjourney 示意圖）
話說已經到了第 29 天了，
第 30 天的內容其實都已經開始寫了，
真是漫長的旅程呢～
話說如果要看見我這系列的文章，
大家都是從 iThome 的網站上面看見吧！
然後都是條列式的，
也包括沒有圖像～
但是人類也是視覺動物呢！（？）
儘管其實我也會眼神不好⋯⋯
話說在進研究所的第一堂必修課，老師讓我們嘗試寫符合學術倫理的作業，讓我們試寫一段，看有沒有按照規範，那時候有認真的大概寫了一下，提交的其實只需要是 3 段文字。
最近翻查起來會發現一個當時覺得很重要的想法：關於 AIGC 工具的平台或者網站，是否需要有策展間的佈局跟設計？ 儘管 AI 圖像去到現在依然存在巨大爭議，但是會使用這些工具的人，有時候還是想希望看見世界上厲害的人們，是如何透過這些工具製作出好看的圖像？
當時自己的作業是這樣子寫的：
「過往研究明確表明 AIGC 技術雖然產生大量內容，但是內容品質出現參差不齊的情況 (Gao, 2024, p.6)，而 AIGC 技術核心的機器演算法及語言表達模型同樣存在『守門員』與『生產者』的使用者角色在過往研究當中被提及到，這些角色需要通過制定規則、方向，並且對機器生成內容進行品質監控，進一步促進資訊、人機互動、社會與人類互動作出內容價值失調時的緩衝關係 (Shao & Yin, 2025)。
並且除了『守門員角色』之外，也同時需要『平台』的建構才能有效連結內部與外部，包括產業的資源 (Yao, Wang, & Sun, 2025)，且有效透過『數位內容策展』的形式，以確保內容品質的角度，有效保留優質 AIGC 的內容價值 (黃靖斐、陳志銘，2018)，並透過資源連結的形式，有效擴散及應用內容價值。」
除了如同之前策展的概念，經營者及營運者可以透過觀察近期世界關注的內容從而推出一系列的徵稿活動，邀請使用者們參與，也透過整個活動對某些特定議題進行某些倡議的效果，宣揚平台技術之外，也說明科技公司對於人文社會的關懷。當然現在主要是延伸這個想法去說明的。
有效的去做內容的編排非常重要，在出版、數位內容、策展等等領域都會提及這件事情，學術寫作也不例外。
▲ 圖 2：都是冷冰冰的文字⋯⋯
所以！我 30 篇的鐵人賽文章如果是用 iThome 網頁的方式去展示的話，有時候可能會覺得太單調了。
就讓我重新設計跟排序一下，參考 Midjourney 的首頁設計形式給予圖像參考⋯⋯
不對耶⋯⋯其實這個網頁我昨天已經做好了，這次沒有記錄下來 Prompt⋯⋯（但其實自己經常都這樣子冒冒失失，所以大家之前看見我的提示詞，有可能是我寫文章的時候嘗試復原起來的提示詞 🤣）
不過沒關係，就讓自己的 Vibe Coding 工具告訴我：根據我最後做出來的東西，如果要還原成 Prompt 提示詞的話，會長什麼樣子？
最後逆向工程推導出來的 Prompt 結果如下：
# 任務：打造「鐵人賽 28 天 Vibe Coding」科幻偵探案件線索板與圖文庫
請以 Senior Creative Frontend Engineer 身份，使用純原生技術打造一個極致美觀、沉浸式的成果展示網站。
### 1. 技術規範（嚴格遵守）
- **純原生前端**：僅限 Vanilla HTML5 + CSS3 + 原生 JavaScript (ES6+)，嚴禁使用 React/Vue/Vite 等任何框架與構建工具。
- **零依賴與相容性**：支援本機直接雙擊開啟 (file://) 及 GitHub Pages。資料層透過 <script> 載入全域變數，避免 CORS 限制。
### 2. 視覺風格 (Cyber-Noir)
- **色彩**：深淵黑底 (#0a0b10) 搭配科技藍 (#38bdf8)、警戒紅 (#ef4444)、琥珀黃 (#f59e0b)、異常紫 (#a855f7)。
- **質感**：量子粒子 Canvas 背景、毛玻璃 HUD (backdrop-filter)、拍立得大頭針證物卡、檢驗印章。
### 3. 雙主分頁架構
#### 【分頁一：案件線索板 (Case Evidence Board)】
- **頂部控制列（⚠️ 嚴禁包含「調查卷宗」分類）**：
1. 關鍵字即時搜尋。
2. 證物類型篩選器 (ALL, E1 架構圖, E2 核心程式, E3 排錯筆記, E4 測試日誌, E5 里程碑, E6 設計草圖)。
3. 調查支線按鈕 (LINE_A ~ LINE_F 六大主題)。
4. 隱藏劇情按鈕 (01 靈魂奇異點, 02 算力幽靈, 03 終極假說)。
- **三子視圖**：
1. **案件牆 (Pinboard)**：無邊界平移 (Pan) 與滑鼠縮放 (Zoom: 0.4x~2.0x) 畫布、微傾斜大頭針卡片、四色 SVG 動態連線（實線/虛線/點狀線）及連線 Tooltip。
2. **時間線 (Timeline)**：Day 01~28 垂直時間流演進與里程碑。
3. **關聯推理圖 (Inference Graph)**：6 大支線語意分群與推導網絡。
- **彈窗與抽屜**：
- **證物詳情 Modal**：大圖、用意筆記、程式碼、原文傳送門、雙向關聯鏈跳轉。
- **隱藏劇情側邊抽屜**：滑出式機密假說報告，高亮連動證物卡與紅線。
#### 【分頁二：圖文檔案庫 (Visual Archive)】
- **瀑布流 (Masonry Grid)**：展示 144+ 張完整圖片與架構圖，支援 Hover 放大與天數標籤。
- **即時搜尋**：針對圖片敘述與天數快速過濾。
- **沉浸式燈箱 (Lightbox)**：全黑背景大圖檢視，支援鍵盤 ESC、←/→ 切換與圖片下載。
### 4. 資料層結構
- data.js：提供 28 天文章清單 (day, title, summary, tags, images[], url)。
- case_evidence_data.js：定義 evidenceTypes (E1~E6)、investigationLines (A~F)、hiddenPlots (01~03)、28 個 evidenceItems (坐標、傾角、筆記) 及 connections 連線陣列。
💡 提示：以上內容直接複製貼給 AI，就能完整復刻出整套科幻展示網頁！
誰說提示詞一定要是輸入？它也可以是輸出！像極了我們使用生成式 AI 工具，會先用工具根據模糊的描述產出 Prompt，然後再複製貼上 Prompt，讓工具產出完整、詳細、比想像中更加好的內容。
看見如此詳細的提示詞，我們要學習寫提示詞嗎？
要，但同時也可以不要。
儘管現在在教育的前線，也會發現需要教這件事情，也有可能是用各類型的提問結構來教導這件事情，但實際上只是跟 AI 聊天，其實就能夠隱約的學會了這段事情。
因為重點是「使用習慣」。當如果使用次數足夠多的時候，人類為了不要這麼麻煩、不要重蹈覆轍浪費時間的操作，隱約便會懂得如何優化提示詞。從而實際上當每個人的 AI 工具使用時數足夠長的時候，每個人都已經自自然然的鍛鍊起自己一套使用提示詞的能力。
從而我並不相信這件事情需要刻意的去教導，重點反而是給予空間及時間，讓受到教育的人可以擁有與 AI 工具接觸的機會。機會一多，次數一多，每個人都肯定會練成自己的提示詞技能。Vibe Coding 同樣如此，我們的輸入其實都是提示詞，儘管有時候會指定工具用什麼資料夾、用什麼 skills、指定優化的內容是什麼，但其實這些都是提示詞。
說實在的我並不想教提示詞。當然每一篇文章幾乎都有提及到提示詞，但我更想傳遞的比較多像是理念、想法，以及我自己的經驗，像是我的故事一樣。
我希望看文章的人看見的是我的故事，可能有反轉——像是中文系畢業的我竟然用 Vibe Coding 製作出一個莫名有趣的東西；像是莫名其妙在 Vibe Coding 主題的文章提及法律個案的 IRAC 分析法。
我想衝擊的就是這件事情！ 讓大家在使用科技的時候，可以想起從不同角度似乎可以觀察到什麼有趣的現象，或者延伸出怎樣的想法。
▲ 圖 3：雜亂的案件線索板～
文章就寫得差不多了，但是如果有一直看我的文章會發現：我每一篇文章的第一張圖片，都會用一張 Midjourney 動漫風格的示意圖來作為開始。
這些圖像在自己眼中像是另外一個世界的畫面，它們除了代表這篇文章以外，也像是額外的一個故事——有故事性、有人物、有場景，它們似乎也可以被連結起來變成一個故事。當然這個部份我可以自己編排，但我想試著如果是 AI 工具幫我編排的話，它會如何用圖像的標題來進行編排？
最後就用⋯⋯案件線索板！ 那種找出案件真兇的板子（？），來釘上一張又一張圖像吧！不知道觀眾會想看這樣子的畫面嗎？過程還似乎隱藏著一個謎團，是 AI 從我所有的文章所辨識出來的，這個難題同樣應該也會是大家的難題，就留待大家各自思考吧！
▲ 圖 4：Midjourney 風格的展示排版！
另一方面，Midjourney 首頁的瀑布流排版也被參考進來了。或許你不想從我的文章標題來看我的文章（雖然我一直在翻查著自己有沒有標題黨的問題，隱約覺得有，但這不是好事，像是騙了大家 🫠），或許你是從某一張圖片當中的內容覺得有趣，從而去翻看文章。那麼這邊「分頁二」就展示了我所有文章所引用的圖像，你對哪一張圖像感興趣，就點進來看詳細的文章吧！
▲ 圖 5：比較好看的 iThome 文章圖像展示板
雖然我覺得最後都應該不會有太多人看這個網頁，但是這個網頁卻是最能夠證明我這一次 iThome 鐵人賽所有內容的一個展示性網頁！ 我自己也好給自己一個交代，至少我也能夠更好的整理明天的最後一篇文章⋯⋯
| 核心維度 | 重點摘要 |
|---|---|
| AIGC 數位策展與社會價值 | AIGC 的圖像可以透過有效的內容策劃，從「篩選展示優質內容」、「平台經營」與「議題倡議」三個角度，提升這項技術與平台的社會影響力與人文關懷。 |
| 反思提示詞教育：習慣重於教條 | 不想刻板做提示詞教育，更想用自己的故事與跨界經驗，分享 AI 工具與 Vibe Coding 的真實心法。只要給予足夠的使用時數與磨合機會，每個人都會自然長出最適合自己的提示詞技能。 |
| 多維展示打破單調文字框架 | 透過額外打造的 16:9 劇院案件線索板與 Pinterest 瀑布流網頁，跳脫傳統條列式純文字限制，用高質感的視覺策展吸引讀者重溫 28 天跨域創新的全貌。 |
iThome鐵人賽
看影片追技術