Iconsaz：自訂圖示包是做什麼的？

打造一個全新的、原創的圖示包，使其看起來屬於使用者的品牌：與其字型相同的筆觸感覺、與其 UI 相同的轉角語言、與其行銷相同的氛圍。品質標準設為與最佳公開圖示包（Lucide、Phosphor、Tabler、Heroicons、Material Symbols、Untitled UI）相當：統一的網格、統一的筆觸規則、統一的光學尺寸、可預測的命名。輸出的是使用者自己的圖示包，而非任何現有圖示包的複製品。

本技能中的檔案

檔案	何時讀取
`references/question-flow.md`	步驟 1：14 個問題的確切措辭、選項、預設值和批次處理
`references/style-rules.md`	步驟 2-7：基準規則、品牌到風格的對應、建構規則、入門目錄、隱喻庫
`references/rtl-and-culture.md`	步驟 8，以及當產品是 RTL 或出貨到多個地區時
`templates/style-brief.md`	步驟 3：複製並填寫；這也是使用者保留的檔案
`scripts/validate_icons.py`	步驟 6、7 和 9：檢查網格、內邊距、筆觸、viewBox、currentColor、隱藏圖層、命名、完整性、RTL 配對
`scripts/preview_sheet.py`	步驟 6 和 9：建立 `preview.html`（尺寸、網格縮放、淺色/深色、顏色、RTL 切換）
`scripts/package_pack.py`	步驟 10：驗證，然後壓縮 SVGs + 純 Figma 可用副本 + 預覽 + 摘要 + 匯入指南

這些腳本是純 Python 3.8+，無需任何依賴。使用 python scripts/<name>.py --help 執行。

兩種模式

全新圖示包： 執行完整的工作流程如下。
擴展現有圖示包： 使用者分享先前由此技能建立的風格摘要（其中包含 icon-spec JSON 區塊）。跳過訪談和品牌掃描。讀取摘要，只詢問要新增哪些圖示（並為抽象概念提供隱喻），按照摘要的確切數值繪製它們，根據摘要進行驗證，將它們加入圖示清單，更新次版本號並新增一行變更日誌。在此模式下，絕不更改網格、筆觸、內邊距或圓角半徑：與舊圖示完全匹配是重點。如果使用者想要更改風格，那將是一個新的主版本號，並且必須重新繪製每個圖示。

工作流程

在三個關卡讓使用者參與：品牌掃描（步驟 2）、摘要（步驟 3）和測試圖示（步驟 6）。在錯誤的假設下繪製 60 個圖示比多一次確認浪費他們更多的時間。

1. 訪談

按照 references/question-flow.md 中的 14 個問題，依序提出，每次三到四個。對於選擇題，請使用結構化的提問工具（例如 AskUserQuestion）（如果有的話），對於上傳和輸入的回答則使用純文字聊天。

如果使用者跳過一個問題，從參考資料中選擇預設值，用一句話說明你選擇了什麼以及原因，然後繼續。不要重新詢問。
不要要求使用者提供他們現有的圖示，如果他們提供了，感謝他們並放在一邊。這是一套新的圖示；舊圖示會將風格拉回團隊試圖離開的方向。他們的設計系統規則（網格、筆觸、圓角半徑）是受歡迎的，這就是問題 9 詢問的內容。
上傳的螢幕截圖會包含現有圖示。僅使用它們來了解哪裡需要圖示（步驟 4），而絕不使用來了解它們看起來應該如何。

2. 品牌 DNA 掃描

研究所有上傳的內容：標誌、品牌指南、顏色、字型、情緒板、行銷資料和螢幕截圖。使用 references/style-rules.md 中的對應表（「從品牌到圖示風格」），根據證據推導出風格。觀察：

字型： UI 尺寸下的主幹粗細、端點（圓形、平頭、斜角）、字碗的圓潤度、x 字高、幾何 vs. 人文。這設定了筆觸粗細和端點/連接樣式。
標誌： 相對於其尺寸的線條粗細、轉角形狀、角度（45° 與自由角度）、任何標誌性特徵（一個凹口、一個捲曲、一個切角），這些可能成為微妙的圖示包全域特徵。
UI 螢幕截圖： 元件圓角半徑、邊框寬度、密度、間距。這設定了圖示圓角半徑和尺寸集。
顏色和圖像： 這些僅用於告知氛圍。圖示以 currentColor 形式提供。

以表格形式顯示發現，並要求使用者確認或更正：

信號	證據	決定	信心
筆觸	正文字體是 Nunito Regular，在 16 px 文字時主幹約為 1.6 px	在 24 時為 2 px，在 20 時為 1.75	高

