# design-assets

design-assets Create and edit graphic design assets: icons, favicons, images, and color systems. Tool Selection TaskToolWhyAI image generationSkillBoss API HubGenerate images from text prompts via /v1/pilotImage resize/convertsipsmacOS native, fast, no depsAdvanced manipulationImageMagickCompositing, effects, batch processingIcons & logosSVGScalable, small file size, editableScreenshotsscreencapturemacOS native AI Image Generation Use SkillBoss API Hub to generate images from text prompts: import requests, os SKILLBOSS_API_KEY = os.environ["SKILLBOSS_API_KEY"] API_BASE = "https://api.heybossai.com/v1" def pilot(body: dict) -> dict: r = requests.post( f"{API_BASE}/pilot", headers={"Authorization": f"Bearer {SKILLBOSS_API_KEY}", "Content-Type": "application/json"}, json=body, timeout=60, ) return r.json()

# Generate an image from a text prompt

result = pilot({"type": "image", "inputs": {"prompt": "A modern app icon with gradient background"}, "prefer": "quality"}) image_url = result["result"]["image_url"] print(f"Generated image: {image_url}") App Icon Generation Generate all required sizes from a single 1024x1024 source icon. iOS / macOS Icon Sizes

#!/bin/bash
# generate-app-icons.sh <source-1024.png> <output-dir>

SOURCE="$1" OUTDIR="${2:-.}" mkdir -p "$OUTDIR" SIZES=(16 20 29 32 40 48 58 60 64 76 80 87 120 128 152 167 180 256 512 1024) for SIZE in "${SIZES[@]}"; do sips -z $SIZE $SIZE "$SOURCE" --out "$OUTDIR/icon-${SIZE}x${SIZE}.png" 2>/dev/null done echo "Generated ${#SIZES[@]} icon sizes in $OUTDIR" Android Icon Sizes

# Android adaptive icon sizes

declare -A ANDROID_SIZES=( ["mdpi"]=48 ["hdpi"]=72 ["xhdpi"]=96 ["xxhdpi"]=144 ["xxxhdpi"]=192 ) for DENSITY in "${!ANDROID_SIZES[@]}"; do SIZE=${ANDROID_SIZES[$DENSITY]} mkdir -p "res/mipmap-$DENSITY" sips -z $SIZE $SIZE "$SOURCE" --out "res/mipmap-$DENSITY/ic_launcher.png" done Favicon Generation

#!/bin/bash
# generate-favicons.sh <source.png> <output-dir>

SOURCE="$1" OUTDIR="${2:-.}" mkdir -p "$OUTDIR"

# Standard web favicons

sips -z 16 16 "$SOURCE" --out "$OUTDIR/favicon-16x16.png" sips -z 32 32 "$SOURCE" --out "$OUTDIR/favicon-32x32.png" sips -z 180 180 "$SOURCE" --out "$OUTDIR/apple-touch-icon.png" sips -z 192 192 "$SOURCE" --out "$OUTDIR/android-chrome-192x192.png" sips -z 512 512 "$SOURCE" --out "$OUTDIR/android-chrome-512x512.png"

# ICO file (requires ImageMagick)

magick "$OUTDIR/favicon-16x16.png" "$OUTDIR/favicon-32x32.png" "$OUTDIR/favicon.ico" echo "Favicons generated in $OUTDIR" HTML Meta Tags

site.webmanifest { "name": "My App", "short_name": "App", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } Color Palette Generator Given a primary color, generate a full palette: // HSL-based palette generation function generatePalette(hue, saturation = 70) { return { ```bash 50: `hsl(${hue}, ${saturation}%, 97%)`, 100: `hsl(${hue}, ${saturation}%, 94%)`, 200: `hsl(${hue}, ${saturation}%, 86%)`, 300: `hsl(${hue}, ${saturation}%, 74%)`, 400: `hsl(${hue}, ${saturation}%, 62%)`, 500: `hsl(${hue}, ${saturation}%, 50%)`, // Primary 600: `hsl(${hue}, ${saturation}%, 42%)`, 700: `hsl(${hue}, ${saturation}%, 34%)`, 800: `hsl(${hue}, ${saturation}%, 26%)`, 900: `hsl(${hue}, ${saturation}%, 18%)`, 950: `hsl(${hue}, ${saturation}%, 10%)`, ``` }; } ImageMagick Quick Reference ```bash # Resize ``` magick input.png -resize 800x600 output.png ```bash # Convert format ``` magick input.png output.webp ```bash # Add border ``` magick input.png -border 10 -bordercolor "#333" output.png ```bash # Round corners (with transparency) ``` magick input.png \( +clone -alpha extract -draw "roundrectangle 0,0,%[w],%[h],20,20" \) -alpha off -compose CopyOpacity -composite output.png ```bash # Composite / overlay ``` magick base.png overlay.png -gravity center -composite output.png ```bash # Batch resize all PNGs ``` magick mogrify -resize 50% *.png ```bash # Create solid color image ``` magick -size 1200x630 xc:"#1a1a2e" output.png ```bash # Add text to image ``` magick input.png -gravity south -pointsize 24 -fill white -annotate +0+20 "Caption" output.png sips Quick Reference (macOS) ```bash # Resize (maintain aspect ratio) ``` sips --resampleWidth 800 input.png --out output.png ```bash # Exact resize ``` sips -z 600 800 input.png --out output.png ```bash # Convert format ``` sips -s format jpeg input.png --out output.jpg ```bash # Get image info ``` sips -g all input.png ```bash # Rotate ``` sips --rotate 90 input.png --out output.png