assetify

name

assetify

description

Generate one image or a batch of assets with Codex native image generation, then slice the result into reusable PNG/SVG deliverables. Use when the user wants a single material image, an icon set, a themed asset board, WeChat mini program entry art, or any workflow that benefits from writing an image-generation prompt, generating a composite board or one-off asset, cutting the board into separate files, and exporting SVG wrappers around cropped PNGs for downstream UI usage.

Assetify

Overview

Use this skill to turn a loose creative brief or reference image into production-ready image assets. Generate with the native image_gen tool first, inspect the result, then optionally slice the board with scripts/slice_asset_board.py and export cropped png files plus SVG wrapper files.

Always inspect the image visually before deciding how to slice it. Do not assume auto-detection or equal-grid slicing is correct just because a script can run.

Workflow

0. Lock the brief

Before writing an image prompt, extract the user's actual requested content and keep it as the source of truth:

• Preserve every requested subject, label, product name, module name, visual style, color requirement, background requirement, and output format.
• Do not substitute generic icon themes, stock categories, or unrelated examples.
• If the user names specific assets, generate exactly those assets unless the user changes the list.
• If the user asks for one asset, generate one asset. If the user asks for a batch, generate the requested batch count.
• If any required subject is ambiguous, ask a narrow clarification before generating instead of guessing.

Write a short internal brief before calling image generation:

asset_count:
subjects:
reference_identity:
allowed_changes:
required_text:
style:
background:
layout:
outputs:

Use that brief to build the generation prompt.

1. Decide the asset shape

Choose one of these modes before generating:

• Single asset: one illustration or one icon-like scene.
• Reference transformation: one or more assets derived from a user-provided image, preserving the reference identity while changing only requested details.
• Asset board: multiple modules in one image, intended for later slicing.
• User-provided board: skip generation and slice the supplied image directly.

Prefer an asset board when the user wants a unified style across several modules. Prefer near-square crops over extreme portrait or landscape slices unless the target surface explicitly needs banners or tall cards.

2. Build the generation prompt

Build the prompt from the locked brief, not from examples in this skill. The examples below are patterns only; replace their subjects and names with the user's actual request.

For reference-image transformations, use this structure:

• Start with 基于用户提供的参考图生成....
• List the exact visual identity to preserve: character type, hair, eyes, outfit, accessories, palette, rendering style, sticker/asset feel.
• List the requested changes only: pose, prop, action, expression, scene, or output framing.
• Add strong preservation constraints: keep the same character identity, same visual style, same color family, same rendering quality.
• Add negative constraints for common drift: no unrelated character, no unrelated object, no background unless requested, no text/logo/watermark, no style shift, no missing requested prop.
• For transparent assets, say 透明背景，真实透明底，不要黑底、白底、渐变底、场景背景或边框.

Good reference prompt skeleton:

基于用户提供的参考图生成一张单独的[用途]素材图。
保持参考图中[主体]的核心形象：[身份/发型/眼睛/服装/配饰/配色/画风]。
只改变[用户指定变化]：[动作/道具/表情/构图]。
输出要求：[透明背景/尺寸感/完整角色/贴纸感/高清锐利]。
禁止：[无关人物/无关道具/背景/文字/logo/水印/风格跑偏/漏掉用户指定元素]。

When generating a board, make the structure explicit in the prompt:

• State the exact number of modules.
• State the layout, such as 4x2 or 2x4.
• Default to a balanced layout instead of a single long strip. For 5 assets, prefer 3+2 or a 3x2 board with one intentionally empty slot, not 5x1.
• Ask for each module to have clear whitespace and easy-to-crop boundaries.
• Ask for one unified style, palette, line quality, and rendering approach.
• Default to transparent background unless the user explicitly wants a colored backdrop.
• Say do not add text unless text is explicitly desired.
• Name each module and the scene semantics for each one.
• Include a negative constraint that forbids unrelated themes, extra modules, extra labels, and subject substitutions.

Useful phrasing patterns:

• 一张图里包含 8 个独立可裁切的小图案
• 每个小图独立成景，留白充足，方便后期裁切
• 风格高度统一，像同一套产品插画资产
• 不要出现任何中文或英文文字
• 透明背景
• 每个模块独立悬浮，不共享整块底图
• 优先接近方形裁切比例，不要做成长条切片

If the user already knows the style, keep the prompt tight and concrete rather than descriptive for its own sake.

Default layout guide when the user does not specify one:

• 1: single asset
• 2: 2x1
• 3: prefer 2x2 with one empty slot unless the assets are naturally wide
• 4: 2x2
• 5: 3+2 or 3x2 with one empty slot
• 6: 3x2
• 7 or 8: 4x2
• 9: 3x3

3. Generate with the native image tool

Use the native image_gen tool for the actual image creation.

