[{"data":1,"prerenderedAt":1077},["ShallowReactive",2],{"nav-search-articles-zh":3,"page-\u002Farticles\u002Flucide-animated":517,"related-\u002Farticles\u002Flucide-animated":972,"article-prev-next-zh-\u002Farticles\u002Flucide-animated":982},[4,15,24,30,35,42,48,54,63,68,73,78,85,90,95,101,106,111,116,122,127,132,137,142,147,152,157,162,167,172,177,182,187,192,197,202,207,212,218,224,229,234,239,244,249,254,259,264,269,274,279,285,290,295,301,311,316,321,327,332,337,345,352,358,364,369,374,380,385,390,395,400,405,410,415,420,425,430,435,440,445,450,455,460,465,470,475,480,485,492,497,502,507,512],{"_path":5,"title":6,"description":7,"category":8,"tags":9},"\u002Farticles\u002Flucide-animated","lucide-animated：把 Lucide Icon 變成會動的 React 元件","lucide-animated 是一套以 Lucide 與 Motion 製作的開源動態圖示。這篇整理互動預覽、shadcn CLI 安裝方式，以及如何交給 Agent 使用。","Web Dev",[10,11,12,13,14],"Open Source","Web Development","React","Animation","AI Agents",{"_path":16,"title":17,"description":18,"category":19,"tags":20},"\u002Farticles\u002Fanydoc","AnyDoc 實測：不到 1 秒把 Word 轉成 Markdown，還能直接交給 Agent 使用","我用 AnyDoc 高速把文件轉成 Markdown。這篇整理 CLI 與 Agent Skill 的完整用法、實際保留的文件結構，以及它和 Marker、MinerU 的差別。","AI & Tools",[14,10,21,22,23],"CLI","Productivity","Rust",{"_path":25,"title":26,"description":27,"category":19,"tags":28},"\u002Farticles\u002Fwitr","witr 實測：一條指令查出誰占用 Port，以及它為什麼在跑","我在 Mac 實際開了一個占用 5173 Port 的 Node 服務，再用 witr 追查程序、啟動來源與 Socket，也整理了 TUI、常用指令和公開畫面前要注意的隱私資訊。",[10,21,29,22],"Network",{"_path":31,"title":32,"description":33,"category":19,"tags":34},"\u002Farticles\u002Fsyncthing","Syncthing 實測：Mac 和 Windows 不靠雲端硬碟，自動同步資料夾","我用 Syncthing 連接 Mac 與 Windows，實際測試共享資料夾的雙向檔案同步，也記錄了加密設定錯誤與同步衝突。",[10,29,22],{"_path":36,"title":37,"description":38,"category":19,"tags":39},"\u002Farticles\u002Flosslesscut","LosslessCut 實測：5 分鐘 600 MB 影片，幾乎按下就剪完","LosslessCut 能用 FFmpeg 直接複製影音串流，不必重新編碼。我實測剪一支約 5 分鐘、600 MB 的影片，並整理免費下載方式、I／O 快捷鍵與關鍵影格限制。",[10,22,40,41],"Video Processing","Audio Processing",{"_path":43,"title":44,"description":45,"category":19,"tags":46},"\u002Farticles\u002Flulu","LuLu 實測：Mac App 第一次往外連時，先讓你看一眼再決定","LuLu 是免費開源的 macOS 出站防火牆。它會在沒有規則的程式建立對外連線時顯示程式、目的地與簽章資訊；本文整理安裝後該保留的預設選項，以及警示該怎麼判斷。",[10,47,29],"Security",{"_path":49,"title":50,"description":51,"category":19,"tags":52},"\u002Farticles\u002Fsnapzy","Snapzy 實測：比 Mac 內建截圖更完整的免費原生工具","Snapzy 是免費開源的 macOS 原生截圖工具，支援截圖即時標記、長截圖、OCR、螢幕錄影與內建編輯器。我實測截圖並標記功能，也整理了避免快捷鍵衝突的設定方式。",[10,22,53],"Image Processing",{"_path":55,"title":56,"description":57,"category":19,"tags":58},"\u002Farticles\u002Fimg2threejs-codex-test","img2threejs 實測：丟一張圖片給 Codex，真的能做成 Three.js 3D 模型嗎？","我用 GPT-5.6 SOL、medium 推理測試 img2threejs。F1 賽車這類複雜物件很容易翻車，換成紅白機手把後，按鈕、視角切換與爆炸圖都有做出來。這篇整理實測結果、適用範圍與 Codex 安裝方式。",[14,10,11,59,60,61,62,53],"JavaScript","WebGL","Codex","Agent Workflow",{"_path":64,"title":65,"description":66,"category":19,"tags":67},"\u002Farticles\u002Fpake","Pake 實測：一行指令把 Threads 網站打包成約 10MB 的 Mac App","Pake 是以 Rust／Tauri 製作的開源工具，可以把網站打包成 macOS、Windows 或 Linux 桌面 App。我實測將 Threads 網站做成獨立 App，從終端機輸入網址到拖進 Applications 就能使用。",[10,21,22,23],{"_path":69,"title":70,"description":71,"category":19,"tags":72},"\u002Farticles\u002Fmole","MOLE 實測：讓 AI Agent 先分析，再幫 Mac 清出 15GB 空間","MOLE 是 macOS 的開源終端機維護工具。我實測用 mo analyze、mo status 和 mo clean --dry-run 檢查硬碟與快取，最後清出 15.29GB；它也很適合交給 AI Agent 先分析、由人確認後再清理。",[14,10,21,22],{"_path":74,"title":75,"description":76,"category":19,"tags":77},"\u002Farticles\u002Ftwinkle-tray","Twinkle Tray：在 Windows 工作列直接調整多螢幕亮度","Twinkle Tray 是一套免費的 Windows 小工具，可以從系統匣直接調整多台外接螢幕的亮度，也支援快捷鍵、排程與 DDC\u002FCI 顯示器控制。",[22,10],{"_path":79,"title":80,"description":81,"category":19,"tags":82},"\u002Farticles\u002Fmarker","Marker 實測：比 MinerU 好上手的 PDF 轉 Markdown 工具？","我在 Apple Silicon Mac 上實測 Marker 的 fast 模式。一般文字型 PDF 轉 Markdown 已經很夠用，但公式與表格仍會失手；也整理了它和 MinerU 的實際分工。",[83,10,21,84,22],"AI Tools","Local AI",{"_path":86,"title":87,"description":88,"category":19,"tags":89},"\u002Farticles\u002Fzed","Zed 實測：最近試到一個很順的 AI 程式編輯器","最近把專案放進 Zed 用了一下。它的操作感很輕快，AI 又能直接接 ChatGPT、Codex 和 MCP；不是要取代 VS Code，但很適合當成另一個選擇。",[83,14,10,22,61,23],{"_path":91,"title":92,"description":93,"category":19,"tags":94},"\u002Farticles\u002Fwhatcable","WhatCable 實測：Mac 的 USB-C 線到底跑多快、能不能帶螢幕，一打開就知道","WhatCable 是 macOS 選單列工具，能直接讀出 USB-C 線材、連接埠與裝置的實際協商狀態。我用它看到 USB4／Thunderbolt 40 Gbps、240W、e-marker，以及 4K 144Hz 螢幕連線的細節。",[22,10,21],{"_path":96,"title":97,"description":98,"category":19,"tags":99},"\u002Farticles\u002Fdbx","DBX：支援 70+ 種資料庫的輕量管理工具，連 Supabase 也能直接看表格、跑 SQL","DBX 是一款約 20 MB 的輕量開源資料庫工具。我這次實際連上 Supabase，也看了它的多資料庫管理、編輯器主題、AI 助理與 MCP 整合。",[100,10,22,14,23],"Database",{"_path":102,"title":103,"description":104,"category":19,"tags":105},"\u002Farticles\u002Fopenlogi","OpenLogi 實測：免費開源的 Logitech Options+ 本機替代工具，macOS 權限與 HID 排錯","OpenLogi 是支援特定 Logitech HID++ 周邊的本機開源工具，可調整按鍵、DPI 與 SmartShift。本文整理 macOS 的 Homebrew 安裝、必要權限與一次 HID transport error 的個案排錯；Windows 則是下載後直接可用。",[10,22,23],{"_path":107,"title":108,"description":109,"category":19,"tags":110},"\u002Farticles\u002Fmos","Mos 實測：讓 macOS 外接滑鼠滾輪變得平順","Mos 是一款免費的 macOS 滑鼠工具，能把外接滑鼠滾輪的跳動補成平滑移動，也能分別設定捲動方向與各個應用程式的捲動參數。",[22,21],{"_path":112,"title":113,"description":114,"category":19,"tags":115},"\u002Farticles\u002Flively-wallpaper","Lively Wallpaper 實測：免費開源的 Windows 動態桌布，音樂同步與全螢幕自動暫停","我實測 Lively Wallpaper：一款免費開源的 Windows 動態桌布工具。可以直接放入影片、GIF、網頁與網址，也能做系統音訊視覺化；更重要的是，玩遊戲或開全螢幕程式時能自動暫停桌布。",[10,22,40,41],{"_path":117,"title":118,"description":119,"category":19,"tags":120},"\u002Farticles\u002Ftrex-ocr","TRex 實測：macOS 選取螢幕文字就複製，QR Code、Raycast 與自動化都能用","我實測 TRex：一款 macOS 選取螢幕區域後直接把文字放進剪貼簿的開源 OCR 工具。它也能讀 QR Code、條碼、支援 Raycast、快捷鍵、CLI、Shortcuts 與 Watch Mode。",[53,10,22,121,21],"Automation",{"_path":123,"title":124,"description":125,"category":19,"tags":126},"\u002Farticles\u002Ftranslucenttb","TranslucentTB 實測：幾 MB 記憶體，讓 Windows 工作列變得更順眼","TranslucentTB 是一款免費開源的 Windows 工作列外觀工具，只用幾 MB 記憶體、幾乎不吃 CPU，就能在透明、模糊、壓克力與一般模式間切換。我把最大化視窗設成一般模式，其餘工作時維持模糊，兼顧閱讀性與桌面質感。",[10,22,21],{"_path":128,"title":129,"description":130,"category":19,"tags":131},"\u002Farticles\u002Fheyclicky","HeyClicky 實測：比語音輸入更進一步的螢幕感知 AI","HeyClicky 是一款住在 macOS 游標旁的 AI 助手。它會結合螢幕畫面與語音指令，協助理解目前工作內容；我實測了它的功能、免費額度與多螢幕問題。",[83,14,22,121],{"_path":133,"title":134,"description":135,"category":19,"tags":136},"\u002Farticles\u002Fmac-stats","Stats 實測：把 Mac 的 CPU、記憶體與網路狀態放進選單列","Stats 是免費開源的 macOS 選單列系統監控工具。我實測它的安裝、預設選單列配置，以及 CPU、記憶體面板；想隨時看 CPU、RAM、網路或 SSD 狀態，這款很實用。",[10,22],{"_path":138,"title":139,"description":140,"category":19,"tags":141},"\u002Farticles\u002Fwinhance","Winhance 實測：一鍵安裝後管理、移除 Windows 內建軟體","實測 Winhance 的 PowerShell 一鍵安裝、繁體中文介面與 Windows 內建 App 批次移除流程。它把常見的 debloat、系統調整和外部軟體安裝集中到同一個圖形介面。",[10,22,21],{"_path":143,"title":144,"description":145,"category":19,"tags":146},"\u002Farticles\u002Ffile-converter","File Converter 實測：Windows 右鍵直接把 PNG／JPG 轉成 WebP","File Converter 是整合進 Windows 檔案總管右鍵選單的開源轉檔工具。我實測把 PNG、JPG 圖片轉成 WebP；不必打開主程式，選檔後右鍵就能完成，也支援影片、音訊與更多圖片格式。",[10,22,53,40],{"_path":148,"title":149,"description":150,"category":19,"tags":151},"\u002Farticles\u002Ffinetune","FineTune：補上 macOS 缺少的單一 App 音量控制","FineTune 是一個免費開源的 macOS 選單列音量工具，可以針對不同 App 調整音量、切換輸出設備，還能把不同 App 指到不同音訊設備。這篇簡單記錄它解決的問題與安裝方式。",[22,10],{"_path":153,"title":154,"description":155,"category":19,"tags":156},"\u002Farticles\u002Flatest","Latest：macOS 上一眼檢查 App 更新的小工具","Latest 是一個免費開源的 macOS App 更新檢查工具，可以集中查看哪些 App 有新版本，支援 Mac App Store 與使用 Sparkle 更新框架的應用程式。功能很單純，但對想定期整理 Mac 軟體版本的人很方便。",[22,10],{"_path":158,"title":159,"description":160,"category":19,"tags":161},"\u002Farticles\u002Fmarktext","MarkText：我目前用過最順手的所見即所得 Markdown 編輯器","MarkText 是一個開源 Markdown 編輯器，最大的特色是所見即所得：不用在原始碼與預覽視窗之間來回切換，而是在同一個畫面直接寫、直接看結果。這篇記錄 macOS 與 Windows 下載方式、Apple Silicon 要選哪個檔案，以及 macOS 遇到「已損毀，無法打開」時怎麼用 xattr 解決。",[22,10],{"_path":163,"title":164,"description":165,"category":19,"tags":166},"\u002Farticles\u002Fquicklook","QuickLook 實測：把 macOS 空白鍵預覽帶到 Windows，速度比 PowerToys Peek 更順","我實測 QuickLook 這款 Windows 檔案快速預覽工具，可以用空白鍵預覽 PDF、Markdown、圖片、影片、3D 模型與多種文件格式。它像 macOS Quick Look，但在 Windows 上支援格式更廣，也比我用 PowerToys Peek 時更順手。",[22,10],{"_path":168,"title":169,"description":170,"category":19,"tags":171},"\u002Farticles\u002Fumi-ocr","Umi-OCR 實測：免費開源離線 OCR 工具，截圖、批次圖片與 PDF 都能本地辨識","我實測 Umi-OCR 這款免費開源的離線 OCR 工具，支援截圖 OCR、批次圖片辨識、PDF 文件 OCR、二維碼掃描與命令列\u002FAPI 呼叫。它不用上傳檔案，Windows 還能依照電腦效能選 Paddle 或 Rapid 引擎版本。",[53,10,22],{"_path":173,"title":174,"description":175,"category":19,"tags":176},"\u002Farticles\u002Fpicsharp","PicSharp 實測：跨平台開源圖片壓縮工具，拖進去就能批次壓縮","我實測 PicSharp 這款跨平台圖片壓縮工具，支援 macOS、Windows 與 Linux，可以直接拖曳圖片或資料夾進去批次壓縮，也能在本地壓縮與 TinyPNG 之間切換，適合整理網站圖片與文章素材。",[53,10,22],{"_path":178,"title":179,"description":180,"category":19,"tags":181},"\u002Farticles\u002Fmeetily","Meetily 實測：本地 AI 會議轉錄、逐字稿與繁體中文摘要工具","Meetily 是一款開源、隱私優先的 AI 會議助理，可以在本機錄音、轉錄並產生摘要。我實測 v0.4.0，整理安裝方式、中文轉錄模型設定、繁體中文摘要與適合使用的情境。",[83,10,84,41,22],{"_path":183,"title":184,"description":185,"category":19,"tags":186},"\u002Farticles\u002Fbuhocleaner","BuhoCleaner 實測：我在 Mac 上用了超過一年的清理與 App 移除工具","我實測 BuhoCleaner 這套 Mac 清理工具，分享用了超過一年的心得、免費版限制、付費版價格、選單列監控、垃圾檔案清理、App 完整移除與日常使用情境。",[22],{"_path":188,"title":189,"description":190,"category":19,"tags":191},"\u002Farticles\u002Ffancontrol","Fan Control 實測：Windows 上超細緻的風扇曲線與硬體溫度控制工具","我實測 Fan Control 這套 Windows 風扇控制工具，從 GitHub Releases 下載 installer、安裝後切換繁體中文、自動校正風扇、建立曲線，到實際調整監控卡片與風扇策略的使用心得。",[22],{"_path":193,"title":194,"description":195,"category":19,"tags":196},"\u002Farticles\u002Fupscayl","Upscayl 實測：免費開源的本機 AI 圖片放大工具","我實測 Upscayl 這套免費開源 AI 圖片放大工具，從 GitHub Releases 與 Homebrew 安裝、第一次選語言、選模型，到用 Digital Art 模型把 He-Man 圖片放大 4 倍的實際效果。",[53,10,84,22],{"_path":198,"title":199,"description":200,"category":19,"tags":201},"\u002Farticles\u002Fappports","AppPorts 實測：把大型 Mac App 搬到外接硬碟，還能像原本一樣啟動","我實測 AppPorts 在 macOS 上把應用程式遷移到外接 SSD 的流程，包含 GitHub Releases 下載、Gatekeeper 隔離解除、語言切換、鎖定遷移與非鎖定遷移，以及實際搬移後的使用感受。",[22,10],{"_path":203,"title":204,"description":205,"category":19,"tags":206},"\u002Farticles\u002Fmac-fan","Macs Fan Control 實測：用了超過一年還留在 Mac 上的免費風扇控制工具","我在 macOS 上長期使用 Macs Fan Control 超過一年，這篇記錄它的下載方式、GitHub README 要先看的重點、溫度感測器設定、風扇曲線邏輯，以及我自己會注意的使用界線。",[22],{"_path":208,"title":209,"description":210,"category":19,"tags":211},"\u002Farticles\u002Fmarkdown-preview","Markdown Preview：macOS 上更輕量的 .md 預覽工具","Markdown Preview 是一個專門用來打開與預覽 .md 檔案的 macOS 小工具，可以設定成 Markdown 預設開啟 App，支援 Quick Look、搜尋、字體大小、外觀切換，以及 Preview \u002F Edit \u002F Split 模式。",[22,11],{"_path":213,"title":214,"description":215,"category":19,"tags":216},"\u002Farticles\u002Fcodebase-memory","Codebase Memory MCP 實測：把整個程式碼庫變成 AI Agent 可查詢的知識圖譜","Codebase Memory MCP 是一個本機運行的程式碼知識圖譜引擎，能讓 Claude Code、Codex、Cursor 等 AI Agent 直接查詢函式、呼叫鏈、架構與影響範圍。本文實測安裝、索引、3D Graph UI 與 CLI 查詢流程。",[83,14,10,21,217,61],"Data Visualization",{"_path":219,"title":220,"description":221,"category":222,"tags":223},"\u002Farticles\u002Fdeskreen","Deskreen 同網域臨時螢幕分享工具實測：用手機或另一台電腦看你的畫面","Deskreen 可以把電腦畫面分享給同一個區域網路內的手機、平板或另一台電腦。這篇紀錄實際使用流程、適合場景，以及內網 IP 和隱私注意事項。","Tools",[10,29,22],{"_path":225,"title":226,"description":227,"category":19,"tags":228},"\u002Farticles\u002Frustdesk","RustDesk 開源遠端桌面實測：用 Windows 串流控制 macOS","RustDesk 是一款開源遠端桌面工具，可以跨平台遠端控制電腦，也支援自建伺服器。這篇記錄我從 GitHub 下載、登入帳號、開啟權限、設定固定密碼，到第一次接受連線的實測流程。",[10,29,22,23],{"_path":230,"title":231,"description":232,"category":19,"tags":233},"\u002Farticles\u002Fhandbrake","HandBrake 實測：老牌開源影片壓縮工具到現在還是很穩","HandBrake 是一款老牌開源影片轉檔與壓縮工具。我這次用 4K 影片簡單實測，原始 106.1 MB 壓到 16.6 MB，畫質保留得比我預期好，這篇記錄我的基本用法與 preset 選擇心得。",[10,40,22],{"_path":235,"title":236,"description":237,"category":19,"tags":238},"\u002Farticles\u002Fsmartsub","SmartSub 妙幕實測：我目前用過最省事的本機影片字幕翻譯工具","SmartSub 妙幕是一款本地優先的桌面字幕工具，可以完成影片轉字幕、字幕翻譯、雙語字幕與字幕燒錄。這篇記錄我實測 DeepSeek 翻譯、faster-whisper、CUDA 加速，以及它和 VideoLingo 的差異。",[83,10,40,84],{"_path":240,"title":241,"description":242,"category":19,"tags":243},"\u002Farticles\u002Fkando","Kando 實測：我近期最喜歡的跨平台開源圓盤快捷選單","Kando 是一款免費開源、支援 macOS\u002FWindows\u002FLinux 的 Pie Menu 工具，可以用 Ctrl + Space 叫出圓盤選單，用滑鼠手勢快速開啟 App、網站、檔案、熱鍵與巨集。這篇分享我的實際使用體驗與設定方式。",[10,22,121],{"_path":245,"title":246,"description":247,"category":19,"tags":248},"\u002Farticles\u002Fhorizon","Horizon 實測：讓 Codex 自動整理每日 AI 新聞","我把 Horizon 接進部落格新聞流程，讓它負責抓資料來源，再交給 Codex 寫成每日 AI 新聞摘要。這篇記錄安裝方式、基本使用流程，以及我實際測完後的想法。",[83,14,10,121,21],{"_path":250,"title":251,"description":252,"category":19,"tags":253},"\u002Farticles\u002Fmaccy","Maccy 實測：輕量、鍵盤優先的 macOS 開源剪貼簿管理工具","自己在 macOS 整理資料或開發時最常遇到的問題是頻繁複製貼上造成的視窗切換。本文實測開源的 Maccy 剪貼簿工具，分享其快捷鍵喚醒、快速搜尋、安全過濾等實際使用體驗。",[10,22],{"_path":255,"title":256,"description":257,"category":19,"tags":258},"\u002Farticles\u002Fstirling-pdf","Stirling PDF 實測：離線跑的開源 PDF 神器，免上傳雲端直接搞定 50+ 種處理需求","我最近實測了開源的 Stirling PDF。這是一款可以完全在本地運行的 PDF 編輯平台，支援合併、壓縮、簽名等多達 50 多種功能，不用擔心敏感文件被上傳到第三方雲端伺服器。",[10,22,47],{"_path":260,"title":261,"description":262,"category":222,"tags":263},"\u002Farticles\u002Faerospace","AeroSpace 實測：讓 macOS 擁有平鋪視窗管理","分享這款 AeroSpace 平鋪視窗管理工具，以及我如何透過鍵盤快捷鍵解決 macOS 視窗混亂的問題。",[10,22],{"_path":265,"title":266,"description":267,"category":19,"tags":268},"\u002Farticles\u002Fpowertoys","Microsoft PowerToys 實測：4 個用過就回不去的 Windows 效率工具","自己在 Windows 工作最常遇到的問題是缺少類似 macOS 的預覽與快速啟動功能。本文實測微軟官方推出的 PowerToys 中實用的四個工具：空白鍵預覽 Peek、快速截圖 OCR 複製、視窗永久置頂與快捷搜尋框，分享我實際的使用體驗。",[10,22],{"_path":270,"title":271,"description":272,"category":19,"tags":273},"\u002Farticles\u002Frecord-replay","Codex Record & Replay 實測：演示一遍，教 AI 學會你的本地工作流","OpenAI Codex 最近新增了 Record & Replay 功能。我實測了在本地環境下，如何透過一次演示，讓 Codex 錄製並自動執行影片壓縮等腳本工作流。",[61,121,22,83],{"_path":275,"title":276,"description":277,"category":19,"tags":278},"\u002Farticles\u002Frecordly","Recordly 實測：開源螢幕錄影與自動 Zoom-in 編輯器（macOS\u002FWindows\u002FLinux）","我最近實測了開源的 Recordly。這是一款結合錄影與後製的工具，能自動根據滑鼠活動生成變焦建議，並提供滑鼠平滑、陰影邊框等美化功能，讓製作軟體 Demo 影片變得很省時。",[10,22,40],{"_path":280,"title":281,"description":282,"category":19,"tags":283},"\u002Farticles\u002Fcodexbar","CodexBar 實測：macOS 選單列一次監控 53 個 AI 編碼服務額度","CodexBar 是一款開源的 macOS 選單列工具，可即時追蹤 Codex、Claude、Cursor、Copilot 等 AI 編碼服務的使用視窗、信用餘額與重設倒數。本文實測安裝流程、權限授權與提供者設定教學。",[83,61,284,21,10,22],"Claude Code",{"_path":286,"title":287,"description":288,"category":19,"tags":289},"\u002Farticles\u002Foptimizerduck","optimizerDuck 實測：開源 Windows 效能與隱私最佳化工具，拒絕背景無用遙測","optimizerDuck 是一款基於 .NET 10 與 WPF 開發的開源 Windows 系統最佳化工具。本文實測其效能調校、隱私遙測封鎖、GPU 電源優化等功能，並提供 Windows SmartScreen 封鎖警告的排解步驟與繁體中文語系設定教學。",[10,22,121],{"_path":291,"title":292,"description":293,"category":19,"tags":294},"\u002Farticles\u002Fhandy","Handy 離線語音輸入法實測：搭配 Breeze ASR 25，專為台灣人設計的中英混用輸入方案","Handy 是一款免費、開源且完全離線運作的桌面語音輸入工具。本文實測在 macOS\u002FWindows\u002FLinux 環境下安裝配置，並搭配專為台灣日常中英混用情境優化的 Breeze ASR 25模型，為您打造極致隱私的語音輸入體驗。",[83,10,84,41,22],{"_path":296,"title":297,"description":298,"category":19,"tags":299},"\u002Farticles\u002F5live","Gemini 3.5 Live Translate 實測：全新雙向即時語音翻譯與 Live API 開發指南","Google 推出全新的 Gemini 3.5 Live Translate 模型，支援超過 70 種語言的雙向低延遲即時語音翻譯。本文將帶你實測 Google AI Studio 的網頁體驗、了解其運作機制，並提供 Live API 開發範例與 WebSocket 連接設定。",[83,41,300],"LLM",{"_path":302,"title":303,"description":304,"category":222,"tags":305},"\u002Farticles\u002Fmap3d","Map3D 實測：一鍵生成 3D 城市地圖與 GLB 匯出指南","想要快速獲取真實城市的 3D 建築與道路模型？Map3D 基於 React-Three-Fiber 與 OpenStreetMap，提供網頁一鍵框選與直接匯出 GLB，讓 3D 地形建模變得太簡單了！",[306,307,308,309,310,60],"React-Three-Fiber","Three.js","OpenStreetMap","GLB","3D Map",{"_path":312,"title":313,"description":314,"category":222,"tags":315},"\u002Farticles\u002Flocalsend","LocalSend 跨平台開源局域網檔案傳輸工具免設定使用指南","免網路、免註冊，在 macOS、Windows、Linux、iOS 與 Android 之間以 HTTPS 局域網高速安全互傳檔案。",[10,29,22],{"_path":317,"title":318,"description":319,"category":19,"tags":320},"\u002Farticles\u002Fllmwiki","LLM Wiki 實測：用大模型打造能自動整理與更新的個人離線知識庫","每次整理筆記都覺得繁瑣？LLM Wiki 是一款基於 Andrej Karpathy 理念開發的個人知識庫工具。它能自動讀取文檔、進行兩階段思維鏈分析、生成互相連結的 Wiki 頁面，並完美兼容 Obsidian 與本地 AI 模型。",[84,83,10,300,22,14],{"_path":322,"title":323,"description":324,"category":222,"tags":325},"\u002Farticles\u002Fvibe","Vibe 實測：最適合小白的跨平台離線 AI 語音轉文字工具，簡潔直覺一鍵搞定！","嫌 Whisper 命令行太難、其他工具設定太複雜？Vibe 是一款極簡、無痛上手的離線語音轉字幕工具。功能雖然精簡，但介面清爽、極易上手，是電腦小白與新手的最佳選擇！",[41,326,84,10],"Whisper",{"_path":328,"title":329,"description":330,"category":19,"tags":331},"\u002Farticles\u002Flottie","Text-To-Lottie 實測：用 AI Agent 本地生成與即時預覽 Lottie 動畫","本文介紹如何透過 Skia CanvasKit (Skottie) 搭配 React 與 shadcn\u002Fui 控制介面，讓本地 AI 代理直接編寫 lottie.json，並透過開發伺服器即時熱重載預覽動畫。",[83,14,10,11],{"_path":333,"title":334,"description":335,"category":19,"tags":336},"\u002Farticles\u002Fhermes-desktop","Nous Hermes Desktop 桌面版原生安裝與設定教學：跨平台 AI 助理與統一記憶體實測","Nous Research 旗下的 Hermes 智慧代理從終端機走向 GUI！本文帶您實測原生三平台桌面版，詳細拆解舊用戶一鍵搬遷步驟、API 供應商配置，以及如何串接 Telegram 與 Line 打造個人 AI 助理。",[83,14,10],{"_path":338,"title":339,"description":340,"category":222,"tags":341},"\u002Farticles\u002Fmineru","MinerU 實測：超強開源 PDF 與多格式文檔解析利器（macOS\u002FWindows\u002FLinux）","面臨複雜版面、掃描件或公式時，傳統 PDF 轉文字工具總是力不從心？開源框架 MinerU 結合佈局分析與視覺語言模型 (VLM)，能一鍵將 PDF、圖片及 Office 檔案轉換為精準的 Markdown、表格與 LaTeX 公式。本文實測線上 Web 版與本地 CLI\u002FAPI 部署流程。",[342,343,344,84,10],"PDF Parser","Markdown","OCR",{"_path":346,"title":347,"description":348,"category":10,"tags":349},"\u002Farticles\u002Fheadroom","Headroom 實測：AI Agent 的上下文壓縮層，節省高達 60–95% Token 成本","專為 AI Agent 設計的開源上下文優化工具 Headroom，整合多種壓縮演算法，支援本地逆向解壓 (CCR)，大幅降低 LLM 運算開銷並提升反應速度。",[10,350,300,351],"AI Agent","Context Optimization",{"_path":353,"title":354,"description":355,"category":8,"tags":356},"\u002Farticles\u002Ftegaki","Tegaki 手寫文字動畫庫安裝與實測：網頁手寫字動態特效輕鬆實現","想要在網頁中加入自然流暢的手寫字動畫嗎？Tegaki 是一個輕量且易用的 JavaScript 庫，能將任何字型轉換成手寫筆劃動畫。",[10,11,357,59],"Frontend",{"_path":359,"title":360,"description":361,"category":19,"tags":362},"\u002Farticles\u002Fccswitch2","CC Switch 延伸應用：手機遠端控制電腦與 Codex 增強模式實測","如何利用 CC Switch v3.16.1+ 獨家功能，在保留 Codex 官方行動端登入態與遠端操控能力的同時，將實際模型請求路由至 DeepSeek 等第三方 API？手把手帶你實現手機控制電腦的 AI Agent 體驗。",[83,284,61,363,300],"CC Switch",{"_path":365,"title":366,"description":367,"category":19,"tags":368},"\u002Farticles\u002Fccswitch","CC Switch 實測：自備 API Key 一鍵切換 AI CLI 模型的本機路由神器","在終端機使用 Claude Code 或 Codex 時，如何自由切換模型、自備 API Key 或使用 DeepSeek？本篇實測 CC Switch 路由工具，手把手教學如何代理 AI CLI 並進行花費與 MCP 管理。",[83,284,61,363,300],{"_path":370,"title":371,"description":372,"category":19,"tags":373},"\u002Farticles\u002Fremoverized","Removerized：離線可用的瀏覽器端 AI 去背與畫質增強工具","Removerized 讓你在瀏覽器中直接完成去背、放大與批次處理，資料不需上傳雲端，兼顧速度與隱私。",[83,53,84],{"_path":375,"title":376,"description":377,"category":19,"tags":378},"\u002Farticles\u002Fopen-design","Open Design 實測：用本地 CLI 快速做出作品集首頁","這次我把作品集首頁的大部分畫面交給 Open Design 處理。從選本地 Coding Agent、挑設計系統、輸入 brief，到生成設計稿與交付給 VS Code，整個流程比我預期順很多。",[379,62,11],"AI Design",{"_path":381,"title":382,"description":383,"category":222,"tags":384},"\u002Farticles\u002Fpot","Pot (派了個萌的翻譯器) 實測：最完美的跨平台劃詞翻譯與 OCR 工具","尋找一款流暢、不打斷工作流的翻譯工具？Pot 支援多譯文並行比對、精準的截圖 OCR 與豐富的翻譯\u002F大模型接口，是 macOS, Windows 與 Linux 用戶的極致效率利器。",[22,83,10],{"_path":386,"title":387,"description":388,"category":222,"tags":389},"\u002Farticles\u002Frtk","RTK 終端機 Token 殺手安裝與實測：省下 70% 以上 Claude Code 費用","RTK (Rust Token Killer) 是一個基於 Rust 的高效能 CLI 代理工具，能自動過濾與壓縮終端機輸出，為 AI 輔助開發節省 60-90% 的 Token 消耗。",[14,284,22,23],{"_path":391,"title":392,"description":393,"category":222,"tags":394},"\u002Farticles\u002Ffreedomain","Digiplat 免費 DNS 二級域名申請與 Cloudflare 解析配置教學","想將個人專案或測試網站部署上線，卻不想花錢購買網域？本文將教你如何使用 Digiplat 免費申請包含 .US.KG、.DPDNS.ORG 等多種後綴的免費二級域名。",[11],{"_path":396,"title":397,"description":398,"category":19,"tags":399},"\u002Farticles\u002Fmodly","Modly 本地端 AI 圖像轉 3D 網格生成工具安裝與實測","想將 2D 圖片快速轉換為高精度的 3D 模型，又不想付費或將隱私上傳雲端？Modly 讓你在本機 GPU 上直接進行 AI 3D 生成。",[83,60,10,84],{"_path":401,"title":402,"description":403,"category":8,"tags":404},"\u002Farticles\u002Fopenvid","OpenVid 瀏覽器免安裝產品 Demo 錄影與 3D 鏡頭後製工具教學","想要為你的產品錄製精美的演示影片？OpenVid 讓你直接在瀏覽器中套用 3D 鏡頭、縮放與精美背景，一鍵導出高質感的 Demo 影片。",[10,11,40],{"_path":406,"title":407,"description":408,"category":19,"tags":409},"\u002Farticles\u002Fomnivoice","OmniVoice Studio 本地端 AI 影音配音工具實測與 macOS 安裝避坑指南","最近測試了開源版 ElevenLabs + HeyGen：OmniVoice Studio。它支援 646 種語言、本地自動影片配音，且連 Mac mini 都跑得動！本文分享實測心得、macOS 隔離區排除教學，以及繁中\u002F簡中輸入產生的語音對比。",[83,41],{"_path":411,"title":412,"description":413,"category":47,"tags":414},"\u002Farticles\u002Fshannon","Shannon AI Pentest Agent 安裝與實測指南（macOS\u002FLinux）","我用 10 個 AI agents 打自己的網站，2 小時後交出完整資安報告。Shannon 比我想像的成熟。",[14,47,121],{"_path":416,"title":417,"description":418,"category":8,"tags":419},"\u002Farticles\u002Fpretext","Pretext 高效多行文字 Canvas 排版庫優化與防 DOM 重繪技術","想精準計算段落高度、做出更自由的文字排版，卻不想一直碰 getBoundingClientRect？Pretext 提供了一條很聰明的路。",[11,357,59],{"_path":421,"title":422,"description":423,"category":222,"tags":424},"\u002Farticles\u002Faltsendme","AltSendme 跨平台 P2P 極速檔案互傳工具免伺服器部署指南","不用雲端、不用註冊，Windows 與 macOS 直接對傳。",[83,29,22],{"_path":426,"title":427,"description":428,"category":8,"tags":429},"\u002Farticles\u002Fdeckgl","Deck.gl 大規模 3D 地理數據視覺化框架與 MapLibre 整合實戰","想要在網頁上渲染數以萬計的數據點，同時保持流暢的 3D 互動？Deck.gl 是處理地理空間資料視覺化的絕佳利器。",[60,11,217,59],{"_path":431,"title":432,"description":433,"category":222,"tags":434},"\u002Farticles\u002Fantigravity-manager","Antigravity Manager 管理工具安裝教學：多帳號與 Token 額度即時監控","如果你只在意兩件事：配額看得清楚、帳號切得快速，Antigravity Manager 其實就很值得裝。",[83,22,21],{"_path":436,"title":437,"description":438,"category":10,"tags":439},"\u002Farticles\u002Fvideolingo","VideoLingo 本地 AI 影片翻譯字幕與中文配音工具部署指南","我實測了 VideoLingo，從原始影片到中文字幕與中配影片都能自動化完成。這篇整理功能、實際效果和我建議的模型設定。",[10,40,41,83],{"_path":441,"title":442,"description":443,"category":222,"tags":444},"\u002Farticles\u002Farnis","Arnis 地理 GIS 數據轉換工具安裝與 Minecraft 3D 真實地圖生成實戰","如果你曾經想過把自己的家鄉、城市甚至整片地形直接生成到 Minecraft 裡，Arnis 真的很誇張。",[10,121],{"_path":446,"title":447,"description":448,"category":10,"tags":449},"\u002Farticles\u002Flog-lottery-tw","log-lottery 開源網頁抽獎系統自定義配置與尾牙活動實用部署","支援自訂名單、獎項、圖片、背景與音樂的開源抽獎工具。我也整理了繁體中文版本，部署後打開瀏覽器就能直接使用。",[10,11,357],{"_path":451,"title":452,"description":453,"category":19,"tags":454},"\u002Farticles\u002Fhermes-hyperframes-self-intro-video","Hermes Agent x HyperFrames 實戰：AI 助理自介影片自動生成指南","叫 Hermes 自己拍一支自我介紹影片。從文案發想、HTML 動畫編寫、到渲染輸出 MP4 全部自動化。HyperFrames 是什麼？為什麼比 Remotion 更適合 AI Agent？",[14,40,121],{"_path":456,"title":457,"description":458,"category":19,"tags":459},"\u002Farticles\u002Fhermes-deepseek-v4","DeepSeek V4 Pro x Hermes Agent 自動寫自我介紹評測與部署指南","我叫 Hermes 自己寫這篇。1M context、0.87 鎂\u002F百萬 token、跨平台部署、自主截圖寫文 git push。這篇文章由 AI 從研究到發布全部自己來。",[14,300,121],{"_path":461,"title":462,"description":463,"category":222,"tags":464},"\u002Farticles\u002Fbarkod","Barkod Studio 個性化條碼與發票載具圖樣生成器安裝與設計指南","全網頁版免安裝，高質感自訂樣式。結帳時拿出鯊魚或大便造型載具，絕對是全場焦點。",[11,357,59],{"_path":466,"title":467,"description":468,"category":222,"tags":469},"\u002Farticles\u002Fstacher","Stacher 萬能影音下載器安裝教學與 yt-dlp GUI 圖形化配置指南","告別繁瑣的指令，yt-dlp 最強圖形化介面，4K 影片、音樂下載一次搞定！",[83,40],{"_path":471,"title":472,"description":473,"category":222,"tags":474},"\u002Farticles\u002Fpetdex","Petdex 點陣圖桌面電子寵物安裝指南：讓開發環境更有趣","一行 npx 指令秒裝，完全免註冊登入，給工程師帶來滿滿的心靈祥和！",[83,21],{"_path":476,"title":477,"description":478,"category":8,"tags":479},"\u002Farticles\u002Fcobe","Cobe 輕量 WebGL 地球儀配置教學與 Vue 專案整合指南","想要在網頁上放一個酷炫的 3D 地球，但又不想載入沉重的 Three.js？COBE 是你的最佳選擇。",[60,11,357,59],{"_path":481,"title":482,"description":483,"category":10,"tags":484},"\u002Farticles\u002Fsupercmd","SuperCmd 開源 Mac 快捷啟動器安裝與自定義指令配置指南","整合 Raycast 擴充、語音輸入與 AI 助手，這款開源工具能成為你的新寵嗎？",[10,22],{"_path":486,"title":487,"description":488,"category":489,"tags":490},"\u002Farticles\u002Fopenstock","OpenStock 開源股票市場回測系統安裝與 AI 策略整合教學","OpenStock 是一個由社群驅動的開源股票平台，昂貴的市場的平替工具。","AI & Finance",[10,491,100],"FinTech",{"_path":493,"title":494,"description":495,"category":19,"tags":496},"\u002Farticles\u002Fworld-monitor","World Monitor 全球即時情報監控系統本地部署與 AI 分析流整合教學","這是一篇關於 World Monitor 的深度介紹。從本地端快速部署到整合 AI 分析，教你如何打造一個包含地緣政治、軍事、金融與基礎設施的即時監控平台。",[83,29,100],{"_path":498,"title":499,"description":500,"category":19,"tags":501},"\u002Farticles\u002Fpi-mono-coding-agent","Pi Coding Agent 輕量級終端機 AI 助手安裝與工作流實戰","如果你覺得市面上的 AI 開發工具太過笨重，或是強迫你改變習慣，那你一定要試試完全由你掌控的 Pi。",[14,21],{"_path":503,"title":504,"description":505,"category":19,"tags":506},"\u002Farticles\u002Fwarp-terminal-ux-revolution","Warp Terminal 新一代 IDE 級智慧終端機安裝與開發效率優化配置","從可視化補全、滑鼠編輯到 Blocks 區塊輸出，Warp 正在把傳統終端機那套難用又反直覺的體驗，整個翻新。",[21,22],{"_path":508,"title":509,"description":510,"category":19,"tags":511},"\u002Farticles\u002Fvoicebox-local-ai-voice-studio","Voicebox 本地端 AI 語音工作室安裝指南與核心配置教學","這是一篇針對開發者設計的 Voicebox 指南。從 macOS\u002FWindows 安裝到 Voice Cloning 實作，並教你如何透過 MCP 讓 AI Agent 開口說話。",[83,41,121],{"_path":513,"title":514,"description":515,"category":19,"tags":516},"\u002Farticles\u002Fnvidia-nim-free-api","NVIDIA NIM 免費 DeepSeek-V4-Pro API 申請與多框架整合指南","不綁信用卡、沒有試用期！教你如何透過 NVIDIA NIM 無痛串接剛上市的最強開源模型 DeepSeek-V4-Pro 與 Flash 版本。",[83,300],{"_path":5,"_dir":518,"_draft":519,"_partial":519,"_locale":520,"title":6,"description":7,"date":521,"updated":521,"category":8,"image":522,"tags":523,"series":524,"readingTime":525,"difficulty":526,"local":527,"platforms":528,"gpu":530,"draft":519,"body":531,"_type":966,"_id":967,"_source":968,"_file":969,"_stem":970,"_extension":971},"articles",false,"","2026-08-11","\u002Fimages\u002Fcode.png",[10,11,12,13,14],"github-tech","4 min read","Easy",true,[529,12],"Web","None",{"type":532,"children":533,"toc":959},"root",[534,542,548,564,598,603,608,612,625,631,645,683,704,846,851,857,887,892,924,937,943,948,953],{"type":535,"tag":536,"props":537,"children":539},"element","h2",{"id":538},"前言",[540],{"type":541,"value":538},"text",{"type":535,"tag":543,"props":544,"children":545},"p",{},[546],{"type":541,"value":547},"一般 icon 放進按鈕後就不會再動。如果想替搜尋、下載或通知加一點回饋，常常還得自己拆 SVG 路徑、補 keyframes，再調整動畫時間。",{"type":535,"tag":543,"props":549,"children":550},{},[551,553,562],{"type":541,"value":552},"我剛試了 ",{"type":535,"tag":554,"props":555,"children":559},"a",{"href":556,"rel":557},"https:\u002F\u002Flucide-animated.com\u002F",[558],"nofollow",[560],{"type":541,"value":561},"lucide-animated",{"type":541,"value":563},"。它把 Lucide icon 做成可直接加入 React 專案的動態元件，滑鼠移過去就會播放動畫，不用自己從零處理 SVG。",{"type":535,"tag":565,"props":566,"children":567},"ul",{},[568,578,588],{"type":535,"tag":569,"props":570,"children":571},"li",{},[572],{"type":535,"tag":554,"props":573,"children":575},{"href":556,"rel":574},[558],[576],{"type":541,"value":577},"lucide-animated 官方網站",{"type":535,"tag":569,"props":579,"children":580},{},[581],{"type":535,"tag":554,"props":582,"children":585},{"href":583,"rel":584},"https:\u002F\u002Fgithub.com\u002Fpqoqubbw\u002Ficons",[558],[586],{"type":541,"value":587},"pqoqubbw\u002Ficons GitHub",{"type":535,"tag":569,"props":589,"children":590},{},[591],{"type":535,"tag":554,"props":592,"children":595},{"href":593,"rel":594},"https:\u002F\u002Flucide-animated.com\u002Fskill.md",[558],[596],{"type":541,"value":597},"Agent Skill",{"type":535,"tag":536,"props":599,"children":601},{"id":600},"先直接玩玩看",[602],{"type":541,"value":600},{"type":535,"tag":543,"props":604,"children":605},{},[606],{"type":541,"value":607},"下面放了 8 個 icon。電腦可以把滑鼠移到卡片上，手機則直接點一下，就能看到每個圖示的動畫。",{"type":535,"tag":609,"props":610,"children":611},"lucide-animated-demo",{},[],{"type":535,"tag":543,"props":613,"children":614},{},[615,617,623],{"type":541,"value":616},"這個預覽是我挑選 repo 內常見的 Lucide 圖示後，另外做成適合文章嵌入的版本。完整圖示與原本的 Motion 動畫，還是以",{"type":535,"tag":554,"props":618,"children":620},{"href":556,"rel":619},[558],[621],{"type":541,"value":622},"官方網站",{"type":541,"value":624},"為準。",{"type":535,"tag":536,"props":626,"children":628},{"id":627},"怎麼裝進-react-專案",[629],{"type":541,"value":630},"怎麼裝進 React 專案？",{"type":535,"tag":543,"props":632,"children":633},{},[634,636,643],{"type":541,"value":635},"lucide-animated 不是要你把整包 icon 裝進專案，而是透過 shadcn CLI 一次加入需要的元件。以 ",{"type":535,"tag":637,"props":638,"children":640},"code",{"className":639},[],[641],{"type":541,"value":642},"activity",{"type":541,"value":644}," 為例：",{"type":535,"tag":646,"props":647,"children":651},"pre",{"className":648,"code":649,"language":650,"meta":520,"style":520},"language-bash shiki shiki-themes one-dark-pro","npx shadcn@latest add \"https:\u002F\u002Flucide-animated.com\u002Fr\u002Factivity.json\"\n","bash",[652],{"type":535,"tag":637,"props":653,"children":654},{"__ignoreMap":520},[655],{"type":535,"tag":656,"props":657,"children":660},"span",{"class":658,"line":659},"line",1,[661,667,673,678],{"type":535,"tag":656,"props":662,"children":664},{"style":663},"--shiki-default:#61AFEF",[665],{"type":541,"value":666},"npx",{"type":535,"tag":656,"props":668,"children":670},{"style":669},"--shiki-default:#98C379",[671],{"type":541,"value":672}," shadcn@latest",{"type":535,"tag":656,"props":674,"children":675},{"style":669},[676],{"type":541,"value":677}," add",{"type":535,"tag":656,"props":679,"children":680},{"style":669},[681],{"type":541,"value":682}," \"https:\u002F\u002Flucide-animated.com\u002Fr\u002Factivity.json\"\n",{"type":535,"tag":543,"props":684,"children":685},{},[686,688,694,696,702],{"type":541,"value":687},"執行後會在專案內產生 ",{"type":535,"tag":637,"props":689,"children":691},{"className":690},[],[692],{"type":541,"value":693},"components\u002Ficons\u002Factivity.tsx",{"type":541,"value":695},"，第一次安裝時也會補上 ",{"type":535,"tag":637,"props":697,"children":699},{"className":698},[],[700],{"type":541,"value":701},"motion",{"type":541,"value":703}," 相依套件。接著直接匯入：",{"type":535,"tag":646,"props":705,"children":709},{"className":706,"code":707,"language":708,"meta":520,"style":520},"language-tsx shiki shiki-themes one-dark-pro","import { ActivityIcon } from '@\u002Fcomponents\u002Ficons\u002Factivity'\n\nexport function Status() {\n  return \u003CActivityIcon className=\"size-6\" aria-label=\"Activity\" \u002F>\n}\n","tsx",[710],{"type":535,"tag":637,"props":711,"children":712},{"__ignoreMap":520},[713,749,758,782,837],{"type":535,"tag":656,"props":714,"children":715},{"class":658,"line":659},[716,722,728,734,739,744],{"type":535,"tag":656,"props":717,"children":719},{"style":718},"--shiki-default:#C678DD",[720],{"type":541,"value":721},"import",{"type":535,"tag":656,"props":723,"children":725},{"style":724},"--shiki-default:#ABB2BF",[726],{"type":541,"value":727}," { ",{"type":535,"tag":656,"props":729,"children":731},{"style":730},"--shiki-default:#E06C75",[732],{"type":541,"value":733},"ActivityIcon",{"type":535,"tag":656,"props":735,"children":736},{"style":724},[737],{"type":541,"value":738}," } ",{"type":535,"tag":656,"props":740,"children":741},{"style":718},[742],{"type":541,"value":743},"from",{"type":535,"tag":656,"props":745,"children":746},{"style":669},[747],{"type":541,"value":748}," '@\u002Fcomponents\u002Ficons\u002Factivity'\n",{"type":535,"tag":656,"props":750,"children":752},{"class":658,"line":751},2,[753],{"type":535,"tag":656,"props":754,"children":755},{"emptyLinePlaceholder":527},[756],{"type":541,"value":757},"\n",{"type":535,"tag":656,"props":759,"children":761},{"class":658,"line":760},3,[762,767,772,777],{"type":535,"tag":656,"props":763,"children":764},{"style":718},[765],{"type":541,"value":766},"export",{"type":535,"tag":656,"props":768,"children":769},{"style":718},[770],{"type":541,"value":771}," function",{"type":535,"tag":656,"props":773,"children":774},{"style":663},[775],{"type":541,"value":776}," Status",{"type":535,"tag":656,"props":778,"children":779},{"style":724},[780],{"type":541,"value":781},"() {\n",{"type":535,"tag":656,"props":783,"children":785},{"class":658,"line":784},4,[786,791,796,801,807,813,818,823,827,832],{"type":535,"tag":656,"props":787,"children":788},{"style":718},[789],{"type":541,"value":790},"  return",{"type":535,"tag":656,"props":792,"children":793},{"style":724},[794],{"type":541,"value":795}," \u003C",{"type":535,"tag":656,"props":797,"children":799},{"style":798},"--shiki-default:#E5C07B",[800],{"type":541,"value":733},{"type":535,"tag":656,"props":802,"children":804},{"style":803},"--shiki-default:#D19A66;--shiki-default-font-style:italic",[805],{"type":541,"value":806}," className",{"type":535,"tag":656,"props":808,"children":810},{"style":809},"--shiki-default:#56B6C2",[811],{"type":541,"value":812},"=",{"type":535,"tag":656,"props":814,"children":815},{"style":669},[816],{"type":541,"value":817},"\"size-6\"",{"type":535,"tag":656,"props":819,"children":820},{"style":803},[821],{"type":541,"value":822}," aria-label",{"type":535,"tag":656,"props":824,"children":825},{"style":809},[826],{"type":541,"value":812},{"type":535,"tag":656,"props":828,"children":829},{"style":669},[830],{"type":541,"value":831},"\"Activity\"",{"type":535,"tag":656,"props":833,"children":834},{"style":724},[835],{"type":541,"value":836}," \u002F>\n",{"type":535,"tag":656,"props":838,"children":840},{"class":658,"line":839},5,[841],{"type":535,"tag":656,"props":842,"children":843},{"style":724},[844],{"type":541,"value":845},"}\n",{"type":535,"tag":543,"props":847,"children":848},{},[849],{"type":541,"value":850},"元件預設會在 hover 時播放動畫，也保留一般 SVG props，可以改尺寸、顏色、事件與無障礙標籤。它目前主要給 React 18 以上專案使用；官方 README 另外列出 Vue、Svelte、Angular 與 Flutter 的社群移植版本。",{"type":535,"tag":536,"props":852,"children":854},{"id":853},"也可以直接交給-agent",[855],{"type":541,"value":856},"也可以直接交給 Agent",{"type":535,"tag":543,"props":858,"children":859},{},[860,862,872,874,885],{"type":541,"value":861},"這個專案不只準備了給人看的 icon 頁面，也提供 ",{"type":535,"tag":554,"props":863,"children":865},{"href":593,"rel":864},[558],[866],{"type":535,"tag":637,"props":867,"children":869},{"className":868},[],[870],{"type":541,"value":871},"skill.md",{"type":541,"value":873},"、",{"type":535,"tag":554,"props":875,"children":878},{"href":876,"rel":877},"https:\u002F\u002Flucide-animated.com\u002Fllms.txt",[558],[879],{"type":535,"tag":637,"props":880,"children":882},{"className":881},[],[883],{"type":541,"value":884},"llms.txt",{"type":541,"value":886}," 和 MCP 端點。Agent 可以先搜尋 icon 名稱，再取得單一元件的安裝指令與使用範例。",{"type":535,"tag":543,"props":888,"children":889},{},[890],{"type":541,"value":891},"最簡單的做法，是把 Skill 網址和需求一起交給有網頁、終端機權限的 Agent：",{"type":535,"tag":646,"props":893,"children":896},{"className":894,"code":895,"language":541,"meta":520,"style":520},"language-text shiki shiki-themes one-dark-pro","請閱讀 https:\u002F\u002Flucide-animated.com\u002Fskill.md，\n替這個 React 專案找一個適合「下載完成」的動態 icon，\n安裝後放進下載按鈕，並保留 aria-label。\n",[897],{"type":535,"tag":637,"props":898,"children":899},{"__ignoreMap":520},[900,908,916],{"type":535,"tag":656,"props":901,"children":902},{"class":658,"line":659},[903],{"type":535,"tag":656,"props":904,"children":905},{},[906],{"type":541,"value":907},"請閱讀 https:\u002F\u002Flucide-animated.com\u002Fskill.md，\n",{"type":535,"tag":656,"props":909,"children":910},{"class":658,"line":751},[911],{"type":535,"tag":656,"props":912,"children":913},{},[914],{"type":541,"value":915},"替這個 React 專案找一個適合「下載完成」的動態 icon，\n",{"type":535,"tag":656,"props":917,"children":918},{"class":658,"line":760},[919],{"type":535,"tag":656,"props":920,"children":921},{},[922],{"type":541,"value":923},"安裝後放進下載按鈕，並保留 aria-label。\n",{"type":535,"tag":543,"props":925,"children":926},{},[927,929,935],{"type":541,"value":928},"如果使用的 Agent 支援遠端 MCP，也能接上 ",{"type":535,"tag":637,"props":930,"children":932},{"className":931},[],[933],{"type":541,"value":934},"https:\u002F\u002Flucide-animated.com\u002Fmcp",{"type":541,"value":936},"。官方提供搜尋、列出圖示與取得單一 icon 資訊的工具，比把整個 icon 清單塞進提示詞乾淨很多。",{"type":535,"tag":536,"props":938,"children":940},{"id":939},"適合用在哪裡",[941],{"type":541,"value":942},"適合用在哪裡？",{"type":535,"tag":543,"props":944,"children":945},{},[946],{"type":541,"value":947},"我不會把每個 icon 都換成動畫。導覽列一次動十幾個圖示，反而很容易分散注意力。下載完成、複製成功、展開選單或通知這種有明確操作回饋的位置，才是它最適合出現的地方。",{"type":535,"tag":543,"props":949,"children":950},{},[951],{"type":541,"value":952},"這套做法的好處是一次只拿需要的元件，程式碼也會直接留在自己的專案裡。想改動畫時間或觸發方式，不必等套件作者增加 API；但相對地，之後若官方更新某個 icon，也要自己決定要不要重新同步。",{"type":535,"tag":954,"props":955,"children":956},"style",{},[957],{"type":541,"value":958},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":520,"searchDepth":751,"depth":751,"links":960},[961,962,963,964,965],{"id":538,"depth":751,"text":538},{"id":600,"depth":751,"text":600},{"id":627,"depth":751,"text":630},{"id":853,"depth":751,"text":856},{"id":939,"depth":751,"text":942},"markdown","content:articles:lucide-animated.md","content","articles\u002Flucide-animated.md","articles\u002Flucide-animated","md",[973,976,979],{"_path":55,"title":56,"description":57,"date":974,"category":19,"tags":975,"score":760},"2026-07-29",[14,10,11,59,60,61,62,53],{"_path":328,"title":329,"description":330,"date":977,"category":19,"tags":978,"score":760},"2026-06-09",[83,14,10,11],{"_path":16,"title":17,"description":18,"date":980,"category":19,"tags":981,"score":751},"2026-08-10",[14,10,21,22,23],[983,984,985,986,987,988,989,990,991,992,993,994,995,996,997,998,999,1000,1001,1002,1003,1004,1005,1006,1007,1008,1009,1010,1011,1012,1013,1014,1015,1016,1017,1018,1019,1020,1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032,1033,1034,1035,1036,1037,1038,1039,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076],{"_path":5,"title":6},{"_path":16,"title":17},{"_path":25,"title":26},{"_path":31,"title":32},{"_path":36,"title":37},{"_path":43,"title":44},{"_path":49,"title":50},{"_path":55,"title":56},{"_path":64,"title":65},{"_path":69,"title":70},{"_path":74,"title":75},{"_path":79,"title":80},{"_path":86,"title":87},{"_path":91,"title":92},{"_path":96,"title":97},{"_path":102,"title":103},{"_path":107,"title":108},{"_path":112,"title":113},{"_path":117,"title":118},{"_path":123,"title":124},{"_path":128,"title":129},{"_path":133,"title":134},{"_path":138,"title":139},{"_path":143,"title":144},{"_path":148,"title":149},{"_path":153,"title":154},{"_path":158,"title":159},{"_path":163,"title":164},{"_path":168,"title":169},{"_path":173,"title":174},{"_path":178,"title":179},{"_path":183,"title":184},{"_path":188,"title":189},{"_path":193,"title":194},{"_path":198,"title":199},{"_path":203,"title":204},{"_path":208,"title":209},{"_path":213,"title":214},{"_path":219,"title":220},{"_path":225,"title":226},{"_path":230,"title":231},{"_path":235,"title":236},{"_path":240,"title":241},{"_path":245,"title":246},{"_path":250,"title":251},{"_path":255,"title":256},{"_path":260,"title":261},{"_path":265,"title":266},{"_path":270,"title":271},{"_path":275,"title":276},{"_path":280,"title":281},{"_path":286,"title":287},{"_path":291,"title":292},{"_path":296,"title":297},{"_path":302,"title":303},{"_path":312,"title":313},{"_path":317,"title":318},{"_path":322,"title":323},{"_path":328,"title":329},{"_path":333,"title":334},{"_path":338,"title":339},{"_path":346,"title":347},{"_path":353,"title":354},{"_path":359,"title":360},{"_path":365,"title":366},{"_path":370,"title":371},{"_path":375,"title":376},{"_path":381,"title":382},{"_path":386,"title":387},{"_path":391,"title":392},{"_path":396,"title":397},{"_path":401,"title":402},{"_path":406,"title":407},{"_path":411,"title":412},{"_path":416,"title":417},{"_path":421,"title":422},{"_path":426,"title":427},{"_path":431,"title":432},{"_path":436,"title":437},{"_path":441,"title":442},{"_path":446,"title":447},{"_path":451,"title":452},{"_path":456,"title":457},{"_path":461,"title":462},{"_path":466,"title":467},{"_path":471,"title":472},{"_path":476,"title":477},{"_path":481,"title":482},{"_path":486,"title":487},{"_path":493,"title":494},{"_path":498,"title":499},{"_path":503,"title":504},{"_path":508,"title":509},{"_path":513,"title":514},1786425293199]