參考資料轉樣式

將參考資料轉換為整個網站的樣式，顯示在視覺板（board.html）上，並以可衡量的樣式指南（style.md）作為後盾。外觀來自參考資料；內容來自主題。定義樣式絕不會改變應用程式或網站。應用樣式則會改變，但僅限於使用者指定要使用已儲存樣式時（請參閱「應用已儲存樣式」）。

在進行任何頁面變更之前，先對齊樣式一次。 樣式指南是唯一真相來源：根據它建立所有視覺元素，並先將所有修正放入其中，這樣根據它建立的任何東西都不會偏離您在視覺板上看到的內容。

測量，而非目測。 視覺善於看出參考資料的效果，但難以精確判斷顏色、尺寸和間距。參考資料顯示的每個數值都來自 scripts/measure.py（其他數值則由此推導或由人為選擇，並會明確標示），並且每個視覺板樣本都透過 scripts/verify.py 以相同方式渲染和測量，直到匹配為止。視覺板保持視覺化；數字則存在於樣式指南和報告中。

先安靜，再調整。 參考資料本身就是其樣式的最佳體現，將每個特徵擴散到每個元素上可能會過度。因此，第一次通過時，每個獨特特徵只放在其效果最顯著的位置，採用其測量值，使用者則在審核時調整個別特徵的強度。強度改變的是特徵出現的位置，絕不改變其測量值。

何時不使用

使用者希望完全匹配他們自己的 Figma 畫框。請直接建立該畫框。
專案已有一個樣式儲存在 design/styles/ 中。改為應用它（請參閱「應用已儲存樣式」）。

前置需求

在步驟 1 之前，執行 python3 <此技能的路徑>/scripts/doctor.py（在 Windows 上，請用 py -3 取代所有 python3）。它會檢查每個依賴項，並為每個缺少的依賴項列印確切的安裝命令。

退出碼 0： 已就緒。
退出碼 1： 缺少 Python 套件。向使用者顯示列印的命令並等待；沒有它們就無法進行測量。
退出碼 2： 瀏覽器無法執行。提供列印的安裝命令。如果使用者無法安裝，則僅使用圖片參考資料（要求提供即時網站的螢幕截圖），使用 --unverified 參數執行 check.py，並在審核時說明視覺板的準確性未經驗證。
完全沒有 Python（找不到 python3，在 Windows 上也找不到 py -3）：無法執行 doctor.py。告知使用者此技能需要 Python 3.9 或更新版本，請從 python.org 或系統的套件管理員安裝，然後等待。請勿自行安裝 Python。

決策

自行做出執行所需的所有決策，並在視覺板處停止。視覺板讓使用者一眼就能看到整個樣式，因此他們在該處進行判斷，而不是事前回答一連串問題。

決定，而非詢問： 採用和保留哪些特徵、每個特徵的起始強度、樣式名稱和代號、主題列表、參考資料一致時的風格方向，以及如何避開現有樣式。將每個選擇記錄在樣式指南中（一個 chosen: 來源或一列「採用/保留」行），以便日後修改。
僅在無法繼續時才提前詢問： 參考資料無法載入或僅是縮圖、缺少依賴項，或參考資料指向相反方向（例如淺色草稿紙與深色藍圖），而它們或專案都無法解決。然後提出一個簡短問題，附上選項，您的首選在前，且無其他內容。
保持停止訊息簡短。 數字存在於樣式指南和 verify.md 中，因此訊息不包含表格或測量值。以以下區塊結尾，然後等待：

需要您的意見：有什麼需要更改的嗎？

視覺板： <board.html 的路徑> · 準確性： 35 個測量值中有 35 個匹配（verify.md） 已為您決定： 名稱和代號；已採用和保留的主要特徵；方向（如果有選擇） 起始設定為安靜： 每個安靜特徵及其出現位置，簡短說明

調高或調低某個特徵：說出它的名稱，例如「更多網格」或「少一點紅色」

更改其他內容：說明是什麼

什麼都不改：樣式保持現狀已儲存

如何使用： 樣式已儲存在 design/styles/<代號>/。當您想使用它時說出名稱，例如「將 <代號> 應用到所有地方」。在此之前，應用程式或網站不會改變。

