MockUPhone 免費裝置外框工具：截圖套上 68 款機型，全程不上傳

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

把一張 App 截圖拖進網頁，等它變成手機展示圖，這件事 MockUPhone 做了十三年，到今天仍然免費、不必註冊、沒有廣告。更難得的是：截圖從頭到尾不會上傳到任何伺服器，整個合成過程都在你的瀏覽器分頁裡完成，這不是行銷話術，是它的工程架構使然，後面會攤開給你看。

動手之前有兩件事先說。第一次使用，瀏覽器要先下載大約 80MB 的執行環境，等上幾分鐘屬於正常；裝置櫃最新的旗艦停在 iPhone 15 Pro Max 與 Galaxy S24 Ultra，2024 年之後的機型一律缺席。一句話結論先放這裡：簡報、提案、教學文件要用，它仍是零成本的首選；要最新機型的商店頁素材，它已經跟不上了。

截圖拖進去之後，發生了什麼

操作流程很短。在裝置頁選好顏色（iPhone 15 有黑、藍、綠、黃、粉五色；15 Pro 系列換成四種鈦金屬色），把圖檔拖進虛線框，按 Generate product mockups，完成後到下載頁拿一個 ZIP 壓縮包，裡面是透明背景的 PNG。接受 PNG、JPG、PSD 三種輸入，可以一次丟多張批次處理。頁面會提示每個機型的建議尺寸，例如 iPhone 15 是 1179×2556，照著建議尺寸給解析度最準，不吻合它也會自動縮放貼合。找不到你要的裝置時，站上附了一個許願頁，可以填表單指定機型、顏色與角度。

Pin

我把一張 1179×2556 的測試圖拖進 iPhone 15 頁面，同時盯著整個過程的網路請求。結果很乾淨：全部 276 個請求裡，沒有任何一個把圖片送去伺服器，僅有的兩個 POST 是 Google Analytics 的零位元組統計封包，連圖檔的影子都不在裡面。

它的原始碼攤在 GitHub 上（Apache-2.0 授權），架構一目了然。合成引擎藏在一段 Web Worker 裡：網頁先把 Pyodide 載進來，這是把 CPython 編譯成 WebAssembly 的技術，等於在你的瀏覽器裡跑一份真正的 Python，接著現場安裝 numpy、OpenCV、Pillow 三個套件。你拖入的檔案由 Python 程式直接從瀏覽器記憶體讀取位元組，套上裝置殼之後，成品以 base64 字串交給頁面，存進瀏覽器自己的儲存空間，最後由 JSZip 在本機打包成 ZIP。

換句話說，這個網站把一套桌面影像處理管線整個搬進了瀏覽器。對還沒上架的 App 介面、客戶的內部系統畫面，或任何你不想讓第三方伺服器碰到的截圖，這個設計有實質意義：檔案層的隱私由架構直接保證，比任何隱私政策承諾都硬。成品也留在本機：產出存在瀏覽器自己的儲存空間裡，下載頁隨時可以重新打包，代價是換一台電腦或清掉瀏覽器資料就得重新生成一次。

免費的代價：第一次要先搬一套 Python 進來

本地處理不是沒有成本。實測各項下載的體積：OpenCV 的 WebAssembly 版本約 47.9MB、numpy 12.5MB、Pyodide 核心與 Python 標準函式庫合計約 17.9MB，全部來自 jsDelivr 公用 CDN，四個大檔合計約 78MB，連同其餘零星檔案超過 80MB。這解釋了第一次使用時那段看起來像當機的等待，第二次起有瀏覽器快取，速度才是工具的真實水準。

還有一個設計值得知道：它會照你 CPU 的核心數開出等量的 Worker，每個 Worker 都是一份完整的 Python 環境，平行處理你丟進來的多張圖。你的機器在這幾分鐘裡就是渲染農場，只不過跑的是 Python 而非顯示卡。站方在 Firefox 上遇過 Worker 初始化直接失敗的問題，查了一輪後的解法是把 Firefox 限制成只開兩個 Worker。

