📌 從需求到成品的過程

這次的起點是一份完整的測驗題目與計分規則，我想要有一個線上測驗網站，受測者完成後能自動計算分數、顯示結果，並附上可下載的專屬頭貼。

在與 Manus 的互動中，過程分成幾個主要階段：

1️⃣ 討論與確認需求

一開始，我先把完整的測驗內容、計分規則，以及結果類型的對應方式提供給 Manus。需求包含：

• 10 題單選題，每個選項對應到不同類型分數（Dynamo、Blaze、Tempo、Steel）
• 完成後自動計算最高分的類型，顯示對應的結果說明
• 每種結果有專屬的頭貼圖片
• 頭貼可愛、統一系列風格、適合當 LINE 大頭貼
• 結果頁不導向產品，而是純描述與角色分析

2️⃣ 初版設計與測試

Manus 先做出第一版網站，包含：

• 基本的 HTML、CSS、JS 架構
• 題目與計分系統
• 各種結果類型的顯示
• 頭貼圖片的生成（初版包含額外 icon）

測試過程中，我發現：

• 有些題目敘述太抽象，需要更具體的情境
• 頭貼的 icon 遮擋了瑪芬本身的細節
• 部分結果頁的文案太像資料表，缺乏故事感

3️⃣ 調整與優化

我們來回調整了幾輪：

• 重新編寫題目，讓選項貼近真實情境
• 改掉頭貼設計，移除瑪芬上的 icon，改成用手拿物件來呈現角色特質
• 在結果頁加入更詳細的分析，讓受測者更容易理解自己的風格

這段過程中，我特別注意到 Manus 的優勢：能在同一個對話中快速記住上下文，不需要反覆解釋需求，讓修改的來回更有效率。

4️⃣ 部署與驗證

當內容和設計都確定後，Manus 幫我直接部署到一個臨時的線上網址，方便隨時測試：

• 每次調整後，都可以立刻看到最新版本
• 方便與其他人分享測試連結收集意見

不過臨時部署的網址並非永久存在，所以我最後還是決定把專案檔案下載下來，自行保存與備份。

🎯 完成版本

最終成品的特色：

• 10 題情境化測驗題目
• 即時計分與結果判斷
• 8 種瑪芬角色頭貼，統一系列風格
• 詳細的結果分析（去掉產品推銷）
• 響應式設計，手機與電腦都能順暢使用
• 結果頁有社群邀請與課程介紹，但不影響主要內容

📦 同場加映：用 GitHub Pages 把專案變成自己的

Manus 部署的版本很方便測試，但如果要永久保存、自己維護，我選擇把專案放到 GitHub Pages。

步驟摘要

1. 建立 GitHub 帳號並建立新專案（Repository）
2. 上傳網站檔案（確保 index.html 在根目錄）
3. 在專案的 Settings → Pages 開啟 GitHub Pages
4. 等待幾分鐘，取得公開網址

這樣做的好處

• 網站變成自己名下的專案
• 之後要修改內容，直接更新檔案即可
• 免費且無需額外伺服器

💬 適合詢問 GPT 的 Prompt

我有一個 HTML/CSS/JS 的網站專案，請幫我用 GitHub Pages 部署，並提醒我常見錯誤與解法。

💬 Manus 的對話replay

https://manus.im/share/OfWWeAyc7x96nnZON0UGtA?replay=1

🎯 GithubPage網址

https://github.com/Henry-Liu0719/Muffin-Taste-Test