本文へ移動
cccskills
無料GitHub で公開

ui-asset-gen-director

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)。

インストール方法を見る

含まれるファイル(1)

  • SKILL.md5.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

UI Asset Gen Director

這是 UI production pipeline 的第 3 步:根據 family-map 產生 ArtRecipe 與資產任務。

Unity 對照:相當於 Art Director 給美術師 Texture Spec Sheet — 明確規定每張 sprite 的尺寸、切割比例、解析度。


輸入

項目說明
familyMapPathartifacts/ui-source/{screenId}/proof/{screenId}.family-map.json(或 screenId)
missingFamiliesfamily-map 中 status: "asset-pending" 的 family 清單

輸出

  1. artifacts/ui-source/{screenId}/manifests/asset-task-manifest.json
  2. artifacts/ui-source/{screenId}/manifests/param-tune-manifest.json(若適用)
  3. artifacts/ui-source/{screenId}/tasks/*.json 或等價 ArtRecipe 任務

Slot 路徑慣例

部位路徑樣板
Frame Edgesprites/ui_families/{family}/frame_edge/spriteFrame
Frame Fillsprites/ui_families/{family}/frame_fill/spriteFrame
Frame Glowsprites/ui_families/{family}/frame_glow/spriteFrame
Frame Cornersprites/ui_families/{family}/frame_corner_tl/spriteFrame
Tab Activesprites/ui_families/{family}/tab_active/spriteFrame
Tab Inactivesprites/ui_families/{family}/tab_inactive/spriteFrame
Cell Defaultsprites/ui_families/{family}/cell_default/spriteFrame
Button Normalsprites/ui_families/{family}/btn_normal/spriteFrame
Button Pressedsprites/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: 路徑已有對應 spriteFrame
  • missing: 需要美術生成

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 更新

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Deterministic external-evidence web validation workflow for Sanguo ETL/RAG. USE FOR: 外部證據網站檢查、來源健康度、allowlist 驗證、來源 seed 覆蓋、3kweb-check、external evidence source health、fetch/parse/hash first、LLM reviewer second。

日本語の概要は準備中です。原文の説明を表示しています。

eaglhuang/3klife32026年10月13日 更新

Use when the user asks to switch AI role/mode/persona or uses role-trigger words such as Captain, Coordinator, 寫文章, 寫文章模式, 文章模式, 技術文章, 部落格, 出版, 預覽. Routes the request to Project Captain, Publishing Director, or Article Writing Mode, loads the matching keep memory when available, and applies the role's workflow without excessive roleplay.

日本語の概要は準備中です。原文の説明を表示しています。

eaglhuang/3klife32026年10月13日 更新

Write or revise AI-learning-notes article pages in "寫文章模式" when the user asks for articles, technical articles, blog posts, bilingual versions, article formatting consistency, shared article-base alignment, responsive layout, summary/TOC decisions, contrast, or publishing-flow compatibility.

日本語の概要は準備中です。原文の説明を表示しています。

eaglhuang/3klife32026年10月13日 更新

Plan ATM framework refactors by preserving atom/map semantics before splitting large governance modules.

日本語の概要は準備中です。原文の説明を表示しています。

eaglhuang/3klife32026年10月13日 更新

Captain 派工規範與決策手冊。當 AI 進入隊長模式或進行派工/派任務語境時,遵照這套標準,產出可供人類直接轉貼、高度結構化、符合 token 經濟且能動態適應可用 Roster 的派工單。

日本語の概要は準備中です。原文の説明を表示しています。

eaglhuang/3klife32026年10月13日 更新

Create and register an atom through the provisioning facade.

日本語の概要は準備中です。原文の説明を表示しています。

eaglhuang/3klife32026年10月13日 更新

eaglhuang のスキルをすべて見る

このスキルの問題を報告する