專業照片平面設計師與藝術總監技能

此技能將原始照片轉化為工作室級別的社交媒體圖形、明信片和紀念海報。不同於使用 AI 影像生成疊加照片（這會扭曲臉部、改變天空，並弄亂泰文排版），此工作流程採用 HTML5 + CSS3 + 自訂 SVG 向量藝術 + Google Fonts，透過 Headless Chrome 以 4K Retina 解析度 (--force-device-scale-factor=2) 渲染，並使用 Python Pillow (subsampling=0) 合成。

核心工作流程（6 個階段）

階段 1：照片檢查與自動化視覺分析

檢視目標照片：務必先以 read_file 打開目標影像，以視覺方式理解主體、氛圍、光線及障礙物（例如臉部、帳篷桿、拉繩、地平線、樹木）。
執行照片分析腳本：在目標影像上執行 analyze_photo.py 以擷取：
- 精確的像素尺寸、長寬比與 EXIF 中繼資料。
- 一份 3×3 網格亮度與負空間圖（辨識哪些區域是暗色、中間色或亮色，以及哪些區域細節較少，適合放置文字排版）。
- 提取的色盤（主要背景十六進位色碼 + 推薦的高對比強調十六進位色碼）。
```
python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<image_path>"
```

階段 2：互動式風格與方向探索

在產生圖形之前，請查閱 style_catalog.md 並使用 ask_question 讓使用者根據其照片從策劃好的設計方向中選擇：

設計風格選擇（從 style_catalog.md 中的 12 種以上風格中，呈現 3–5 種最適合的風格，並提供產生多種風格以供比較的選項）：
- 天體與星空浪漫風（奢華金色襯線字體、星座線條、發光星光、星盤邊框）
- 極簡編輯／雜誌明信片（Kinfolk / GO OUT / NatGeo 版面、細格線、中繼資料標頭、地點郵戳）
- 溫暖可愛手繪塗鴉（舒適仙女燈串、草圖虛線邊框、漂浮愛心、彎曲指標箭頭、手寫字型）
- 復古底片與類比柯達（光暈效果、底片邊框、日期戳章、復古襯線字體）
- 現代玻璃擬態與浮動 UI（磨砂玻璃卡片、音樂播放器／記憶條、時尚無襯線字體）
- 戶外探險與復古徽章（國家公園／露營徽章、地形線條、指南針與松樹向量圖）
- 日本極簡海報（雜貨／無印風）（垂直／不對稱排版、大量留白、精緻線條藝術）
- 電影寬銀幕與故事字幕（變形寬銀幕黑條、電影標題製作群列表、詩意雙語字幕）
長寬比與輸出格式：
- 原始長寬比（例如 3:2 橫向 3600×2400）
- 直式社群 Feed（4:5 2400×3000）
- 正方形（1:1 2800×2800）或限時動態／Reels（9:16 2160×3840）

階段 3：多語調文案撰寫工作坊（至關重要！）

通用或過於矯情的引言常常感覺不自然 ("ไม่ใช่ตัวเอง")。在最終確認文字之前——或者當使用者想要用詞建議時——請閱讀 copywriting_tones.md 並使用 ask_question 讓使用者根據區塊和個性語調來選擇或混合搭配用詞：

將文字拆解為模組化插槽：
1. 頂部徽章／眼眉（例如英文標題或場合標籤）
2. 主要標題（主要泰語／英語問候語）
3. 副標題／核心錨點（溫暖的關鍵短語）
4. 正文訊息／引言框（2 行深情訊息——或可選擇省略以保持更簡潔的外觀）
5. 主體標示／指標註記（短小的可愛標籤，放在指向人物／主體的手繪箭頭旁——或可選擇省略）
每個插槽提供 5–6 種不同的個性語調：
- สายลุย-ชิลล์ๆ (Outdoor / Chill Partner)：自然、放鬆、冒險夥伴的氛圍。
- แมนๆ จริงใจ ไม่เลี่ยน (Sincere & Grounded)：誠實、溫暖、零尷尬。
- อบอุ่น-เรียบง่าย (Warm & Classic)：溫柔、感恩、雋永。
- กวนนิดๆ กันเอง (Playful & Teasing)：真實伴侶間的逗趣，帶著愛意。
- โรแมนติก-ลึกซึ้ง (Poetic & Romantic)：星光、命運、深情。
- สั้นกระชับ-มินิมอล (Short & Punchy)：極簡主義的衝擊力。

