| doc_id | doc_agentskill_0021 |
| name | ui-asset-gen-director |
| description | UI 資產委託導演 SKILL — 讀取 family-map 與 skin-family-*.json，產生 asset-task-manifest / param-tune-manifest 與精確 ArtRecipe，列出每個 family slot 所需的 spriteFrame 路徑、尺寸規格、9-slice 邊距。USE FOR: family-architect 輸出 asset-pending 狀態後，正式產出 UCUF partial asset 任務。DO NOT USE FOR: 非 UI 資產生成、程式邏輯開發、QA 驗證（用 ui-asset-qc）。 |
| argument-hint | 提供 screenId 或 family-map.json 路徑，以及目標 family 清單（如 tab, item-cell），並說明要產 asset-task 還是 param-tune 任務。 |
UI Asset Gen Director
這是 UI production pipeline 的第 3 步：根據 family-map 產生 ArtRecipe 與資產任務。
Unity 對照：相當於 Art Director 給美術師 Texture Spec Sheet — 明確規定每張 sprite 的尺寸、切割比例、解析度。
輸入
| 項目 | 說明 |
|---|
familyMapPath | artifacts/ui-source/{screenId}/proof/{screenId}.family-map.json（或 screenId） |
missingFamilies | family-map 中 status: "asset-pending" 的 family 清單 |
輸出
artifacts/ui-source/{screenId}/manifests/asset-task-manifest.jsonartifacts/ui-source/{screenId}/manifests/param-tune-manifest.json（若適用）artifacts/ui-source/{screenId}/tasks/*.json 或等價 ArtRecipe 任務
Slot 路徑慣例
| 部位 | 路徑樣板 |
|---|
| Frame Edge | sprites/ui_families/{family}/frame_edge/spriteFrame |
| Frame Fill | sprites/ui_families/{family}/frame_fill/spriteFrame |
| Frame Glow | sprites/ui_families/{family}/frame_glow/spriteFrame |
| Frame Corner | sprites/ui_families/{family}/frame_corner_tl/spriteFrame |
| Tab Active | sprites/ui_families/{family}/tab_active/spriteFrame |
| Tab Inactive | sprites/ui_families/{family}/tab_inactive/spriteFrame |
| Cell Default | sprites/ui_families/{family}/cell_default/spriteFrame |
| Button Normal | sprites/ui_families/{family}/btn_normal/spriteFrame |
| Button Pressed | sprites/ui_families/{family}/btn_pressed/spriteFrame |
執行步驟
Step 1 — 讀取 family-map
read_file { filePath: "artifacts/ui-source/{screenId}/proof/{screenId}.family-map.json" }
找出所有 status: "asset-pending" 或 recipe: null 的 zone。
Step 2 — 讀取 skin-family-{family}.json
對每個 pending family，讀取對應的 skin manifest：
read_file { filePath: "assets/resources/ui-spec/skins/skin-family-{family}.json" }
列出 slots 中每個 slot 的 asset（sprite 路徑），這就是需要建立的目標清單。
Step 3 — 先用 compiler 產生任務
優先使用：
node tools_node/compile-family-map-to-asset-tasks.js --screen-id <screenId> --dry-run
node tools_node/compile-family-map-to-asset-tasks.js --screen-id <screenId> --write
若 family 已有 80% 可 reuse，只需微調：
node tools_node/compile-family-map-to-param-tune-tasks.js --screen-id <screenId> --dry-run
node tools_node/compile-family-map-to-param-tune-tasks.js --screen-id <screenId> --write
Step 4 — 確認既有資產
對每個目標路徑，用 file_search 確認是否已存在：
file_search { query: "assets/resources/sprites/ui_families/{family}/**" }
將結果分成：
exists: 路徑已有對應 spriteFramemissing: 需要美術生成
Step 5 — 產生 ArtRecipe / manifest
輸出 artifacts/ui-source/{screenId}/manifests/asset-task-manifest.json：
{
"screenId": "shop-main",
"generatedAt": "2026-04-05",
"artRecipes": [
{
"family": "tab",
"slots": [
{
"slotId": "tab.frame.active",
"targetPath": "assets/resources/sprites/ui_families/tab/tab_active.png",
"spriteFramePath": "sprites/ui_families/tab/tab_active/spriteFrame",
"status": "missing",
"spec": {
"size": [120, 40],
"sliceMode": "9-slice",
"sliceBorder": { "top": 8, "right": 8, "bottom": 8, "left": 8 },
"colorHint": "#C8A45A",
"styleNote": "戰國卷軸風格，活躍 tab，有金邊高亮"
}
}
]
}
],
"summary": {
"totalSlots": 12,
"existingSlots": 4,
"missingSlots": 8
}
}
Step 6 — 任務備忘
輸出一段給資產產線或美術人員的委託說明：
【資產委託備忘】
Screen: {screenId}
Missing family assets:
- tab: tab_active, tab_inactive（120×40, 9-slice 8px, 金邊/素邊）
- item-cell: cell_default（160×60, 9-slice 12px, 戰國卷軸質感）
請依據 asset-task-manifest / art-recipe 的 spec 生成對應 PNG，
放置路徑：assets/resources/sprites/ui_families/{family}/{asset}.png
生成後執行 ui-asset-qc skill 驗證。
品質門檻
- 每個在 skin manifest 中列出的 slot 都必須出現在 manifest 或 ArtRecipe
missing 的 slot 必須有 spec.size 和 spec.sliceBorder- 9-slice border 每邊不超過
size / 3（否則會撕裂），若超過須 flag
下一步
- 若 missingSlots > 0 → 交由資產產線依 manifest / ArtRecipe 生成資產
- 資產生成後 → 進入 ui-asset-qc 執行規則驗證與 review skeleton 更新
