品牌套件
Canvas 資料夾內存放著畫板：您建立的 HTML 畫布。本技能為同一資料夾新增了第二種行——公司發佈的圖片，以圖片形狀而非畫板的方式呈現。包含：Logo、字體樣本、商店截圖、社群貼文、廣告素材、新聞攝影。
重點在於縱向比較。行是表面，而非資產類型，因此 X 上的頭像會排在 Instagram 的頭像上方，後者又排在 TikTok 的頭像上方。任何與其他不符的項目，都會在該列中形成一個斷點，讓您無需費心尋找就能立刻發現。
開始收集前，請先閱讀 references/sources.md。這是每個表面的操作手冊，按產出順序排列，並附有對應的呼叫。當您要編寫 manifest 並連接產生器時，請閱讀 references/manifest.md；其中包含 schema、驗證腳本與 gen.py 的規則。
您將產出的內容
canvases/<slug>/
assets/brand/
manifest.json 記錄來源：行，按標準順序排列
identity/ social/ stores/ ads/ press/
gen.py 讀取 manifest，將其行附加到 layout.json 中
layout.json Canvas 與品牌頁面實際渲染的內容
assets/brand/ 是 assets/ 中唯一 Canvas 會提供 URL 的部分。產生器會將 assets/ 下的所有其他內容以 data: URI 的形式內聯到畫板中，因此需要獨立形狀的圖片必須放在此處。
七個步驟
切勿先撰寫 manifest。 manifest 中的每個檔案都必須已通過驗證。驗證失敗的檔案將會被刪除；它不會在 manifest 中獲得帶有備註的條目。
- 參考一個已完成的作品。 應用程式附帶了十二個範例。列出它們並印出其中一個的所有行：
KIT="$(sp root)" ls "$KIT"/canvases/*/assets/brand/manifest.json python3 -c 'import json,sys for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \ "$KIT/canvases/claude-ios/assets/brand/manifest.json"sp找不到嗎？執行sh <sp-canvas skill dir>/scripts/install.sh（Windows：install.ps1）並遵循該技能的references/install.md。其在 stderr 上的[super-prototyping:notice]行有其自身的規則：完成此步驟，然後按照其指示操作。 - 公司自身的品牌或新聞資料包。 全解析度的 Logo、字體與顏色值都來自這裡，請優先檢查。請參閱
references/sources.md。 - 商店列表。 最可靠的批量來源，API 可一次返回所有截圖。
- 社群媒體。 頭像、橫幅，以及每個平台 4–8 張已發佈的視覺素材。請先驗證每個帳號——請參閱下方的「驗證帳號，而不是使用者名稱」。
- 行銷網站與新聞室。 主視覺、功能頁面插圖、og:image 卡片、新聞攝影。
- 驗證每個檔案。 位元組、副檔名、尺寸、大小、重複項。
references/manifest.md中有驗證腳本。它必須輸出NO PROBLEMS。 - 撰寫 manifest，連接
gen.py，重新產生，並在瀏覽器中查看。
行是固定的詞彙表
行標題來自此列表，您撰寫的行必須是其子序列：按此順序，跳過任何不適用的項目。
Logo & wordmark · Typeface · Art direction · Applied identity ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
Announcement cards · Paid advertising · Press photography
先放識別，然後每個平台一行。其中有兩個標題並非不言自明，因此為了與出貨的資料夾匹配：
- Art direction 是公司自身發佈的圖像風格：插圖系統、主視覺、攝影處理、角色研究、指引用圖。
- Applied identity 是應用在實物上的識別：產品 UI、海報、標誌、活動舞台、周邊商品。
請勿自行發明行標題。如果某個表面對此產品不存在，請將其省略：缺少一行是正確的，空行是一個錯誤，放入其他公司的素材則是在說謊。
數量
十二個已出貨的資料夾包含 50 到 144 個資產，大多數介於 70 到 120 之間。跨表面的廣度是重點，因此每個社群平台 4–8 張已發佈的視覺素材，勝過一個商店的四十張截圖——但商店行應包含該商店擁有的所有項目，在那些資料夾中通常是 4 到 20 個。
決定什麼可放入的五條規則
來源是二元的，且絕非猜測
"theirs" 表示公司發佈的。"archive" 表示策展的品牌檔案館發佈的，且檔案館只有在為每個項目註明原始來源與日期時才算數。如果您無法確定任何一項，則該資產不得放入。 這正是此清單存在的全部原因：圖片會說明其來源，而由第三方策展的內容絕不能偽裝成公司發佈的內容。
驗證帳號，而不是使用者名稱
不要相信您獲得的任何使用者名稱，包括規格書中寫明的。請確認它可以解析、在存在驗證機制的地方已通過驗證，並且是正確的公司。被佔用或休眠的仿冒帳號很常見：在過去的一次檢查中，X 上看似正常的 @tiktok 實際上是一個不相關的本地優惠帳號，而該公司的帳號是 @tiktok_us。
請在您的報告中說明您使用了哪些帳號、使用者名稱與商店 ID，以及哪些是錯誤的。
HTTP 200 不代表該頁面存在
行銷網站與新聞室通常是單頁應用程式，會對任何路徑（包括您虛構的路徑）返回 HTTP 200。請改為檢查渲染後的 <title>。真正的文章會有自己的標題；虛構的路徑則會獲得該網站的通用標題：
curl -sL "$URL" | grep -o '<title>[^<]*</title>'
請先在該網站上對一個故意偽造的路徑執行此命令，這樣您就能知道其通用標題的樣式。任何返回通用標題的路徑都不存在：請捨棄它，並捨棄從該路徑取得的任何內容。
相同位元組的檔案視為單一資產
在每批次下載後，從 Canvas 資料夾執行：
find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d
它必須不輸出任何內容。如果雜湊衝突，請刪除新的副本。同一張圖片的裁切與縮放版本在位元組上並不相同，此處沒有任何工具能捕捉這種情況——需要靠人工比對，請保留較大的版本。
副檔名必須與位元組內容相符
file <path> 是權威依據，而非您下載時的 URL。曾發生過 PNG 儲存為 .jpg、WebP 儲存為 .png 以及 HTML 驗證頁面儲存為 .jpg 的情況。請重新命名以匹配。HEIF 應進行轉換而非重新命名，因為此處的瀏覽器無法繪製它：
sips -s format jpeg in.heic --out out.jpg
檔案存放位置
| 群組 | 內容 |
|---|---|
identity | Logo、文字標誌、字體樣本、顏色、藝術指導、應用識別 |
social | X、Instagram、TikTok、YouTube、LinkedIn |
stores | App Store、Google Play、Microsoft Store |
ads | 付費廣告創意、公告卡片 |
press | 新聞攝影 |
請使用這五個名稱；不要自行發明平行名稱。請根據檔案內容命名（例如 x-avatar.jpg、appstore-iphone-03.jpg、wordmark-black.svg）。
某些資料夾已將圖片存放在 assets/brand/ 下，產生器會將其內聯到畫板中，而不是以行的形式繪製——例如 mockup 使用的個人資料照片。這些不是品牌素材；請保持原樣，不要將其納入 manifest。在開始前先找到它們：
git ls-files assets/brand/
印出的每個路徑都應放入驗證腳本的 IGNORE 集合中，路徑相對於 Canvas 資料夾，腳本會據此進行比較。
連接配置
在該資料夾的其他目錄常數旁邊加入一個常數：
BRAND_DIR = OUT / "assets" / "brand"
並在該資料夾完成其行列表的位置加入一行。此處的產生器有兩種形式，請匹配您面前的類型：
rows += json.loads((BRAND_DIR / "manifest.json").read_text()) # 位於 layout() 內部
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text()) # 模組層級的 LAYOUT
品牌行應放在每個畫板行之後，且讀取是無條件的，沒有 if BRAND_DIR.exists()。僅在 manifest 存在後才加入此行，否則 python3 gen.py 會在讀取時引發 FileNotFoundError。
然後執行 python3 gen.py 並檢查 layout.json 的 diff 是否為純粹的添加。如果它刪除了行，請停止並閱讀 references/manifest.md 的「gen.py 必須是無操作」章節；您發現了一個真正的錯誤，重新產生將會提交損害。
Canvas 會自動載入該資料夾，無需進一步更改：行會渲染，「品牌套件」按鈕會出現在工具列中，該資料夾也會加入品牌頁面的切換器中。
在回報前，請在瀏覽器中驗證
在開發伺服器上開啟該資料夾的兩個頁面：
http://127.0.0.1:<port>/?canvas=<slug> Canvas
http://127.0.0.1:<port>/brand.html?canvas=<slug> 品牌套件
請對品牌套件執行此操作，而非 Canvas。惰性載入意味著從未滾動到視野中的圖片也永遠不會失敗，因此請強制載入並計算數量：
const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length; // 必須為 0
Canvas 將其品牌行繪製為 tldraw 形狀，並會裁剪螢幕外的部分，因此同樣的計數在那裡不具意義。請改為縮放至適合畫面後查看。
報告
- 驗證腳本的完整輸出，包括行表格。
- 公司是否發佈正式的品牌或新聞資料包，及其 URL。
- 您使用並驗證了哪些帳號、使用者名稱與商店 ID，以及任何被證明是錯誤、休眠、被佔用或屬於不同公司的項目。
- 您拒絕的每個候選項目及其原因：404、被封鎖、非第一方、太小、重複、公司錯誤。
- 您無法取得的內容，分為不存在的項目，以及存在但被此處封鎖的項目。
坦誠說明空白，勝過填充的 manifest。誠實地陳述「此產品沒有 Microsoft Store 列表」，比放入一行其他公司的截圖更有價值。