未來感網頁設計是做什麼的？

一套為單頁行銷網站而生的實作方法，讓網站散發「導演感」而非「生成感」：一份清晰的摘要、一個統一的設計系統、逐一建構與驗證的各個區塊、宛如同一場拍攝的統一視覺，以及精心限額的電影感動畫預算。

網站為何看起來千篇一律

每個未經指定的細節，都會被填充為統計上最有可能的選擇。因此，一個一行字的提示，只能產出一個平庸的網站：置中標題、柔和的漸層、一列相同的圓角卡片。真正的工作發生在編寫程式碼之前。請先鎖定所有開放性問題（目標受眾、期望的單一動作、感受、字型、色板），然後以肉眼可以檢視的小增量進行建構。

角色要劃分清楚。使用者擁有什麼（what）該被建構。你擁有如何（how）被建構。沒有任何一件作品是完成的，直到有人在手機寬度的瀏覽器中看過它。

從哪裡開始

情況	前往
新網站，空或近乎空的資料夾	階段 1，然後依序進行
現有網站，只需新增或重建一個區塊	先閱讀專案規則，然後執行階段 5 的區塊例行程序
「讓它更有電影感/3D/滾動驅動」	階段 7 和 `references/cinematic-moves.md`
圖片、主視覺影片或相關提示	`references/assets.md`
網站看起來很普通或像 AI 生成的	依據 `references/design-system.md` 中的「平庸網站的跡象」進行審核，然後進入階段 3
手機修復、打磨、表單、部署、網域、SEO	`references/ship.md`

只有在進入對應階段時才開啟參考檔案，不要提前。每個檔案都是獨立的。

階段

1. 摘要

在編寫任何程式碼之前，先寫一個段落，涵蓋三點：目標受眾、訪客應做的唯一一件事，以及預期的感受（三個形容詞加上一個比喻，例如「安靜、精確、大方，就像一個工作日早晨運作良好的工作室」）。

當使用者沒有提供這些資訊時，請用一條訊息索取。當使用者說「直接做吧」時，請自行撰寫摘要，在一行中將其陳述為假設，然後繼續進行。後續的選擇（主要按鈕、應包含哪些區塊、哪些動畫值得花力氣）都將透過重新閱讀這個段落來決定。這就是它不能被跳過的原因。

2. 計畫

從上到下撰寫區塊列表。每個條目應包含該區塊的用途（一句話）以及它所依賴的資產名稱。先不要開始建構。在沒有任何東西存在之前，改變方向是零成本的。因此，對於跨越多個檔案的工作，請先提出計畫並等待同意。如果代理有計畫模式，請使用。

典型的運行順序：導航、主視覺、信任條、服務介紹、故事或流程、客戶評價、定價（如適用）、常見問題、結尾行動呼籲、頁尾。刪除那些你無法說明其用途的區塊。如果是真實的企業，切勿捏造客戶、評論或統計數據；請省略該區塊或索取真實資料。

3. 設計系統

一次性為整個網站鎖定外觀並記錄下來。在一個基礎預覽頁面上展示三個候選方向，以便使用者親眼選擇。每個方向應配對一個標題字體和一個內文字體，為角色分配五個十六進位顏色（頁面背景、文字、主要、強調、柔和），並用一句話總結其氛圍。將最終選擇的結果編碼到專案的主題 token 中，然後刪除預覽頁面。探索頁面只是臨時腳手架：如果它們留在專案中，就會跟著網站一同發布。

references/design-system.md 中有詳細說明、詞彙表和範本。

4. 專案規則

將永久性規則放入目前代理啟動時會載入的任何規則檔案（CLAUDE.md、AGENTS.md、GEMINI.md）。重複使用現有檔案；否則為此代理建立一個新的。由於它每次會話都會載入，請保持簡潔：網站的內容、技術棧、設計系統以及一些基本規則。

當專案尚無明確意見時的合理預設值：

技術棧：Next.js 和 Tailwind CSS。對於互動式小工具（手風琴、對話框、選單、輸入框），請安裝一個可存取的元件庫，例如 shadcn/ui；不要自己手寫。
每個元件都有自己獨立的檔案，位於 components/ 下。
手機優先。390px 是任何設計都不能破版的寬度。
只使用真實的文案。不使用 lorem ipsum 或「功能一」。
在新增套件之前需要獲得批准，並說明其用途。
偏好減少動畫表示所有動畫都應減少：包括平滑滾動、懸停和圖示過渡，而不僅僅是重點特效。

永久規則屬於此檔案。當前的任務規則則不在此列。

5. 逐區建構

一次要求整個頁面，只會得到一個充滿平庸區塊的頁面，而且沒有明確的修復起點。先建構一個區塊，驗證它，然後繼續。一旦模式建立起來，較為簡單的結尾區塊（引言、問題、結尾行動呼籲、頁尾）可以批次處理。任何視覺上重要的區塊都必須單獨建構。

區塊例行程序，用於每個新增或重建的區塊：

首先閱讀設計規則和 token。
確認內容。當事實很重要時（價格、主張、引言），直接提問。其他情況下，撰寫真實文案並標記出你自行創作的內容。
給該區塊一個獨立的元件檔案。
在三種寬度下渲染：手機（390px）、平板（768px）、筆電（1440px）。修復溢出、不美觀的換行和不良的裁切。
比較該區塊與相鄰區塊之間的上方與下方間距。
結束時提供一份簡報：區塊名稱、其檔案路徑，以及任何需要使用者關注的事項。

