設計展示網站是做什麼的？

將簡略的簡報與零散的來源素材，轉化為一個對其主題、受眾、語言及目的都有高度針對性的網站。支援目標明確的登陸頁面、多頁面網站以及互動式網路產品。將此技能作為工作流程主軸；並與使用者明確指定的任何設計、瀏覽器、圖片、產品介面或框架技能結合使用。

核心規則

設計一個轉換體驗，而非一個吸引人的區塊集合。
從業務、受眾、地點、產品和真實圖像中衍生出品牌識別。除非使用者要求，否則請勿重複使用先前專案的視覺風格。
區分已驗證的事實與創意解讀。切勿虛構地址、價格、營業時間、評論、客戶、獎項、功能或效能聲明。
保留使用者的原始素材。在專案內最佳化副本，並記錄產生或暫存的圖像。
根據受眾和簡報選擇語言。若無證據，切勿假設使用韓文、中文、英文、日文或雙語內容。
將本地化的排版、斷行、標點符號、閱讀順序、內容密度以及文化上熟悉的互動方式視為設計的一部分。
偏好一個強而有力的藝術方向，而非各種流行效果的拼貼。
當使用者授予創意自由時，應推斷並承諾一個合理的方向，而不是要求使用者為您設計網站。
當要求實作時，請確保原型真正可點擊且可展示。除非使用者僅要求策略，否則不要停留在書面概念。
保持所有必要資訊在無動畫狀態下可見，並尊重使用者減少動畫的偏好。

選擇參與模式

僅概念：產出定位、頁面流程、視覺方向及關鍵畫面描述。除非要求，否則請勿修改檔案。
原型：建立一個響應式、可執行的單頁或多頁網站，具備可運作的主要互動及簡報品質的內容。
重新設計：先審核現有頁面和儲存庫，保留功能性需求及現有技術棧，然後改善介面。
打磨：檢查線上或本機頁面，找出影響最大的差距，實作重點變更，然後重新驗證。
網路產品：設計任務流程、狀態、導覽及資料呈現；當工作偏向應用程式時，將此技能與產品介面技能搭配使用。

當沒有儲存庫時，選擇最簡單且可維護的技術棧以符合互動需求。當有儲存庫時，檢查其慣例並重複使用。

工作流程

1. 確定成果框架

僅解決會實質改變結果的決策：

受眾和地區設定；
網站類型、內容規模，以及體驗是單頁、多頁還是類似應用程式；
主要及次要的轉換動作；
交付形式及所需的互動；
來源素材及使用權限；
期望的第一印象及不可接受的方向；
啟動限制，例如技術棧、路由、視埠或連接埠。

一次最多詢問三個簡潔的問題。如果使用者授予創意自由且證據充足，則陳述合理的假設並繼續進行。

對於簡略的簡報、地圖連結或混合的本地素材，請在收集內容前閱讀 discovery-and-research.md。

在選擇資訊架構、處理中文、英文、日文、韓文或建構多語言體驗時，請閱讀 site-types-and-localization.md。

2. 建立事實來源總帳

檢查提供的連結、地圖列表、現有網站、檔案、圖像和影片。記錄：

已驗證的值；
其來源及驗證日期；
是否可以直接發布；
任何需要業主確認的事項。

將營運事實集中存放在資料或內容檔案中，而不是分散在各個元件中。明確標記佔位符。如果公開資訊有衝突，請優先採用業主所有或最近更新的來源，並標記該衝突。

3. 定義轉換故事

在選擇視覺效果之前，先撰寫以下內容：

訪客在十秒後應記住的一句話；
主要呼籲行動及一個可選的次要呼籲行動；
從第一印象到行動的信念階梯；
三到五個已有證據支持的證明點；
消除猶豫所需的最低限度資訊。

在實作專案中建立或更新 PRODUCT.md，內容包括受眾、目的、定位、轉換、證明、語氣、反例參考及無障礙期望。

4. 建立具體的藝術方向

命名一個概念，該概念結合了類別真相、情感承諾及一個有意的對比。有用的對比範例包括：充滿活力但有紀律、在地化但具編輯性、技術性但人性化、或高端但熱情。

在實作前設定設計刻度：

設計變化性，1–10；
動畫強度，1–10；
資訊密度，1–10；
色彩策略；
攝影策略；
字體策略。

