colbyvk/website-dev-skill

website-dev

為一個有想法的人打造專屬於他的個人網站。它清楚明白地説出這個人是誰、做什麼，在每個畫面上呈現他們真正的作品，並且看起來就是「他們的」：不是作品集主題，不是網路上所有「嗨，我是充滿熱情的開發者」這類網站的統計平均值，也不是一件會掩蓋作品的藝術品。目標是設計師、開發者、作家、攝影師和研究人員親手製作的最佳個人網站：安靜、具體、快速，並且無庸置疑地只屬於一個人。

範圍：僅限個人網站。 一個人的作品集、首頁、部落格、履歷站、學術頁面或連結彙整。自由工作者的網站也算，因為它關乎一個人及其作品。企業、商店、產品、新創或代理商網站則不在此列。如果任務是後者之一，請說明此技能僅限於個人網站，並且不要套用它。

此技能是單一技能，其組件位於 assets/ 中。下表說明每個部分在何時載入、在設定時做什麼，以及代理程式在何時必須將資料寫回。三個部分每次都載入。其餘部分則在任務觸及它們時才載入。

檔案

檔案	調用時機	初始設定	讀取觸發	更新觸發
design-principles	總是	從不設定。 在設定時原樣讀取；不詢問或更改其中的任何內容。	每次此技能載入時，在做出第一個設計或程式碼決策之前。	代理程式絕對不會編輯。 僅在使用者明確要求更改原則時編輯。不喜歡的內容應放入 design-dont-dos，而非此處。
design-dont-dos	總是	每當設定執行時執行。 在設定過程中提出的每個方向、調色板、字型和元件，在使用者看到之前，都會對照每一行進行檢查。使用者在設定回答中表示不喜歡的任何參考網站或特徵會立即成為使用者行。對於現有網站，列出其已違反的行。	每次此技能載入時，以及在網站上的任何可見內容被寫入或更改之前。	每次使用者表示不喜歡網站上的某樣東西時（顏色、形狀、版面、效果、文字、字型、動畫或參考網站）。在相同回覆回合中，在底部附加一行，然後再繼續工作。每附加的一行都是使用者行。
users-design-system	總是	如果沒有真正的設計系統，則先設定它。 沒有真正的設計系統意味著：方向行未 confirmed，或顏色和字型表格沒有 confirmed 行。然後，在任何設計工作之前，詢問 initial-setup 中的設定問題。使用者也可以隨時啟動設定（「設定設計系統」、「重新開始外觀」）。如果使用者回答「你決定」或「幫我設定」，則執行研究路徑。使用者的答案成為 confirmed，研究結果成為 proposed，從現有程式碼讀取的值成為 extracted。如果真正的設計系統已存在，則不再詢問：僅詢問當前任務所需但仍為空的行。	每次此技能載入時。其已確認的值優先於其他檔案中的所有預設值。	每次使用者新增或更改其設計系統中的任何內容時（顏色、字型、大小、間距步長、圓角半徑、陰影、動畫標記、元件規則、標誌或字母組合、圖像規則、語調規則）。在相同回覆回合中更新該行並記錄此更改。當設定提取或研究標記時也同樣處理。
initial-setup	當：新網站或儲存庫、網站首次執行、重新設計開始，或 users-design-system 沒有已確認的方向時。	當任何訊號觸發時執行設定： (1) users-design-system 沒有真正的設計系統，(2) 新網站或儲存庫，(3) 使用者要求設定或重做設計系統，(4) 重新設計開始。在第一次回覆中，在任何設計工作之前，一次性詢問所有問題輪次。如果使用者說「你決定」、「解決它」或「幫我設定」，則改為執行研究路徑。當真正的設計系統已存在且使用者未要求時跳過。	在任務開始時，在任何頁面或元件被寫入之前。	當使用者更改網站必須如何開始（問題、技術棧、工具），或當某個設定步驟在實踐中被證明是錯誤的時。
design-directions	當：設定詢問整體外觀、研究路徑執行，或使用者要求更改網站外觀時。	當設定詢問方向問題或執行研究路徑時執行。 第一個設定問題提供最適合此人的 3 個方向，加上「幫我研究」。研究路徑從此目錄開始，然後搜尋其之外的利基方向。	在詢問方向問題之前，以及在進行任何方向研究之前。	當研究找到目錄中沒有的方向時，將其加入。當使用者選擇或拒絕一個方向時，記錄下來。被拒絕方向的定義特徵也會加入 design-dont-dos。
hero-design	當：任務建立、重新設計或審查首頁或其首屏時。	當設定詢問 Q13 時執行（僅當此人沒有作品圖片或照片時）。答案在 users-design-system 中設定英雄區的視覺來源。	在螢幕規劃步驟，在英雄區被建立之前，以及審查時。	當使用者核准英雄區時，記錄它並將其寫入 users-design-system。被不喜歡的英雄區則加入 design-dont-dos。生成的英雄區的提示詞則記錄到其日誌中。
visual-modules	當：任務規劃頁面或區塊、網站顯得平淡，或使用者要求「更有活力」時。	與研究路徑一起執行： 每個候選方向命名 2 到 4 個模組。	在螢幕規劃步驟，在任何區塊被建立之前，以及審查時。	當使用者喜歡一個模組時，記錄它並將其加入 users-design-system。被不喜歡的模組則加入 design-dont-dos。在研究過程中找到的模組則加入其目錄。
motion-design	當：任務涉及動畫、轉場、懸停或按下狀態、滾動效果、載入器、頁面進入或任何會移動的內容時。	當設定詢問動態問題時執行。 答案在 users-design-system 中設定動態刻度。一旦刻度被 confirmed，就不再詢問。	在任何動態程式碼被寫入或審查之前。	當使用者核准一個動態模式或更改一個動態值時：記錄到其決策表中。使用者不喜歡的動態則加入 design-dont-dos。
copy-writing	當：任務撰寫、重寫或審查網站上任何可見的文字時（簡介、自我介紹、專案介紹、標題、連結、替代文字、中繼標籤）。	當設定詢問語調問題時執行。 答案在 users-design-system 中設定語調。一旦語調被 confirmed，就不再詢問。	在撰寫第一個文案字詞之前，以及在交付前再次。	當使用者陳述一個適用於多個字串的文案規則時：將其加入使用者文案規則表中。被不喜歡的片語或語氣也加入 design-dont-dos。一個語調規則則加入 users-design-system。
review-gate	當：在交付任何頁面、區塊或元件之前，以及當使用者要求審查或稽核其網站時。	從不設定。 在設定期間不使用。	在建置完成後，向使用者報告之前。	當使用者在交付後發現審查閘門遺漏的問題時：將一個檢查項目加入其使用者檢查表中，並將問題加入 design-dont-dos。

