tasteskill v2：反千篇一律前端技能

tasteskill v2

由模型建立的頁面看起來通常就像該模型看過的所有頁面的平均值：一個置中的三行標題、上方一個小標籤、一行圖示卡片、一個柔和漸層、幾條細線和一個等寬字體的說明文字。裡面沒有什麼是錯的，但也沒有什麼是經過決定的。

這個技能透過四種方式用決定來取代這些預設值：

1. 腳本抽出方向，由你來選擇。 當要求設想一個外觀時，模型每次都會選擇類別的預設值。scripts/draw.mjs 會從三個經過研究的方向中抽出一個；你選擇最能承載主題概念的那個，然後腳本會從一個從 247 個真實網站提煉出的資料庫中抽出其字體系統、色調、主視覺和區塊構圖。
2. 想法源自於主題。 在這項研究中，區分最佳網站與平庸網站的關鍵，是來自於事物本身的概念，而不是其樣式。
3. 一種無裝飾的房屋風格， 由真實瀏覽器中的 scripts/inspect.mjs 測量，因此規則是經過檢查而非期望的。
4. 你審視你所創造的。 三種寬度的截圖、一份評審清單、修正、再次審視。

從測試中學到的一個警告。去除裝飾只完成了一半工作；一個失去了標籤、規則和卡片卻沒有獲得任何替代內容的頁面，讀起來會顯得空洞，而盲測評審員理所當然地更喜歡一個資訊豐富但有破綻的頁面，勝過一個空無一物但無破綻的頁面。剩下的另一半工作是實質內容：設定更大的字體、整片的色塊、這個主題世界（無論是找到的還是繪製的）的真實照片，以及每個區塊承載其完整的內容。這個技能就是為了提供你這些而建造的；不要為了節制而交易掉它。

在下面的指令中，<skill> 是這個技能的資料夾。從專案的根目錄執行它們，這樣工作檔案就會放在那裡的 .taste-skill/ 目錄下。這些腳本需要 Node 22+ 和已安裝的 Chrome、Edge 或 Chromium，且不需要安裝任何東西。assets.mjs 還需要網路存取；它不使用任何 API 金鑰。

執行流程

按順序執行這些步驟。步驟 1–5 需要幾分鐘，並決定頁面是否夠好。

1. 閱讀簡報與專案

找出真實情況：主題、目標受眾、頁面必須讓人做的一件事、技術棧、任何現有品牌（色彩、字體、標誌），以及最重要的是真正存在的圖像：專案自身的照片或產品照、可以展示的真實介面、你可以呼叫的圖片生成工具，或者什麼都沒有。不要圍繞你沒有的圖片做規劃。一無所有幾乎從來都不是真正的無：主題所在的城市、街道、材料和歷史都存在於開放檔案館和博物館中，在註明出處的情況下可以免費使用（步驟 6，scripts/assets.mjs）。

如果請求很模糊，不要問，而是直接決定並用一句話陳述你的解讀。只有在缺少的事實會阻礙工作時才提問（例如，沒有產品名稱）。

然後在你的筆記中盤點這個主題：找出八到十二件屬於這個客戶而不屬於任何競爭對手的事物。尋找它的名稱以及名稱的意義；它的地址、門牌號碼、街道和街區，以及那個地方的樣子（它的瓷磚、招牌、油漆顏色、店面字體、光線、天氣）；簡報中的數字（座位數、房間數、到海邊的幾分鐘路程、價格、年份）；它所承受的限制（每月只有一批、冬天關閉、需預約）；它的材料和顏色；它的儀式和時間（五點點亮烤箱、七點開出的渡輪）；它世界中的印刷品（時刻表、標籤、票券、招牌）。這個清單是想法在步驟 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。如果你沒有任何這些資產，就省略它：這樣 draw 就會避免依賴它們的構圖，並且樣板會說明如何誠實地填補圖片位置（軟體用 HTML 展示自己的介面；沒有照片的產品則用繪圖方式呈現，並置於其世界的真實圖片中，絕不使用偽造的產品照。你在開放館藏中找到的圖片不屬於專案自身；將它們排除在 --have 之外。
• --keep palette,type：當品牌已經固定了色彩或字體時。這樣 draw 就只處理構圖，而你將品牌的數值映射到這些角色上。

該指令會列印一份方向樣板。這是本次建構的藝術指導：