原始碼裡還附了一份同款引擎的 Python 套件，相依套件就是 numpy、OpenCV、Pillow 三個套件，看得出站方把網頁版與套件版當同一套程式在養。不過這份套件的核心類別直接綁在 Pyodide 的瀏覽器環境上，它不是拿來在本機批次跑的指令列工具，想離線批量生成的開發者要有心理準備。

卡住的時候，GitHub 上有三張老 issue

生成的穩定性是這個工具目前最誠實的弱點。GitHub 上的 issue 記錄得很清楚。

第一張 issue 從 2024 年 11 月開到現在：Apple Watch Series 8 的 mockup 全面生成失敗，症狀是無限轉圈或直接跳出錯誤。2026 年 6 月有使用者把範圍縮小：只有預設色能生成，一旦換色就炸出 Pyodide 的錯誤堆疊。2026 年 7 月有人提交了修復 PR，截至 2026 年 9 月仍未併入主線。

另外兩張 issue 語氣類似。2025 年 4 月有人通報 iPhone 15 大部分 mockup 生不出來，站方沒能在 Firefox 上重現問題；2025 年 12 月有人遇到 OpenCV 模組載入失敗，Oursky 技術長 Rick Mak 的研判是網路問題，從 CDN 拉 Python 套件不夠穩。

我自己的經驗也落在這一族：在沒有圖形加速的環境裡實測，等到逾時都沒等到成品。對照上面幾張 issue，這個架構的失敗模式高度依賴 CDN 品質與瀏覽器環境，換一台機器、換一個網路，結果可能完全不同。

原始碼裡對失敗的處理也透露了站方自己的認知：批次生成時，ZIP 只會裝進成功的那幾張，失敗的項目會另外跳提示，程式裡的函式名直接叫 handlePartialSuccess。「一部分成功、一部分失敗」被當成正常狀態來設計。

實用對策有三條。卡在 Generating 時先重新整理再傳一次；換色失敗就先用預設色拿到成品；第一次的長等待不要當成工具壞了，先讓它把環境搬完。

裝置櫃的家底：68 款機型、173 個顏色變體、342 個預錄視角

裝置庫的完整統計如下：68 款機型、173 個顏色變體、342 個預錄視角。iPhone 殼收了 18 個型號，從 iPhone 8 到 15 Pro Max，中間跳過了 X 與 12 兩個世代，Galaxy 與 Pixel 採零星收錄，最新到 S24 Ultra 與 Pixel 8，中間多個世代缺席，再加上 OnePlus、華為、Moto，甚至 2024 年 9 月還補了一台玩笑性質的 Nokia 3310。

Pin

兩個斷點要劃清楚。其一，2024 年 9 月之後就沒有新裝置進場，對需要最新機型門面的商店頁素材來說，這點足以直接出局。其二，視角是預錄的：每個型號固定一到四個預錄視角（手機多為直向、橫向、側身），座標寫死在設定檔裡，站上沒有自由旋轉、打光、陰影這類控制項。部分介紹文章宣稱可以調整角度與陰影，與現場介面不符，預期要先校正。

顏色的分布也不均。iPhone 15 全系五色起跳，最新的 Galaxy S24 Ultra 卻只有鈦灰一色，且那張殼出自 Skymakers 設計師之手，原廠沒有提供資源。電視分類看起來冷門，實際上是它最差異化的資產：把電視牆、機上盒或大螢幕介面的示意圖放進 Samsung、LG 的電視外框，這在多數同類工具裡找不到對應選項。

成品的規格倒是實在。裝置模板是內建 alpha 透明色版的 PNG，實測 iPhone 15 黑色模板約 88% 的像素是透明的，合成後的展示圖可以直接疊進簡報與設計稿，不必再手工去背。

誰在養這個免費工具

MockUPhone 的年紀比多數同類工具都大。網域 2013 年 7 月註冊，同年 8 月網路檔案館（Wayback Machine）就留下第一張快照，當時的介面寫著由 iOS Pick 提供，裝置只有 iPhone 5、iPad、iPad Mini、Nexus 4、Galaxy S4 五款。十三年後長成 68 款的規模。

