廣告活動海報設計

對使用者而言： 發送一則訊息，例如：

使用來自 https://github.com/greatopomu/claude-assets 的 poster-design 技能，為 [品牌] 設計 5 張 Instagram 海報。這是他們的網站/舊傳單：[連結或檔案]。

就這樣。Claude 會詢問任何其他需要的資訊。

對 Claude 而言： 這個檔案告訴你如何從頭到尾執行整個任務。讓使用者付出的心力降到最低：只問一次，然後開始工作。

第 0 部分：設定（先安靜地完成這個）

輔助工具在同一個儲存庫的 tools/ 目錄中。下方像 tools/export_png.py 的路徑都是相對於儲存庫根目錄。

取得工具。 如果你可以執行指令，且該儲存庫尚未存在於此電腦上： git clone --depth 1 https://github.com/greatopomu/claude-assets.git 如果無法使用 git，請下載 https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip 並解壓縮。
安裝並檢查： python -m pip install -r tools/requirements.txt 然後 python tools/check_setup.py。它會回報此電腦上哪些工具正常運作。若要證明每個工具都正常，請執行 python tools/selftest.py。
從模板開始： 將 skills/poster-design/template/index.html 複製到專案資料夾中。它已經包含了品牌權杖、預覽頁面（適合/手機/100%）以及 ?solo=pN 匯出模式。

備援方案。 直接告訴使用者適用下列哪種情況。

如果缺少此項目	改為這樣做
無法執行程式碼（純文字對話）	使用模板將海報建構成一個 HTML 檔案（或一個 artifact）。若要匯出，使用者需在 Chrome 中開啟該檔案，在網址列加上 `?solo=p1`，開啟開發者工具（F12 / Cmd+Opt+I）→ 指令選單（Ctrl/Cmd+Shift+P）→「擷取完整尺寸螢幕截圖」。對每張海報重複此步驟。
Python 可用，但找不到瀏覽器	安裝 Google Chrome 或 Edge，設定 `CHROME_PATH` 指向基於 Chromium 的瀏覽器，或執行 `pip install playwright` 然後 `python -m playwright install chromium`。否則請使用上述的手動匯出方式。
無 Higgsfield CLI 或點數	使用圖庫照片（路線 A）或 ChatGPT（路線 B）。
Claude 桌面版無內建瀏覽器可用於 ChatGPT	請使用者在 ChatGPT 中產生圖片並下載，然後分享該檔案。
無法從網際網路下載	請使用者下載所選的圖庫照片並分享這些檔案。

圖片工具是選用的輔助工具。如果某個工具無法執行，請以其他方式完成相同步驟（例如，用肉眼挑選照片），然後繼續。

你要製作什麼

經過設計的廣告活動海報，看起來像資深平面設計師的作品。它們不是單純在 AI 圖片上疊加文字。

每張海報都用 HTML、CSS 和 SVG 建構，然後透過無頭瀏覽器 (tools/export_png.py) 匯出為 PNG。
圖片（人物、產品、地點）只是素材。你透過第 4 部分的三種路線之一取得它們。圖片工具從不製作完成的海報成品。
每個品牌都有各自的外觀。方法保持不變；藝術指導方向每次都重新選擇。絕不重複使用其他品牌的版面配置。

第 1 部分：先詢問（僅針對缺少的部分，發送一則訊息）

閱讀使用者的訊息以及任何檔案或連結。然後發送一則簡短訊息，僅包含你仍需要回答的問題。為每個問題提供一個合理的預設值，以便使用者可以回覆「預設值即可」。

按以下順序詢問，對於已回答的問題則跳過：

品牌基本資訊： 名稱、銷售內容、城市或國家、客戶群。
品牌資產： Logo 檔案、品牌顏色（或你可以從中取樣的網站或傳單），以及任何品牌字型。
尺寸與用途： Instagram 預設為 1080 × 1350。其他選項：1080 × 1080、1080 × 1920 限時動態、A4 或 A3 印刷品。
要幾張海報，以及各自要說什麼： 例如服務、優惠、活動，或「由你決定」。
必須包含的細節： 價格、日期、電話號碼、地址、網站或行動呼籲。任何未提供的資訊都標記為佔位符。
人物規範： 預設為第 6 部分的規範。
圖片： 預設使用任何可用的來源，順序如下：圖庫照片（免費）、ChatGPT 在內建瀏覽器中（免費但有限制），然後是 Higgsfield（付費點數）。詢問是否可以使用付費點數。
儲存位置： 預設是以品牌名稱命名的新資料夾。

不要詢問設計選擇，例如風格、版面配置或效果。這些是你的工作。你將在第 2 部分中展示方向。

第 2 部分：規劃，然後展示一個檢查點

自行完成所有這些步驟，然後向使用者展示一個簡短的計劃供其核准。

