[{"data":1,"prerenderedAt":153},["ShallowReactive",2],{"portfolio-timeline":3},{"id":4,"title":5,"body":6,"category":131,"cover":132,"date":133,"description":134,"extension":135,"featured":136,"links":137,"meta":139,"navigation":140,"path":141,"seo":142,"status":143,"stem":144,"tags":145,"__hash__":152},"portfolio\u002Fportfolio\u002Ftimeline.md","時光軸",{"type":7,"value":8,"toc":123},"minimark",[9,14,18,26,29,32,60,63,67,83,86,96,99,102,108,114,117,120],[10,11,13],"h2",{"id":12},"為什麼做這個","為什麼做這個？",[15,16,17],"p",{},"某次用 Claude 協助整理案件資料，它直接輸出了一份 HTML 時間軸——版面很漂亮，但要修改就麻煩了。改個日期、補個事件，都要先看懂 HTML 結構才能動手，稍不注意就壞版。",[15,19,20,21,25],{},"當下就覺得：",[22,23,24],"strong",{},"時間軸的資料和呈現方式應該要分開。"," 有一個專門的工具管理資料，讓 AI 只負責填內容、人只負責增刪修改，這樣才合理。時光軸就是從這個想法開始做的。",[10,27,28],{"id":28},"實際長什麼樣",[15,30,31],{},"以「第一次世界大戰」為例，AI 產生的時間軸包含：",[33,34,35,42,48,54],"ul",{},[36,37,38,41],"li",{},[22,39,40],{},"分類標籤","：每個事件依性質標記（戰役、政治事件、宣戰、停戰協定）",[36,43,44,47],{},[22,45,46],{},"主題 tags","：時間軸本身標注歐洲、歷史、軍事、1914–1919 等關鍵字",[36,49,50,53],{},[22,51,52],{},"詳情面板","：點開事件可看到影片資料（YouTube）、原版紀錄片連結、編輯推薦說明",[36,55,56,59],{},[22,57,58],{},"延伸閱讀","：自動附上 Wikipedia 等參考來源",[15,61,62],{},"所有這些都是 AI 一次生成，不需要手動查找或複製貼上。",[10,64,66],{"id":65},"ai-skill-整合","AI Skill 整合",[15,68,69,70,74,75,78,79,82],{},"時光軸為支援 skill 的 AI 助理定義了 ",[71,72,73],"code",{},"\u002Ftimeline"," 指令，包含 Claude Code（",[71,76,77],{},".claude\u002F","）與支援 ",[71,80,81],{},".agents\u002F"," 格式的環境（如 Google Gemini CLI）。",[15,84,85],{},"使用者可以直接對 AI 下指令：",[87,88,93],"pre",{"className":89,"code":91,"language":92},[90],"language-text","\u002Ftimeline 搜尋第一次世界大戰並建立時間軸\n\u002Ftimeline 列出台灣半導體產業發展歷程\n","text",[71,94,91],{"__ignoreMap":95},"",[15,97,98],{},"AI 收到指令後自動搜尋、整理事件，以時間軸格式輸出——查資料到建立時間軸一氣呵成。",[10,100,101],{"id":101},"核心設計",[15,103,104,107],{},[22,105,106],{},"完全本地","：時間軸資料透過 File System Access API 直接寫入本地電腦，不經過任何伺服器。檔案就在你的硬碟上，跟瀏覽器狀態無關。",[15,109,110,113],{},[22,111,112],{},"零帳號","：打開就能用，不需要註冊、登入或任何設定。",[10,115,116],{"id":116},"心得",[15,118,119],{},"這個專案讓「AI 作為研究助手」變得非常具體。以前覺得 AI 摘要資訊很方便，但有了結構化的時間軸輸出格式之後，AI 生成的內容才真的變得「可用」而不只是「可讀」。",[15,121,122],{},"格式決定了資訊的密度——這是做這個工具最大的收穫。",{"title":95,"searchDepth":124,"depth":124,"links":125},2,[126,127,128,129,130],{"id":12,"depth":124,"text":13},{"id":28,"depth":124,"text":28},{"id":65,"depth":124,"text":66},{"id":101,"depth":124,"text":101},{"id":116,"depth":124,"text":116},"web-app","\u002Fimages\u002Fportfolio\u002Ftimeline.png","2026-03-25T00:00:00.000Z","AI 驅動的時間軸產生器。輸入一句話，AI 搜尋、整理、建立帶有分類標籤、影片資料與延伸閱讀的完整時間軸，資料以檔案形式存在本地電腦。","md",false,{"website":138},"https:\u002F\u002Fwww.timeline.eraser.tw\u002F",{},true,"\u002Fportfolio\u002Ftimeline",{"title":5,"description":134},"active","portfolio\u002Ftimeline",[146,147,148,149,150,151],"File System Access API","Vue 3","Nuxt 3","Tailwind CSS","TypeScript","AI","jWUmW6VOStDSiY5DMyCx21M4AkwpwXcjpSYsGloeOSQ",1774434898752]