alfianm/bukan-template

Bukan Template

像一間小工作室的設計師那樣工作——客戶曾因為「看起來像模板」而拒絕成品。客戶為觀點付費，而非為一個誰都能套用的框架付費。標準是：每個視覺選擇都能用「為什麼這適合這個客戶」來回答，而不是「因為通常都這樣做」。

有兩種糟粕。第一種是模板：紫色漸層、表情符號圖示、三個一樣的卡片、編造的數字。第二種出現在避免模板卻沒有加入設計之後：頁面只有純文字、細線條和空白，像是一張上了色的備忘錄。兩種對客戶來說都同樣難堪。這個技能對抗這兩種。

1. 先決定頁面類型

「好的」這兩個家族的標準相反，所以一開始就要在計劃中說清楚類型：

• 行銷頁面：登陸頁面、公司簡介、作品集、邀請函、產品網站。由不認識的人一次性閱讀；被評價的是印象、故事和媒體。遵循第 2–8 部分，然後第 9 部分。
• 工作工具：儀表板、CRM、CMS、管理後台、內部應用程式。由同一群人每天打開；被評價的是清晰度、有用的密度、以及決策速度。遵循第 2–8 部分，然後第 10 部分。

如果需求混合了兩者（例如展示儀表板截圖的產品落地頁），頁面依舊是行銷頁面；只有截圖內容遵循第 10 部分。

2. 從主題開始

在選擇色彩、字體或佈局之前，先寫三行：

• 擁有者是誰，以及它與競爭對手的差異。
• 誰會打開頁面、從哪裡來、以及他們在前 10 秒內想決定什麼。對於工作工具：使用者是誰，以及他們每天用這個工具做什麼決定。
• 主題世界中最具特色的一件事：材料、工具、場所、習慣、日常用語。

需求摘要通常只有一句話，而這就足夠開始了。自己把範圍縮小到某個地方的某種事業，在一段話裡說明你的假設，然後繼續。不要模仿本文件或 references/ 中的任何範例：被模仿的範例會出現在每個頁面上。在計劃之前最多問一個問題，而且只有在答案會改變方向時才問（例如是否有照片可提供）。其他填寫事項則在提交時處理（參見工作流程）。

兩個不同的主題應該導致不同的頁面，而差異來自這三行文字，而不是在同樣的框架上更換強調色。

3. 色彩

每個顏色都必須有來源。從主題世界的真實物體（材料、工具、包裝、制服、文件、工作場所）中取 4–6 種顏色，並用一句話寫下每個顏色的來源；無法解釋的顏色就還沒有存在的理由。將色板寫成名稱角色的記號（--base、--text、--accent），並附上深色模式的值。中性色不一定是灰色，且其色溫要與強調色一致。正文文字與背景的對比至少要 4.5:1，大文字至少 3:1。

必須避免的：

• 紫色/靛藍色的漸層（#6366f1 → #a855f7、文字漸層、紫色光暈、漸層的 Logo 或頭貼）。這是最明顯的 AI 生成頁面標誌。任何漸層只有在需求摘要要求，或者主題確實是關於光線或過渡時才值得使用。
• 行業刻板印象：海軍藍和橘色代表建築、綠色代表健康、企業藍色、黑色和紫色代表開發者。如果色板能從行業名稱猜出來，那就還沒有決定。如果來自材料的顏色剛好與刻板印象相同，就少量使用，讓主導色跳出刻板印象。
• 框架內建色板：Tailwind 內建的灰色階與強調色。類別可以使用，但顏色要自己定義。
• 此技能本身的簽名風格，會從測試中被發現，也必須同樣嚴格地懷疑：近乎黑色的背景加上一個黃色強調色（#E3B2xx）；所有標題使用全大寫的緊湊無襯線字體；以主題物體的 SVG 線條圖作為視覺時刻；象牙色紙質背景、深色墨水、磚紅色強調色、等寬字體用於標籤；對於聽起來「穩固」的需求使用大型襯線字體搭配黃銅色強調色；在奶油色背景上的編輯用襯線字體；青綠色、鼠尾草綠、薄荷綠或深綠色作為主導色，儘管主題並非綠色。在一個計劃中出現其中兩項就是習慣，而不是選擇。

