前端圖片藝術指導
建立開發人員能一目了然的平面網站版型。每個構圖都應具備清晰的層級、一致的網格、有目的性的留白，以及獨特的印刷或攝影風格。將圖片視為實作的參考。當要求實作時，請使用真實的 HTML 和 CSS 來處理生產文字、UI 和精確尺寸。
1. 選擇工作流程
閱讀使用者需求與可用的專案指引，例如 AGENTS.md、CLAUDE.md、樣式指南、設計 Token 及相關視覺素材。優先遵循明確的使用者指示，其次是其指定角色內的已核准參考素材，最後才是專案預設值。利用藝術指導來填補落差。
| 需求 | 工作流程 |
|---|---|
| 新頁面、主區或區塊 | 依據簡報進行設計。選擇一條連貫的視覺方向。 |
| 同站點的另一區塊 | 重複使用視覺系統，並為新內容建立一個合適的構圖。 |
| 從已核准的桌面版改為行動版 | 針對新的視埠尺寸重組已核准的內容與元件。 |
| 移除、取代、重新著色或修正單一項目 | 就地編輯已核准的圖片，並說明要保留哪些部分。 |
當簡報提供了足夠的指示時，直接進行生成。如果無法取得必要的編輯目標或已核准的素材，請要求使用者提供該特定輸入。
2. 為每個參考素材指定角色
為每個輸入編號，並透過檔名或視覺內容識別它們。將這些角色帶入實際的圖片提示中。
- 要編輯的基礎圖 — 接受變更的已核准圖片。在使用 API 編輯時，將其放在第一位。
- 已核准的桌面版 — 響應式版本的內容、順序、元件樣式以及圖片和 Logo 身份的來源。
- 僅供樣式參考 — 繼承已命名的特徵，例如色板、排版處理、顆粒感和照片色調。保持新區塊的構圖和文案獨立。
- 僅供比例與間距參考 — 僅繼承已命名的度量或關係，例如側邊距、細線、標籤大小或顯示數字的比例。
- 精確素材 — 保持所提供的照片、產品、房間或 Logo 可辨識。保留其區辨細節，並指定允許的裁切或色調調整。
對於多區塊頁面，要保留一個已核准的視覺錨點，以及色板、類型角色、欄距、間距、規則、CTA 處理方式和圖像的簡潔記錄。說明每個區塊的起始與結束位置。從頭到尾使用相同的視覺系統。僅在該有的位置引入頁首或頁尾。
3. 進行藝術指導與提示
對於原創概念，選擇一種基調（工藝、清晰、溫暖、劇場或大膽表現），一種佈局（偏移編輯、分割、滿版出血、有紀律的模組化網格或文字主導），以及一種完稿處理（乾淨數位、柔和底片顆粒、網點或紋理紙張）。僅選擇能服務內容的元件。一份菜單可以是文字主導，搭配規則線與充足的呼吸空間。一個主視覺可以使用一個果斷的裁切。保持面板邊緣為矩形或使用簡單的水平分隔線。除非特別要求，否則避免使用菱形、菱形和平行四邊形面板。
對於複雜的簡報，使用簡短的標籤區塊。對於簡單的需求，僅使用相關的行。
- 交付物 — 命名頁面或區塊、目標視埠、構圖範圍與畫布。除非要求裝置外框，否則指定為平面、邊到邊的網站版型。
- 參考素材 — 將輸入映射到其各自的角色，並說明每個角色控制哪些細節。
- 佈局 — 提供閱讀順序、邊緣邊距、網格錨點、區塊邊界、對齊方式和焦點。以可見的術語描述一個標誌性的設計手法。
- 文案 — 引用確切的文字，指定放置位置，除非需要重複，否則每個字串只出現一次。保留提供的標題、價格、名稱、日期和佔位符。對於開放式概念，使用簡短、有根據的文案，避免為真實組織捏造說詞。
- 視覺系統 — 指定字型層級、需要時指定換行位置、色彩角色、圖像與裁切、完稿處理以及元件樣式。使用已命名的工作室參考作為可見特徵的簡寫。
- 限制條件 — 列出少數重要的排除項目。避免看起來像圖庫的圖像、無來由的光暈、重複的卡片網格和填充文案，除非簡報要求這些處理方式。
4. 重組為行動版
使用所要求的 CSS 視埠寬度，或預設約 390 CSS px。將渲染後的像素尺寸視為一個獨立的畫布設定。適當使用單欄，以指定的順序重新排列已核准的內容，並保留標籤、精確素材、CTA 樣式、規則和佔位元件。讓文字自動換行，增加觸控區域，並僅在允許的情況下調整圖像裁切。僅在要求時或當已核准的設計包含時，才加入黏性元素。在文字變得難以辨識之前，於邏輯的區塊邊界處分割較長的版型。
5. 編輯特定區域
將已核准的圖片附加為編輯基礎。說明操作，透過外觀和位置識別元素，然後說明要保留哪些部分。將百分比座標轉換為從左上角測量的白話定位方式，並在提示中同時使用兩者。保留畫布、文案、裁切、幾何形狀、色板和鄰近內容，除非變更明確影響它們。
範例：
就地編輯圖片 1。在從左上角起 x=43.4%, y=29.6% 的位置，僅移除標籤後方的局部填充，並將相鄰區域的紋理延伸至該區域。保留文字、細線、字型比例、周圍面板以及整個畫布。保持區塊背景不透明。
區分移除局部填充與建立 Alpha 挖空。僅在要求時或為了目標素材的需要，才使用透明背景。如果需要嚴格的像素保留，請使用可用的已核准合成工作流程，並將未觸及的區域與原始圖進行比對。僅靠提示指令和生成式標記無法保證像素完全相同的結果。
6. 使用可用的圖片後端
當主機端有圖片生成和編輯工具時，優先使用。透過其支援的輸入機制提供參考圖片，並將不支援的控制項作為提示中的意圖來表達。僅在已知時回報實際的後端或設定。如果沒有可用的圖片後端，請提供一個立即可執行的提示，並識別所需的輸入。
當 OpenAI Image API 整合可用時，使用以下起點：
| 用途 | 模型 | 品質 | 複雜度 |
|---|---|---|---|
| 快速原創概念 | gpt-image-2.6-flare | medium | medium |
| 詳細佈局、小型精確文案或要求高的參考匹配 | gpt-image-2.6-sunburst | high | medium 或 high |
| 目標編輯 | gpt-image-2.6-sunburst | medium 或 high | low |
根據細節和可讀性調整品質。根據規劃和構圖調整複雜度。使用「生成」模式進行新的構圖，使用「編輯」模式處理現有的圖片基礎。在 GPT Image 2.6 編輯時省略 input_fidelity。對於標記引導的編輯，使用與第一個輸入像素尺寸相符的透明 PNG 覆蓋層。分別提供標記或遮罩（依後端支援而定），切勿在同一個標記引導請求中同時提供兩者。將標註資訊保留在最終成品之外。
選擇接近目標比例的支援尺寸。對於 GPT Image 2.6 API 自訂尺寸，使用能被 16 整除的尺寸，並驗證當前的模型限制。範例畫布包括 1536×960（16:10 主區）、1536×1024（3:2 區塊）、1088×1920（高頁面區塊）和 1088×2352（手機版型）。當主機端管理畫布大小時，將請求的比例和尺寸作為目標保留。在聲明精確輸出之前，請檢查實際尺寸。
對詳細版型和 Alpha 素材使用 PNG。當後端支援時，僅在使用者想要向量素材或動態研究時，才要求生成 SVG 或 GIF。在交付前檢查向量輸出和循環連貫性。
7. 檢查與修正
以正常視圖檢查實際圖片，並放大檢視小字或編輯區域。將其與簡報和已核准的輸入進行比較：
- 驗證所有鎖定的文案、日期、價格、標籤、Logo 和可識別的素材細節。
- 驗證請求的區塊數量和閱讀順序、視覺層級、欄距、對齊、字體、細線和元件的連續性。檢查佈局是否符合請求的視埠。
- 驗證參考角色是否保持分離。標記出借用來的佈局、無關的文案、素材替換或未經請求的面板。
- 對於編輯，比較變更區域及其周圍與已核准的基礎圖。對於挖空，在可用時檢查 Alpha 通道。
將任何違反鎖定需求的行為視為檢查失敗。每個請求最多自動執行一次修正。對於已核准圖片的編輯，如果候選結果偏離，則從已核准的基礎圖重新嘗試。對於具有局部缺陷的新構圖，請編輯候選結果。僅當構圖本身需要重建時才重新生成。在修正後重新檢查，並揭露任何剩餘的重大差異或無法進行的驗證。傳回選定的視覺結果，並附上一則簡短說明以提供上下文。