從零開始做網站，我如何製作手機拍照盲測網站! - Manus AI 1.5

利用 Manus AI 1.5 實現零程式碼的科技夢想：手機拍照盲測網站架設全紀錄

這次的網站架設經驗，對我來說真的非常有趣且具有劃時代的意義，因為我成功地利用 Manus AI 製作出了一個功能超級完整的手機拍照盲測網站。最令人驚訝的是，我在整個過程中竟然「一句程式碼都沒有打」。我完全是透過口頭指令與 AI 對話，告訴它我需要的功能，它就將前後端架構完整地搭建出來，過程真的是令人稱奇。

架設網站的動力：超越影片的互動盲測體驗

或許熟悉我頻道的朋友們都知道，我的科技頻道一直以來都會分享非常多關於手機使用心得的影片。在這些影片內容中，我會展示大量的照片樣張，並穿插照片盲測的部分。這類盲測的目的是讓觀眾可以透過影片，自己評測一下，看看哪一款手機的拍照表現才是自己真正喜歡的。

然而，儘管透過影片進行盲測是一個可行的辦法，但我總覺得在體驗上似乎少了一點「味道」，感覺總是不太足夠。觀眾無法親手去操作、去細細比較照片的每一個細節，這讓我一直覺得有遺憾。因此，我決定利用這次的機會，嘗試使用 Manus AI 1.5 這個工具，來實作出一個真正屬於我頻道的、功能強大的手機拍照盲測網站。

這個網站的設計目標，是提供一個能夠讓使用者在其中 自由縮放照片細節、自由移動照片位置 的空間。如此一來，使用者就可以真正仔細地「數毛」，找出自己真正喜歡的照片調性和細節呈現。一旦盲測完成，使用者就能清楚知道哪一款手機才是他們真正應該挑選的。更棒的是，這個網站不僅僅是個人測試平台。除了自己的盲測結果之外，使用者還可以即時查看 所有網友測試過的統計數據。這就等於可以看到大家普遍喜歡的手機拍照表現是哪一張。此外，每張照片底下甚至可以留下自己的評論註解，這讓網友之間的互動性大大增加，我覺得真的非常有趣。

這個網站的成功架設，對我來說是一舉兩得的好事。未來，我手機使用心得的文章和影片中，如果我拍攝了足夠多的樣張，我可以將它們放在影片中，同時也直接放在這個網站上。這樣一來，所有辛苦拍攝的手機樣張就不會被浪費，讓大家可以隨時上去測試。

網站前台展示：簡潔高效的盲測介面

首先，我來帶大家看看這個網站的成果。這個網站的網址是 havefunblindtest.manus.space，它是一個非常簡潔的網址。

進入首頁，設計風格非常簡潔，頁面會寫著「手機相機盲測」，並強調它具備「盲測評分」和「即時結果」的功能。為了確保評測的公平公正，網站會將手機的型號遮蔽起來。因此，使用者可以完全針對照片本身的表現來進行測試，挑選自己喜歡的樣張。

在「進行中的測試」區塊，可以看到目前已經上線的照片樣張。我目前設置的是三支手機的測試，分別是 OPPO Find X9 Pro、iPhone 17 Pro 以及 Galaxy S25 Ultra。使用者可以選擇「開始評測」，或者先點擊「查看結果」。

如果先查看結果，可以看到這是網友盲測的總體統計數據。例如，在測試剛開始時，只有兩個人參與，但它能清楚顯示每支手機的得分狀況、獲得第一名和第二名的次數。下方還會有一些簡單的說明。

接著，我們就可以進入實際的測試環節。

核心功能體驗：自由縮放與數毛環節

點擊「開始評測」之後，會進入測試頁面。由於我設定的是三支手機進行測試，所以它會一次性顯示三張照片。目前我總共上傳了三組照片，所以當前會顯示「三分之一」的完成度。

網站的彈性很高，我可以設定的手機數量範圍是兩台到五台。照片樣張的組數，我目前設定的最少是一組，最多是十五組，具體會依照我拍攝的狀況來決定。我覺得十五組應該已經算是足夠測試了。因為如果測試組數再更多，有些使用者可能會感到疲乏，覺得測試過程變得煩躁。

網站最重要的互動功能，就是 照片的縮放。我設計的縮放方式是使用者可以直接點擊縮放按鈕，照片會帶有動畫效果進行縮放。這個功能讓使用者可以直接開始進行我們常說的「數毛」。舉例來說，照片可以縮放到 20 倍。更實用的是，它還支援 移動位置 的功能。這樣使用者就可以將照片移動到他們想要仔細觀看的區域。例如，如果我覺得照片中某個看板的細節是比較著重比較觀點的話，我就可以將所有照片移到看板的位置來進行比較。