建立或更新 DESIGN.md，內容包括概念、代碼記號、字體、佈局、圖像處理、動畫及響應式行為。在選擇概念、頁面架構或媒體處理方式時，請閱讀 direction-and-structure.md。

避免自動化的視覺預設值：通用的黑色霓虹健身風格、通用的米色餐廳風格、裝飾性玻璃面板、隨機的便當盒網格、無意義的光暈、過多的藥丸形狀、統一的卡片以及重複的淡入區塊。

5. 圍繞決策組成頁面

根據網站目的選擇資訊架構。對於多頁面工作，在設計個別區塊的樣式之前，先定義最小的完整網站地圖、全域導覽、特定頁面目標以及跨頁面的轉換路徑。對於網路產品，優先考慮任務完成和狀態覆蓋，而非行銷節奏。

僅使用訪客決策所需的區塊。常見的轉換頁面流程是：

帶有承諾和主要動作的英雄區；
立即的證明；
標誌性產品或產品價值；
經驗、流程或差異化因素；
消除異議的實用細節；
位置、聯絡、預約、購買或詢問；
決定性的最終呼籲行動。

透過比例、節奏、裁切、留白和編輯對齊來變化構圖，而非透過任意的元件多樣性。在行動裝置上，適當時將最有價值的動作保持在易於觸及的位置，例如通話、導覽、預約、購買、註冊、搜尋、儲存或繼續。

6. 將內容視為介面撰寫

首先使用受眾的主要語言撰寫；僅在需要時才加入其他地區設定。
使用簡短、直接的標題以符合視覺節奏。
用有支援的具體資訊取代一般性聲明。
保持呼籲行動標籤文字直白且文化上熟悉。
在真實寬度下測試目標語言的斷行；不要使用英文佔位符來確認版面。
獨立測試每個支援的地區設定。不要假設翻譯後的內容能符合來源語言的元件結構。
使用真實內容而非假文。

7. 建構原型

使用語意化的頁面結構及可重複使用的代碼記號。
使連結、通話、導覽、表單、選單、篩選器、圖庫和模態視窗達到原型所暗示的運作水準。
將大圖像最佳化為適當的網路格式和尺寸；保留有意義的裁切焦點。
使用動畫來釐清層級、揭示空間關係或強化品牌特色。保持動畫簡潔且可中斷。
提供鍵盤焦點、有意義的替代文字、足夠的對比度、44px 的觸控目標以及感知安全區的行動裝置控制項。
當 JavaScript 動畫未執行時，保留必要的內容。

在實作或最終審查前，請閱讀 prototype-and-qa.md。

8. 在真實瀏覽器中驗證

不要僅因建置成功就宣告完成。至少驗證以下項目：

寬桌面，約 1440px；
中階/平板寬度；
行動裝置，約 390px；
窄行動裝置，約 375px；
一次減少動畫或鍵盤操作測試。

檢查英雄區和整個頁面。檢查目標語言的文字換行、圖像裁切、水平溢出、安全區域、固定控制項、主控台錯誤、連結、表單、選單、焦點順序、載入行為以及最終呼籲行動的可及性。修復發現的問題並重複受影響的檢查。

預期交接成果

對於可運行的原型，交付：

可運作的原始碼及成功的產品建置；
本機預覽或明確的執行指令；
當專案需要時，提供 PRODUCT.md 和 DESIGN.md；
營運事實與媒體的來源/佔位符備註；
一份已實作的互動及已驗證的視埠的簡潔列表；
一份關於可能在啟動前變更的事實的簡短業主確認清單。

在最終回應中，以預覽或主要成品作為開頭。僅提及最重要的設計決策和驗證結果。

品質檢查點

在以下所有條件都滿足之前，請勿進行交接：

針對性：該網站無法在不重新設計的情況下，貼上隨機競爭對手的標籤。
真實性：聲明和媒體是真實的、有來源的，或清楚標示為暫定。
轉換：下一個動作在幾秒內顯而易見，且在行動裝置上依然容易操作。
層級：每個視埠由一個主導想法支配；字體和圖像支援該想法。
響應式：構圖是有意適應的，而不僅僅是堆疊。
克制：動畫和效果有其作用；網站不應感覺像一個效果展示。
包容性：涵蓋鍵盤、對比度、觸控目標、減少動畫偏好及語意化結構。
可靠性：建置、主控台、素材和關鍵互動均經過驗證。

設計展示網站