強調色的數量規則因類型而異：行銷頁面使用一個強調色（第 9 部分），工作工具則將顏色作為數據（第 10 部分）。

4. 圖示

表情符號不是 UI 圖示：它在不同系統中渲染不同，不遵循色板，而且一眼就能看出是生成的。替代順序：如果圖示沒有增加意義則不使用（圖示適用於導航、狀態和動作，很少用於裝飾）；一組一致的 SVG 內聯圖示（Lucide、Heroicons、Phosphor、Tabler），粗細和大小相同，顏色為 currentColor；或者以統一風格自行繪製。圖示不會自動被放入粉彩色的圓形或方形中。

5. 字體排印

不要預設使用 Inter、Poppins、Roboto 或 Montserrat；根據字體的特質是否能回應需求摘要來選擇，並用一句話寫下理由。一或兩個字體家族，角色明確區分。有意義的級距（例如 1.25 或 1.333），正文行長不超過 80 個字符。不要在標題上給單個詞著色或使用漸層，也不要在每個標題上方放置小寫大寫標籤，除非有分類功能。

6. 文案與內容

從訪客的角度書寫，使用日常口語，而非廣告宣傳語。避免那些可以套用到任何業務的句子（「全方位解決方案」、「共創未來」、「專業且經驗豐富的團隊」）。

• 可以虛構內容，但不要虛構數據。 如果需求沒有提供內容，就製作具體且合理的內容（專案名稱、地點、具體服務）並標註為範例。如果需求中沒有，就完全不要編造數據（客戶數量、年資、評分、百分比）。
• 文案不要解釋設計本身。 關於顏色或形狀的理由存在於計劃和程式碼註解中，而不是在訪客閱讀的文字裡。
• 語言一致。 印尼文網站不使用「All rights reserved」、「Made with ❤️」、「Get started」。按鈕使用清晰的動詞，結尾不要有箭頭。其他語言的網站遵循同樣的原則。
• 照片與佔位符。 真實照片幾乎總是比任何裝飾都強大，所以先詢問是否有照片可用。如果還沒有，佔位符必須誠實：指定比例、填充來自色板的圖案或顏色、並標籤說明需要什麼照片。不是灰色方塊寫著「照片」，也不是假裝成圖片的漸層。不要從使用者無法控制的 URL 載入圖片。

7. 如果專案或品牌已存在

規則反轉：保留現有的顏色、字體和元件，除非使用者要求重新設計。先進行審計（專案結構、現有記號、其他頁面的模式、使用者是誰），用幾行寫下摘要，並讓新成果感覺來自同一個團隊。如果現有標識本身看起來像模板，就作為備註提出，不要默默更換。

8. 生產標準

• 所有狀態：載入中、空狀態（附帶有幫助的文字與後續動作）、錯誤狀態（附帶重試選項）、成功狀態；每個控制項都有停用樣式。
• 沒有偽控制項：看起來可運作的按鈕、篩選器、頁籤和表單都必須真正運作。無法運作的部分要清楚標記或不顯示，並在提交時說明。
• 語意化 HTML：nav、table、ul/ol、button、帶 href 的 a；標題層級合理；圖片具有替代文字。
• 可及性與響應式：鍵盤焦點可見、對話框可透過 Escape 關閉且焦點返回、響應式至 390px、寬內容在其容器內滾動、遵守 prefers-reduced-motion。
• 記號到處使用：顏色、間距、文字大小、圓角、陰影都定義一次。
• 誠實面對測試：不要聲稱執行了你沒跑的檢查。

9. 行銷頁面

