Killer Design

這個技能設定的門檻是建立一個讓人們載入後會思考「哇」的網站：一個頂尖工作室可能會為這個專案製作的網站。整潔、正確且有品味是基本要求，而不是目標。一個僅僅避免錯誤的頁面是會被遺忘的。三個習慣可以讓你達到這個目標，而這個技能正是圍繞它們建立的：

在撰寫程式碼之前決定設計。 從未做出決策會導致網站看起來千篇一律。字型、顏色和版面配置會預設為每個範本使用的內容。一個簡短的、基於主題（或品牌，如果有的話）的書面方向，能為之後的每個選擇提供理由。
設計一個令人驚嘆的時刻。 為第一個畫面提供一個核心亮點，根植於概念之中，讓人停下來：一個即時展示、大膽的字體排版、回應游標的光線、隨著滾動而建構的場景。將它執行到高標準，並讓周圍的一切保持平靜，以便讓它有發揮空間。請參閱 references/motion-and-wow.md。
檢視結果。 盲目編寫的 CSS 總是會有問題：狹窄的行動版佈局、薄弱的層級結構、沒人能閱讀的灰色文字、拖沓的動畫。渲染頁面（包含動畫），像評論家一樣審視它，解決問題，然後再次檢視。

工作分為六個步驟：理解專案、設定設計方向、撰寫內容、建置、檢視截圖並修正，然後打磨並交付。重新設計則需要先增加一個盤點步驟（請參閱「重新設計現有網站」）。

1. 理解專案

在提問之前，先閱讀所有已存在的內容。這包括 README、文件、套件或應用程式元資料、現有文案、標誌和品牌檔案、螢幕截圖，以及任何 DESIGN.md。釐清：

這是什麼，用一個陌生人能理解的一句話說明。
誰會來訪問，他們需要決定或做什麼。 指出單一的主要操作：安裝、預購、註冊、聯絡我們。
具體細節：實際的指令、數字、名稱、時間、地點、功能、限制、故事。這是文案和視覺效果的原始材料，具體細節能防止網站感覺過於通用。
個性：三個形容詞，以及一個它不是的事物。「精確、安靜、值得信賴；不花俏。」
限制條件：主機服務（例如靜態 GitHub Pages）、任何必須保留的內容，以及現有的品牌資產。
記錄下來的意圖：README 或文件所說明的網站用途，以及它刻意省略的內容（「一個頁面，一個連到 GitHub 的按鈕；完整列表放在別處」）。那是某人已經做出的決定。遵循它，並將任何超出範圍的內容作為提案在交付時提出，而不是直接實作出來。
是否存在品牌系統：品牌指南（BRAND.md、樣式指南、品牌儲存庫）、設計標記、DESIGN.md，或是一套一致的、已完成的品牌藝術作品（社交卡片、橫幅、README 封面、現有網站）。如果存在，步驟 2 的運作方式會不同。請參閱下方的「在現有品牌下工作」。

只向使用者詢問你無法找到或合理推斷並且會改變設計的事情。最明顯的例子是產品實際的功能。對於其他所有事情，做出合理的判斷並在交付時列出你的假設。對他們來說，對一個真實的頁面做出反應比回答一份問卷要容易得多。

2. 設定設計方向

如果專案已經有品牌系統，那麼它的品牌就是方向。請跳到「在現有品牌下工作」並在完成步驟 3 後再回來。以下是針對需要發明設計的專案。

「乾淨現代」不是一個方向。它是你沒有做出任何決定時得到的結果。

在主體中尋找概念。 問問這個專案存在於哪個世界。一家小提琴修理工作室會讓人聯想到雲杉和清漆、手寫標籤、精確的圖紙。一個城市開放資料入口會讓人聯想到運輸地圖、標誌系統和時刻表。一個攀岩館會讓人聯想到地形圖、粉筆和路線難度等級。超越最初聯想，找到具體的東西：「紙和墨水」幾乎適用於任何事物，而「1950 年代目錄中的一個種子包裝」則不然。這個概念應該塑造字體、色調、質感和佈局。它不應該變成剪貼畫或雙關語。

草擬三個真正不同的方向，每個用一兩行描述，變化概念、字體、色溫和佈局態度。然後選擇最適合目標受眾和個性的一個。首先想到的想法通常最為通用，這就是為什麼你應該寫三個。將選擇的方向與本文檔末尾附近「什麼讓網站看起來像 AI 製作的」進行比對。如果它不過是常見的色板加上常見的章節，那就再進一步推敲。

選擇令人驚嘆的時刻。 問問關於這個專案，單一最有趣的真實事情是什麼，以及第一個畫面如何能展示它而不是把它說出來。寫下兩三個候選時刻，並選擇最符合概念且你能優美執行的一個。閱讀 references/motion-and-wow.md 以獲取技術選單和經過測試的配方。然後誠實地問問自己，看到這個的人是否會說「哇」或「不錯」。如果答案是「不錯」，那就更大膽一點：在規模上做得更大，創造更強烈的對比，讓這個時刻更加生動。