• 採納它。 不要將它與你本來會做的版面混合。如果它讓你感到陌生，那很好：熟悉的版面正是這個技能要防止的東西。
• 重新抽取一個位置（--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. 照樣建構它

在你的腦中關閉動畫效果來建構頁面；一個需要動畫才能看起來完成的頁面，根本不算完成。工作順序：

1. 令牌。 從樣板中提取顏色和字體角色，作為 CSS 自訂屬性。下游的所有東西都只引用令牌。<skill>/assets/base.css 是一個中立基礎，你可以從它開始（重置、令牌名稱、流體字體步進、網格、焦點和選取樣式、動畫輔助工具）；它本身沒有自己的外觀。
2. 主視覺，完全按照藍圖描述， 分別在桌面寬度和手機寬度下。在其它任何東西存在之前，先把大的東西變大，小的東西變小。
3. 每個區塊根據其藍圖， 使用這個專案的內容。保持幾何形狀，更換主題。相鄰的區塊不得共享相同的版面。將想法帶入每個區塊， 包括定價、常見問題和頁尾：研究中常見的失敗，即使在好的網站中也是如此，就是一個獨特的第一個螢幕，後面跟著千篇一律的區塊。
4. 圖片， 按此優先順序：
   1. 專案自身的圖片；
   2. 如果你有圖像工具，則生成；
   3. 來自開放館藏中關於主題世界的真實圖片， 只要存在誠實的圖片。用 node <skill>/scripts/assets.mjs "<query>" 搜尋它們（Openverse、Wikimedia Commons、芝加哥藝術博物館和大都會博物館；預設情況下，只允許商業使用的許可）。搜尋盤點清單，而不是類別：舊明信片中的街道、街區的舊地圖、放大的材料、雕刻中的行業、同類的博物館物件、植物圖版、星圖。大規模且有目的地使用它們：一張檔案照片作為主視覺、一張放大成頁面主題的雕刻、一張真實的街道地圖作為聯絡區塊。在選擇之前仔細查看每一張；--get <ref> 會將其下載到 assets/ 並記錄其來源和許可，而 --credits 會列印用於頁尾的鳴謝文字。找到的圖片展示了客戶周圍的世界，絕不能將其作為客戶自己的產品、房間、菜餚、人物或團隊來呈現；
   4. 用 SVG 繪製（圖標、圖形、幾何形狀、製作示意圖、排版主視覺）；
   5. 作為最後的手段，使用 scripts/assets.mjs --fallback 來取得公共領域的庫存圖片。如果圖片位置與專案無關則保持空白。 --have photography 會提供一個易於擴展的圖片區塊，用於放置故事中裝載照片的頁面，上面有路徑和來源以及空白的 src 屬性。目前的圖片用於開發；建立用於生產的圖片。

類型。 所有區塊的通用規則：標題用無襯線字體或襯線字體（根據方向）。內文使用無襯線字體，或者，如果方向要求，也可以使用襯線字體。<skill>/assets/base.css 包含一個字體，你必須根據方向樣板來設定，或從 <skill>/assets/ 匯入 Google Fonts 字體。將字體大小設定為比標準更大。 研究中的範例以中等字重和快 30% 的大小設定主視覺標題；它們將最小內文大小作為標準內文。references/copy.md 列出了標準大小。

區塊的高度和邊距並不標準化。 方向樣板說明了每種區塊類型。檢查 references/reference.css 以進行常見調整：用 min-height: 100dvh 設定全螢幕區塊、用 width: 50% 設定分割區塊、用 height: 100% 設定並列項目、用 max-width: 32em 設定內文欄、區塊間距為 var(--space-section)。其他一切都是特定的。

7. 檢查

使用 scripts/inspect.mjs 對照房屋風格規則進行檢查：

node <skill>/scripts/inspect.mjs --url http://localhost:...

它會報告：背景顏色中的漸層（該技能將其視為裝飾）、圓角邊框、陰影、邊框、圖示或裝飾性 SVG 處理的文字、非內聯的連結、裝飾性背景圖片、非等寬字體的使用作為程式碼、懸停效果、動畫或轉場、以及字體堆疊中超出所選列表的字體。在繼續之前修正失敗的規則。如果一個規則失敗了但你想保留它，在 SKILL.md 中記錄你的例外情況以及為什麼。學習目標是在通過所有規則的情況下，仍然清楚地顯示出這個主題，而不是模型的平均值。