透過這種方式，使用者可以非常明顯地看出每張照片在 AI 介入程度上的差異，以及誰的細節處理得比較好。

智慧排名與社群評論：從個人到群體數據的轉化

在每組照片底下，有一個我覺得非常有趣且實用的功能，那就是 評論區。使用者可以在底下寫下自己的評論，例如可以寫「這台 AI 味道比較淡」之類的註解。這些評論會分享給其他網友看。

接著是 選擇排名 的部分，這是在盲測中最核心的環節。使用者可以依照自己的喜好，選擇哪一張照片是第一名。舉例來說，如果我喜歡 AI 味道比較淡的樣張，我可以選擇它是第一名。當我選定某張照片為第一名之後，原本被選為第一名的照片會自動調整為第三名，而它們的位置也會互換。這是一個非常聰明的選擇模式，確保排名之間不會產生衝突，讓使用者能夠依序選出 1、2、3 名。

完成排名選擇後，只需點擊「下一組」即可。如果使用者在評測過程中改變了心意，想要修改上一組的答案，網站也提供了「上一組」的按鈕，讓使用者可以輕鬆回頭進行修改。

當所有樣張都評測完畢，點擊「提交評測」後，網站會立即顯示 個人盲測的結果。總分的計算方式是：第一名得三分、第二名得兩分、第三名得一分。

在我的測試中，第一名的手機是 Galaxy S25 Ultra。結果頁面會明確地寫出它是本次評測的冠軍。第二名是 OPPO，第三名是 iPhone 17 Pro。

更重要的是，使用者在測試過程中留下的評論，例如「這台 AI 味道比較淡」，也會顯示在這個結果頁面上。結果頁面會統計每支手機獲得第一名或最後一名的次數，並進行總分的最終排名。

向下捲動頁面，則會看到 網友盲測的總體結果。由於我剛完成了一次測試，參與人數就會從原本的兩個人變成三個人。這個總體數據會即時更新，而所有參與者的評論也都會顯示在這邊。我覺得這是一個很棒的社群功能，如果你看到什麼有趣的觀點，寫上去之後大家都會看得到。

總結來說，這個網站的功能性強大，真正實現了我想要達成的盲測感受。

內容創作者的福音：網站後台管理系統深度解析

接著，我來帶大家看看這個網站的後台管理介面。

進入後台，可以看到目前進行中的測試狀態。例如，目前有一個正在「進行中」的測試，以及一個處於「草稿」狀態的測試。如果我想要新增一組測試，只需點擊「新建測試」。

在新建測試的頁面，我可以設定測試的標題，像是「旗艦手機盲測」。然後，我可以設定參與測試的手機數量，範圍是兩台到五台。如果選擇五台，系統會自動生成 A、B、C、D、E 的代號。我需要將手機的正確型號打上去。

網站設計中最貼心、最節省我時間的功能，就是 批次上傳。原本，如果只有單張上傳功能，我要一組一組照片慢慢上傳，總共 15 組照片就會非常耗時費力。有了批次上傳功能，我可以把同一組照片（例如三支手機在同一場景拍攝的照片）按照 1、2、3 命名。接著，我只要將這些照片拖曳上傳，它就會自動對應到這三組手機上傳上去。這意味著我每支手機只需要上傳一次，就能完成 15 組照片的配置，這是一個非常方便的功能。

此外，考慮到我經常需要將 iPhone 的樣張納入評比中。因此，我特別讓 AI 新增了 HEIC 格式轉檔 的功能。處理這個 HEIC 格式轉檔其實非常麻煩，當時讓 AI 處理這個功能也花了一些時間。但現在，上傳之後，系統會自動判斷這個格式是否需要轉檔。例如 iPhone 的 HEIC 格式就需要等待它進行轉檔。

上傳完成後，我可以在後台的「預覽」功能中，實際測試整個評測環節的感受。這讓我能夠確認每組樣張是否都擺設到我想要的狀況。如果需要修改，我還可以在「編輯」區塊中修改內文和說明部分。

如果測試已經上線（Go Live）一段時間，但我發現評測數據似乎有些問題，或者我想要重新測試一次，我可以按下 「重置評測」。這樣所有的數據都會被清空，重新開始進行實測。

當一切都準備就緒，我只需將測試狀態從「草稿」改為 「進行中」，大家就可以看到這個盲測了。當測試結束，我可以將狀態改為「已關閉」，這樣數據會保留下來，但使用者就無法再進行新的測試。我覺得這整個後台管理流程設計得非常完善且實用。