階段 4：構圖、方向性動線與色彩理論規則

在編寫 HTML/CSS/SVG 疊加層時，請查閱 composition_and_color.md。始終強制執行這些黃金法則：

主體與障礙物保護區：
- 繪製臉部、身體以及結構線（例如帳篷桿或對角拉繩）的確切邊界座標 (x, y)。
- 切勿讓文字、漂浮愛心、星星或箭頭越過臉部或笨拙地與拉繩相交。將標示元素整齊地移到繩索／線條的一側。
方向性視線動線（視覺向量指引）：
- 引導觀看者的視線從主要文字排版區塊（位於開放的負空間）-> 沿著次要裝飾物／標示箭頭 -> 直接到達人物主體的臉部／笑容。
- 使用彎曲的 SVG 路徑（<path d="M ... Q ...">）、新月方向或流星角度，使其指向主體或將文字向內框住，切勿將視線引導至畫布邊緣之外。
色彩和諧與適應性易讀性：
- 60-30-10 色彩規則：
  - 60% 基礎照片環境色調（例如深午夜藍 #0A1530 或森林綠）。
  - 30% 主要排版文字顏色（高對比的暖象牙白 #FFFAF0 或純淨亮白 #FFFFFF）。
  - 10% 強調色，可從場景中取樣或與其和諧搭配（例如暖仙女燈金色 #FFE299、香檳色 #F0CA86 或柔和珊瑚心色 #FF7B93）。
- 務必在正文文字後方放置一個微妙的、邊緣不可見的徑向／線性漸層（rgba(8, 16, 38, 0.38)）或磨砂玻璃容器（backdrop-filter: blur(4px)），以確保文字在星星、雲朵或樹葉上完全清晰可讀。
泰文排版完美化：
- 在多句泰文引言行上使用 white-space: nowrap，或在自然的短語邊界處使用明確的 <br> 換行，以確保泰文字詞（例如 "ฉัน" 或 "วัน"）絕不單獨被孤行斷開。
- 在大型泰文顯示文字（其帶有高元音／聲調符號如 ั ิ ี ึ ื ่ ้ ๊ ๋ ์ 以及低元音 ุ ู）與周圍的 SVG 星星、月亮或邊框之間，至少保留 35px–50px 的清晰內距。

階段 5：4K Retina 渲染管線

使用 render_graphic.py 將任何 HTML/CSS/SVG 模板以 4K 解析度渲染到目標照片上：

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "path/to/design.html" `
  --output "DSC03461_Output.jpg" `
  --width 1800 --height 1200 --scale 2

為什麼 --scale 2 和 --virtual-time-budget=3000 很重要：
- 以 1800×1200 CSS 像素進行設計，搭配 --force-device-scale-factor=2，可產生超清晰的 3600×2400 Retina 輸出。
- --virtual-time-budget=3000 可確保 Google Fonts 在 Chrome 擷取畫面之前完成下載和套用（防止系統字型回退）。
- 以 quality=96, subsampling=0 儲存，可在彩色文字和細向量線上保留 100% 的清晰邊緣。

階段 6：強制性視覺品質保證驗證

在渲染每張圖片之後，您必須使用 read_file 檢查產生的 .jpg 檔案，並在呈現給使用者之前驗證以下檢查清單：

字體驗證：預期的 Google Fonts 是否正確載入（沒有回退到 Tahoma/Arial）？
無孤字斷行：所有泰文句子是否都在有意的 <br> 點上乾淨地斷開，沒有單獨的尾詞？
零碰撞檢查：是否有任何星星、月亮、愛心、邊框或箭頭觸碰到或重疊到泰文元音／聲調符號、人臉或帳篷繩索？
視覺平衡與對比：每一行文字在縮圖檢視和全螢幕下是否都能輕鬆閱讀？

如果在 read_file 檢查過程中發現任何問題，請立即調整 CSS/SVG 座標並重新渲染，然後再呈現結果。

參考模板與文件

風格目錄與字型配對：references/style_catalog.md
構圖、方向性動線與色彩指南：references/composition_and_color.md
泰語與英語文案撰寫矩陣：references/copywriting_tones.md
即用型 HTML/SVG 參考模板：

九程式設計師／照片平面設計師