當證據不足時明確說明（「未提供字型，因此筆觸僅從標誌推斷，信心中等」）。

3. 風格摘要

複製 templates/style-brief.md，填寫每個部分並顯示給使用者。它涵蓋網格和內邊距、每個尺寸的筆觸、端點和連接、圓角半徑、樣式和狀態、尺寸、氛圍、命名、RTL 決策以及按分類分組的完整圖示清單。底部的 icon-spec JSON 區塊是腳本讀取的內容，因此請確保它與文字說明保持同步。在繪製任何內容之前獲得明確批准。

4. 遺漏圖示查找器

逐個區域檢查每個螢幕截圖（導航、標題、工具列、按鈕、清單列、表單欄位、空狀態、提示訊息和狀態、設定列、卡片），列出每個需要圖示的位置。提供一個表格（螢幕、位置、需要的圖示、是否已在清單中？），並在使用者同意後將遺漏的圖示加入摘要的圖示清單。如果沒有螢幕截圖，請使用 references/style-rules.md 中的入門目錄以及產品背景資訊。

5. 隱喻選項

對於每個抽象概念（退款、諮詢、同步、入門、訂閱、忠誠度、合規性等），提供兩三個視覺想法，每個附帶一行理由，並使用 references/rtl-and-culture.md 標記任何文化風險。references/style-rules.md 中的「隱喻庫」提供了起點。讓使用者選擇，然後將選擇記錄在摘要中，因為下一個設計師需要知道為什麼 refund 是一個帶有返回箭頭的硬幣。

6. 測試圖示

首先繪製三到四個範例：home、search、settings，以及最具特色的產品特定圖示。以每種獲批准的樣式、每種尺寸製作每個範例。然後執行

python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html

修正每個錯誤，自己檢查預覽（如果有的話，在瀏覽器中打開它並檢查 1× 尺寸，而不僅僅是縮放），然後顯示給使用者。詢問哪些地方感覺不對勁。此階段的典型調整：筆觸稍微加重或減輕、轉角更柔和、細節多一點或少一點。如果任何內容發生變化，請更新摘要。在使用者批准範例之前，不要開始完整圖示集。

7. 完整圖示集

按照下面的「如何繪製」繪製摘要中的每個圖示。逐個分類進行，並在每個分類完成後執行驗證器，這樣就不會在 80 個圖示後才發現一個系統性錯誤。

8. RTL 與文化

如果文字方向是 RTL 或雙向，則為每個方向性圖示（箭頭、返回和前進、傳送、回覆、復原和重做、登出、清單縮排等）製作一個鏡像的 -rtl 版本。保持非方向性圖示不變；鏡像一個時鐘或播放按鈕是錯誤的。根據文化風險清單檢查每個圖示。兩個清單都在 references/rtl-and-culture.md 中。在規範的 directional 清單中標記方向性圖示，以便驗證器檢查配對。

9. 最終檢查

在不使用 --samples 的情況下執行驗證器。它必須報告零錯誤。然後目視檢查，因為腳本無法判斷可識別性：

摘要中的每個圖示都存在於每種樣式和尺寸中（驗證器：完整性）。
每個圖示都遵循摘要：網格、內邊距、筆觸、端點、連接、圓角半徑（驗證器）。
整個圖示集的光學尺寸均勻；沒有什麼看起來比預覽網格中的相鄰圖示更大或更小（驗證器會對異常值發出警告）。
每個圖示在最小尺寸下仍然清晰：查看預覽的 1× 行。如果兩個細節合併，在該尺寸下移除其中一個，而不是變細筆觸。
名稱遵循 category/name/variant/size，小寫 kebab-case，並且在任何地方含義相同（驗證器：命名）。
RTL 配對存在並且確實彼此鏡像（驗證器：RTL）。
沒有文化風險符號混入。

在交付之前修正任何失敗的項目並再次執行檢查。

10. 交付

Figma Professional（或更高級別）： 使用 Figma MCP 建構圖示庫。如果其工具缺失或未通過驗證，請告知使用者需要連接並提供壓縮檔作為替代。如果 Figma 技能（例如 figma-use）可用，請在首次寫入呼叫之前載入它。

