Name: Design Assets
Author: cmanfre7

據 AlphaMoat 統計,截至 2026-09,Design Assets 累計下載 4,993 次、獲 2 個星標,在全部 5,078 個 AI 技能中排名第 1,841 位,在「設計創意」分類(512 個)中排名第 181 位。

累計安裝

514

累計下載

4993

星標

全站排名

#1,841

全站前 37% · 「設計創意」前 36%

平台	累計安裝	累計下載	星標	評論
ClawHub ↗	138	4110	2	-
SkillHub ↗	514	4993	2	—

各平台的計數口徑不同,統計時間不一致。

這個技能是做什麼的

該技能用於建立與編輯圖形設計素材，包括圖示、favicon、圖片與配色系統。它提供 macOS 原生的 sips、ImageMagick 的 magick 以及 SVG 等工具的用法片段，可生成多尺寸應用圖示、網站 favicon 與基於主色的調色盤，適合本地設計素材的生成與編輯。編輯前核對目標路徑並保留副本；檢查匯出的尺寸、格式和效果。

資料釋出於 2026-10-27

可以用來做什麼

生成一套多尺寸的應用圖示或網站 favicon
基於主色生成完整配色調色盤
在本地裁剪、轉換或批處理圖片

什麼時候用

需要製作應用圖示、favicon 或圖片變體時
需要從單一來源色構建配色系統時
需要在本地用 sips 或 magick 處理圖像時

示例提示詞

以下是根據技能文件生成的示例,不代表實際執行結果。

幫我的應用生成各種尺寸的圖示

根據主色做一個調色盤

把這張圖轉成 favicon

月度資料趨勢

累計下載4993

星標2

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。

月份	累計下載	環比	星標
2026-09	4993	—	2
2026-08	4379	+5.1%	2
2026-07	4167	+15.2%	2
2026-06	3616	-2.5%	2
2026-05	3710	—	2
2026-03	3187	—	2

SKILL.md 原文

以下是作者釋出的原始檔案,按純文字顯示,本站未做修改或稽核;其中的連結不可點選,命令請核實後再執行。抓取於 2026-10-23。

4.3 KB · ClawHub v1.0.0

# design-assets

Create and edit graphic design assets: icons, favicons, images, and color systems.

## Tool Selection

| Task | Tool | Why |
|------|------|-----|
| AI image generation | nano-banana-pro | Generate images from text prompts |
| Image resize/convert | sips | macOS native, fast, no deps |

展開全部(共 162 行)

| Advanced manipulation | ImageMagick | Compositing, effects, batch processing |
| Icons & logos | SVG | Scalable, small file size, editable |
| Screenshots | screencapture | macOS native |

## App Icon Generation

Generate all required sizes from a single 1024x1024 source icon.

### iOS / macOS Icon Sizes
```bash
#!/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
```bash
# 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

```bash
#!/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
```html
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
```

### site.webmanifest
```json
{
  "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:

```javascript
// HSL-based palette generation
function generatePalette(hue, saturation = 70) {
  return {
    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

# Convert format
magick input.png output.webp

# Add border
magick input.png -border 10 -bordercolor "#333" output.png

# 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

# Composite / overlay
magick base.png overlay.png -gravity center -composite output.png

# Batch resize all PNGs
magick mogrify -resize 50% *.png

# Create solid color image
magick -size 1200x630 xc:"#1a1a2e" output.png

# 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

# Exact resize
sips -z 600 800 input.png --out output.png

# Convert format
sips -s format jpeg input.png --out output.jpg

# Get image info
sips -g all input.png

# Rotate
sips --rotate 90 input.png --out output.png
```