從使用者的檔案中取樣品牌顏色，使用腳本完成 (tools/sample_colours.py)；不要猜測。計劃將 Logo 重新繪製為乾淨的 SVG，絕不使用模糊的裁切。
研究該類別： 3 到 4 個領先品牌如何廣告（版面、字體、圖像、調性），包括一個本地競爭對手。借用其思考方式，但絕不借用其資產。將筆記和來源儲存在 RESEARCH.md 中。
收集本地真實資訊： 真實的地點、日常習慣、人們實際使用的詞語以及地區細節。地區細節的範例：該州常見的車輛顏色，或當地穿著。
選擇藝術指導方向： 為第 3 部分表格中的每一行選擇一個選項，以適合此品牌和受眾。同時選擇字型（Google Fonts）以及顏色的使用方式：哪個是主色，哪個是強調色，以及背景是什麼。
撰寫海報構想： 針對每張海報，一個構想、一個少於 8 個字的標題、一行以客戶獲得的好處開頭的補充說明、一個行動呼籲、所需的圖片及其故事元素。沒有兩張海報共享版面配置或故事元素。

檢查點，這是建構前唯一的一次。 向使用者展示：

顏色
2 到 3 行的藝術指導方向
字型
海報列表及其標題

詢問「可以繼續，還是需要更改什麼？」保持簡短。

第 3 部分：藝術指導方向選擇

每個品牌選擇一次。不同的品牌應該在幾個行項上有所不同。

選擇	選項
光線	陰暗有氛圍 · 明亮通風 · 大地色中間調 · 黑白加一種顏色
顏色使用	一種顏色為主搭配強調色 · 雙色調照片 · 大膽色塊 · 中性色搭配品牌強調色
字體	厚重無襯線體 · 窄長體 · 圓形幾何體 · 編輯襯線體搭配無襯線體 · 手寫強調字體
形狀	有機圓塊與波浪 · 硬幾何角度 · 細線與網格 · 剪紙 · 圓圈與弧線
照片處理	輪廓裁切置於形狀上 · 滿版出血加上顏色疊層 · 照片置於形狀內 · 寬照片帶 · 著色 · 拼貼
紋理與光線	光暈與光軌 · 平面乾淨 · 顆粒 · 半色調網點 · 僅有柔和陰影
版面配置	標題在上，圖片在下 · 分割畫面 · 圖片置中，文字環繞 · 文字主導 · 對角線 · 面板網格
故事元素	應用程式或介面卡片 · 貼紙或徽章 · 票券或收據 · 地圖或路線 · 大數字或圖表 · 引言 · 前後對比

不要預設使用深色背景搭配發光強調色。只有在品牌需要時才使用它們。

第 4 部分：取得圖片（三種路線）

使用適合每張海報的路線。在使用每張圖片之前，根據人物規範（第 6 部分）進行檢查。在 RESEARCH.md 中記錄來源和許可證。

A. 圖庫照片（Pexels、Unsplash、Pixabay）。免費、真實的人物和地點。

使用幾個本地查詢進行搜尋。
在一份對照表 (tools/contact_sheet.py) 上比較 20 到 30 張縮圖。
拒絕有以下情況的照片：
- 錯誤的地點或人物
- 違反規範
- 可讀的車牌或私人細節
- 有損訊息傳達的損壞或雜亂
- 沒有放置文字的空間
下載寬度為 1600 到 2000 像素的圖片。
如有需要，修正本地細節。tools/recolour.py 可以更改區域內的一種顏色。
讓照片的形狀決定版面配置：直向照片適合滿版出血；橫向照片適合做為帶狀或置於邊框內。

B. 在內建瀏覽器中使用 ChatGPT。 免費；最適合完整場景。

使用者必須已登入。輸入詳細提示：主體、符合規範的服裝、場景、光線、「直向 4:5，無文字，無 Logo」。
若要更改一個細節，請停留在同一個 ChatGPT 對話中：「相同的圖片，只更改……」。
限制： 免費方案每天大約允許 3 張圖片。
取得檔案： ChatGPT 的下載功能在瀏覽器面板中無法使用。
- 最佳方式：請使用者點擊下載並告知你檔案名稱。
- 備援方案：以原始尺寸全螢幕顯示圖片，用 2 × 2 的螢幕截圖拼貼，然後使用 tools/stitch_tiles.py 拼接。

C. Higgsfield。 付費點數；最適合去背輪廓圖。

先檢查餘額和價格（higgsfield account status、higgsfield generate cost …）。
使用 GPT Image 2.6 搭配 --background transparent 可產生去背圖。人物使用中等品質，物體使用低品質。基本方案大約可以同時執行 4 個工作。
使用 tools/clean_cutout.py 清理去背圖周圍的微弱光暈。
若要更改圖片的某個細節，請使用 --image 將其傳回，並僅描述更改的部分。

每個圖片提示 都應說明：主體與動作、符合人物規範的服裝、符合海報氛圍的光線、構圖、「擬真照片，無文字，無 Logo，無浮水印」，以及如果是完整場景，需為文字預留空間。

第 5 部分：建構海報

先進行設定（從 skills/poster-design/template/index.html 開始）：

