Scrolltide 教學：把動態首頁參考變成 AI 看得懂的設計需求
Scrolltide 教學從免費模板挑選開始，拆解首屏、捲動與手機版需求，附可改寫的 AI 提示詞與驗收表，幫你把動態網站參考變成自己的首頁。
Scrolltide 教學最有用的起點，是先決定首頁要讓訪客看懂什麼，再挑一種能幫忙說明的動態效果。
你可能存過一堆漂亮網站，但把連結丟給 AI，第一版仍然像別人的品牌，因為參考畫面沒有替你決定內容與操作。
這類資源庫把動態網站整理成模板、元件與背景效果，讓需求有了可以指認的對象。挑選時仍得區分整頁版型與一個局部效果。
對需要作品集或小型品牌網站的人，先做一個能閱讀、能操作的首頁，比同時搬進多種特效更容易修改。
因此，選模板之前，先把主標、產品圖與主要按鈕放回同一個畫面，動態才有明確要服務的內容。
Scrolltide 教學先分清模板、元件與背景
整頁模板負責內容的整體排列，局部元件則只解決一段互動。你要改多少內容，決定了應該從哪一類開始找。
截至 2026 年 10 月 25 日，官方首頁把資源分為模板、元件、Shader、頁面區段與 UI 畫面。Shader 是讓電腦繪製特殊材質或背景效果的程式，適合當視覺襯底，不會替你補上產品說明。
官網的社群連結也指向分享清單的 Himanshu 帳號，因此閱讀這份資源整理時，應一併考慮作者與產品的推介關係。
假設你正在做攝影師網站，已經有作品圖片與服務內容，但第一屏沒有焦點。這時先挑一個標題與主圖清楚的首頁模板，比另外找五種背景特效更接近問題。
以下用三種需求判斷該找什麼。
| 你遇到的問題 | 優先找的資源 | 先保留什麼 |
|---|---|---|
| 整頁不知道怎麼安排 | 模板 | 真實作品與服務內容 |
| 首頁缺一段有重點的展示 | 頁面區段或元件 | 現有導覽與其他章節 |
| 排版正常，只想調整氣氛 | 背景效果 | 文字對比與操作區域 |
表格裡的選擇都從問題出發。若內容排列本來就不清楚，增加背景動畫也不會讓訪客更快理解服務。
從免費範例開始看哪裡可以改
你可以從官網的 Library 瀏覽模板，先看標為 Free 的項目。例如首頁展示的 SELENE 模板有官方動態預覽，可用來觀察標題、圖片與捲動的關係。
Free 是該項目的標示，其他模板仍可能需要付費。因此，先看實際項目的取得條件、使用範圍與依賴，再決定要不要採用，不必為了完成第一頁先取得整個資源庫。
看預覽時，先記下你想借用的關係，例如「標題先讀完，作品再隨捲動出現」。這比只說「我要一個有質感的網站」更容易轉成可修改的需求。
當你知道缺的是哪一塊，才不會為了換一個按鈕重建整頁。
先把首頁縮成一個訊息與一個動作
首頁需要先說清楚產品價值，再安排訪客下一步要做什麼。若訊息還沒確定，AI 只能自行補寫，最後常把版面和內容一起猜錯。
以攝影服務為例，「記錄你的重要時刻」雖然好聽，但沒有說清楚服務對象。改成「為台北小店拍攝能直接用在菜單與社群的商品照片」，訪客就知道這是不是自己需要的服務。
主要按鈕也要接得上這句話，因為訪客讀完主標後，需要知道可以做什麼。如果網站要接案，按鈕可以帶去作品與詢價表單。如果目的是建立信任，就先展示可核對的案例，不要直接跳到付款。
在挑模板前，先填好這份內容表。
| 欄位 | 攝影服務的填寫示例 |
|---|---|
| 目標訪客 | 需要菜單與社群圖片的小店店主 |
| 首頁主標 | 把店裡的招牌商品，拍成能直接使用的照片 |
| 主圖 | 一組已取得使用權的真實拍攝作品 |
| 主要動作 | 查看方案並填寫詢價表單 |
| 支持資訊 | 交付內容、服務地區與聯絡方式 |
這份表決定了動態效果不能遮住什麼。因為主圖與按鈕都承載任務，主圖移動時仍要看得懂服務內容，按鈕也不能變得難以點擊。
如果你還沒有正式照片，可以先用自己有權使用的素材排版。不要讓 AI 生成不存在的客戶評價、品牌合作或交付數字，因為那些內容一旦進入漂亮模板，會更容易被當成事實。
訊息與按鈕確定後，參考網站才有可比較的用途。
把參考拆成 AI 可以執行的動態規則
一份可修改的需求，要寫出誰在什麼時候移動，以及移動結束後留下什麼。形容詞只能給方向，動作規則才讓你能指出哪裡做錯。
例如「滑動時有電影感」可以拆成「第一屏保留標題與按鈕，捲到下一段時作品圖片逐張出現」。前者沒有完成標準，後者能在預覽中逐項檢查。
先辨認觸發條件。點擊、滑鼠經過、頁面載入與捲動是不同事件，不要把它們混在同一句話裡要求模型自由發揮。
再決定效果結束後的狀態。圖片要停在哪裡、標題是否繼續可見、使用者能否往回捲，這些都會影響頁面是否能閱讀。
可直接改寫的首頁需求範本
以下是本站整理的需求範本，並非產品原始 prompt，也不是已完成的網站測試。
請以我選定的動態首頁參考為起點，先分析排版與動態規則，再提出實作方案。
網站用途：攝影服務介紹與詢價。
訪客：需要菜單與社群圖片的小店店主。
素材：使用我提供的照片、服務內容與聯絡方式。
首屏保留一個主標、一段服務說明、一張主圖與一個詢價按鈕。
只採用參考中的圖片進場關係，不複製品牌、文案或原始作品。
主標與詢價按鈕在進場過程中仍可閱讀與操作。
請寫出動態由什麼操作觸發，何時開始、何時結束。
手機以閱讀與點擊為優先，必要時改成靜態排列。
使用者偏好減少動態時，保留全部內容並停用大幅移動。
先回覆內容順序、需要的技術與可能的限制，再建立第一版。
把自己的資訊放進去時，先改用途、訪客、素材與按鈕目的。不要只換品牌名稱，卻保留別人的商業模式與操作流程。
如果你已經有網站，還要補一句「只修改首頁主視覺，保留導覽、網址與其他章節」。修改範圍清楚，才能避免每次調動效都把整站重新設計。
延伸閱讀：Arc UI MCP 教學：讓 Claude Code 用現成元件做出可維護的網站介面
把規則固定下來，第一次預覽就能對照哪一項還沒有做到。
手機版與減少動態偏好要一起驗收
電腦上看得懂的捲動效果，到了手機不一定仍能承載相同資訊。手機畫面較窄，文字換行、圖片裁切與觸控方式都會改變，不能只把桌面版等比例縮小。
第一輪先用一般手機寬度檢查，再看較窄與較寬的排列。重點是主標讀得完、按鈕點得到，以及內容不必左右來回拖動。
捲動也不應該成為讀取重要資訊的唯一辦法。如果訪客沒有完成某段動畫，就看不到價格或聯絡方式，裝飾效果已經妨礙網站的主要任務。
Motion 官方無障礙文件提供依使用者減少動態偏好調整效果的方法。若你採用其他工具，也應替大幅位移、縮放與持續循環準備較安靜的替代狀態。
以下把驗收集中在訪客能否完成任務。
| 檢查情境 | 通過條件 | 失敗時先改什麼 |
|---|---|---|
| 第一次打開首頁 | 能讀到服務與下一步 | 先減少遮擋與等待 |
| 手機直向閱讀 | 文字完整，按鈕沒有擠出畫面 | 調排列與內容寬度 |
| 往下捲再回來 | 內容沒有消失或卡住 | 檢查觸發與還原狀態 |
| 偏好減少動態 | 資訊完整，沒有大幅持續移動 | 提供靜態替代 |
| 用鍵盤操作 | 能找到並啟動主要連結 | 補焦點與操作順序 |
表格中的失敗不需要一律重做。若只有手機標題被切掉，先改文字容器與排列。若只有進場太慢，就調觸發與時間，保留已經讀得懂的內容。
小螢幕與靜態替代都過關後，才適合補充次要動效。
Scrolltide 教學常見問題
可以只靠貼一段 prompt 完成網站嗎？
你可以用它建立第一版，但仍需要自己的內容、素材與操作檢查。模板無法替你確認詢價表單有沒有送到正確地方，也不會知道哪張作品照片有使用權。
免費範例可以直接當商業網站使用嗎？
先看該項目的使用條件。免費取得與可以採取哪些重用方式是兩件事，圖片、字體與第三方程式也可能有自己的規則。
沒寫過程式，適合看這份 Scrolltide 教學嗎？
適合先練習需求整理與預覽判斷。實作時可以交給支援程式碼的建站工具，但要保留可修改的專案，後續才有辦法更新內容。
是否一定要做 3D 首頁？
不需要。如果產品價值用照片與文字已經說得清楚，簡單的進場和狀態回饋就足夠。選擇效果時，先看它有沒有幫訪客理解內容。
先完成一個能讀懂的首頁，再增加動態
如果你已有內容和品牌素材，這類資源庫適合用來縮短從文字需求到視覺參考的距離。若連網站要做什麼還不清楚，先填內容表會更有幫助。
先選一個免費範例，只採用一種動態關係，再把首頁放到手機上看一次。你能指出哪句話、哪張圖與哪個操作需要保留，下一輪修改才會愈來愈具體。
延伸閱讀：Claude Code UI 設計工具怎麼選？10 個 GitHub 專案逐項查核與分工指南
訂閱 AI 郵報，持續取得能帶進實際專案的工具教學與需求範本。