將方向寫下來，放在網站根目錄的 DESIGN.md 中，使用下面的範本。這個檔案能讓未來的頁面和未來的會話保持一致。如果 DESIGN.md 已存在，則遵循並擴展它，而不是發明一個新的外觀，除非使用者要求一個新的方向。

在選擇字體和顏色之前，請閱讀 references/typography.md 和 references/color.md。它們包含了能避開常見預設選項的字體搭配和色板方法。references/layout.md 涵蓋了超越「主視覺加三張卡片」的版面構成。

# 設計：<專案>

## 概念
一兩句話：這個世界所處的領域以及訪客離開時應帶走的感受。

## 受眾與主要操作
誰來訪，他們需要知道什麼，我們希望他們做的一件事。

## 字體
顯示用：<字體族系、字重>，以及原因。正文用：<字體族系、字重>，以及原因。等寬字體，如果有的話。
縮放：基礎尺寸和比例（來自 scripts/scale.mjs）。

## 色彩
角色 -> 值：背景、表面、文字、次要文字、線條、強調色、強調色上的文字、焦點色。
使用規則（例如「強調色僅用於主要操作和啟用狀態」）。

## 佈局
網格與寬度、章節節奏、整體態度（編輯式、密集、寬敞、不對稱……）。

## 標誌性特點
人們會因為這一兩項設計而記住這個網站。

## 令人驚嘆的時刻
是什麼讓人在第一個畫面停下，以及它是如何運作的。也需要考慮在無 JavaScript、減少動畫以及手機上的表現。

## 圖像與質感
視覺元素是什麼以及如何製作，考慮到現有資產。

## 動畫
什麼會動、如何動以及動多少。尊重減少動畫的偏好設定。

## 語氣
文案聽起來如何；該用的詞和該避免的詞。

## 考慮過的替代方案
另外兩個方向，各一行，以便使用者可以重新導向。

選擇一個方向並開始建構。不要停下來要求使用者在抽象概念中做選擇。在交付時列出替代方案，這樣他們就可以在看到真實頁面後重新導向。

3. 先撰寫內容

版面應該跟隨內容。圍繞著假文設計的佈局會產生通用的區塊，而通用的文案甚至會讓一個好的佈局看起來像個範本。在佈局任何東西之前先寫下真實的文字：

標題：用簡單的文字說明這是什麼，或是訪客會得到什麼改變。具體優於巧妙。「在里茲任何一個公共網球場預訂場地」勝過「提升你的球技」。
使用專案的具體細節：真實的指令、真實的數字、真實的名稱、實際的時間和地點。
刪除市場行銷用語：解鎖、提升、無縫、授權、革新、強化、輕鬆、尖端、穩健、槓桿、改變遊戲規則、「將 X 提升到新層次」、「在當今快節奏的世界」。如果一個句子可以出現在任何網站上，就改寫它。
同時避免 AI 的句子結構和 AI 用語。 注意：
- 每個章節標題都建立在相同的兩拍公式上（「一個二進位檔案。選擇取得方式。」、「立即取回，無論是現在還是過去。」）；
- 「沒有 X。沒有 Y。只有 Z。」；
- 三個形容詞連用；
- 每個標題都有一個雙關語。
一個樸實的標籤（「安裝」、「還原快照」）通常比一個聰明的句子更強大，而且它讓那個精心設計的標題有脫穎而出的空間。
按鈕標籤要說明會發生什麼事：「下載應用程式」、「預訂座位」、「預約維修」，而不是「開始使用」或「了解更多」。
絕不將虛構的事實呈現為真實的。 沒有虛構的價格、地址、時間、統計數據、推薦、客戶標誌或「受到 10,000 個團隊信賴」。這些是使用者自己的專案，捏造的聲明是一種責任，而且往往會不小心被發佈出去。當一個章節確實需要一個你沒有的資訊時，放一個可見的佔位符，例如 <span class="todo">[價格]</span>，並將其樣式設定為突出顯示，然後在交付時列出每個項目。

4. 建置

先定義標記。 在任何元件之前，在 styles.css 的頂部將系統定義為 CSS 自訂屬性：色彩角色、字體階層、間距階層、圓角半徑、陰影、文字度量以及動畫時間。使用以下指令產生流體字體和間距比例：

node <skill-dir>/scripts/scale.mjs --min-ratio 1.2 --max-ratio 1.333   # 選擇符合方向的比例

之後，使用標記而不是硬編碼的數字。硬編碼的數字會漂移，而這種漂移正是讓間距在各處都略微失準的原因。

這些腳本需要 Node 20 或更新版本。如果 node 不在 PATH 中，請改用 ~/.cache/killer-skills-node/node.exe 執行它們：Windows 安裝程式在缺少 Node 時會將其安裝在該處。

字型。 從 killer-skills 字型包中自託管它們，該包包含了 references/typography.md 中提到的所有字型：