一個 index.html，包含顏色權杖、字型以及作為 SVG 符號的 Logo
一個符合藝術指導方向的共用結尾（Logo 加上行動呼籲風格）
一個預覽頁面，以真實比例顯示每張海報，並縮放至合適大小，包含「適合/手機（390 像素寬）/100%」按鈕
一個用於匯出的 ?solo=pN 模式
從本地伺服器（非 file://）提供資料夾服務，並在瀏覽器面板中開啟

每張海報：

一個構想： 標題、補充說明、行動呼籲。
至少四個圖層，且至少有一個元素越過主體前方。
一個故事元素，展示產品運作方式，例如逼真的應用程式卡片、票券、追蹤器、地圖或徽章。
自訂形狀、漸層與光線，而非模板方塊。
在同一個共用系統中，變化一系列海報的標誌性效果。

設計原則（不可協商）。 這些是讓海報看起來像機器製作的錯誤。在建構時就規劃好它們，而不是只在最後檢查。

呼吸空間。 文字與每個形狀邊緣、環狀物、線條、徽章和圖片之間至少要有 24 像素的空白空間（40 像素更好）。圓圈或環狀物絕不能沿著、穿過或靠近文字。
無近似失誤。 兩個元素要嘛清楚且有目的地重疊（至少重疊較小元素四分之一的面積），要嘛完全分開。幾乎碰觸的邊緣，或意外對齊，看起來就像錯誤。範例：產品頂部與其後方圓圈頂部對齊，或貼紙剛好擦過方塊角落。
圓圈與面板清楚相接。 延伸到頁尾或色帶的圓圈，要嘛在距離它 24 像素或更遠的地方清楚停止，要嘛在距離它 40 像素或更遠的地方清楚位於其下。它絕對不能剛好擦過邊緣。
包裝清晰。 在海報的真實背景顏色上檢查每個去背圖，而不僅僅是在白色和黑色上。殘留的背景、鋸齒狀邊緣和實心「霧狀」區域只有在實際顏色上才會顯現。
減少裝飾。 每一個額外的環、輪廓或葉片，都是可能使文字變得擁擠的東西。如果它不增加意義，就省略它。
視覺層級。 決定閱讀順序：（1）標題或產品，（2）補充說明，（3）故事元素，（4）結尾。大小、粗細和顏色必須遵循這個順序。只有一個東西是突出的。
配對與分組。 每個圖示都緊鄰它所標示的那個項目，且每對之間的間距相等。每個聯絡細節都有自己的圖示：WhatsApp 在號碼旁邊，Instagram 在帳號旁邊。將相關項目歸納在一個小標題下（「立即訂購」、「可在以下地點取得」）。用清晰的空間分隔不相關的群組。
對齊。
- Logo、標題、內文和頁尾使用同一個左邊界。
- 頁尾區塊向上對齊，以便它們的小標題共享一條基線。
- 徽章的行與列之間有均勻、精確的間距。
斷行。
- 連續的文字絕不能以一個孤立的短詞結尾。在標題和內文上使用 text-wrap: balance，然後檢查每一行。
- 斷行應落在詞組之間，而不是在一個詞組內部（「燕麥片、/ 幾內亞玉米」是錯的；「燕麥片、 / 幾內亞玉米和大豆渣」是對的）。
- 標題根據意義斷行，用 <br> 在你選擇的位置。
每個東西使用一個名稱。 在系列中的每張海報上，使用相同的產品或口味名稱、成分列表和宣稱。在發布之前，列出每個宣稱（例如「無添加糖」或「100% 天然」）供客戶確認。
頁尾也經過設計。 它與主視覺區域獲得相同的關注：層級、配對、對齊，以及至少 36 像素的內距。

技巧選單（每張海報選擇使用；不要全部使用）：

深度：
- 圖層順序：背景 → 紋理 → 光暈或顏色區塊 → 形狀 → 主體 → 前景元素 → 故事元素 → 可讀性覆蓋層 → 文字 → 結尾
- 一條前景線條、形狀或卡片越過主體
- 主體衝出它的卡片或邊框
- 將卡片放在主體後方，以便一隻手可以重疊其上
光線與顏色：
- 主體後方的模糊徑向光暈
- 在圖片提示中要求邊緣光，以配合海報
- 光軌（SVG 路徑繪製兩次：模糊光暈加上清晰核心）
- 使用堆疊的 filter: drop-shadow（而非 text-shadow）的輪廓或霓虹文字
- 照片上的品牌顏色疊層：主體上清晰，文字後方為實色
- 使用腳本重新調整圖片色調（白天轉夜晚，變得更暖）
形狀與紋理：
- 帶有細強調線的圓塊或波浪
- 彎曲或成角度的照片邊緣
- 淡化的網格、點狀或圖案
- 圓環與放射線
- 沿著路徑置入文字的圓形徽章（<textPath> 搭配 textLength）
文字：
- 一個粗體展示字體和一個乾淨的文字字體
- 標題行距 0.85 到 0.92，稍微緊湊

…

活動海報設計