今日主題

極度暴力簡單的圖片轉 PDF 介面功能

為什麼想做

• 一個臨時性工具。因為上課拍了講義照片，有需求把圖片依段落主題轉 PDF 丟到 Heptabase 白板
• 過往：線上第三方網站，但有數量限制
• 現在：課很無聊，剛好該可以用兩分鐘時間做個介面給自己

思考怎麼做

• 工具：Claude
• 規格實在非常太單一性導向，夠簡單，連規格都省略，只寫了：寫個簡單網頁介面，可以批次上傳圖片，然後按照圖片拍攝時間順序，排序並轉檔為 PDF 可下載

成果校驗

Agent 提供的規格：
主要功能：

• 批次上傳圖片 - 可以一次選擇多張圖片 >> 符合
• 自動排序 - 會根據圖片的拍攝時間（EXIF 資訊）或檔案修改時間自動排序 >> 符合
• 即時預覽 - 上傳後可以看到排序後的圖片縮圖 >> Agent新增
• 轉換下載 - 一鍵將所有圖片轉換為 PDF 檔案並下載 >> 符合

使用方式：

• 點擊上傳區域選擇多張圖片>> 符合
• 圖片會自動按時間順序排列並顯示預覽 >> Agent新增
• 確認順序無誤後，點擊「下載 PDF」按鈕 >> 符合
• PDF 會自動下載到你的電腦 >> 符合

原以為大概 1 分鐘搞定，但出乎意料 Claude 可上傳圖片跟預覽，但只要點擊下載按鈕，畫面一片空白。修正幾之後還是失敗，覺得太詭異，所以將相同 prompt 丟到 cursor，畫面跟功能是一次成功，但功能做出來根本不意外，是更好奇為什麼會失敗。關鍵差異點是什麼？

失敗跟成功兩邊程式碼丟給 GPT分析為什麼？結果的確少講了一些讓模型能理解執行環境與輸出需求，像是：

• 不要用動態 script 載入方式，確保相容於 React 18 / Vite 環境
• 請確保按「下載 PDF」時不會因為圖片格式或 jsPDF 載入時機錯誤導致白畫面，並加入錯誤捕捉與處理狀態
• 別把所有圖片一律當成JPEG餵進 jsPDF

以上是 GPT 列出來的，有些的確可事先規範，但有些並不是我的常識範圍內。所以真正挑戰應該是：如何把這些實作邊界基本規則說完整。現階段所有技術細節沒有辦法一次描述到位，但至少最基本也要能做到正確場景描述。至少是：

• 使用場景（瀏覽器上點擊功能按鈕就能轉 PDF）
• 輸入與輸出（上傳圖片 → 自動排序 → 匯出 PDF）
• 使用者互動（預覽、進度提示）
• 錯誤處理（如果載入失敗不要整個畫面噴空白）
• 執行環境（不用伺服器，只在前端頁面上操作）
• ...

「似乎」知道了些什麼之後，暴力結論是的確我要的功能有了

介面 (預設色系真的是萬年不變，看到膩)

批次上傳

今日總結

我做了什麼

• 提供懶人白話文需求
• 比較兩邊程式碼的差異
• 試著理解少了哪些背景知識

AI 幫了我什麼

• 功能實作
• 分析原因

下一步

今天的重點完全不是擺在這個功能有沒有完成，完成是必然。但想到最近一直看到的 SDD 關鍵字。開發規格有可能一直都在改，Code 也不是我本人生，那跟 Agent 協作的核心：的確也剩開需求本人有義務說清楚「功能在什麼環境、要怎樣被使用、怎樣算成功」了。 (應該吧