If the user wants revisions, regenerate with the new style guidance instead of over-explaining. Keep the semantic module list stable unless the user changes content. After generation, inspect whether the visible content matches the locked brief before slicing or packaging. If it is off-topic, regenerate with a stricter prompt instead of exporting it. For reference transformations, verify the result keeps the reference identity and includes the requested change. If either fails, regenerate with a prompt that explicitly names the missing or drifting detail. If transparent background is required, verify real transparency by checking the PNG alpha channel. A visible checkerboard pattern with alpha (255, 255) is fake transparency and must be fixed before delivery.

Alpha check:

python3 - <<'PY'
from PIL import Image
im = Image.open('/abs/path/image.png').convert('RGBA')
print(im.getchannel('A').getextrema())
PY

If the result is fake checkerboard transparency, run:

python3 scripts/transparentize_checkerboard.py \
  --input /abs/path/image.png \
  --output /abs/path/image.transparent.png

4. Locate the source image

Use one of these inputs:

• A generated image file from the Codex image output directory.
• A user-provided local image path.
• An image already attached in the conversation, if you can access its file path or a saved local copy.

5. Slice and export

Use scripts/slice_asset_board.py.

Choose the slicing method only after visually inspecting the generated board:

• If the modules are truly uniform and aligned, equal-grid slicing is acceptable.
• If the modules are uneven, staggered, or visually connected by effects, infer custom crop boxes manually from the image and pass them via --boxes-json.
• Treat scripts/detect_asset_boxes.py as a helper for drafting boxes, not as the source of truth.
• Review the draft boxes against the image before exporting final assets.

Auto-detect example:

python3 scripts/detect_asset_boxes.py \
  --input /abs/path/board.png \
  --output-json /abs/path/boxes.json \
  --expected-count 8 \
  --names jianmo,suyan,huanxing,shiyijian,meifajian,meizhuangjian,zaomengyinghua,zhaomumote

After running detection, inspect the resulting boxes and edit them if they do not match the actual module boundaries.

Equal-grid boards:

python3 scripts/slice_asset_board.py \
  --input /abs/path/board.png \
  --output-dir /abs/path/output \
  --grid 4x2 \
  --names jianmo,suyan,huanxing,shiyijian,meifajian,meizhuangjian,zaomengyinghua,zhaomumote

Custom crop boxes:

python3 scripts/slice_asset_board.py \
  --input /abs/path/board.png \
  --output-dir /abs/path/output \
  --boxes-json /abs/path/boxes.json \
  --contact-sheet

The script writes:

• One cropped png per asset
• One svg per asset that embeds the cropped PNG as a data URI
• One manifest.json summarizing names, dimensions, and output paths
• Optional contact-sheet.png preview for quick visual QA

6. Set expectations about SVG output

By default, the exported SVG files are wrappers around PNG crops. They are convenient for UI integration and asset packaging, but they are not true vector redraws.

If the user explicitly wants editable vector art:

• Do not promise that crop-wrapped SVG is true vector.
• Regenerate or redraw each asset as vector-native SVG artwork instead of wrapping PNGs.
• Treat that as a different deliverable from this default pipeline.

Decision Rules

• If the user asks for 一批素材, prefer generating one board first, then slicing.
• If the user provides a reference image, prioritize identity preservation over creative reinterpretation.
• If the user asks for only one hero image, skip slicing unless they also want asset packaging.
• If the user asks for a single website/app material image, return the generated image path directly after visual inspection; do not force PNG/SVG packaging.
• If the generated image does not match the user's requested subject, discard it and regenerate before doing any slicing or SVG export.
• If a requested prop/action is missing, regenerate before exporting.
• If the user does not specify background treatment, default to transparent background in the generation prompt.
• If transparent background is requested, do not trust visual checkerboards; verify alpha and postprocess fake checkerboard backgrounds.
• If the user does not specify layout, choose the most balanced grid that keeps each crop close to square.
• If the board spacing is visibly uneven, use --boxes-json instead of forcing equal-grid crops.
• If there is any ambiguity, inspect the image and set crop boxes manually rather than trusting auto-detection.
• Never use a script result as the final answer without checking whether the crops match the visible artwork.
• If the user asks for svg素材 without saying 纯矢量, SVG wrappers are acceptable, but state the limitation clearly.
• If precision matters, inspect image dimensions first so the grid math is explicit.

Crop Box JSON Format

For irregular layouts, create a JSON array like this:

[
  { "slug": "module-a", "label": "模块A", "x": 0, "y": 0, "width": 400, "height": 400 },
  { "slug": "module-b", "label": "模块B", "x": 400, "y": 0, "width": 400, "height": 400 }
]

Use integer pixel coordinates.

Deliverable Checklist

• Confirm the chosen visual style and semantic module list.
• For reference images, confirm the preserved identity and allowed changes.
• Generate or identify the source image.
• Inspect whether the result matches the requested subject before packaging.
• If transparency is requested, verify alpha channel and remove fake checkerboard background when needed.
• Inspect the image visually before choosing a slicing method.
• Slice into correctly named assets.
• Export both png and svg.
• Return the output directory path.
• State whether the SVG files are wrapper SVGs or true vector redraws.