驚人的 AI 系統架構：從口頭指令到完整前後端部署

整個網站製作的過程，我使用的 AI 是 Manus AI 1.5，這是他們最新的更新版本。

我的指令其實非常簡單。我直接寫下：「我想要做一個手機的相片盲測網站。」我告訴 AI，我可能會上傳 15 張照片，參與評測的手機數量會在兩到五支不等。我還要求它需要有一個介面讓我能夠上傳和命名手機型號。

對於一般使用者來說，我要求他們可以直接點開網站就能進行測試。我特別強調 不希望讓大家登入或註冊，因為我覺得這會太過麻煩，可能會降低大家參與使用的意願。最後，我要求每一組測試都要顯示所有手機的照片，並且可以進行個別的縮放。

AI 根據我這些口頭上的需求，直接生成了一個非常豐富的網站。更讓我感到「誇張」的是，這個 AI 不僅建立了使用者看得到的前台部分。它還直接生成了完整的後台系統，包括 數據庫（Database） 和 檔案存儲（File Storage）。它能夠記下每一台手機的評比結果，這真的是非常誇張，代表它確實做了一個非常完整的網站架構。

這個 AI 的潛力非常巨大。例如，它其實還可以做到使用者登入的功能。雖然這個盲測網站我沒有要求登入，但未來我可能會讓他再加入這個功能。一旦加入了登入系統，每個使用者都可以註冊帳號，網站就能記錄他們過去所有參與過的盲測數據。我在做其他網站時，有要求 Manus AI 做到登入功能，所以確定這是可以實現的。

AI 甚至還能做一些更進階的功能，例如在網站中加入 AI 聊天室或是其他 AI 的「調味料」。

創作者必備功能：專業數據儀表板與版本控制

對於像我這樣的內容創作者來說，網站的數據追蹤功能至關重要。Manus AI 這次提供了一個非常完善的 儀表板（Dashboard），我覺得這真的是太厲害了。

往下滑動儀表板，我可以看到網站的每一個瀏覽次數、今天的每個小時瀏覽次數變化、有多少次拜訪、有多少訪客，以及他們在網站上的平均停留時間。甚至連 跳出率 這樣的關鍵指標都有提供。

此外，儀表板還會顯示瀏覽量最多的頁面在哪裡、訪客的流量來源、地理位置，以及他們使用的設備類型。例如，如果發現多數使用者是透過手機瀏覽，我就可以根據這個數據來進一步優化我的網站，讓手機端的體驗更好。

除了儀表板，另一個我個人非常喜歡的功能是 版本歷程（Version History）。

這個功能會記錄下我每一次對 AI 下達的修改指令。它會將大致修改的內容寫上來，提供一個簡單的簡介。最重要的是，我可以隨時預覽舊版本，或是直接 回溯到某個歷史版本。這給予了我極大的安全感。

在使用 AI 進行網站開發時，我們難免會遇到「走火入魔」的狀況。有時候下錯了一個指令，AI 可能會把整個網站改得亂七八糟，甚至讓整個系統「爆掉」。但有了版本歷程，我只需要按下回溯鍵，網站就能直接恢復到上一個正常的狀態。這種保障對於開發複雜系統來說，是令人感到非常安心的。

此外，Manus AI 還新增了 協作（Collaboration） 功能。我可以直接邀請其他人一起來製作這個網站。這意味著整個團隊可以共同下達指令，一起協作完成網站的建構，最終再一起發佈出去。這對於團隊合作來說，是非常不錯的功能。

優化與客製化：網域設定與即時視覺調整

在網站的客製化方面，Manus AI 提供了自訂網域的選項。我可以點擊「編輯 URL」來設定我想要的網域名稱。網域後面可以加上 .manus.space 的尾綴。如果我想要更專業的外觀，我甚至可以連接我目前已經擁有的網域。這讓網站的彈性非常高。

除了透過指令來要求 AI 進行修改之外，他們現在還新增了一個更直觀的修改方式：直接點選編輯。

當我點擊編輯按鈕後，我可以針對我現在看到的前台畫面進行即時調整。舉例來說，如果我覺得網站標題「手機相機盲測」有點太長。我可以直接點擊該文字，將其修改為「手機盲測」，然後點擊「Apply」，它就會立即執行修改。我甚至可以調整網站的顏色，設定成各種奇怪的顏色，AI 都能夠做到。這讓網站的微調變得非常輕鬆快速。

跨平台兼容性與 Manus AI 1.5 的升級感受