這裡所說的品味

品味不是一種風格。它是一套為這個人刻意做出的決定，而在沒有這些決定的情況下，模型通常會採用預設值。

• 具體勝過一般。 每個模型寫出的個人網站都會傾向於適合任何人的版本：「嗨，我是 [名字] 👋」、「一位熱衷於打造數位體驗的充滿熱情的開發者」，技能條、時間軸、三個帶有 GitHub 按鈕的專案卡片、紫色光暈。這些決策，每一個都不是任何人做的。具體必須來自這個人本人：他們的作品、他們的話語、他們的照片、他們的設計系統。絕不來自風格規則，也絕不憑空發明。
• 作品是主角。 訪客是來看這個人做了什麼、寫了什麼或發現了什麼。把最好的作品放在首屏或一滾之遙的地方。裝飾（光球、粒子、3D 團塊、虛擬終端機、概念展示小工具）是當作品缺失時用來填補頁面的東西。
• 一個人，一種語調。 個人網站聽起來像某個人，而不是像人資的模板。使用這個人選擇的語調，寫出簡短、平實、具體的句子。不要自吹自擂：讓作品來讚美自己。
• 策展，而非歸檔。 三到六件強而有力的作品勝過三十張縮圖。最棒的那件作品應放在首位並獲得更多空間。其餘的只需一個連結之遙。
• 克制就是奢華。 一個調色板。一個圓角半徑比例。一種連結樣式。一個主題。把空間當作一種素材來使用。一個擁有更少但更佳決策的網站，讀起來會讓人感覺更深思熟慮。
• 有生命力，而非平淡。 一個只有文字和灰色的網站，和一個只有光暈的網站一樣普通。賦予它色彩：兩種相配的顏色，以及一種能在頁首和英雄區中脫穎而出的重點色。賦予它經過設計的英雄區，以及 2 到 4 個視覺模組：以工藝手法展示這個人的作品，並使用能宣示主權的調色板賦予形式。絕不要為了填補空間而建立虛假的區塊。
• 瞇著眼就能看出的層級。 瞇著眼看螢幕截圖。每個畫面都有一樣東西引領焦點：名字、作品、或文字。
• 字型承載著這個人。 為這個人挑選字體，以緊湊的展示追蹤間距、可讀的正文度量（約 65 個字元）以及真實的粗細級別來設定。對於作家來說，正文本身就是設計。
• 韻律，而非統一。 讓一個專案敘述很長，另一個只有兩行。在網格中放入完全相同的卡片是主題的外觀。
• 動畫是回應，而非表演。 簡介只出現一次，一個經過設計的時刻有其存在的價值，而每個連結都會回應指標。沒有東西會因為「可以」而自行打字顯示、旋轉或在滾動時淡入。
• 小巧快速就是一項特色。 一個個人網站應眨眼間載入完成，在手機上閱讀體驗良好，無需 JavaScript 也能運作，並且五年後仍能使用。
• 由這個人選擇外觀，而非代理程式。 一位攝影師、一位詩人、一位後端工程師和一位插畫家，各自理應得到不同的答案。同樣的請求不應兩次產生同樣的網站。

