過去使用 AI 建立網站時，我們常把注意力放在提示詞：需求要怎麼寫得更清楚、風格要怎麼描述得更完整。但當 AI 已經能生成完整頁面、理解截圖並持續修改前端，真正困難的問題正逐漸從「AI 會不會做」變成「AI 應該做成什麼樣子」。
Prompt 能說清楚需求，卻不一定能傳達品味
「做一個現代、專業、有科技感的網站」看似合理，但其中仍留下大量未決定的視覺問題：字體性格、版面密度、影像角色、動態節奏、留白尺度、卡片比例、手機版重排方式。當這些決策沒有被指定，AI 往往會回到最常見、最安全的平均解。
這也是為什麼抽象形容詞很容易帶來相似結果。問題不一定是 AI 不會設計，而是我們讓它自行猜測的設計空間太大。
從提示工程到脈絡，再到視覺參考
三者不是互相取代，而是共同組成更完整的 AI 設計環境。即使 AI 已經知道品牌定位與使用者需求，它仍可能不知道「理性但實驗性」或「高級但自然」到底應該長什麼樣子。這時候，視覺參考就開始扮演更具體的角色。
參考不是複製：先拆，再用
最簡單的做法是丟一張截圖說「照這個做」，但這其實會把很多不同層級的決策混在一起。更成熟的做法，是先說清楚究竟在參考什麼：
- 版面構圖：Hero 的比例、不對稱關係與資訊層級。
- 字體排版：標題尺度、字重對比與閱讀寬度。
- 動態與互動：Scroll、Hover、Cursor、Transition 的節奏。
- 材質與影像：攝影、Texture、3D、Shader 或圖片處理方式。
- 資訊密度：留白、段落節奏與頁面呼吸感。
- 響應式策略：手機版如何重新組織，而不只是把桌面版往下堆。
一個網站也不必只參考一個網站。A 可以提供 Hero 構圖，B 提供 Typography，C 提供 Scroll Interaction，再由自己的品牌、內容與 UX 規則負責把它們整合成新的系統。
Codrops Creative Hub：從靈感庫變成參考庫
像 Codrops Creative Hub 這類 Creative Web 資源，在 AI Coding 時代的價值不只在「看效果」。它可以幫助設計者先找到互動方向，再讓 Coding Agent 依自己的技術架構重建概念。真正重要的問題也因此從「這個效果怎麼做」轉向「哪個效果值得用、應該取哪一部分，以及怎麼讓它服務品牌」。
這種工作方式也提醒我們：參考不等於直接搬用外部作品。程式碼、圖片、字體與 Demo 都可能有各自授權；而高負載的 WebGL、WebGPU、Physics 或大量後處理，也未必適合一般品牌網站。
參考工程的五個步驟
選擇
先回答「為什麼需要這個參考」。是構圖、字體、動態、材質，還是手機版策略？
拆解
把完整網站拆成可描述的設計訊號，避免把整站當成單一風格。
約束
清楚寫出不要帶入的元素。參考某個 Scroll Rhythm，不代表也要它的色彩、品牌或 3D Scene。
整合
把品牌、內容、UX Context、視覺參考與技術限制放在一起，形成新的設計方向。
驗證
回頭檢查成果是否真正保留指定特徵，以及手機、內容變長與不同狀態下是否仍成立。
Negative Reference 同樣重要
好的參考工程不只說「我要像什麼」，也要說「不要變成什麼」。例如：參考某個網站的不對稱排版，但不要它的紅色系；使用某個 Demo 的轉場概念，但不要複製品牌素材與完整場景。
這能大幅降低 AI 把參考誤解成模板的機率，也更接近真正的藝術指導。
從收藏網站，進化成 AI-ready Design Reference System
未來的收藏不一定只有網址與截圖，而可能同時記錄：Reference Type、適用場景、要借用什麼、不要借用什麼、色彩、字體、互動、技術與效能備註。這時候，靈感收藏才真正變成 AI 可以理解與重組的設計系統。
常見問題
Reference Engineering 是正式的 AI 專業術語嗎？
本文把它當作一套描述新興 AI 設計工作方式的方法框架，而不是宣稱它已經具有統一產業標準或固定定義。
它和 Screenshot-to-Code 一樣嗎？
不一樣。Screenshot-to-Code 著重重建畫面；參考工程更在意為什麼選這個參考、要參考哪一部分、如何和其他參考組合，以及哪些部分不能帶入。
可以同時使用多個 Reference 嗎？
可以，而且通常更靈活。重點是要指定角色，例如 A 只參考 Layout、B 參考 Typography、C 參考 Motion，避免不同風格被無差別混合。
Reference 越多越好嗎？
不一定。過多、互相矛盾或沒有優先順序的參考，反而會增加模糊性。重點是選擇、拆解、約束與排序。
使用其他網站作為參考會有版權問題嗎？
參考設計原理與直接複製程式碼、品牌素材或完整視覺是不同的事。實際使用外部素材、程式碼、字體與 Demo 時，仍應檢查原始授權條件。