Asset Creator

Asset Creator Skill

For each asset, fetch multiple reference icons before selecting the best match. The agent specifies the exact number of icons to read per asset.

logo

• Fetch reference icons
• Use EXACTLY as-is. Zero modifications.
• If no matching references found: Write the name of that brand/entity inside a visual box.

icon

• Fetch reference icons
• Use EXACTLY as-is. Zero modifications.
• If no matching references found: Create from scratch, keep simple like icons

customized

• Fetch reference icons
• If a reference matches description → use as-is
• Only if NO reference matches → tweak the closest one
• If no direct references found → search for similar references, understand their shape, and create the asset

character

• NO icon fetching
• Use to create from scratch

<rect x="10" y="10" width="80" height="60" rx="5" ry="5" fill="#3B82F6"/>

<circle cx="50" cy="50" r="40" fill="#EF4444"/>

<ellipse cx="50" cy="50" rx="40" ry="25" fill="#10B981"/>

<line x1="10" y1="10" x2="90" y2="90" stroke="#000" stroke-width="2"/>

<polyline points="10,90 50,10 90,90" fill="none" stroke="#000" stroke-width="2"/>

<polygon points="50,10 90,90 10,90" fill="#F59E0B"/>

Lowercase commands use relative coordinates (relative to current position).

<!-- Triangle -->
<path d="M 50 10 L 90 90 L 10 90 Z" fill="#8B5CF6"/>

<!-- Curved shape -->
<path d="M 10 50 Q 50 10 90 50 T 170 50" stroke="#000" fill="none"/>

<g transform="translate(50, 50)" fill="#3B82F6">
  <circle r="20"/>
  <rect x="-10" y="25" width="20" height="10"/>
</g>

<rect
  fill="#3B82F6"           /* Fill color */
  fill-opacity="0.8"       /* Fill transparency */
  stroke="#1D4ED8"         /* Stroke color */
  stroke-width="2"         /* Stroke width */
  stroke-opacity="0.9"     /* Stroke transparency */
  stroke-linecap="round"   /* Line end style: butt | round | square */
  stroke-linejoin="round"  /* Corner style: miter | round | bevel */
  stroke-dasharray="5 3"   /* Dash pattern */
/>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .primary { fill: #3B82F6; }
    .secondary { fill: #EF4444; }
    .outline { fill: none; stroke: #000; stroke-width: 2; }
  </style>

  <circle class="primary" cx="50" cy="50" r="30"/>
</svg>

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3B82F6"/>
    <stop offset="100%" stop-color="#8B5CF6"/>
  </linearGradient>
</defs>

<rect fill="url(#grad1)" x="10" y="10" width="80" height="80"/>

Reference defined elements:

<defs>
  <circle id="dot" r="5"/>
</defs>

<use href="#dot" x="20" y="20" fill="red"/>
<use href="#dot" x="50" y="50" fill="blue"/>
<use href="#dot" x="80" y="80" fill="green"/>

<defs>
  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#3B82F6"/>
    <stop offset="100%" stop-color="#EF4444"/>
  </linearGradient>
</defs>

<defs>
  <clipPath id="circle-clip">
    <circle cx="50" cy="50" r="40"/>
  </clipPath>
</defs>

<rect clip-path="url(#circle-clip)" x="0" y="0" width="100" height="100" fill="#3B82F6"/>

<defs>
  <mask id="fade-mask">
    <linearGradient id="fade" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="black"/>
    </linearGradient>
    <rect fill="url(#fade)" width="100" height="100"/>
  </mask>
</defs>

<rect mask="url(#fade-mask)" fill="#3B82F6" width="100" height="100"/>

1. Always use viewBox - Enables proper scaling
2. Use transparent background - No background rect unless needed
3. Group related elements - Use <g> for organization and shared transforms
4. Use meaningful IDs - For gradients, clips, and reusable elements
5. Optimize paths - Remove unnecessary precision (2 decimal places max)
6. Use classes for styling - Separate presentation from structure

<svg viewBox="minX minY width height" xmlns="http://www.w3.org/2000/svg">

(0,0) ─────────────────────────► X (width)
  │
  │     (25%,25%)        (75%,25%)
  │        ●────────────────●
  │        │                │
  │        │   (50%,50%)    │
  │        │       ●        │
  │        │    center      │
  │        │                │
  │        ●────────────────●
  │     (25%,75%)        (75%,75%)
  │
  ▼
 Y (height)

Keep icon centers within 10%-90% of viewBox to prevent clipping:

availableSpace = viewBoxSize * 0.8
maxScale = availableSpace / iconViewBoxSize

Process:

1. Identify the attachment point in the icon's original coordinate space (e.g., gun barrel tip)
2. Position the effect at that coordinate using transform="translate(x, y)"

Example: Gun with muzzle flash

<!-- Gun icon with viewBox 0 0 512 512, barrel tip at (486, 175) -->
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M79.238 115.768..." fill="#333"/>  <!-- Gun icon -->

  <!-- Position muzzle flash at barrel tip coordinates -->
  <g transform="translate(486, 175)">
    <polygon points="0,0 15,-8 12,0 15,8" fill="#FF6600">
      <animate attributeName="opacity" values="1;0;1" dur="0.1s" repeatCount="indefinite"/>
    </polygon>
  </g>
</svg>

Finding attachment points:

Debugging tip: Add a visible circle at the attachment point to verify position:

<circle cx="486" cy="175" r="5" fill="red"/>  <!-- Shows barrel tip location -->

❌ Wrong: rotate(-45) for 45° gives 315° (up-left), not 45°