基本規則

這些規則的優先級高於 assets/ 中的所有內容，但使用者自己的話語和已確認的設計系統除外。

1. 僅限個人網站。 一個人及其作品。其他任何東西都不在範圍內。
2. 先設定再設計。 如果沒有真正的設計系統（users-design-system 中的「Direction」行未 confirmed，或顏色和字型沒有 confirmed 行），則先執行 initial-setup，並在第一次回覆時詢問所有問題輪次。使用者也可以隨時啟動設定，或說「你決定」讓代理程式研究和建議系統。絕不要基於假設的品味開始一個網站。
3. 絕不使用發光、發光藥丸或 AI 紫。 使用者已明確禁止這些。除非使用者的設計系統確認允許，否則絕對不能在表面上使用外發光、霓虹燈、發光球體、發光邊框或紫色與紫羅蘭色漸層。
4. 清冊即法律。 在寫入任何可見內容之前，請對照 design-dont-dos 進行檢查。絕不能違反使用者行。
5. 傾聽並記錄。 當使用者表示不喜歡某樣東西時，請在相同回覆回合中新增清冊行，然後再修正它。當使用者指定顏色、字型或標記時，請在相同回覆回合中更新 users-design-system。此技能絕不能對同一個人犯兩次同樣的錯誤。
6. 使用標記，而非原始數值。 每個顏色、大小、圓角半徑、陰影和持續時間都來自設計系統，通過一個 CSS 變數區塊或主題。在元件中絕不使用原始十六進位碼。
7. 展示真實作品。 使用真實的專案圖片、真實的文字、如果這個人願意的話使用真實的照片。絕不使用由灰色方塊組成的假專案 UI，絕不使用股票圖片或 AI 圖像冒充為他們的。僅在英雄區氛圍中使用開放授權或生成的圖像是允許的，但前提是使用者同意使用生成的圖像，並且該圖像絕不能展示這個人或他們的作品。
8. 不要虛構任何東西。 不要虛構推薦語、客戶、雇主、獎項、數字或生平故事。任何假設的內容都必須在程式碼中標記，並在報告中列出。
9. 首屏須說明身份與職業，在 1440x900 和 390x844 解析度下：顯示名字、一行說明他們做什麼，以及通往作品或聯絡方式的途徑。
10. 預設無障礙。 對比度 4.5:1、可見的焦點環、每件作品都有替代文字、44px 的觸控目標、尊重減少動畫設定。絕不能為了外觀而犧牲這些。
11. 交付前先審查。 執行 review-gate。首先報告哪些項目失敗或未被檢查。

三個刻度

設定完成後，三個刻度會引導每個版面、動態和密度決策。它們的值存在於使用者的設計系統中（設定會設定它們；使用者可以用一句話更改它們：「讓它更平靜」、「更多動畫」、「更緊湊」）。

刻度	1 到 3	4 到 6	7 到 10
變異度 (對稱到不對稱)	居中、對稱、單欄文字。適合作家、學者、履歷站。	左對齊閱讀、分欄簡介、混合圖片大小、多變的區塊版面。	不對稱網格、大面積留白、將文字設定為圖像、編輯式斷行。在任何級別下，低於 768px 時均使用單欄。
動態 (靜態到電影感)	僅有懸停和按下狀態。	預設值。加上簡介進入效果和一個經過設計的時刻。	僅在這個人自己的作品是互動式或移動的（創意編碼、動態設計、遊戲、互動式文章）時才使用。
密度 (稀疏到密集)	大量留白、寬鬆間距、大圖。適合攝影師、創意人員。	預設值。標準間距、適中的內容密度。	緊湊的文字、窄間距、最小裝飾。適合長篇文字、儀表板式的作品集、資源清單。

使用工作流程

1. 使用者提出請求（例如：「建立我的網站」、「重新設計我的作品集」）。
2. 檢查 users-design-system 是否存在真正的設計系統。
   • 如果沒有：執行 initial-setup 以詢問問題或執行研究。
   • 如果有：僅詢問當前任務所需的遺漏值。
3. 從 design-principles 中讀取原則。
4. 規劃頁面和元件，同時參考 design-dont-dos 過濾掉被禁止的模式。
5. 從使用者設計系統中提取標記，並將它們應用於所有 CSS 和元件。
6. 根據任務範圍，載入視覺模組、英雄區或動態設計。
7. 撰寫或校對文案，遵循設定的語調。
8. 在交付之前執行 review-gate 進行審查。
9. 將結果報告給使用者，並標記任何假設。
10. 傾聽使用者的反饋，並即時更新設計系統和設計禁區清冊。