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. 閱讀簡報與專案

找出真實的資訊：主題、目標受眾、頁面必須促使人們去做的一件事、技術棧、任何現有的品牌元素（顏色、字體、Logo），以及最重要的是真正存在的圖像資源：專案自己的照片或產品照、可以展示的真實介面、你可以呼叫的圖片生成工具，或者什麼都沒有。不要圍繞你沒有的圖片做規劃。一無所有通常也並非全然無物：主題所在的城市、街道、材料和歷史都存在於開放的檔案和博物館中，可以免費使用，只需標註來源（步驟 6，scripts/assets.mjs）。

如果請求內容模糊，請自行做出決定並用一句話說明你的解讀，而不是提出問題。只有在缺少的事實會阻礙工作進行時才提問（例如，沒有產品名稱）。

然後在你的筆記中盤點主題：列出八到十二個屬於此客戶而非競爭對手的東西。找找看它的名字及其含義；它的地址、門牌號碼、街道和街區，以及那個地方的樣子（它的瓷磚、招牌、油漆顏色、店面字體、光線、天氣）；簡報中的數字（座位數、房間數、到海邊的分鐘數、價格、年份）；它所在在的限制（每月僅一批、冬季歇業、預約制）；它的材料和顏色；它的儀式和營業時間（五點點燃烤爐、七點的渡輪）；它世界中的印刷品（時刻表、標籤、票券、招牌）。這個列表是步驟 4 中概念來源。在盲測中，贏得每個簡報的頁面都是基於此類列表中的一個項目（客戶的名稱及其含義、它所處的街道、使其與眾不同的那個限制條件），而輸掉的頁面雖然構圖很好，但概念卻是大類通用的。這個列表也是你的圖片搜尋來源：列表中的每個地點、材料和印刷品都是步驟 6 的查詢關鍵字。

2. 撰寫論點

在開始任何設計之前，參考 references/copy.md §1 的方式，將頁面列為主張及其證明，每個區塊一行。這些主張決定了哪些區塊存在及其順序。刪除沒有任何主張的區塊。這樣可以避免使用預設的「主視覺、Logo牆、三大功能、見證、定價、行動呼籲」這種順序。

3. 抽取方向