模式不是問題；執行與內容才是。 編號、統計數據行、推薦、「向下滾動探索」、大寫標籤等，優秀的網站也會使用。差別在於三點：內容真實（照片、姓名、真實數字）、執行飽滿（大膽的尺度、流暢的動態、填滿螢幕的照片）、頁面會說故事。沒有這三點而避免模式會產生空洞的頁面；有這三點而使用模式則會產生獲獎網站。

每個頁面必須有： 一個在開場就牢牢抓住注意力的視覺時刻（精心構圖的大照片、極端尺度的字體排印、大膽的色彩區塊、或來自主題世界的形狀）、清晰的尺度對比、節奏（寬敞與緊湊交替、明亮與黑暗交替）、以及一個在頁面關閉後仍會被記住的事物。一個強調色，少量使用。測試標準：業主是否會自豪地展示它，以及它看起來是否像是設計工作室的作品，而不是從文件匯出的？如果懷疑，通常缺乏的是勇氣，而不是規則。

結構。「英雄區塊搭配標題、副標題、兩個按鈕、一行數字；三個卡片；推薦；全色 CTA」的框架就是模板。將其組織成一個故事：訪客感受到的問題、解答、證據、提議，每個部分都銜接到下一個。三個東西不一定非要是三個一樣的卡片。編號只有在作為一種嚴格的構圖系統執行時才使用，而不是卡片上的小數字。統計數據和推薦只使用真實數據，如果有的話，要顯示得大而完整（姓名、可驗證的來源）。結論通常用清晰的聯絡方式比「準備好開始了嗎？」區塊更有用。按類型：登陸頁面有一個訊息和一個主要行動；公司簡介透過專案、人員和真實地址證明可信度；作品集讓作品成為主角，而不是裝飾。

此技能作者挑選的品味參考：fitosauna.com、aikah.robertoattanasio.com、bhavanakulkarni.com、mediaquestweb.com。共同點：用充滿螢幕的事物開場；字體排印作為主要元素；到處是真實照片和影片；流暢且感覺昂貴的動態；可驗證的證據（有日期的評論、比較表格、保證）；個人化的聲音；一個重複出現的人手工藝元素。目標方向是電影感、敘事性、充滿媒體。沒有真實照片或影片，結果就無法達到這個標準，並且一開始就要跟使用者說明。

動態。 沒有動態的頁面感覺像印刷品。使用三種類型，每種都要有理由：

• 頁面開啟時一個簽名式的動態，源自主題運作或移動的方式，在一到兩秒內完成。
• 所有互動元素的 150–250 毫秒微過渡。
• 為序列內容準備的輕微出現：位移 8–12 px、300–450 毫秒、項目間隔 40–80 毫秒、進入畫面時觸發一次；不是用於整個區塊。

可額外使用的詞彙，每個頁面兩到三個，每個都要有理由：資產載入期間的簡短開場或倒數計時、逐行揭示的標題、跑馬燈、隨滾動水平移動的圖庫、暫時鎖定區塊同時更換內容、無聲的背景影片。如果動態是概念核心，可從 cdnjs 使用 GSAP 並鎖定版本；一兩個效果用 CSS 和少量 JS 就夠了。在寬螢幕上使用精準指標的平滑滾動：捕捉 wheel（非被動；忽略 ctrlKey 和水平移動），將 deltaY 加到目標值，在 requestAnimationFrame 中以 now += (target - now) * 0.09 移動；觸控、鍵盤和滾動條保持原生；錨點連結指向目標並移動焦點；在 prefers-reduced-motion 或 pointer: coarse 時跳過。Easing 使用 cubic-bezier(.16,1,.3,1)，持續時間為 0.9–1.2 秒。仍然一眼看出是生成的：每個區塊 40px 淡入、所有照片的視差、漂浮的漸層球體、無功能的自訂游標、自動打字文字、到處懸停時卡片升起。開場和鎖定區塊必須可跳過，且內容不依賴動態來被閱讀。滾動時出現的內容只有在腳本添加類別（例如 .js .muncul）後才隱藏，並在 prefers-reduced-motion 時立即顯示；沒有 JavaScript 時，所有內容仍然可見。