如果使用提問工具，也請在那裡提問，並以「需要您的意見」開頭。無需批准：每個已儲存的樣式都可以直接使用，使用者稍後透過名稱選擇一個。

步驟

查看參考資料，然後測量它們。 打開每一個：滾動即時網站並觀察它們的動態。如果某個參考資料無法載入或僅是縮圖，請要求提供螢幕截圖。絕不要僅從標題或 URL 工作。為每個參考資料儲存一張螢幕截圖到 references/，並記錄您觀察到的任何動態。偏好 PNG：JPEG 會使細的彩色線條變灰。

然後閱讀 references/measure.md，並針對您可能採用的每個特徵（一個標題、一個按鈕、一條規則、一塊背景）各裁剪一個區域，全部在一次執行中完成。
閱讀專案。 在選擇樣式之前執行此操作，以便方向已經契合：
- 如果存在 design/styles/index.md，請閱讀它，這樣新樣式就不會與先前的樣式衝突，並記下哪些代號已被使用。
- 列出 4-8 個真實的物體、材料、流程、測量值或地點，每個都附帶其來源。從索引的共享主題列表開始。使用真實的事物，而非主題的象徵，並排除任何您無法找到來源的內容。
- 找出網站的令牌（CSS 自訂屬性、框架類別或 Webflow 變數）以及使用中的每種元件類型，例如標題、按鈕、卡片、圖形、列表列、導覽和表單，並附帶它們所在的位置。樣式指南會重新設計它們的外觀；它們的內容和結構保持不變。

解讀樣式。 對於多個參考資料，閱讀它們共有的特徵。將每個特徵與顯示該特徵的裁剪區域聯繫起來；這個證據應放在樣式指南中，而不是對話中。

採用：樣式	保留：屬於單一參考資料的內容
色板、字型特徵、線條與形狀、表面、密度、節奏、層級、動態	素材、標誌、文案、確切的頁面佈局、一次性細節

為每個「採用」的特徵設定一個強度，寫在樣式指南的強度欄位中：

強度	特徵出現的位置	用途
`安靜`	僅在 1-3 個效果最顯著的位置，已命名	每個獨特特徵的起始設定（一個強調色、一個顯示字體、一種紋理、一個圖案）
`完整`	每個適用的元件	僅用於每個頁面都需要的內容：頁面背景、文字顏色，以及不會設定情緒的特徵（例如方角）
`強烈`	每個適用的元件，並給予更多空間：更大的區域、特色用途	僅在使用者要求更多時使用

將安靜特徵調低意味著將其移至「保留」欄。

自行決定樣式（請參閱「決策」）：選擇特徵、一個代號未被使用（除非使用者要求修改該樣式）的名稱，以及一個不與現有樣式衝突的方向。除非參考資料之間存在無法解決的衝突，否則不要在此處停止。

撰寫樣式指南。 每次執行都會有自己的資料夾，因此不會覆蓋其他執行：
```
design/styles/
  index.md              每個樣式、其應用範圍、共享主題列表
  <代號>/
    style.md            樣式指南
    board.html          視覺檢查
    measured.json        measure.py 從參考資料讀取的內容
    verify.md           視覺板與參考資料的匹配程度
    references/         參考資料螢幕截圖
```
從此技能複製 assets/style.md 到 style.md 並填寫。保留所有標題及其順序，空白章節請寫 None，以便所有樣式指南格式一致。精確寫出數值（hex、px、字型名稱），以便另一個工作階段可以在沒有參考資料的情況下重建樣式。
- 證據： 每個測量裁剪區域一行，數字從 measure.py 的輸出複製。
- 令牌： 每個令牌都說明其來源：crop:<名稱>（該值是在該處測量的；顏色必須匹配該裁剪區域的讀數或其 likely 值）、derived: <規則>（從測量的令牌建構，例如懸浮色調或加深至 4.5:1 的文字顏色）、或 chosen: <理由>（用於參考資料未顯示的內容，例如狀態和內文）。尺寸也來自測量：字型大小是大寫高度（大寫字母類型裁剪區域的墨水高度）÷ 該字型的大寫高度比例。每個規則都命名一個真實的主題來源，且不使用「保留」欄中的任何內容。每個令牌前綴加上 --<代號>-，以便樣式可以在同一頁面上共存而不衝突。
- 元件： 為每種元件類型提供一個屬性表格（屬性，然後是令牌或確切數值，適用於每個狀態），以便無需猜測即可重建。盡可能使用令牌。遵循每個特徵的強度：位於安靜特徵命名位置之外的元件，應使用樣式中較樸素的令牌，例如內文字體或墨水顏色。
- 映射： 將步驟 2 中的每個現有令牌、類別或變數，以及每種元件類型，映射到其新的令牌或元件規範。這是應用樣式時的工作依據，因此專案中不能有任何未映射的內容：如果沒有替代內容，請寫 Keep 或 Drop 並附上理由。
展示樣式，然後迭代。 閱讀 references/board.md，將 assets/board.html 作為檔案副本（不要重新輸入）複製，並僅根據樣式指南填入其佔位符：每種元件類型及其狀態、一個樣式區段、一個非常小的真實區段，以及動態，每個都用 data-crop 標記其來源。然後根據參考資料驗證它，並根據樣式指南檢查它，並自行修復所有失敗，最多進行三輪：
```
python3 <此技能的路徑>/scripts/verify.py design/styles/<代號>
python3 <此技能的路徑>/scripts/check.py design/styles/<代號>
```
在使用者的瀏覽器中打開視覺板，並提供 board.html 和 verify.md 的路徑。