目前我測試的介面都是網頁版，但其實這個網站也同時具備了 手機版本。手機版同樣可以直接進行實測。

當然，由於手機螢幕比較小，排版方式會有所不同。目前我的排版是讓樣張一個接一個顯示。不過，使用者仍然可以透過手機進行縮放、比較和選擇排名。我覺得 Manus AI 能夠同時做到手機版本，這點非常貼心。畢竟在當今時代，比起電腦，大家可能更常使用手機來瀏覽網站。

接著，我想談談這整個創建過程的使用體驗。

整個過程，基本上就是我與 AI 進行溝通，告訴它我想要做什麼，它就幫我實現出來。從頭到尾，我需要的不是技術含量，而是對功能的想像力和清晰的表達。

在這次的 Manus AI 1.5 中，我感覺到他們的升級真的非常明顯。首先，最讓我最有感的就是 上下文處理 的能力。它變得更加流暢，能夠維持更長久的對話，並保有更長的一致性。這就解決了以往 AI 可能聊到一半就搞不清楚你在講什麼，或是忘記之前提過的設定的問題。

其次，在網站建構過程中，自動修復和自動測試 的功能似乎又更好了。當我在對話中要求修改時，AI 會自己開啟它內建的瀏覽器，去模擬測試，找出潛在的問題，然後進行自動修復。我覺得這是一個非常不錯的底層能力。

最後是 速度 的提升。Manus AI 1.5 的平均任務時間，從四月份的 15 分鐘，大幅下降到了 4 分鐘以內。這大約是 4 倍的加速。這個速度提升用起來是非常有感的。以前下完指令要等比較久，現在指令發出去之後，我跳到別的網站忙一下，基本上網站的修改或建構就完成了。

AI 潛能展示：巨鯨追蹤系統與成本效益分析

為了展現 Manus AI 的多樣性，我也順便帶大家看一下我做的另外一個網站：追蹤加密貨幣巨鯨錢包系統。

進入這個網站的儀表板，可以看到我已經追蹤了兩個巨鯨錢包。網站會顯示他們目前的開倉狀況、方向、倉位、爆倉位，以及未實現損益的百分比。點開之後，甚至還會有線圖，顯示目前的開倉 K 線，我可以調整 K 線的長短。

在這個巨鯨追蹤系統中，我要特別提及的是，我內建了一個 AI 聊天室。這個聊天室被設定為 AI 交易助手。因此，使用者如果遇到任何與加密貨幣交易相關的問題，都可以直接詢問它。我覺得 Manus AI 這次最神的地方就在於，它能夠在網站中內建 AI 的能力進去。

此外，與盲測網站不同，這個巨鯨追蹤網站我就有要求它做了 登入系統。所以使用者可以看到有登出按鈕，並且可以查閱一些歷史記錄。

最後，來談談成本效益。

雖然我今天提到的是 Manus AI 1.5，但如果你的需求比較簡單，或者想要更低成本地進行開發，他們還提供了一個版本叫做 Manus 1.5 Lite。這個 Lite 版本在點數消耗上會減少 50%。

我的手機相片盲測網站，最終大約消耗了 9948 個積分。以時間和精力成本控制上來講，我覺得這是真的非常划算。只需要動口跟 AI 溝通，它就能幫你把這麼複雜、具備前後端和資料庫的系統做好。

科技評論的未來：用想像力取代程式碼

總而言之，這次體驗 Manus AI 真的讓我感到不可思議。我一直很想做這個相機盲測網站，但從沒想到，竟然能夠僅僅透過動動口就實現了。一句程式碼都不用打，這種感覺真的非常暢快。

而且，網站整體建構的品質，完全達到了我想要的標準。現在的 AI 真的將網站製作的門檻大幅降低。你需要的只是想像力，AI 都能夠幫你執行出來。

透過這次架設網站的經驗，大家應該可以感受到，利用 AI 架設網站的過程是多麼輕鬆愜意。這就像你聘請了一位隨時待命的開發者，你只需要直接跟他說你的需求。這種 “vibe coding” 的方式，讓網站開發變得很像一個休閒活動。我甚至覺得，可能在咖啡廳裡，用手機敲幾下指令，網站就能開始運作。

這真的非常實用，無論是像我這次想要做的相機盲測網站，還是之前提到的追蹤加密貨幣錢包的需求，都可以自己動手做出來，這大大增加了科技產品的實戰性。 Manus AI 已經能夠做到簡報、影片製作等各式各樣複雜的事情。例如，只要給它幾個 PDF 檔案，它就能生成一個可以使用的簡報，這種方便性真的是用過就回不去了。