10. 工作工具

緊湊而有意義，而非安靜而節省。 儀表板模板的問題不在於許多元件或顏色，而在於這些元件和顏色沒有任何意義：粉彩色的卡片、每個不同顏色的數字卡片、lorem ipsum、新形態主義。

顏色就是數據。 可以使用多種顏色，只要每種顏色在所有元件和畫面中都有一致的意義：序列性的事物（階段、優先級）使用同一色相從淺到深；類別使用分開的色板，最多六種；狀態使用稀有顏色，紅色只用於今天必須處理的事項，琥珀色用於有書面閾值的警告。背景中性，品牌顏色只用在 Logo、選中選單、主要按鈕和主要數據系列。顏色絕不單獨傳達意義。

每個數字都要回答「然後呢」。 與其比較對象一起顯示（目標、今日進度、前期）；移除那些對決策無幫助的炫耀性數字。格式符合語言習慣：Rp 2,58 M、Rp 372 jt、1.284、38%。

起始佈局，12 欄網格：KPI 行（3–5 張卡片）；寬圖表搭配側邊面板；寬工作表格搭配側邊面板；活動與細節。根據最重要的決策改變順序；第一行要在 5 秒內回答「今天好還是不好」。

• KPI：大數字、一句比較文字、一個符合數字類型的小視覺（帶目標線的進度條、堆疊長條圖、迷你趨勢線、兩個比較用長條）。不要使用全色卡片、圖示在角落、或者「向上」/「向下」箭頭（使用文字說明，例如「比上週成長」或「落後目標」）。
• 圖表：有標籤的軸、最小值/最大值、註釋說明尖峰或下降的原因。不要使用 3D、光澤感、或立體投影。不要使用甜甜圈圖作為儀表板裝飾。
• 表格：固定首行、可調整列寬、行在懸停時高亮、文字截斷時顯示完整工具提示、自訂列顯示/隱藏。無聊的表格比華麗但混亂的表格好。
• 表單：單列、標籤在上方、欄位順序符合邏輯輸入流程、錯誤訊息貼近欄位且明確指出問題。
• 空狀態與錯誤：解釋為什麼沒有數據以及如何解決（「還沒有活動。建立第一個專案來開始。」而非「無數據」）。錯誤訊息必須說明問題，使用「重試」按鈕，而不是「請稍後再試」。
• 載入狀態：骨架螢幕（灰色矩形，形狀與內容結構相同的動畫），而不是旋轉圖示。
• 無障礙：所有資訊都可以透過鍵盤導航和螢幕閱讀器存取。顏色並不足以傳達資訊（例如，紅色狀態文字必須包含「紅色」或使用圖示）。
• 不用 JavaScript 也能運作（如果可能的話）。

11. 工作流程

• 計劃：在產生任何程式碼之前，先寫一個計劃，包括：頁面類型、前三行（主題）、色彩來源與色板、字體選擇與理由、圖示集、頁面結構（說明如何作為故事組織，而不僅僅是區塊名稱）、動態計劃（使用哪些類型的動態、每個項目放置位置、使用 GSAP 或 CSS 的理由）。計劃應在程式碼之前產生。
• 建立：在一個通過驗證的 HTML 檔案中實作（Tailwind 為單一 HTML 或 React 元件，CSS 為單一檔案）。不要使用 index.html，使用具體的名稱。
• 測試：在 scripts/ 資料夾中執行靜態檢查與瀏覽器測試腳本。如果測試失敗，根據回饋修改直到通過。
• 提交：在提交時，包含：產生的文件、測試結果摘要、執行計劃與最終頁面之間的偏差說明（使用原因），以及提供給使用者但不在需求中的任何對話問題。

技能作者：Alfian Mahdi。