現在的維護者是香港軟體公司 Oursky，旗下品牌 Skymakers 在官網自我介紹裡寫著 70 多人的開發團隊，近幾次維護提交都出自 Oursky 技術長之手。2024 年 4 月他們用 Astro 重建整個網站並開放原始碼，現在這套「瀏覽器內跑 Python」的架構就是那時定型的。之後的節奏明顯放緩：新增裝置停在 2024 年 9 月的 Nokia 3310，程式碼更動停在 2026 年 1 月，內容是 robots.txt、網址轉向與文件格式整理。網域續約到 2027 年 7 月，不是棄養狀態，但已經進入低頻維護期。

它的商業邏輯也透明：沒有廣告、沒有付費牆、沒有帳號系統，頁尾掛著 Authgear、MakeAppIcon、FormX.ai 三個姐妹產品的連結，用小工具換開發者上門，這是代理商開發客戶的常見打法。對使用者來說，這比「免費試用後收費」的模式可預期得多。

檔案不出門，不等於什麼都不出門

隱私要分兩層看才準確。檔案層，前面已經用請求記錄證明，截圖不出分頁。行為層則要分開看：頁面同時載入了 Plausible（站方自選的隱私友善統計）與 Google Analytics 的舊版程式碼，後者還連動載入了新版 GA4 的收集端點，另外有 Facebook SDK、Twitter 分享元件與 Adobe Typekit 的字型統計。

把它講成保障隱私安全的工具，只對了一半。你丟進去的圖沒有出門，但你在站上的瀏覽行為照樣進第三方統計系統。這些統計元件與生成流程互不相干，在意這一層的讀者用瀏覽器內建的追蹤防護功能處理即可，不必因此放棄工具本身。把「截圖內容」與「瀏覽行為」分開評估，才是對這類本地工具準確的用法。

拿去商用之前：兩層授權要看清楚

授權結構比一般免費工具多一層。第一層是生成物：站方明定所有產出以 CC BY 3.0 授權，要求至少在專案說明或原始碼裡標註素材由 MockUPhone 製作，沒有指定署名格式，但這一條屬於授權條件，跳過會踩到授權邊界。

第二層是裝置殼素材本身。iPhone 15 掛 Apple Design Resources，iPhone 8 掛 Meta 的設計資源，較舊的機殼來自 Pixeden、GraphicBurger、Medialoot 與個別設計師，最新的 S24 Ultra 由 Skymakers 設計師自製。這些來源各有自己的授權條款，獨立於站方的 CC BY 宣告。自己公司的簡報通常不會有人追究，放到對外廣告或付費素材前，花兩分鐘看過 attribution 頁是值得的保險。

簡報能用，商店頁讓位

順著前面的證據，該不該用已經有答案了。

適用的場景：簡報與客戶提案需要快速把介面放進裝置畫面；教學文件與部落格配圖；需要電視、筆電、手錶外框的場合，這在同類工具裡是少見的覆蓋；截圖內容敏感，不能經過第三方伺服器的情境，這是它的架構級優勢；還有單純想找一個老牌、免註冊、用完即走的工具的人。

該換工具的場景：需要 2024 年之後機型的商店頁素材，這裡沒有答案，蘋果與 Google 官方的行銷資源庫反而跟得上時代，是更合適的出發點；需要 3D 場景、自由視角與燈光控制，iMockup 這類 3D 樣機工具才是對的方向；需要精緻的行銷視覺風格，Clay 式的渲染質感更合適；只是想讓截圖好看一點、加上背景與邊框，Screenshot Rocks 那類美化工具更輕快，不必動用整套 Python 環境。

看十三年前那個只有五款裝置的小網站一路走到今天，MockUPhone 用一種很工程的方式活著：把成本搬到使用者的瀏覽器裡，把商業動機換成頁尾三個連結。剩下的只有接受它的年齡，還有第一次使用時那 80MB 的耐心。