magholmes/cool-style

cool-style 是做什麼的？

從數百個獨立網站的仔細觀察中提煉——個人網站、網路藝術、字型鑄造廠、檔案庫、工作室、小型工具、期刊——這些網站由那些收藏網路最美角落的人所保存（references/method.md）。這裡面沒有任何潮流報告。而是那些網站實際在做的事情，經過計數。

一個模板回覆的是「一個網站看起來像什麼？」而這些網站中的每一個，回應的是「這個網站是關於什麼？」——然後讓答案決定佈局、字體、顏色和那個唯一會動的東西。

這個典範從粗糙到精準——一個有著平鋪 GIF 背景的 Neocities 神殿，和一個像素級精準的字型鑄造廠，兩者都在其中。兩者都很酷。缺少的是中間地帶：那個可以關於任何事物的網站。

開始之前

1. 先找到想法（下一節）。在你用一句話說出想法之前，不要有任何佈局、調色盤或字型。
2. 從下方表格中選擇一個原型，並且如果是全新建置，從它的起手式開始：node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>。
3. 看看真實的範例。 node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag or word> 會印出經過研究的網站中，做出某個動作的最佳範例（--tags 列出詞彙；--random 5 隨機取得五個以獲得靈感）。
4. 如果有其他團隊風格正在運作（例如 magnus-style），則在代幣（字型、顏色、時間）上優先採用該風格。使用此技能是為了想法、結構和動作。

找到想法

問問（自己，或他人——一次問一個問題）：

1. 用一句簡單的話來說，它是什麼？ 不是它的「用途」。而是「一根燈柱上的麥克風聽到的所有歌曲的日誌。」、「來自太陽能雜誌的筆記。」
2. 它像什麼？ 它已經相似的事物、地方或系統：日曆、有營業時間的商店、試算表、花園、收音機、書本版權頁、戒指、書桌。這將成為容器（法則 1）。
3. 有什麼關於它的事實，是模板會隱藏的？ 它的重量、它的年齡、它的營業時間、它的資料、它製作時的天氣、其中事物的數量、誰製作了它。
4. 那一個會移動或改變的東西是什麼？ 選擇一個。時間、閱讀進度、訪客的游標、隨機性、其他訪客。
5. 是什麼會讓某人把這個連結發送給朋友？ 這就是標誌性動作。其他一切都會變得安靜，以便它能被看到。

將答案寫在專案的頂端（index.html 中的註解即可）。如果某個答案是「沒有」，那這個網站還沒準備好設計——它需要內容。

十二法則