然後將樣式以及任何新的主題項目新增到 design/styles/index.md，必要時從 assets/index.md 建立它。design/styles/ 是此技能在專案中唯一會更改的位置。

在審核處停止，並顯示「決策」中的區塊：有什麼需要更改的嗎？準確性由 verify.md 顯示，以及三輪後仍失敗的內容，因此使用者僅判斷方向和強度。對於每一輪反饋，更新樣式指南，僅重建視覺板中受影響的部分，然後執行一次 verify 和 check，並修復它們報告的內容，最多三輪，且不要撤銷使用者的更改。如果名稱或主題列表有變，請更新索引，重新打開視覺板，並再次提問。每一輪都以測量結束，因此無論使用者何時停止，已儲存的樣式始終準確。要調高或調低某個特徵，請更改其強度（在其後寫上 (user feedback)）及其影響的元件；數值保持測量值，因此不需要 data-accept。如果使用者希望某個特徵比參考資料本身更強烈（更大、更重、更飽和），這會改變數值：將其視為以下情況處理。使用者要求的更改即使是偏離參考資料，也是刻意的：給予令牌 chosen: user feedback，並使用相同理由標記其樣本為 data-accept，這樣 verify 會將其報告為刻意而非失敗，並且絕不要撤銷它以讓 verify 通過。如果使用者拒絕的是方向本身而非細節，請不要修補令牌：返回步驟 3，重新解讀參考資料，選擇一個新方向，重建，然後再次在審核處停止。

當使用者沒有需要更改的內容或轉向其他事情時，執行結束。沒有核准步驟。稍後要使用該樣式時，使用者說出名稱，然後此技能會應用它（請參閱「應用已儲存樣式」）。

應用已儲存樣式

當使用者指定使用某個已儲存的樣式時，例如「將 <代號> 應用到所有地方」或「在定價頁面上使用 <代號>」，請閱讀 references/rollout.md 並遵循它。它僅根據樣式指南運作：將樣式指南的令牌新增到專案中，然後逐行處理映射，根據每個元件的屬性表格重新設計其樣式，而不改變其內容或結構。跳過步驟 1-5：樣式已定義完成。

範例

閱讀 examples/drafting-sheet/style.md 和 verify.md；JSON 檔案和 board.html 是產生的輸出，僅在需要查看 data-crop 標籤時才值得打開。examples/drafting-sheet/ 是一個完整的執行：一個繪圖紙參考資料被測量成八個裁剪區域、樣式指南，以及一個 36 個測量值全部匹配（其中一個是刻意為之）的視覺板。

參考資料：技術圖紙和藍圖，針對一個關於成長中的輪子的網站。

採用： 細而精確的線條、帶有格線的尺標、小型技術標籤、密集的註解。
保留： 每個圖紙的標題欄、零件和圖紙佈局。
主題： 一個 5.5 米成長中的輪子、真實的機械尺寸、工程圖紙。
規則： 藍圖尺寸線 + 真實機械尺寸 = 附有其實際測量值的圖形。

參照轉風格