node <skill>/scripts/draw.mjs --sector <sector> --brief "<關於主題的一行描述>" \
  --sections <roles in the order of your argument> [--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 個字元。
• 一個輔助說明句子。一個主要行動按鈕，以其功能命名，作為真實按鈕放在第一屏。
• 第一屏應以大號字體回答訪客的第一個問題。 對於活動：它是什麼、何時以及何地（日期應屬於標題或次大字體，絕不能只出現在小字中）。對於產品：它是什麼以及它的價格或作用。對於個人：他是誰以及他做什麼。訪客為之而來的每個區塊（陣容、選單、房間、價格）都應有自己的標題和自己的導航位置。
• 撰寫完整內容。 簡報要求的每個區塊都應完整傳達其資訊：附有價格的完整選單、每個房間的詳細資訊、每位講者和演講、包含項目的價格、每個真實問題的解答。內容薄弱的區塊是乾淨頁面輸給更豐富頁面的最常見原因。
• 在簡報留有空白處時（菜名、房名和房價、專案名稱），預期應填上示例細節，以便在完整密度下看到設計；在報告中列出這些示例，供客戶確認。絕不虛構證明：沒有客戶、引言、評論、媒體報導、Logo 或商業統計數據。

6. 開始建構

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

1. Token（設計標記）。 將設計圖表中的顏色和字體角色設定為 CSS 自定義屬性。下游的所有內容都只應參考這些 token。<skill>/assets/base.css 是一個你可以從中開始的中立基礎（包含重置樣式、token 名稱、流體字體階層、網格、焦點和選取樣式、動畫輔助工具）；它本身沒有任何外觀。
2. 主視覺區，完全按照藍圖描述的那樣， 分別在桌面和手機寬度下進行。在建立其他任何東西之前，先讓大的東西變大，小的東西變小。
3. 根據每個區塊的藍圖， 填充此專案的內容。保留幾何結構，更換主題。相鄰的區塊不得共用版面。將概念貫穿到每個區塊中， 包含定價、常見問題和頁尾在內：研究中，即使是優秀的網站，最常見的失敗也是獨特的第一屏之後緊跟著一堆模板區塊。
4. 圖像素材， 按以下偏好順序：
   1. 專案自己的；
   2. 生成的，如果你有圖像工具；
   3. 來自開放收藏的主題世界真實圖片， 只要存在誠實的圖片。使用 node <skill>/scripts/assets.mjs "<query>" 搜尋它們（Openverse、維基共享資源、芝加哥藝術學院和大都會博物館；預設僅搜尋允許商業用途的許可證）。搜尋你的盤點清單，而不是類別：舊明信片中的街道、街區的舊地圖、材料特寫、雕刻中的行業、該類別的博物館藏品、植物圖版、星圖。大膽且有目的地使用它們：一張檔案照片作為主視覺，一幅雕刻畫放大成為頁面的主題元素，一幅真實的街道地圖作為聯絡區塊。在選擇之前先看看每張圖片；使用 --get <ref> 將其下載到 assets/ 目錄並記錄其來源和許可證，而 --credits 則在你的頁面上列印歸屬信息。切勿使用庫存圖片、通用插圖或無關的「氛圍」照片。如果沒有誠實的圖片可用，則完全不要使用圖片；使用構圖、顏色和字體來承載頁面。
5. 確保它運作正常。 表單提交、連結、響應式行為、無腳本狀態。一個非運作中的頁面會立刻失去信任。

使用真實瀏覽器建立頁面，而不是模擬。為你的編輯器啟用所有 CSS 檢查器；你正在強制執行規則，而不僅僅是編寫它們。

7. 檢查它

node <skill>/scripts/inspect.mjs <your html path>

這會在一個無頭瀏覽器中載入你的檔案，並對照 .taste-skill/direction.md 中的規則檢查它。錯誤是規則違規，而不是審美偏好。在繼續之前修正它們。

8. 截圖與評分

node <skill>/scripts/capture.mjs <your html path> [--widths 1440,768,375]

這會建立三個寬度的螢幕截圖。然後像評審一樣審查它們：

node <skill>/scripts/review.mjs <your html path>

這會列印一份評分標準：概念（主題概念是否清晰，並且是否貫穿所有區塊）、構圖（是否遵循方向圖表，區塊是否不重複）、字體（大小和行距是否與方向相符，標題是否適應）、顏色（比例和對比度是否符合方向）、圖像（是否使用真實素材，且使用方式是否有意圖）、內容（文案是否包含完整的真實資訊，空白處是否填了樣本）。記錄你的分數和筆記。

9. 修正並重複

修正你發現的問題，然後在評分之前再次擷取螢幕截圖。永遠不要對圖像進行事後修圖；修正 HTML/CSS 並重新擷取。

此過程的結構如下：方向圖表 → 建構區塊 → 檢查規則 → 截圖 → 評審 → 修正 → 再次截圖。這可能感覺像很多步驟；這是因為它們本身就很多。在測試中，跳過這些步驟中的任何一個都會導致劣質頁面（或花費更長時間來達到好的頁面）。第一個專案完成整個流程需要大約三個一小時的會話；之後週期會縮短。

scripts/review.mjs --loop 重複截圖、評審和開放的修正循環，如果檔案變更則重新載入。

腳本參考

在 <skill>/scripts/ 中：

• draw.mjs：發放方向圖表。--list：顯示類別（sectors）、角色（roles）、關鍵字（--help）。一切。
• assets.mjs：搜尋開放收藏中的圖片。<query>：搜尋文字。--get <ref>：下載。--credits：顯示並列印歸屬資訊。
• inspect.mjs：檢查 CSS 規則。<path>：你的 HTML 檔案。--verbose。
• capture.mjs：建立螢幕截圖。<path>：你的 HTML 檔案。--widths：寬度列表。--dir：輸出目錄。
• review.mjs：評審標準。<path>：你的 HTML 檔案。--loop：監聽變更。

參考資料

在 <skill>/references/ 中：

• copy.md：文案範例、字數計算和結構範本。
• library/：由研究得出的構圖、調色板和字體系統。
• study/：247 個網站的清單、方法論和分數。

常見問題

Q：這與 Cursor 或 Claude Code 的風格有何不同？

A：它不使用上述工具的預設外觀。它用一個結構化的流程取代預設，該流程從一個經過策劃的真實網站資料庫中發放具體、多樣的設計方向。這不僅僅是一個提示工程技巧；它是一個具有可執行規則和檢查的系統。

Q：我必須在每個專案中使用它嗎？

A：只有在頁面向公眾開放並且客戶關心外觀時才使用它。對於內部儀表板、API 文件或管理面板，請使用你的標準方法。

Q：它可以與我現有的程式碼庫或框架一起使用嗎？

A：可以。該技能與框架無關。它檢查 HTML 和 CSS 屬性；它不關心它們是如何生成的。

Q：我需要 Node 22 和一個瀏覽器嗎？

A：是的。腳本需要它們。該技能在沒有它們的情況下無法運作。

Q：如果方向圖表建議一個我無法建構的版面怎麼辦？

A：方向圖表是一個起點。如果一個特定的區塊無法使用你的內容，請使用 --redraw 或 --alternatives 選項。不要為了適應內容而扭曲它；改變區塊，而非內容。

Q：我可以在一個沒有真實圖片項目的專案中使用它嗎？

A：可以。使用 --have（或不使用）來告訴腳本避免需要圖片的構圖。該技能會調整其建議。切勿為了方便而使用庫存圖片。

Q：如果我不同意方向圖表的建議怎麼辦？

A：你是設計師。方向圖表是一個起點。重新抽取它，替換區塊，根據主題調整顏色。只需在報告中記錄你的決策。你的判斷是這個過程的組成部分。