真實素材，杜絕庫存
原則：一個網站若使用無法複製的真實圖片——真實產品、真實終端機、真實照片——就不會看起來像 AI 生成的。禁止使用庫存照片、通用渲染圖和 AI 生成圖片作為替代。
專案畫面截圖 (Playwright)
- 一律擷取專案的正式建置版本，視窗大小 1440x900，
deviceScaleFactor: 2。 - 選擇能說明重點的狀態（例如含有資料的儀表板、查詢結果、正在執行的管線），而非空白首頁。
- 在觸發前等待
networkidle與字型載入完成；若 Cookie 或橫幅干擾畫面，則將其隱藏。 - 儲存至
public/shots/<專案>/<狀態>.png，並使用sharp壓縮（網頁用 AVIF/WebP，僅在需要透明背景時才用 PNG）。 - 對於沒有示範網站的儲存庫：擷取儲存庫頁面（README 渲染結果），絕不使用模擬畫面。
個人頭像
- 使用你已開啟的瀏覽器工作階段（Chrome 搭配除錯端口）下載個人頭像，而非使用裁剪的螢幕截圖。
- 將原始檔案儲存為
public/me.jpg（或public/me.webp），並保留一份裁切版本；絕不變形或修飾皮膚/身份。 - 若專案中已有個人肖像，請優先重複使用，避免重複下載。
技術標誌
- 使用 Simple Icons (
npm i simple-icons) 取得單色 SVG（該函式庫採用 MIT/CC0 授權；標誌為其所有者之商標，僅作資訊性指名使用）。 - 預設使用 Design DNA 的墨色內嵌渲染；僅在滑鼠懸停細節中，若有意義才使用品牌色。
- 若某工具未收錄於 Simple Icons（例如部分 AI 工具），則使用一致的字首組合標誌（等寬字體的開頭字母），絕不使用虛構圖片或從 Google 圖片搜尋取得的標誌。
終端機 / 程式碼
- 若需要「終端機證明」：建立一個使用等寬字體的 HTML 區塊，執行專案的實際指令，並使用 Playwright 擷取畫面。絕不偽造輸出。
- 指令與版本必須真實且可驗證。
處理與一致性
- 使用對應到 Design DNA 色板的柔和雙色調，可選擇性加入輕微顆粒感；所有畫面截圖套用相同處理。
- 邊框/圓角與陰影應使用專案的 token，而非依圖片個別設定。
- 目標大小：每張圖片不超過 300KB；使用
next/image搭配正確的sizes，僅在第一張圖片設定priority。 - 每個素材都須附上具描述性的
alt，若為裝飾性用途則使用alt=""。
完整性規則
- 畫面截圖中不得出現虛構的數據（若圖表非真實，則不擷取）。
- 禁止使用浮水印、有版權疑慮的圖片，以及將 AI 生成內容作為主要素材。
- 在
docs/assets.md中記錄每個素材的來源與授權資訊。