建立一個新檔案，包含三個頁面：封面、圖示和使用方式。
在圖示頁面上，為每個分類建立一個區段。對於每個圖示，將每個 SVG 轉換為節點（figma.createNodeFromSvg），將每個節點轉換為元件，使用變體屬性（style=outline, state=default, size=24）命名元件，並使用 figma.combineAsVariants 將它們組合成一個名為 category/name 的元件集。保持筆觸為筆觸；不要將它們轉換為輪廓。
每次寫入呼叫建立一個分類。大型批次會超時，並且失敗只會損失一個分類，而不是整個圖示包。每個分類完成後截取螢幕截圖，並與預覽進行比較。
封面： 圖示包名稱、版本、氛圍詞彙和一個英雄圖示網格。使用方式： 尺寸以及何時使用每種尺寸、文字旁邊的間距、啟用/停用規則、RTL 規則、命名、應做/不應做範例，以及「要新增圖示，請與技能分享風格摘要」。
同時提供來自下一個路徑的壓縮檔，因為開發者無論如何都需要 SVG。

Figma Free（或沒有 Figma）： Figma MCP 無法在免費方案上寫入圖示庫檔案，因此改為交付檔案：

python scripts/package_pack.py icons/ --brief style-brief.md --out dist/

如果有錯誤，它會拒絕打包；如果有警告，在你審查完畢之前也會拒絕；只有在每個剩餘的警告都是有意為之的時候，才添加 --allow-warnings。然後它會寫入 dist/<pack>-v<version>.zip，其中包含 svg/（category/name/variant/size.svg 樹狀結構）、figma/（扁平的 category__name__variant__size.svg 副本，在 Figma 中進行一次批次重新命名後會變成斜線名稱）、preview.html、manifest.json、風格摘要，以及 IMPORT-TO-FIGMA.md，其中包含逐步說明，用於匯入圖示並將它們轉換為帶有變體的元件。同時在對話中總結這些步驟。

11. 儲存摘要

將最終的風格摘要儲存在交付物旁邊（命名為 <pack>-style-brief.md），並告訴使用者，使用這些詞語或接近的詞語：「保留此檔案。下次你需要圖示時，先與我分享它，新的圖示將與此圖示包完全匹配。」

如何繪製

在協定的網格上手寫 SVG，就像你在設計工具中建構向量一樣。每個尺寸都在其自己的原生畫布上繪製（20 px 使用 viewBox="0 0 20 20"，依此類推），因此小尺寸可以獲得自己的筆觸和簡化的細節，就像 Material 的光學尺寸和 Heroicons 的 20 和 16 px 集合所做的那樣。

根元素：<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">。在根元素上設定繪畫屬性，讓形狀繼承，這能保持每個圖示一致。
在網格上使用基本圖元（circle、帶有 rx 的 rect、line、帶有弧線的 path）。將座標保持在整數或半單位上（最多四分之一單位）。脫離網格的點在 1× 下會渲染模糊。
顏色僅使用 currentColor。填充的形狀使用 fill="currentColor"。雙色調的第二個色調是摘要中指定不透明度的 currentColor，絕不使用第二種顏色。
沒有轉換、隱藏元素、<text>、嵌入圖像、<style>、ID 或編輯器元資料。將所有內容扁平化為純幾何體。
將形狀適合其關鍵線（圓形、正方形、縱向或橫向矩形；請參閱 style-rules），以便圓形圖示和方形圖示看起來大小相同。
內部間隙至少為一個筆觸寬度，在 16 px 時更寬。
填充變體應遵循與輪廓相同的輪廓，細節以間隙形式挖空。它們應該看起來像是同一個圖示，「已開啟」。
要製作較小的尺寸，請從縮放到新畫布的 24 px 幾何形狀開始，將點對齊到網格，從摘要中設定該尺寸的筆觸，然後移除不再適合的細節。永遠不要只是縮放檔案。
匹配品牌字型：端點和連接鏡像其終端，曲線鏡像其字碗，並且如果摘要要求，一個圖示包全域簽名（一個凹口、一個切角）可以呼應標誌。

一個最小的輪廓圖示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="10.5" cy="10.5" r="7"/>
  <path d="M15.5 15.5 21 21"/>
</svg>

工作佈局

icons/<category>/<name>/<variant>/<size>.svg   例如 icons/nav/home/outline/24.svg
icons/nav/arrow-back-rtl/outline/24.svg        鏡像的 RTL 孿生圖示
style-brief.md                                 已填寫的範本，包含 icon-spec 區塊
preview.html                                   已生成
dist/<pack>-v<version>.zip                     已生成

標準的圖示名稱是不帶 .svg 的路徑，因此是 nav/home/outline/24。這也是 Figma 元件名稱，這使得程式碼、設計和檔案保持一致。

與使用者溝通

許多使用此技能的人是設計師，而不是開發者。除了「筆觸」之外，也說「線條粗細」；除了「半徑」之外，也說「轉角圓度」；並用一句話解釋任何腳本輸出，而不是直接貼上原始內容。保持每個互動簡短：幾個問題、一個決定或一個需要審查的事項。

Iconsaz：自訂圖示包