1. 讓形式扮演主題。 最強大的網站使用主題本身的形狀作為容器。一篇關於海浪的文章永遠滾動，每個段落升起又退回 (#214)。一份機器學習資料集指南以試算表的形式呈現 (#481)。一段介面歷史放在一個重建的 1984 年 Mac 視窗中 (#501)。一個監控音樂日誌是一個單色 LCD 螢幕 (#76)。一個每日連環漫畫的檔案庫是一年的日曆 (#21)。測試：這個佈局能否在不改變的情況下容納一個不同的主題？如果可以，那就是一個模板。
2. 一個想法，貫穿每一層。 這個隱喻要深入導覽、標題、圖片，甚至頁面重量。Our Networks (#232) 將其網站地圖印成 tree 指令，用 ASCII 畫出筆電，且重量僅 39 KB。通常整個想法就是一個廉價的機制，完全投入：36 個隱藏一首詩的 CSS 瓷磚 (#228)，由一天的風力資料驅動的字距 (#669)。
3. 網站是一個地方，而不是一本手冊。 房間、書桌、城鎮、花園、書架、有營業時間的咖啡館 (#828)、收音機、資訊站。導航變成家具：一個路標 (#197)、一個戒指 (#203)、一個書架 (#652)、一個需要剝開的洋蔥 (#789)。甚至網域也是一個地名——大約六分之一的網站使用表達性的頂級域名（.world .garden .cafe .town .computer .zone）。
4. 只使用一種墨水。 一種顏色在一種底色上，而作品提供所有其他顏色。四分之一的網站使用三個或更少的十六進制顏色；在灰色之後，整個典範中最常使用的顏色是純粹的 #ffff00、#ff0000 和 #0000ff。從主題中提取強調色——例如正在被歸檔的書套的紅色 (#3)。→ colour.md
5. 有理由地選擇字體——或者故意使用瀏覽器預設字體。 69% 自行託管字型（Neue Haas, ABC Diatype, Monument Grotesk, Space Mono 為主）；23% 只使用系統字型，9% 完全沒有宣告——使用 Times 和預設藍色作為一種立場。等寬字體出現在 55% 的字型堆疊中。模板字體幾乎不存在（Inter 或 Geist 約 4%）。典範中最常被宣告的字型是 Arial、Times 和 Helvetica。字級是對比：一半的網站字級低至 11px 或更小，四分之一的網站超過 100px，三分之一的網站使用四個或更少的字級。→ type.md
6. 索引就是首頁。 列表、表格、日曆和計數勝過大圖和卡片。使用極細線、虛線規則而非方框；每個項目在相同的欄位；真實的後設資料作為欄位；在類別旁顯示計數；時間戳記；檔案大小。一個建築事務所的試算表 (#535)，每行帶有天空條的排放資料 (#522)，用方塊繪圖文字呈現的分數 (#288)。
7. 用一句話說出來。 以散文形式呈現的介面：描述就是導覽 (#316, #282, #530)，一個用 Logo 代替名字的個人簡介 (#856)，用圖畫代替名詞的謎語 (#547)，整個頁面是一句話，而註冊是最後一個子句 (#783)。語氣是具體的、人性的、通常是低調的、有時有趣、總是誠實——一個被劃掉的打烊時間 (#828)，一個警告你頁面很慢的標題 (#504)。→ voice.md
8. 讓一件事有生命力。 大多數被研究的網站 (86%) 確實做了些什麼——但通常只有一件事：小時改變底色，天氣設定漸層 (#832)，網路攝影機的幀像樂器一樣被評分 (#12)，字母隨風飄動 (#669)，訪客以匿名動物的形式出現 (#95)，網站在夜間關閉。時鐘需要一個理由（誰的時間？直到何時？）。→ recipes.md
9. 預設元件和借用的物件都是素材。 原生表單控制項作為詩歌的詩節 (#123)，框架集作為佈局 (#616)，一個 2000 年代的 ISP 入口網站作為專輯頁面 (#631)，一個 2005 年的媒體播放器作為樂團頁面 (#116)，Clippy 作為 Cookie 橫幅 (#179)。引用一種類型可以免費賦予網站一個聲音。只有在想法銳利時，粗糙才會被解讀為意圖。
10. 獎勵好奇心。 為游標、耐心的訪客和檢視原始碼的人準備一些東西：懸停揭示、直到你觸摸才會淡出的文字 (#360)、一個球池濾鏡 (#479)、你可以拖曳的透鏡 (#254)、HTML 註解中的筆記 (#283)、每次訪問不同的頁面。永遠不要在那裡隱藏必要的東西。
11. 小巧、靜態、有連結——為長久存在而建。 大約三分之一被保存的網站已經死亡、重新設計或被圍牆圍住。單純的自包含頁面（通常在 GitHub Pages 上）存活了下來；JavaScript Shell、已淘汰的主機和過期的域名最先死亡。第一方中位數重量約為 ~250 KB，四分之一低於 50 KB。向外連結：四分之一的網站首頁有十個或更多的對外連結——朋友、網環、目錄、來源。
12. 酷，而且友善。 典範中的盲點：只有 17% 尊重減少動畫設定，中位數替代文字覆蓋率為 17%，56% 移除了焦點外框，18% 封鎖縮放，一半將文字設定為 11px 或更小。為每一個動作設置護欄（never.md、recipes.md）。排擠他人的酷只是嘈雜而已。

選擇一個原型

容器是第一個決定。完整描述、定義性動作、範例和陷阱：references/archetypes.md。

原型	網站是…	適用於	起手式	看看
筆記本 (notebook)	一個公開的筆記本	散文、日記、研究日誌、小誌	notebook	#34 #124 #214 #362
索引 (index)	一個目錄、分類帳、資料庫	作品集、檔案庫、收藏	index	#3 #522 #535 #288
句子 (sentence)	一個可以點擊的句子	工作室、個人簡介、宣言、小型組織	sentence	#316 #282 #530 #783 #856
海報 (poster)	一個螢幕、一個詞、一種墨水	工作室、品牌、活動、發佈	poster	#7 #776 #201 #599
房間 (room)	一個有物品的地方	個人網站、商店、收藏	room	#9 #277 #92 #793
年鑑 (almanac)	一個日曆、時鐘、季節	日記、行程表、有日期的作品	almanac	#21 #128 #243 #718
地圖集 (atlas)	一張地圖、花園、網路	連結頁面、目錄、研究	atlas	#81 #139 #578 #284
樂器 (instrument)	你可以演奏的東西	字型範本、玩具、工具、產生器	poster + recipes	#254 #615 #622 #353
廣播 (broadcast)	世界的即時饋送	網路攝影機、收音機、資料、感測器	almanac + recipes	#12 #76 #51 #832
戲服 (costume)	一個借自其他時代的介面	音樂、檔案庫、惡搞、發佈	—	#501 #116 #631 #61
展覽 (exhibition)	一個議題、一個展覽、一個可以翻轉的物體	期刊、畢業展、目錄	index	#263 #838 #677 #865
標本 (specimen)	字型就是介面	鑄造廠、字體設計、字型專案	poster	#776 #195 #254 #352
共有地 (commons)	由訪客共同創作	訪客留言簿、選集、社群	notebook	#654 #423 #92 #249
神殿 (shrine)	一封給舊網路的愛情信	粉絲網站、拼貼、個人頁面	room	#586 #265 #441 #751

原型可以結合（一個同時也是共有地的年鑑），但有一個為主。

做出動作，而非裝飾

一個動作是一個你可以命名的決定（「導覽就是句子」、「底色跟隨時鐘」）。裝飾是你無法命名的任何東西。references/moves.md 列出了 70 多個按維度劃分的動作——想法、結構、字體、顏色、圖片、互動、時間、聲音、細節——每個都附有執行該動作的網站。

• 一個標誌性動作，貫徹到底（法則 2）。兩到三個輔助動作，更安靜。其他一切保持簡單。 被研究的網站很少堆疊更多。
• 偏好那些 來自內容 的動作（你所在地的天氣、事物的數量、主題的形狀），勝過來自函式庫的動作。
• 一個在任何網站上都會有相同效果的動作，那就是裝飾。

工作流程

1. 想法。 回答五個問題。將一句話寫在 index.html 的頂端。
2. 容器。 選擇原型；如果是全新開始，使用 scripts/new.mjs。先用純 HTML 建構結構——起手式展示了標記層級（真實的列表、表格、<time>、<details>）。
3. 內容先於樣式。 放入真實的文字、真實的圖片（現在就寫替代文字）、真實的計數和日期。酷網站有 80% 是內容。
4. 字體與墨水。 選擇一個有理由的字型（或故意使用系統字型），以及一種底色上的一種墨水。四個或更少的字級，如果原型需要，其中一個要非常大。type.md、colour.md。
5. 標誌性動作。 從 recipes.md 正確地建置它——包含鍵盤路徑、觸控路徑和減少動畫的變體。
6. 細節。 網站圖示、標題、選取顏色、版權頁、最後更新時間、對外連結、一個保持角色設定的 404 頁面。moves.md § 細節。
7. 稽核。 node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir> ——修復每一個錯誤；將警告視為問題。在 CI 中：使用 cool-check GitHub Action (README)。
8. 看看它。 桌面、390px 手機、僅鍵盤操作、開啟減少動畫、慢速網路。然後是重要的問題：有人會把這個連結發送給朋友嗎？他們會說它是什麼？

檢查清單

• 想法可以用一句話概括，而且佈局無法在不改變的情況下容納不同的主題。
• 一個標誌性動作，貫徹到底；輔助動作更安靜；沒有你無法命名的裝飾。
• 一種底色上的一種墨水（或內容提供的調色盤）；顏色有意義。
• 字體：有理由的字型或故意使用的系統字型；≤ 4 種字級；小文字仍保持完整的墨水濃度。
• 文字是真實、具體且使用人性化的語氣；沒有手冊式的動詞，沒有支架標題。
• 有些東西是真實且有生命力的（時間、資料、計數、地點）——或者靜止是刻意的。
• 有對外連結。有自己的網站圖示。有聽起來像真人的版權頁或關於頁面。
• 鍵盤：所有動作都可達；焦點可見。觸控：沒有任何動作依賴懸停。減少動畫：存在靜態變體。
• 每張圖片都有替代文字（如果是裝飾則為 alt=""）。縮放功能正常。已設定 lang。
• 輕量：第一方 HTML+CSS+JS 小於 ~250 KB，除非想法需要更多；它在沒有 JavaScript 的情況下也能運作（或表達些什麼）。
• audit.mjs 通過且無錯誤。

參考資料

檔案	何時閱讀
references/canon.md	當你需要證據：這些網站的共同點，以數字呈現
references/archetypes.md	選擇或發展容器時
references/moves.md	選擇標誌性和輔助動作時
references/recipes.md	建置動作時——30 個可複製的程式碼片段及其護欄
references/type.md	選擇字型、字級和字體的工作時
references/colour.md	選擇墨水、底色，以及顏色何時變化時
references/voice.md	撰寫標題、導覽、個人簡介、關於頁面、版權頁、錯誤訊息時
references/never.md	審查時：模板特徵，以及典範本身的壞習慣
references/catalogue.md	按原型瀏覽最強大的網站時
references/method.md	了解資料來源和可信度時
data/sites.json	每個網站的筆記（使用 scripts/examples.mjs 查詢）