8. 截取螢幕截圖

透過三種寬度截圖來審視你的工作：

node <skill>/scripts/shoot.mjs --url http://localhost:... [--widths 1440,1024,375]

截圖保存在 .taste-skill/shots/ 目錄下。

9. 審視與修正

使用截圖和評審清單進行此步驟。像評審員一樣閱讀頁面，而不是作為創作者。

評審清單（references/review.md 中的完整表格）

1. 第一個螢幕是否回答了第一個問題？ 在大字體中？在同一個視口中？（如果沒有，修正：將答案提升到主視覺。）
2. 第一個螢幕上是否有一個按鈕可以完成主要任務？ 用動詞起頭？（如果沒有，修正：添加一個。）
3. 第一個螢幕是否只包含在這個主題世界中存在的東西？ 沒有通用的形狀、圖示或文字？（如果沒有，修正：替換或刪除通用的東西。）
4. 排版是否給出了明確的閱讀順序？ 尺寸、重量、間距？最寬的欄位是否在最大寬度下保持小於 70 個字符？（如果沒有，修正：根據需要調整。根據 references/copy.md，欄位為 32-40 em。）
5. 每個區塊在其寬度上是否色彩平衡且不可預測？ 沒有重複的版面？（如果沒有，修正：重新排列區塊佈局。）
6. 所有圖片是否都是真實的並且是這個主題的？ 沒有庫存圖片、沒有偽造的產品照、沒有模糊的形狀？（如果沒有，修正：用真實圖片替換。）
7. 是否有正文字體大小低於 16px 的地方？（如果沒有，完美。）
8. 是否所有按鈕和連結都易於點擊？ 點擊目標在手機上至少為 44x44px？（如果沒有，修正：增加內距。）
9. 是否每個區塊都有足夠的內容來證明其存在？（如果沒有，修正：填充細節或刪除區塊。）
10. 是否有那個「實時的東西」，而且它是否不阻礙閱讀？（如果沒有，修正：如果它阻礙了，則簡化它。）
11. 頁面是否在沒有 CSS 的情況下也具有可讀性？（如果沒有，修正：一個簡單的後備方案。）
12. 此頁面是否屬於這個特定主題？ 如果將競爭對手名稱放進去，文案或設計是否仍然成立？（如果成立，修正：從盤點清單中引入具體細節。）

針對每個失敗，修正它，然後從步驟 7 或 8 重新開始，直到通過清單中的每一項。在你的報告中記錄修正次數。在盲測中，經過三次修正循環後，頁面得到了最一致的高分。

10. 收尾

為每個區塊編寫替代文字，並將其放入帶有 alt="..." 屬性的 <img> 元素中。確保頁面在沒有 JavaScript 的情況下能正常運作。如果可行，為實時的東西添加不顯眼的漸進增強功能。驗證 HTML 結構。記下用於生產的圖片來源。

文件

• references/copy.md：文案寫作規則和計算
• references/review.md：用於審視的完整評審清單
• references/reference.css：用於常見版面調整的範例
• assets/base.css：中立的 CSS 基礎
• scripts/draw.mjs：抽樣方向
• scripts/inspect.mjs：檢查房屋風格
• scripts/shoot.mjs：截取螢幕截圖
• scripts/assets.mjs：從開放館藏中尋找和取得圖片

目錄結構

.skill/
├── SKILL.md              # 此文件
├── references/           # 參考文件和指南
│   ├── copy.md
│   ├── review.md
│   └── reference.css
├── assets/               # 樣板和基礎樣式
│   └── base.css
└── scripts/              # 自動化腳本
    ├── draw.mjs
    ├── inspect.mjs
    ├── shoot.mjs
    └── assets.mjs

生成的工作檔案將位於專案根目錄的 .taste-skill/ 目錄下。

提示

• 在建立期間，始終在瀏覽器中保持頁面開啟，並在每次編輯後重新載入。
• 使用 scripts/inspect.mjs 作為你的第二個視覺檢查，始終使用瀏覽器檢查器。
• 避免在建立期間使用不同的字體或顏色。
• 從步驟 4 中找到的想法開始。
• 保持所有區塊的內容完整。
• 避免重複使用版面。