qwopop/competitor-reels-tool

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 <領域> --brief "<關於主題的一句話>" \
  --sections <依你的論點順序排列的角色> [--tone <調性>] [--have <素材>] [--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 "<查詢>" 搜尋它們（Openverse、Wikimedia Commons、芝加哥藝術學院和大都會博物館；預設只允許商業使用的授權）。搜尋盤點清單，而不是類別：它在舊明信片中的街道、社區的舊地圖、近距離的材料、雕刻中的行業、同類的博物館藏品、植物圖版、星圖。將它們用於大面積且有目的性的用途：一張檔案照片作為主視覺、一幅雕刻放大作為頁面的主題圖案、街道的真實地圖作為聯絡區塊。在選擇前，先看看每一個；--get <參考> 會將其下載到 assets/ 並記錄來源和授權，而 --credits 則會印出要在頁尾使用的出處文字。找到的圖片展示了客戶周圍的世界，絕不代表為客戶自己的產品、房間、菜餚、人物或團隊；
   4. **手繪在...

…

[原文過長，已截斷]