tasteskill v2
模型建立的頁面通常看起來就像模型看過的所有頁面的平均值：三行置中標題、上方一個小標籤、一排圖示卡片、一個柔和的漸層、幾條細線和一個等寬字體說明。它們沒有什麼錯誤，但也沒有任何決定。
這個技能用四種方式來取代這些預設值：
- 腳本發牌方向，你從中選擇。 要求模型發明一個外觀時，它每次都選類別預設。
scripts/draw.mjs會發出三個經研究過的方向供你選擇；你選一個能承載主題概念的方向，然後腳本會從一個從247個真實網站中提煉的庫中，發出它的字型系統、調色盤、英雄區和章節佈局。 - 概念來自主題本身。 在研究中，區分最佳網站與平庸網站的，是從事物本身提取的概念，而不是樣式。
- 沒有裝飾的風格指南， 在真實瀏覽器中由
scripts/inspect.mjs測量，以便規則能被核實，而不是空想。 - 看著你做的東西。 三種寬度的截圖、陪審團評分表、修正、再看一次。
測試中學到的一個警告。只移除裝飾只是完成一半工作；一個失去了標籤、規則和卡片但沒有獲得任何替代內容的頁面，讀起來會顯得空洞，而盲審陪審團自然會偏好一個有明顯特徵的豐富頁面，而不是一個空無一物的頁面。另一半是實質內容：更大的字體尺寸、整片顏色區域、主題世界的真實照片（找到的或繪製的），以及每個章節都承載其完整內容。這個技能就是為了提供這些而設計的；不要為了克制而放棄它們。
在以下指令中，<skill> 是此技能所在的資料夾。從專案根目錄執行它們，這樣工作檔案會放在 .taste-skill/ 目錄下。腳本需要 Node 22+ 和已安裝的 Chrome、Edge 或 Chromium，且不需要安裝任何東西。assets.mjs 還需要網路存取；它不使用任何 API 金鑰。
執行流程
按順序執行以下步驟。步驟 1–5 需要幾分鐘時間，並決定頁面是否合格。
1. 閱讀簡報和專案
找出真實的內容：主題、目標受眾、頁面必須讓訪客做的一件事、技術棧、任何現有的品牌（顏色、字體、標誌），以及最重要的是真正存在的圖像：專案自己的照片或產品照、可以展示的真實介面、你可以呼叫的圖片生成工具，或者什麼都沒有。不要圍繞你沒有的圖片做規劃。一無所有其實很少見：主題所在的城市、街道、材料和歷史都存在於開放檔案和博物館中，只要標註來源就可以免費使用（步驟 6，scripts/assets.mjs）。
如果請求很模糊，不需要提問，自行決定並用一句話說明你的解讀。只有在缺少的事實會阻礙工作時才提問（例如，沒有產品名稱）。
然後在你的筆記中盤點主題：列出 8 到 12 個屬於這個客戶且不屬於任何競爭對手的項目。尋找它的名字及其含義；它的地址、門牌號碼、街道和街區，以及那個地方的樣子（它的瓷磚、招牌、油漆顏色、店面字體、光線、天氣）；簡報中的數字（座位數、房間數、離海邊幾分鐘、價格、年份）；它受的限制（每月只能做一批、冬天關閉、需預約）；它的材料和顏色；它的儀式和作息時間（五點點燃爐灶、七點開船）；它世界中的印刷品（時刻表、標籤、票券、招牌）。這個清單是步驟 4 中概念來源的基礎。在盲測中，每個贏得簡報的頁面都是建立在這樣一個清單的項目上（客戶的名字及其含義、它所在的街道、使它之所以是它的那個限制條件），而輸掉的頁面則擁有良好的佈局但使用的是類別概念。這個清單也是你的圖片搜尋來源：清單上的每個地點、材料和印刷品都是步驟 6 的查詢關鍵字。
2. 撰寫論證
在開始任何設計之前，將頁面列為一系列主張及其證據，每個章節一行，如同 references/copy.md §1 所示。這些主張決定了哪些章節存在以及它們的順序。刪除任何沒有主張的章節。這是避免出現英雄區、標誌輪播、三大特點、見證、價格、行動呼籲這種千篇一律順序的方法。
3. 抽牌決定方向
node <skill>/scripts/draw.mjs --sector <sector> --brief "<一行關於主題的說明>" \
--sections <依你論證順序的角色> [--tone <tone>] [--have <assets>] [--keep palette,type] \
--options 3
這會發出三個方向，並印出每個方向的簡短摘要。將每個方向與你的盤點清單對照：哪一種佈局方式可以承載只有這個客戶才有的東西？選擇那個方向，而不是最熟悉的那個，並在你的筆記中寫下一行原因。在測試中，一個不適合主題的隨機方向是導致頁面表現不佳的最常見原因。然後發出完整的設計表：
node <skill>/scripts/draw.mjs <相同的參數，但不加 --options> --direction <選擇的 id>
--sector：node <skill>/scripts/draw.mjs --list sectors。選擇最接近的。--sections：來自--list roles的角色（features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact）。英雄區是隱含的。--tone（可選）：quiet, bold, warm, technical, playful, luxury, editorial。只在簡報明確要求時才使用。--have：真正存在的資產，逗號分隔：photography（專案自己拍攝的地點、人物或作品照片）、product-photo（特定產品的照片，或可以生成它們的圖片工具）、product-ui（真實的螢幕截圖）、illustration、video。如果你什麼都沒有，則省略它：這樣抽牌會避免依賴這些資產的佈局，並且設計表會說明如何誠實地填充圖片位置（軟體展示其用 HTML 構建的真實介面；沒有照片的產品則以繪圖方式呈現，並放置在其世界的真實圖片中，絕不使用偽造的產品照）。你將在開放收藏中找到的圖片不屬於專案自己的資產；把它們排除在--have之外。--keep palette,type：當品牌已經固定了顏色或字體時使用。抽牌只會處理佈局，然後你將品牌的值映射到對應的角色上。
該指令會印出一個設計方向表。它是本次建構的藝術指導：
- 採用它。 不要把它與你原本會做的佈局混在一起。如果它感覺不熟悉，那很好：熟悉的佈局正是這個技能要防止的。
- 重新抽取一個位置（
--redraw hero | type | palette | photos | section:<role> | direction）只基於你可以陳述的理由：它與已說明的品牌限制相矛盾，或者需要一個不存在的資產。絕不要為了獲得更舒適的結果而重新抽取。在你的報告中記錄每一次重新抽取。 - 當分配的章節無法容納真實內容時（它比較了三種方案但只有一個價格；它需要五條引述但一條都沒有），不要為了配合而扭曲內容。使用
--alternatives <role>列出其他選項，選擇一個其假設與內容相符的，然後使用--redraw section:<role>=<id>採用它。 - 根據主題檢查調色盤。 分配的調色盤不僅是一組顏色，也是一組比例（一個底色、一個文字色、一個強調色、區域色）。如果它的顏色與主題本身的材質衝突（為泥煤威士忌配上糖果粉彩、為山中小屋配上霓虹燈），則重新抽取調色盤一次；如果主題有它自己不容錯認的顏色（它的材質、它街道的油漆、它窗外的風景），則保留分配的比例，但從主題中取用顏色，並在報告中說明。
- 隨時使用
node <skill>/scripts/draw.mjs --show重新列印它。在長時間的工作階段中，在建立每個章節之前重新閱讀它。
4. 找出概念
方向是一種佈局方式。概念則是讓頁面專屬於這個主題而非其他任何主題的東西。在你的筆記中寫下這個句子，並且在兩個空白處都填入來自主題本身的內容之前不要開始建構：
在這個頁面上，[屬於這個主題的某個東西] 變成 [方向所要求的裝置]。
第一個空白處可以搜尋的地方：
- 它的產出。 這個東西生產什麼？將真實的產出作為材料放在頁面上。（一台會列印詩歌的相機，其文案以紙條形式呈現。）
- 它的物體或形狀。 它在物理上看起來像什麼？剖面圖、剪影？放大它、裁切它、讓它成為框架或唯一的主題。
- 它的名字。 這些字母可以容納照片、堆疊成一面牆、分佈在兩個角落嗎？
- 它的地點。 有沒有一個景色能讓人想去那裡？
- 它的儀式。 有沒有一個順序是頁面可以隨著滾動執行的？
- 它的工藝品。 它的世界中已經存在哪些印刷品：票券、菜單、標籤、收據、邀請函、資料夾、手冊？
- 它的對立面。 哪個其他類別擁有了這個主題所缺乏的感覺？
從你的盤點清單（步驟 1）中填滿第一個空白處，而不是從類別中尋找。競爭者測試： 將最接近的真實競爭者放入句子中（兩條街外的麵包店、另一個橡木家具製造商、同一座山上的另一間小屋）。如果句子仍然成立，那麼這個概念屬於類別：一條麵包是每家麵包店都有的；而這間店以其命名的七扇門則是它獨有的。「乾淨現代」不是一個概念。研究小組評分最低的網站，正是那些概念被記錄為「沒有超越標準公式」的網站。
一個動態功能。 給頁面一個訪客可以做的事情，或者每次訪問都不同的東西，並從概念中創造出來：選擇一種木材，看看用它做的椅子；輸入你的名字，看看它在鑄造廠的字體中被雕刻出來；設定貸款金額，讀取真實的月度數字；看看小屋的爐子現在是否點著，以及距離最後一班渡輪還有多久；選擇一個尺寸，看看它與房間的比例。在盲測中，每個獲勝的頁面都有一個這樣的功能，而陪審員首先提到的就是它。規則：它使用主題的真實內容；它在手機上可以用大拇指操作；它在沒有腳本的情況下有一個樸素的備援方案；它永遠不會阻礙閱讀；而且它是一個功能，不是一個遊樂場。它在步驟 6 中作為頁面的一部分建立，而不是在步驟 9 中作為動畫添加。
5. 撰寫文案
在開始標記之前，將整個頁面作為一份文案稿（純文字）來撰寫，遵循 references/copy.md：
- 每個標題在任何寬度下都應適合兩行或更少。 在採用一個句子之前，先按照 copy.md §2 進行計算：大約 32 個字元在任何合適的尺寸下都是安全的。所研究的畫廊英雄區標題中位數為 5 個單字和 32 個字元。
- 一個輔助句。一個主要行動，以其功能命名，作為一個真實按鈕出現在首屏。
- 首屏應以大號字體回答訪客的第一個問題。 對於活動：它是什麼、何時、何地（日期應在標題或次大尺寸中，絕不能只出現在小字中）。對於產品：它是什麼以及它的價格或功能。對於個人：他是誰以及他做什麼。訪客為之而來的每個章節（陣容、菜單、房間、價格）都應有自己的標題和在導航中的位置。
- 撰寫完整的內容。 簡報要求的每個章節都應完整地提供資訊：完整菜單含價格、每個房間有其詳細資訊、每位講者和演講、包含什麼的價格、每個真實問題的答案。內容稀薄的章節是簡潔頁面輸給較豐富頁面的最常見原因。
- 當簡報留有空白時（菜餚名稱、房間名稱和價格、專案名稱），可以預期提供範例細節，以便設計以完整密度呈現；在報告中列出它們，供客戶確認。但證據絕不能是虛構的：沒有客戶、沒有引述、沒有評論、沒有新聞、沒有標誌，也沒有商業統計數據。
6. 開始建構
在腦中關閉動畫來建構頁面；一個需要動畫才能看起來完成的頁面，其實並未完成。工作順序：
- 代號。 為設計表中的顏色和字型角色建立 CSS 自訂屬性。所有後續部分只引用代號。
<skill>/assets/base.css是一個中立基礎，你可以從它開始（重置、代號名稱、流體字型階層、網格、焦點和選取樣式、動畫輔助工具）；它沒有自己的外觀。 - 英雄區，完全按照藍圖描述， 分別在桌面和手機寬度上實現。在產生任何其他東西之前，先把大的做大，小的做小。
- 按照藍圖建立每個章節， 並填充本專案的內容。保持幾何結構，改變主題。相鄰的章節不得共享相同的佈局。將概念帶入每個章節， 包括定價、FAQ 和頁尾：研究中常見的失敗（即使在優秀網站中）是擁有獨特的首屏，但後面跟著千篇一律的區塊。
- 圖片， 按以下優先順序：
- 專案自己的；
- 生成的，如果你有圖片工具；
- 如果存在真實的圖片，則從開放收藏中獲取主題世界的真實圖片。 使用
node <skill>/scripts/assets.mjs "<query>"搜尋它們（Openverse、Wikimedia Commons、Art Institute of Chicago 和 Met；依預設僅限允許商業用途的授權）。搜尋盤點清單，而不是類別：它在舊明信片中的街道、該街區的舊地圖、它材質的近照、它在版畫中的行業、它這類物品的博物館收藏、植物圖版、星圖。大量且有目的地使用它們：一張檔案照片作為英雄區的背景，一張版畫放大作為頁面的主題圖案，街道的真實地圖作為聯絡我們章節的背景。在選擇之前先看過每一張；--get <ref>將它下載到assets/目錄並記錄其來源和授權，而--credits則列印要在頁尾使用的來源標註。找到的圖片展示的是客戶周圍的世界，絕不能作為客戶自己的產品、房間、菜餚、人物或團隊來呈現； - 在 HTML/CSS 中繪製的圖片， 作為 SVG、CSS 形狀或內嵌資料。只在所有更優先的選項都不可行時才這麼做。
7. 檢查
在真實瀏覽器中檢查頁面：
node <skill>/scripts/inspect.mjs --url <本地 URL> --rules [type,space,color,picture,contrast]
這會對比 _direction.json 中的規則，對抗實際渲染的頁面，並報告違規情況：不正確的字型、超出指定尺寸的比例、不在調色盤中的顏色、缺失的圖片尺寸、未檢查的對比度。僅修復那些經證實的違規情況。不要為了通過測試而增加自己的規則。
8. 截圖
在固定寬度 320、768、1440 處對頁面進行截圖：
node <skill>/scripts/screenshot.mjs --url <本地 URL> --widths 320,768,1440
將它們放在 .taste-skill/screenshots/ 目錄下以供覆盤。