williamsnieves/landing-factory

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。如果你沒有任何資產，則省略它：這樣繪圖會避免依賴它們的構圖，且設計單會說明如何誠實地填滿圖片位置（軟體以 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. 建置它，仍然

在你的腦中關閉動畫來建置頁面；一個需要動畫才能看起來完成的作品並非真正完成。工作順序：

1. 標記。 從設計單中將顏色和字體角色作為 CSS 自定義屬性。下游所有內容僅引用標記。<skill>/assets/base.css 是一個中立的基礎，你可以從它開始（重置、標記名稱、流體字體階梯、網格、焦點和選取樣式、運動輔助工具）；它本身沒有外觀。

2. 英雄區，完全按照藍圖描述的那樣， 在桌面和手機寬度下。在存在其他任何東西之前，先將大的東西變大，小的東西變小。

3. 每個區塊從其藍圖開始， 使用此專案的內容。保持幾何形狀，更改主題。相鄰的區塊不得共享版面。將概念帶入每個區塊， 包括定價、常見問題和頁尾：即使在優秀的網站中，最常見的失敗也是一個獨特的第一屏，後面跟著標準區塊。

4. 圖片， 按以下優先順序：

   1. 專案自身的；
   2. 生成的，如果你有圖片工具；
   3. 來自於開放館藏的主題世界的真實圖片， 只要有誠實的圖片存在。使用 node <skill>/scripts/assets.mjs "<query>" 搜尋它們（Openverse、Wikimedia Commons、Art Institute of Chicago 和 Met；預設僅允許商業使用的授權）。搜尋盤點列表，而不是類別：舊明信片中的街道、社區的舊地圖、近距離的材料、版畫中的行業、同類的博物館物品、植物圖版、星圖。大量且有目的地使用它們：一張作為英雄區的檔案照片、被放大成頁面主題的版畫、作為聯絡區塊的真實街道地圖。在選擇之前先看看它們；--get <ref> 將其下載到 assets/ 並記錄其來源和授權，--credits 列印頁尾的來源標註行。找到的圖片展示了客戶周圍的世界，並且絕不呈現為客戶自身的產品、房間、菜餚、人物或團隊；
   4. 使用 --have illustration 繪製，如果簡報需要插圖風格。如果沒有圖片工具，則將段落樣式文字或 SVG 圖案（例如，地圖、圖表、圖解）繪製到圖片槽位中，使用主題的內容。

   在建立圖片之後，但在繼續之前，以手機寬度查看頁面。如果一個圖片在該尺寸下被縮小到無法辨識，它需要一個不同的裁切或位置。

5. 可訪問性。 在提交之前透過 node <skill>/scripts/inspect.mjs 執行檢查。在盲測中，對比度不足是評估中代價最高的單一錯誤。

6. 內容。 檢查文案稿的長度：每段文字是否確定了節奏，或者一個過長的段落成為了障礙？檢查你是否撰寫了所有內容（一個帶有「您的內容在這裡」的區塊不是完成的區塊）。檢查每個按鈕和連結是否具有以行動為導向的標籤，而非「了解更多」。

7. 該概念的一個即時互動元素， 使用 <skill>/assets/live-thing.md 中的程式碼範例。在盲測中，缺少即時互動元素是一個獲勝頁面輸給另一個獲勝頁面的主要原因。

在整個過程中，使用 node <skill>/scripts/inspect.mjs 被動檢查你的工作——它會立即捕捉無效的對比度、過小的字體或缺少 alt 屬性，這些問題在事後很難修復。

7. 設定風格

這是事情可能出錯的地方。該方向設計單說明了區塊佈局和比例；風格指南提供了編碼約束：

• 僅使用來自設計單的一種字體和一種備用字體。 檢查它們是否已載入。不要添加更多。
• 讓大型字體變大。 字體階梯中的每一步都應具有明確的用途，並且設計單中的最大尺寸應真正大。
• 顏色應乾淨。 僅使用來自調色盤的顏色。不要添加新顏色。每個顏色變體（懸停、啟動、連結）都必須在調色盤中有其來源，並以合理的亮度或飽和度偏移進行定義。如果調色盤沒有提供足夠的變體，請從設計單中的角色重新繪製它。
• 間距應一致。 使用 4px 或 8px 的基數，並且不要偏離它。相鄰的區塊應有相同的垂直間距。
• 影像邊界應清晰。 影像應填充其容器，或具有明確的邊距。不要在影像周圍留下隨機的空白。

8. 檢查它

使用 node <skill>/scripts/inspect.mjs 針對風格指南檢查頁面。它會報告對比度錯誤、字體大小錯誤、遺失的 alt 屬性、尷尬的換行和其他常見問題。在每個主要區塊之後和提交之前執行它。

9. 處理邊際情況

• 長內容。 如果文字太長，可以將它分成兩個區塊，或使用 --redraw section:<role>=<id> 選擇一個不同的區塊設計，但永遠不要為了適應內容而縮小字體。
• 缺少圖片。 使用搜尋找到的真實圖片，或繪製一個 SVG 佔位符，而不是使用假的產品照。
• 品牌約束。 如果客戶有現有品牌，使用 --keep palette,type 並將品牌值映射到設計單的角色上。
• 多個頁面。 對每個頁面單獨執行此流程。共用設計語言，但單獨處理每個頁面。

10. 撰寫報告

將你的工作記錄在 .taste-skill/report.md 中，包括：使用的方向、選擇它的原因、任何重新繪製及其原因、使用的圖片及其來源、以及客戶需要確認的任何範例細節。

參考資料

• references/copy.md：文案寫作指南和計算
• references/direction-sheet.md：方向設計單格式
• references/report.md：報告格式
• assets/base.css：中性 CSS 基礎
• assets/live-thing.md：即時互動元素範例
• scripts/draw.mjs：方向發牌腳本
• scripts/inspect.mjs：風格檢查腳本
• scripts/assets.mjs：圖片搜尋腳本