在主視覺區投入最多心力，因為它決定了訪客是否會繼續往下滾動。指定每一個重要的細節：

一個最多約八個字的標題，說明提供的內容；一個支援句；以及一個包含品牌標誌、少量連結和一個按鈕的導航列。
一個明確的引導按鈕：填滿、強調色，並與摘要中的行動連結。次要行動則變成一個不顯眼的文字連結。權重相同的雙按鈕表示沒有做出決定。
文案位置應避開視覺主體的焦點，並分別為桌面和手機版本決定位置。
對於位於影片或照片上的文案，請在文字下方使用漸層遮罩來解決可讀性問題。不要調暗整個視覺。
透過手機和桌面寬度的螢幕截圖來判斷第一屏的視覺效果。一大片空白區域、一個看起來像剪貼畫的孤立元素，或是一個太暗而難以辨認的視覺，都表示主視覺區尚未完成。即使真實的資產（圖片/影片）仍是佔位符，該佔位符也必須能夠承載構圖直到那時。

每個按鈕都要有去處。 每個行動呼籲都需要一個真實的目標：商店或結帳連結、預訂頁面、表單或電子郵件地址。當目標未知時，請使用最接近的真實目標（產品區塊、mailto 連結），並在你的報告中列出每個尚未接線的按鈕。一個默默地滾動到同頁的按鈕看起來像完成了，但實際上不是。

當頁面組裝完成後，從頭到尾滾動一遍，找出最弱的區塊（通常會有一個），並在預覽路由上為該區塊提出兩個替代方案。一旦選擇了一個，就刪除其他變體及其路由。

6. 視覺資產

強大的佈局也無法挽救薄弱的影像。從一個約七個資產的簡短拍攝清單開始，並在所有資產中保持一致風格線索（光線、鏡頭、色板）。提示撰寫公式、主視覺影片指導和網路準備工作都位於 references/assets.md。

如果沒有連接圖像或影片生成器，請將提示提供給使用者，並使用標記清楚的佔位符繼續進行。未經批准，切勿使用生成點數。

7. 電影運鏡

菜單中有五種技巧：主視覺中的慢速背景影片、與滾動位置綁定的動畫、一個固定（pinned）區塊而其內容會變化、視差深度，以及一個即時渲染的 3D 物件。節約使用：一個主視覺影片，加上其餘技巧中最多兩個，每個技巧都應放置在能闡明某件事或創造特定感受的位置。同時使用所有技巧，看起來會像一個展示卷，讓訪客感到疲憊，並稀釋每個效果的效果。

每個技巧都需要優雅的降級方案：在偏好減少動畫模式下顯示普通佈局、在小螢幕手機上使用靜態圖片，以及一個即使效果失敗也能正常運作的頁面。之後，衡量成本。配方和護欄位於 references/cinematic-moves.md；在編寫滾動或 3D 程式碼之前先閱讀它。

8. 手機、打磨、表單、上線

手機佔了大部分流量。執行專門的 390px 檢查、一致性檢查和速度檢查；然後連接表單、部署，並完成上線檢查清單。請參閱 references/ship.md。

工作習慣

這些習慣貫穿整個過程。

一次只改一個問題。 當被要求修正時，只修改那個問題，也僅只修改那個問題。一個比請求範圍更廣的差異，會隱藏哪個編輯真正有幫助，而且「整理」一些使用者原本滿意的東西，是一種倒退。
先看再回報。 在聲明完成之前，先載入頁面並以幾種不同寬度檢查。佈局可以滿足所有規則，但看起來仍然不對勁。
將模糊的回饋轉化為具體問題。「感覺很重」是可以處理的：判斷是間距、字重還是對比度造成的，明確指出來，然後只調整那個項目。如果使用者無法表達出自己的偏好，就在預覽路由上放兩三個變體，每個附上一行描述。人們選擇比指定更容易。
將意外歸因於未指定的項目。 當輸出不符使用者預期時，找出其背後未指定的問題，並在規則檔案中將其確定下來，這樣就不用再次手動修補。
從根源修正錯誤，並用一行話說明原因。
儲存工作狀態。 在一個使用者希望有提交記錄的 git 專案中，在每個可行步驟之後進行提交，並使用幾週後仍有意義的提交訊息。
保護金鑰和資料。 機密屬於 .env.local，並且要遠離原始碼檔案和 git 歷史。當表單拒絕儲存時，修復存取規則。切勿為了讓它運作而停用安全性。
誠實回報。 說明哪些部分已經過驗證，哪些部分無法驗證（實體 iPhone、正式環境網域），以及哪些文案是自創的。螢幕上的確認訊息證明了什麼；實際儲存的資料列（database row）才能證明。
檢查版本。 對於 GSAP、Three.js、React Three Fiber、Motion 和 Lenis，請查閱當前文件以確認兼容版本，而不是依賴記憶，並標記出不確定的部分。

參考檔案

檔案	何時閱讀
`references/design-system.md`	選擇字體、顏色和間距；將模糊的風格詞彙轉化為具體的；審核一個看起來平庸的頁面
`references/assets.md`	編寫圖片或影片提示；保持視覺一致性；為網路壓縮媒體
`references/cinematic-moves.md`	添加影片主視覺、固定滾動故事、視差、3D 點綴、滾動驅動影片，或完整的即時 3D 滾動故事
`references/ship.md`	放置媒體、手機檢查、打磨、速度、聯絡表單、部署、網域、SEO 以及上線檢查清單

未來感網頁設計