josemidev/piezas-graficas

廣告圖像素材

此技能涵蓋廣告素材活動的完整流程：讀取代理商資料、提取實際資源（照片、標誌、字體、文字）、組合每種格式、匯出，並將所有內容交付至一個HTML 審查圖庫中，讓使用者可以一次檢視所有素材並提供回饋。客戶的修正會以多輪方式進行，因此所有內容都必須能夠從可編輯的原始檔快速重新生成。

核心規則：始終提供 HTML 審查圖庫

每次交付，包括每一輪修正，都必須以一個 index.html 作為結尾，該檔案顯示所有匯出的素材，並與 export/ 資料夾一起提供給使用者（或直接在 Finder 中開啟）。如此一來，使用者可以一眼比較不同格式，發現在單獨檔案中不易察覺的錯誤，並針對特定截圖提供回饋——這正是真實回饋的典型形式（「這裡文字重疊了」、「在 160x600 中移除這項優惠」）。

圖庫必須：

• 按系列分組（首頁 / 展示型 / 貼文 / 限時動態…），並以實際尺寸或不變形縮放的方式顯示每個素材；
• 在每個素材下方標示尺寸、檔案名稱、JPG 檔案大小，以及 PNG 和 @2x 版本的連結；
• 對於具有安全區域的格式（限時動態、輪播背景），提供一個核取方塊來疊加安全區域和保留區域；
• 支援淺色和深色模式，並可透過雙擊開啟（使用 export/ 的相對路徑）。

使用 scripts/gallery.py；每當素材變更時，重新生成圖庫。

工作流程

1. 專案資料夾。 每個品牌或活動使用一個資料夾（<品牌>-<活動>/），包含 src/（可編輯原始檔、素材和腳本）、export/<系列>/ 和 index.html。不要混合品牌：如果同時收到兩個品牌的素材，應分別放在各自的資料夾中（如果使用者要求，也可以放在獨立的會話中）。
2. 讀取資料。 參考 references/extraccion.md：
   • 公開 Google 簡報：下載 /export/pptx 和 /export/pdf，渲染投影片以查看關鍵視覺，並從 .rels 檔案中提取可編輯原始檔的連結（「EDITABLE」、「DESCARGAR」、「IMÁGENES」）。
   • Illustrator PDF：照片及其遮罩 (smask)、作為向量圖形的標誌 (get_drawings → SVG)、嵌入的字體以及實際的法律文字。
   • PSD：使用 psd-tools 處理畫板和圖層；每個元素皆從其各自的圖層單獨組合。
3. 組合前盤點。 向使用者列出每個素材包含的型號、價格、優惠、法律文字和標誌，以及每個資料的來源。如果兩張投影片的資訊互相矛盾（例如同一個型號有兩個價格），請使用最新的可編輯原始檔，並明確指出此情況；不要自行默默選擇。
4. 組合。 使用最適合的原始檔方式：
   • HTML + CSS (assets/banners-template.html)：每個素材使用一個 div.ad[data-name]，全部採用絕對定位，並使用提取的字型和 SVG。這是多輪修正中最快速的除錯方式。
   • Python (PIL) 分層處理：當原始檔是 PSD 且需要重新排列已柵格化的元素時使用。
5. 匯出。 scripts/export_pieces.mjs (Playwright) 將每個 .ad 捕捉為 @1x 和 @2x 的 PNG；scripts/to_jpg.py 生成完整的 sRGB 色彩的 JPG，並按系列設定檔案大小限制。參考 references/formatos.md。
6. 交付前逐一審查。 檢查每個匯出的素材（並放大關鍵區域），遵循 references/checklist-revision.md。修正並迭代；不要交付你沒有看過的內容。
7. 交付。 圖庫 + 在 Finder 中開啟的資料夾 + 一份簡短摘要：完成的工作、你做出的決定以及待確認的事項。

組合原則

• 明確的層級結構。 詢問或推斷優先順序，並在所有格式中遵循。促銷活動的常見順序是：1) 優惠（價格或百分比），2) 商家或品牌標誌，3) 其他同等級內容（活動標誌、優惠、產品）。
• 善用空間。 每種格式都有其獨特的構圖；僅縮放是不夠的。如果產品是寬的，就讓它佔據整個寬度，並將資訊排成一行；如果產品是高的，就將它與文字排成縱列。檢查不要有過大的空白區域或過小的元素。
• 不要重新生成產品。 使用車輛或產品的真實照片，不要改變顏色、輪胎或設計。如果新的格式缺少背景，應以自然的方式延伸天空、海洋或地面（參見 references/extraccion.md 中的「延伸背景」）。
• 照片內部的車牌和文字。 如果必須更改車牌上的文字，請根據實際輪廓以透視方式重繪，切勿在上面放置一個平面的矩形。
• 對比度。 照片上的白色文字：使用柔和漸層，確保整個文字區塊至少達到 4.5:1 的對比度，並進行測量。
• 行距。 測量可編輯原始檔中的行距並複製；壓縮字體搭配過密的行距會導致行與行之間互相接觸。

修正輪次

修正以截圖或客戶郵件的形式送達。針對每個修正：

• 在原始檔中套用變更（不要直接修改 PNG），然後重新匯出所有受影響的素材；
• 如果要求針對「所有 X 尺寸的素材」，請在專案的所有品牌中尋找該尺寸，並告知你修改了哪些以及哪些不適用；
• 再次視覺檢查已修改的素材（文字變更通常會破壞狹窄格式中的換行）；
• 更新圖庫。

已發生過且應預防的錯誤：型號名稱不完整（缺少版本的型號，而關鍵視覺中包含該版本），其他版本的價格，客戶不想要的按鈕（首頁無按鈕、展示型有按鈕），不該出現的銀行優惠，以及段落結尾的孤立詞語（僅「LLENO」、「90%」）。

此技能的檔案

• references/extraccion.md：如何從 PDF、PSD 和簡報中提取照片、向量、字體和文字；延伸背景；車牌處理。
• references/formatos.md：常用尺寸、安全區域、檔案大小限制和清晰的匯出設定。
• references/checklist-revision.md：交付前每個素材應檢查的項目。
• scripts/export_pieces.mjs：將 HTML 中的每個 .ad 匯出為 @1x/@2x 的 PNG。
• scripts/to_jpg.py：PNG → sRGB 4:4:4 JPG，並有檔案大小限制。
• scripts/gallery.py：生成 index.html 審查圖庫。
• scripts/pdf_assets.py：從 Illustrator PDF 中提取帶有遮罩的圖片、字型和向量 (SVG)。
• scripts/psd_elements.py：列出 PSD 的畫板和圖層，並將每個圖層組提取為帶透明度的 PNG。
• assets/banners-template.html：用於逐個素材佈局的範本。