ZelongAI Blog

分類: zelonai

  • Codex 拆解：OpenAI 如何打造能實際操控你 Mac 的 AI

    Codex 拆解：OpenAI 如何打造能實際操控你 Mac 的 AI

    當 OpenAI 發表「幾乎能做（幾乎）所有事」的 Codex 時，整個科技圈都為之振奮。AI 寫程式、起草郵件已行之有年，但 Codex 聲稱能操作 macOS ——「用自有游標去看、去點、去輸入」—— 這代表的是一種本質上完全不同的能力。

    要跨越雲端語言模型與本地作業系統之間的鴻溝，困難度出了名的棘手。幾十年來，自動化仰賴的是脆弱的應用程式介面（APIs）或 DOM 抓取腳本，只要 UI 元素一變動就立刻報廢。

    核心工程洞見在於：Codex 捨棄了程式碼層級的整合，改採像素層級的執行。 透過多模態視覺結合底層核心事件注入，OpenAI 把圖形使用者介面（GUI）變成了一套通用 API。

    以下就是讓這一切成真的技術架構。

    Mac 原生代理的架構

    要讓 AI 在無人介入下測試應用程式，或反覆調整前端設計，它需要一個持續運作的感知—推理—行動（Perceive-Reason-Act）迴圈。以下是 Codex 大致如何在 macOS 上實作每一個階段。

    1. 感知：語意視覺與定位引擎

    AppleScript 之類的傳統自動化工具會讀取 UI 的無障礙樹（accessibility tree）。這種做法很快，但遇到自訂的 Electron 應用、網頁畫布或遊戲——這些 UI 元素缺少正確無障礙標記的場景——就會失效。

    OpenAI 表示 Codex 是靠「看」來使用應用程式，這意謂它仰賴電腦視覺（Computer Vision）。執行於 Mac 上的宿主應用程式會以高頻率擷取桌面畫面。接著，多模態模型利用語意分割來解析這些影格——它不是去找 HTML 標籤，而是用視覺辨識出按鈕、搜尋列、選單等介面元素的形狀與脈絡。

    Codex 架構示意圖，展示 macOS 上的「感知—推理—行動」迴圈。

    這裡最關鍵的工程挑戰是定位（Grounding）。一旦 AI 鎖定目標，它會執行一段計算，把語意物件對應到螢幕上精確的像素座標。它把「點擊關閉按鈕」翻譯成準確的 (x, y) 位置，並依照特定的顯示器解析度與縮放比例進行調校。

    階段 發生什麼事 技術
    畫面擷取 高頻率擷取桌面截圖 宿主應用程式
    語意解析 依視覺外觀辨識 UI 元素，而非依程式碼 多模態視覺模型
    定位 把語意目標對應到像素座標 座標迴歸模型
    動作派送 將合成輸入事件注入作業系統 系統框架掛鉤

    2. 行動：注入作業系統層級事件

    知道要點哪裡，唯有軟體能真正觸發該動作才有意義。Codex 完全繞過實體硬體。

    要能在原生層級與 macOS 互動，Codex 幾乎可以肯定調用了 Apple 最深層的系統框架：Quartz Event Services與Accessibility API。

    當 Codex 決定點擊時，它會合成一個虛擬的 CGEvent——先 mouseDown、再 mouseUp——並直接注入 macOS 的系統事件佇列。從作業系統的角度看，這個合成事件與實體觸控板按壓完全無從區分。這正是 Codex 為什麼能操作任何應用程式的緣故：人類能點的，Codex 就能點。

    3. 隔離：「幽靈游標」的運作機制

    或許技術上最具野心的宣稱，是 Codex 能「在背景執行，不接管你的電腦」。任何用過巨集錄製工具的人都知道，傳統自動化會完全劫持滑鼠游標。

    要達成並行執行，系統必須把 AI 的輸入與使用者的實體輸入隔離開來。大概有兩種可能的實作方式：

    方式 如何運作 取捨
    定向視窗路由 macOS 允許把事件送往特定的行程識別碼（PIDs）。Codex 把合成的點擊直接送到目標應用程式的事件迴圈，繞過全域硬體游標。 較低開銷；需要精準的視窗定位。
    虛擬影格緩衝 系統啟動一個無頭（headless）虛擬桌面層。Codex 在這個隱形工作區內「看見」並運作，而使用者繼續在主工作區不受干擾地作業。 較高記憶體用量；隔離性更強。

    虛擬影格緩衝這套做法，與 Anthropic 推出自家 Computer Use 能力時所觀察到的機制相符，暗示這可能正逐漸成為桌面 AI 代理的業界標準模式。

    展望：後 API 時代

    後續影響遠遠超越技術實作本身。OpenAI 在作業系統層級打通了「視覺到行動」的管線，使得傳統 API 變成可有可無。我們正邁入大型行動模型（LAM）的時代。

    看看實際的意涵：

    • 舊有軟體整合： 2008 年的企業工具、沒有 API？Codex 根本不需要。它會開啟應用程式、瀏覽介面、複製資料，再貼進現代化儀表板。
    • 平台限制： 平台用激進的 API 速率限制來箝制開發者存取？Codex 直接開瀏覽器、像真人使用者那樣驅動介面。
    • 跨應用工作流程： 過去需要在互不相通的應用之間架設客製中介軟體的任務，現在只要一句自然語言指令就能編排完成。

    軟體業花了幾十年為應用之間搭橋。如今 Codex 征服了 macOS GUI，應用之間再也不必彼此對話——AI 會代替我們去使用它們。

    FAQ

    Codex 在 macOS 上是如何「看見」螢幕的？

    Codex 使用一個宿主應用程式，以高頻率擷取桌面截圖。接著多模態視覺模型會對這些影格執行語意分割，根據按鈕、選單、文字欄位等 UI 元素的視覺外觀來辨識它們，而非依賴底層程式碼或無障礙標記。

    Codex 用了哪些 macOS 框架來模擬點擊與按鍵？

    Codex 大概是與 Apple 的 Quartz Event Services 和 Accessibility API 介接。它合成虛擬的 CGEvent（如 mouseDown 與 mouseUp）並注入 macOS 系統事件佇列，讓這些輸入與實體硬體事件無從分辨。

    Codex 怎麼能在背景執行而不劫持游標？

    系統可能採用定向視窗路由——把事件直接送往特定的行程識別碼（PID）；或是採用虛擬影格緩衝，建立一個隱形桌面工作區，讓 AI 在其中獨立運作，而使用者的實體游標不受影響。

    什麼是大型行動模型（LAM）？它和 LLM 有何不同？

    大型行動模型（Large Action Model）把大型語言模型（LLM）的能力，從文字生成延伸到真實世界的任務執行。LLM 產出回應，LAM 則是透過視覺感知環境、推論該採取什麼動作，再透過系統層級的輸入注入來執行這些動作。Codex 正是 LAM 概念的一個具體實作。

  • 精通 PromptKit iOS：從 Panic 的 SSH 終端機到 AI 驅動的 Vibe Coding

    精通 PromptKit iOS：從 Panic 的 SSH 終端機到 AI 驅動的 Vibe Coding

    PromptKit iOS 代表行動開發的雙重前沿：透過 Panic 的 Prompt 3 進行專業的遠端伺服器管理，以及由 AI 驅動、日益普及的「vibe coding」工作流。無論是透過 SSH 終端機管理後端基礎架構，還是透過自然語言搭配 Claude 3.5 Sonnet 生成 Swift 程式碼，iOS 在 2026 年已成為高速應用部署的主力平台。

    Panic 的 Prompt 是什麼？iOS SSH 終端機的黃金標準

    Panic 的 Prompt（第 3 代）被廣泛視為 iPhone 與 iPad 上最頂級的終端機模擬器。它專為需要在行動裝置上具備桌上型電腦等級 SSH 能力的開發者打造。對於採用「行動優先」工作流的工程師而言，它搭起了一座橋梁，讓伺服器基礎架構管理能具備等同 macOS 終端機的即時反應。

    根據 AppsTorrent 的資料，Prompt 3 的文字引擎較先前版本快了 10 倍。它運用 GPU 加速來處理大型日誌檔與複雜的終端機輸出而不卡頓，並整合 iOS Secure Enclave 進行 FaceID 與 TouchID 認證，同時將私鑰以硬體加密方式保存。

    定義 Prompt 3 體驗的關鍵功能：

    • Panic Sync： 跨 iOS 與 macOS 同步伺服器、密碼與私鑰。
    • Clips： 一個常用指令收藏庫（例如 sudo systemctl restart nginx），可一鍵觸發。
    • Mosh 與 Eternal Terminal： 支援漫遊連線，從 Wi-Fi 切換到 5G 或喚醒休眠中的裝置時都能保持連線不中斷。

    Prompt 3 vs. Termius：哪款 SSH 客戶端勝出？

    Feature Prompt 3 Termius
    平台定位 Apple 生態系（iOS + macOS） 跨平台（iOS、Android、Windows、Linux）
    文字引擎 GPU 加速，較前代快 10 倍 標準渲染
    安全性 整合 Secure Enclave，FaceID/TouchID 團隊憑證共用的 Cloud Vault
    SFTP 支援 基礎 完整
    最適合 Apple 生態系中的個人開發者 跨平台作業的 DevOps 團隊

    Prompt 3 因其原生的使用體驗與 GPU 速度，在 Apple 生態系中表現出色。然而，對於在 Windows 與 Linux 間跨平台作業的 DevOps 團隊而言，Termius 往往是更合適的選擇。Termius 提供更廣泛的 SFTP 支援，以及一個供團隊共用憑證的「Cloud Vault」。對於追求最快、最接近 Mac 原生體驗的 iPad 終端機的個人開發者來說，Prompt 的引擎與 Secure Enclave 整合在安全性與反應速度上都提供了明顯優勢。

    Prompt 3 與 Termius 的比較表。

    Vibe Coding 是什麼？用 AI 提示詞打造 iOS 應用

    「Vibe coding」代表軟體建構方式的轉變。創作者不再逐行撰寫 Swift 程式碼，而是透過自然語言指令——提示詞（prompt）——來指揮 AI 代理。開發者提供「vibe」（意圖、設計與邏輯），由 Claude 3.5 Sonnet 等模型負責實作。

    在當前的 iOS 生態中，Claude 3.5 Sonnet 與「Claude Code」介面是推動此一方法的主力工具。開發者通常會以一段「Genesis Prompt」——一份詳盡、完整的指令——在幾分鐘內搭起一整套 SwiftUI 專案的骨架。程式碼於是變成一種大宗商品，而非手工打造的產物。

    速度的提升相當可觀。正如一則 Reddit 案例所示，一位開發者僅用一段結構良好的提示詞，就在 5 小時內打造出一款功能完整、可上架的 iOS 應用。然而，正如 Dragos Roua 所觀察，這種創作的便利性也改變了市場動態：如今的真正價值在於快速迭代與獨特的產品願景，而非撰寫語法的能力。

    雙提示詞工作流：同時管理伺服器與程式碼

    現代 iOS 開發日益仰賴「雙提示詞（Dual-Prompt）」策略：前端用 AI 提示詞、後端用 Panic 的 Prompt 3。這套工作流讓開發者能一邊停留在 iOS 生態系中，一邊打造複雜、資料驅動的應用。

    1. AI 提示： 使用 Claude 3.5 Sonnet 生成 SwiftUI 視圖、狀態管理與 API 邏輯。
    2. 終端機管理： 使用 Prompt 3 透過 SSH 連進 VPS（例如 DigitalOcean 或 AWS），架設 Node.js 或 Python 後端，並管理資料庫。

    雙提示詞工作流架構圖。

    透過串接 AI 生成的程式碼與手動伺服器管理，便能直接從 iPad 部署全端解決方案。開發者可以先提示 AI 撰寫一支從 REST API 取資料的 Swift 函式，再切換到 Prompt 3 即時檢查伺服器日誌，確認端點是否正確回應。

    iOS 與 StoreKit 2 的究極 Genesis Mega Prompt

    有效的 vibe coding 需要一套結構化的範本，確保 AI 不會遺漏技術需求。一份「Genesis Mega Prompt」應涵蓋：

    Component 應指定內容 範例
    專案概覽 應用名稱、核心功能、目標 iOS 版本 「健身追蹤應用，iOS 18+」
    技術堆疊 框架、架構、並行模型 SwiftUI、MVVM、Swift Concurrency
    StoreKit 2 整合 現代化內購 API Product.products(for:)、product.purchase()
    設計系統 顏色、字體、間距 色碼、44pt 觸控目標

    透過 AI 整合 StoreKit 2 時，請明確指定「現代 StoreKit 2 Swift API」，以避免 AI 生成過時的程式碼。如此可確保 AI 實作出具回應式的購買按鈕與權限檢查，在使用者訂閱時自動更新介面。

    必備開發者工具：從 Expo CLI 到 Blink Shell

    除了 Panic 的工具外，2026 年的 iOS 開發者工具組還包含幾個用於跨平台與本機開發的利器：

    Tool 主要用途 亮點功能
    Expo CLI React Native 開發 npx expo run:ios 進行原生編譯
    Blink Shell 整合式終端機 + IDE 內建 VS Code（Code Server）模組
    Termius 跨平台 SSH 跨 iOS、Android、Windows 同步
    • Expo CLI 最適合用於需要原生模組預建置的快速 JavaScript 與 TypeScript 行動開發。
    • Blink Shell 是想在 iPad 上同時擁有 VS Code 介面與 Mosh、SSH 終端機的開發者的理想選擇。
    • Termius 擅長跨 iOS、Android 與 Windows 裝置同步伺服器清單。

    2026 年 iOS 開發者工具組摘要。

    結論

    Prompt 3 的高效能 SSH 管理，與 Claude 3.5 Sonnet 驅動的 AI vibe coding 兩相匯流，已讓 iPhone 與 iPad 成為名實相符的專業工作站。結合一款用於伺服器管理、速度快 10 倍的 GPU 加速終端機，與快速的 AI 輔助應用生成，開發者得以用史無前例的速度，從概念推進到 App Store。

    接下來的具體行動，是設定好 Prompt 3 以進行安全的遠端伺服器存取，並在 Claude 3.5 Sonnet 中實驗一段 Genesis Mega Prompt，開始直接從 iPad 交付 SwiftUI 專案。

    FAQ

    2026 年 iPad 與 iPhone 上最好的 SSH 終端機應用是哪一款？

    追求速度與深度 iOS 整合的使用者，首選 Panic 的 Prompt 3，它配備了較競品快 10 倍的 GPU 加速文字引擎。需要在 Windows 與 Linux 間跨平台同步的團隊，Termius 更為合適。想在 iPad 上擁有內建 VS Code 環境的開發者，則適合選擇 Blink Shell。

    如何使用 Genesis Prompt 搭配 AI 打造 iOS 應用？

    向 Claude 3.5 Sonnet 這類 AI 模型提供一份高階架構概覽，內容涵蓋 SwiftUI 需求、MVVM 模式，以及 StoreKit 2 等特定框架需求。AI 會將這份規格視為「單一事實來源（source of truth）」，據以生成樣板程式碼、UI 元件與應用邏輯，讓你能把心力投注在產品願景的迭代，而非語法細節上。

    對 iOS 開發者而言，Prompt 3 與 Termius 有何不同？

    Prompt 3 專為 Apple 生態系打造，優先著重 macOS 與 iOS 的深度整合、Secure Enclave 安全機制，以及高速文字渲染。Termius 則是一款多平台工具，提供更廣泛的協定支援（SFTP、Telnet），以及為非單一 Apple 硬體的協作團隊所設計的功能。

    我真的能從 iPad 部署全端應用嗎？

    可以。運用雙提示詞工作流，你可以用 Claude 3.5 Sonnet 生成 SwiftUI 前端程式碼，再透過 Prompt 3 的 SSH 終端機管理後端基礎架構。這讓你能夠撰寫程式碼、設定伺服器、管理資料庫並部署應用——全部在 iPad 上完成，無需傳統的桌上型開發環境。

  • 網頁圖片最佳化完全指南：2026 效能版

    網頁圖片最佳化完全指南：2026 效能版

    把圖片處理好，往往是網站加速最快的一步。2026 年的標準工作流程分為三步：縮放、壓縮、轉檔。在使用者期待瞬間載入、Google 排名機制又高度重視頁面體驗的時代，這套流程能讓你的網頁維持競爭力。

    AVIF 格式已超越 WebP，成為網頁圖片的首選。根據 SimpleResizer 的資料，AVIF 在維持同等視覺品質的前提下，壓縮率比 WebP 高出約 20%，而且現在幾乎所有現代瀏覽器都已支援。

    第一步：精準縮放與長寬比調整

    送出一張遠大於實際顯示尺寸的圖片，是最常見的效能錯誤之一。DebugBear 的數據顯示，把一張 4.3 MB 的原始相片縮放到標準網頁尺寸（例如 1266 x 845 像素），檔案大小可減少 89%。

    上傳前，先確認網站內容區的最大寬度。大多數部落格落在 800px 到 1200px 之間。Canva 或 Photoshop 等工具能把圖片縮放到這些精準尺寸。針對高密度的 Retina 螢幕，可透過響應式標記提供 2x 版本（例如為 1200px 容器準備 2400px 版本），但千萬不要把相機拍出的 6000px 以上原始檔直接上傳。

    原始相片縮放為網頁用圖後檔案大小縮減的對比圖。

    第二步：破壞性與無損壓縮的取捨

    壓縮的目的是移除檔案中不需要的資料。2026 年，開發者通常會在兩種方法之間做選擇：

    壓縮類型 運作方式 最佳使用情境 典型品質設定
    破壞性（Lossy） 捨棄部分視覺資料以最小化檔案 相片、部落格圖片、產品照 75% – 82%
    無損（Lossless） 逐像素保留所有原始資料 Logo、技術圖表、圖示 100%

    正如 purshoLOGY 所指出，相片類內容應預設採用破壞性壓縮，以維持網站速度。只有在明確需要透明背景或簡單線條圖形時，才使用 PNG 這類無損格式。

    第三步：格式選擇 — AVIF、WebP 還是 JPEG？

    你選擇的格式，會直接影響檔案大小與瀏覽器相容性。

    格式 相較 JPEG 的壓縮率 瀏覽器支援度（2026） 最佳角色
    AVIF 小約 50% 通用 主要格式
    WebP 小約 30% 通用 備援格式
    JPEG 基準 通用 舊版備援

    對 Core Web Vitals 的影響：LCP 與 CLS

    圖片會直接影響搜尋排名。根據 SimpleResizer 的資料，70% 的網頁以圖片作為最大內容繪製（LCP）元素——也就是頁面載入時最大的可見區塊。過重的首圖會拖累 LCP 分數，排名也可能隨之滑落。

    累計版面位移（CLS） 同樣關鍵。當瀏覽器在載入前無法得知圖片尺寸，就會發生 CLS，導致圖片出現時文字重新排列。請務必加上 width 與 height 屬性，讓瀏覽器立即預留空間。

    fetchpriority=”high” 屬性

    一個常見的錯誤是「過度最佳化」——為每一張圖片都套用延遲載入。雖然 loading="lazy" 對折頁下方（below-the-fold）的內容有益，但套用到首圖（也就是 LCP 元素）反而會拖慢載入。

    2026 年的最佳做法是：移除折頁上方圖片的延遲載入，改為加上 fetchpriority="high"。這會通知瀏覽器優先下載該張圖片，優先於較不關鍵的指令碼或樣式。

    圖片載入策略的三步決策流程：折頁上方 vs. 折頁下方。

    現代交付方式：CDN 部署與響應式程式碼

    即使是一張小圖，只要得跨越大洲傳輸，速度也會變慢。Cloudflare 或 BunnyCDN 等內容傳遞網路（CDN）會將圖片副本快取在地理上更靠近訪客的伺服器上。

    EXIF 中介資料——智慧型手機相片內嵌的 GPS 座標、相機設定與其他隱藏資料——也應一併移除。這能節省 2% 到 10% 的檔案大小，同時保護拍攝者的隱私。

    程式碼範例：具備備援機制的最佳圖片標籤

    使用 picture 元素，向現代瀏覽器送出 AVIF，同時為舊版客戶端保留備援鏈： 

    picture
  source type image/avif srcset photo.avif
  source type image/webp srcset photo.webp
  img src photo.jpg width 1200 height 675 alt "Descriptive alt text" loading lazy decoding async

    一項 GIMP 測試 證實，運用色度子取樣（4:2:0）等技術，把一張 JPEG 從 1072 KB 縮小到 384 KB（縮減 64%），可在幾乎無法察覺的畫質損失下獲得顯著效益。

    自動化圖片最佳化首選工具

    工具 類型 強項 最適用於
    Squoosh 手動／免費 可完整控制 AVIF 與 WebP 設定 單次壓縮
    TinyPNG 手動／免費 快速批次縮圖 大量快速處理
    Imagify 自動／付費 掃描整個媒體庫、轉檔為 AVIF、透過 CDN 交付 WordPress 網站
    EWWW Image Optimizer 自動／付費 含 CDN 的全流程自動化 電商商店

    正如 SimpleResizer 所指出，對線上商店而言，Google 圖片搜尋可佔整體搜尋流量的 20-30%，這讓自動化最佳化成為一個可量化的營收驅動力。

    結論

    2026 年的網頁圖片最佳化，意味著管理三大槓桿：格式選擇（以 AVIF 為主、搭配備援）、交付基礎設施（CDN），以及瀏覽器優先順序提示（fetchpriority）。網站速度早已不是可有可無的選項——而是留住使用者、在搜尋排名中勝出的基本條件。

    行動步驟： 用 PageSpeed Insights 檢測你的網站，找出 LCP 瓶頸。接著部署一套自動化的 AVIF 管線，搭配 JPEG 備援，讓網站在各種裝置上都能快速且易於存取。

    常見問題

    最佳化圖片會影響在 Retina 螢幕上的視覺品質嗎？

    高密度螢幕需要 2x 或 3x 的解析度才能清晰顯示。請使用 srcset 屬性，僅向能夠顯示高解析度的裝置傳送高解析版本。AVIF 等現代格式即使在檔案大幅縮小的情況下，在這些解析度下保留的細節也遠多於舊版 JPEG。

    2026 年應該把 AVIF 還是 WebP 設為預設圖片格式？

    對大多數使用情境而言，AVIF 是較佳選擇。在同等品質下，它的壓縮率比 WebP 高出約 20%，而且目前幾乎所有瀏覽器都已支援。不過，請務必透過 picture 元素提供 WebP 或 JPEG 備援，確保使用舊版瀏覽器或裝置的訪客仍能正常瀏覽。

    如何修正「LCP 圖片被延遲載入」這個錯誤？

    先找出首圖——通常是頁面頂端的大型橫幅或產品照。移除該 img 標籤上的 loading="lazy" 屬性，因為延遲載入會指示瀏覽器暫緩下載。接著改加上 fetchpriority="high"，告訴瀏覽器立即下載這張圖片。

    把所有網站相片的 EXIF 中介資料移除掉安全嗎？

    安全，而且建議這麼做。移除 EXIF 資料通常可節省 2% 到 10% 的檔案大小，同時移除 GPS 座標與其他敏感資訊、保護隱私。唯一的例外是當你的產業因法規遵循需求，而必須保留版權或作者中介資料時。