360 Secure SkillHub
360 安全技能中心

Dressup Playable Maker

该 Skill 通过 scripts/generate.py 脚本，把用户自备的角色、发型、服装、鞋子、背景与可选 UI 素材按模板合成为换装互动试玩广告，输出 index.html、mraid.js 及图片资源，并可在 config.js、style.css、index.html 中调整配色、布局与换装分类，面向 Mintegral 等移动广告平台的 MRAID 形式。

lxnan
lxnan
热度 75.20
最近更新 2026-05-17 13:13:07
分类：营销依赖：代码执行 / 读写文件应用场景：模板 / 品牌素材

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add dressup-playable-maker
Metadata
name
dressup-playable-maker
description
Create dress-up style playable ads for mobile advertising platforms like Mintegral. Use when the user needs to create or customize a fashion dress-up interactive ad with character customization, clothing items, and CTA buttons. Supports template-based generation with customizable assets (character, clothes, background, UI styles).

Dressup Playable Maker

Create interactive dress-up playable ads for mobile advertising platforms.

Quick Start

Generate a new playable from template:

python3 scripts/generate.py --input-dir /path/to/assets --output-dir /path/to/output

Required Assets Structure

Input folder should contain:

assets/
├── character/
│   ├── body.png          # Base character body
│   ├── hair/
│   │   ├── hair_1.png
│   │   ├── hair_2.png
│   │   └── hair_3.png
│   ├── dress/
│   │   ├── dress_1.png
│   │   ├── dress_2.png
│   │   └── dress_3.png
│   └── shoes/
│       ├── shoes_1.png
│       ├── shoes_2.png
│       └── shoes_3.png
├── background.jpg        # Game background
└── ui/
    ├── button_bg.png     # Selection button background (optional)
    └── hand_cursor.png   # Hand hint cursor (optional)

Customization Options

Colors

Edit generated config.js:

  • primaryColor: Main theme color
  • buttonBorderColor: Selected item border color
  • backgroundOverlay: Background tint

Layout

Edit generated style.css:

  • --character-scale: Character size (default: 1.1)
  • --button-size: Selection button size
  • --bottom-spacing: Distance from buttons to screen bottom

Categories

Modify steps array in index.html to change clothing categories:

  • Default: ['hair', 'dress', 'shoes']
  • Can add: ['accessory', 'makeup', 'background']

Output Structure

output/
├── index.html      # Main game file (v57)
├── mraid.js        # MRAID support
└── assets/         # Copied and optimized images

Platform Support

  • Mintegral: Full support with MRAID 3.0
  • Other platforms: Generic playable format

Best Practices

  1. Image sizes: Keep character parts under 500KB each
  2. Format: Use PNG for transparency, JPG for backgrounds
  3. Dimensions: Character parts should align at same canvas size
  4. Testing: Always test on actual mobile devices

Version History

  • v57: Fixed hair/head item selection bug (index mismatch)
  • v56: Initial version

Advanced: Manual Customization

For full control, edit the generated index.html:

  • defaultHair, defaultDress, defaultShoes: Set default outfits
  • gameReady(), gameStart(), gameEnd(): Lifecycle hooks
  • window.install(): CTA button action

Troubleshooting

Character parts not aligning: Ensure all images have same canvas size and anchor point.

Buttons too small/large: Adjust --button-size in CSS or regenerate with different base size.

Performance issues: Reduce image file sizes, limit to 3-4 clothing items per category.

Selection showing wrong item: Fixed in v57 - ensure using latest template.