node <skill-dir>/scripts/fonts.mjs list                       # 列出字型家族及其字重或軸
node <skill-dir>/scripts/fonts.mjs add path/to/site "Newsreader" "IBM Plex Mono" --weights 400,600

add 會將檔案及其許可證複製到 assets/fonts/ 並寫入 assets/fonts/fonts.css。在 styles.css 之前連結該樣式表，並且只預載第一個畫面依賴的字型（腳本會輸出行）。它不需要網路，完成的網站不會向字型主機請求任何資源。如果該包未安裝或沒有該字型，請按照 references/typography.md 中的描述從 Google Fonts 載入。

檔案結構。 對於一個新網站，除非專案另有規定：

site/            (或者使用者/專案想要放在的任何位置)
  index.html
  styles.css
  DESIGN.md
  icon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, manifest.webmanifest
  assets/        (svg, images, fonts/)
  script.js      (令人驚嘆的時刻和小的互動；保持簡短)

HTML。 使用語意化的地標元素（header、nav、main、帶標題的 section、footer），一個 h1，並按順序使用標題。使用 <button> 進行操作，使用 <a> 進行導航，並為每個表單欄位提供 <label>。每個頁面都需要 lang 屬性、viewport meta 標籤、一個真實的 <title>、一個 meta 描述、Open Graph 標籤，以及一整套 favicon 和應用程式圖示。

CSS。 使用純粹的現代 CSS，行動優先：

使用 grid 和 flex 進行佈局，並使用內在模式，例如 repeat(auto-fit, minmax(min(100%, 18rem), 1fr))。
透過 clamp() 使用流體標記，閱讀度量保持在 60–70ch 左右。
符合設計的 :focus-visible 樣式。懸停效果應放在 @media (hover: hover) 內部。
在標題上使用 text-wrap: balance，在段落上使用 text-wrap: pretty。
@media (prefers-reduced-motion: reduce)。

JavaScript。 在它能提升體驗的地方使用：令人驚嘆的時刻、指針效果、切換主題的動畫、即時展示、行動版導航切換（一個 <button aria-expanded> 或 <details>）。保持使用原生、手寫的程式碼，放在網站自己的檔案中：不使用框架、CDN，也不從其他地方載入任何東西，而且通常少於一百行。將其建構為一種增強功能。內容必須在沒有 JavaScript 的情況下可見。切勿在等待腳本揭示內容時將章節隱藏為 opacity: 0，因為當腳本失敗時，內容就消失了。對於 CSS 能做的任何事情（入場動畫、打字效果、滾動驅動場景），優先使用 CSS。

動畫。 其他地方的所有動畫保持快速且安靜：150–250ms 的懸停和焦點轉場效果、小型的入場動畫。這種平靜正是讓令人驚嘆的時刻得以發揮作用的關鍵。每個動畫都放在 @media (prefers-reduced-motion: no-preference) 內部或一個 matchMedia 檢查之後，而減少動畫的版本則是一個完整的靜態設計。配方和效能規則在 references/motion-and-wow.md 中。

Favicon 和應用程式圖示。 像設計主視覺一樣認真地設計 favicon：它是設計中最常被看到的部分。在 16px 下，文字標記會糊成一團，因此大多數標記都需要一個縮小版本用於小尺寸，例如一個粗體字母或一個形狀，放在一個在淺色和深色分頁下都能閱讀的磁磚上。閱讀 references/favicons.md。然後從一個 SVG 建構整套圖示並檢查它們：

node <skill-dir>/scripts/icons.mjs build mark.svg --out path/to/site --bg "#hex" --name "Site" --theme-color "#hex"
node <skill-dir>/scripts/icons.mjs audit path/to/site     # 預覽表：1倍/2倍、淺色/深色分頁、主畫面圖示

不使用圖庫照片的視覺效果：

軟體：使用 HTML 和 CSS 建構產品的實際介面，例如一個帶有真實指令和輸出的樣式化終端機工作階段，或是一個帶有真實資料的應用程式視窗。這比任何插圖都更有說服力，並且能保持品牌一致性。
將字體排版作為圖像：超大標題、數字、引文、像印刷卡片一樣設置的選單。
SVG 和 CSS：幾何圖形、圖表、地圖、圖表、圖案、顆粒紋理（低透明度的 SVG feTurbulence 濾鏡）、具有一致筆畫寬度的簡單內聯圖示。
謹慎手繪真實事物。 食物、人物、動物、植物、建築物和工具是手寫 SVG 最常失敗的地方。比例會偏移，而一個細節（麵包上的刀痕、一個亮點、一隻手）會被解讀為其他東西，並以錯誤的理由吸引注意力。一個笨拙的插圖比沒有插圖更傷害頁面。因此：
- 優先使用程式碼能完美勝任的視覺效果：樣式化的終端機視窗、應用程式介面、校對過的排版、幾何圖形。它們是屬於這個世界的真實事物。

…（內容因截斷而未完）

Killer Design - 令人驚嘆的網頁設計