本文へ移動
cccskills
無料GitHub で公開日本語紹介

ios-icon-gen

SF SymbolsやIconify APIからiOS・macOS向けのアイコンを選び、既存の配色やサイズに合わせてXcode用のPNG素材一式を生成するスキル。

原文原文の説明を見る

Generate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols (5000+ Apple-native) or Iconify API (275k+ open source icons from 200+ collections). Use when generating icons, creating icon assets, adding icons to asset catalog, or searching for icons for iOS projects.

インストール方法を見る

こんなときに便利

  • Xcode用のアイコン素材を作りたいとき
  • 既存のデザインに合うアイコン探し
  • 仮置きのアイコンを差し替えたいとき
  • 解像度別のPNGを用意したいとき

日本語での紹介

できること

SF SymbolsやIconify APIからアイコンを選び、Xcodeのアセットカタログに取り込めるPNG素材を生成します。1x・2x・3xの画像とContents.jsonをまとめた.imagesetを作成します。色やサイズを指定でき、SF Symbolsでは線の太さも調整できます。既存のアイコンの寸法や配色を確認し、見た目をそろえる手順も含まれます。

こんなときに便利

iOS・macOSアプリの画面に使うアイコンを用意したいときや、仮置きの素材を差し替えたいときに向いています。Iconifyの複数のコレクションから用途や作風に合う候補を探し、生成前にプレビューする流れにも対応します。

使い方の例

  • 「領収書を表すアイコンをIconifyで探し、既存素材と同じ色とサイズで生成して」
  • 「SF Symbolsのcameraを使い、Assets.xcassetsに画像一式を追加して」

注意点

Iconify APIの利用にはインターネット接続が必要です。SF Symbolsによる生成はmacOS専用で、Swiftのスクリプトを使います。生成後は画像を目視確認し、プロジェクトをビルドしてXcodeが素材を認識するか確かめます。

この紹介文は、公開されている SKILL.md をもとに AI(Claude Haiku)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(3)

  • SKILL.md5.5 KB
  • scripts/generate_icons.swift8.2 KB
  • scripts/iconify_gen.sh6.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

iOS Icon Generator

Generate PNG icon imagesets for Xcode asset catalogs from two sources.

When to Activate

  • Generating icon assets for an iOS/macOS Xcode project
  • Searching for icons across open source collections
  • Creating PNG imagesets (1x, 2x, 3x) for asset catalogs
  • Replacing placeholder icons with production-quality assets
  • Matching existing icon styles in an Xcode project

Core Principles

1. Two Sources, One Output Format

Both sources produce identical Xcode-compatible imagesets. Choose based on need:

SourceIconsRequiresBest for
Iconify API275,000+ from 200+ collectionsInternetWide selection, specific styles, open source icons
SF Symbols5,000+ Apple symbolsmacOS onlyApple-native style, offline use

2. Always Match Existing Style

Before generating, check the project's existing icons for size, color, and weight consistency.

3. Output Structure

Both methods produce a complete Xcode imageset:

<output-dir>/<asset-name>.imageset/
  Contents.json
  <asset-name>.png        # 1x (68px default)
  <asset-name>@2x.png     # 2x (136px default)
  <asset-name>@3x.png     # 3x (204px default)

Examples

Step 1: Assess Requirements

Determine icon needs: what the icon represents, preferred style, target color, and size.

If the project already has icons, check existing style:

# Check dimensions of existing icon
sips -g pixelWidth -g pixelHeight path/to/existing@2x.png

Step 2: Search for Icons

Iconify API (recommended for wide selection):

# Search all collections
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"

# Search within a specific collection
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi

# List available collections
$SKILL_DIR/scripts/iconify_gen.sh collections

SF Symbols (for Apple-native style): Browse the SF Symbols app or reference common names:

Use CaseSymbol Name
Documentdoc.text, doc.fill
Receiptdoc.text.below.ecg, receipt
Personperson.crop.rectangle, person.text.rectangle
Cameracamera, camera.fill
Scandoc.viewfinder, qrcode.viewfinder
Settingsgearshape, slider.horizontal.3

Step 3: Preview (Optional)

# Iconify preview
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline

Step 4: Generate

Iconify API:

# Basic generation
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport

# Custom color and output location
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons

Options: --size <pt> (default: 68), --color <hex> (default: 8E8E93), --output <dir> (default: /tmp/icons)

SF Symbols:

# Basic generation
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport

# Custom color, weight, and output
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons

Options: --size <pt> (default: 68), --color <hex> (default: 8E8E93), --weight <name> (default: thin), --output <dir> (default: /tmp/icons)

Step 5: Verify and Integrate

  1. Read the generated @2x PNG to verify visually
  2. Copy to asset catalog if not output there directly:
    cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
    
  3. Build the project to verify Xcode picks up the new assets

Popular Iconify Collections

PrefixNameCountStyle
mdiMaterial Design Icons7400+Filled + outline variants
phPhosphor9000+6 weights per icon
solarSolar7400+Bold, linear, outline
tablerTabler Icons6000+Consistent stroke width
lucideLucide1700+Clean, minimal
riRemix Icon3100+Filled + line variants
carbonCarbon2400+IBM design language
heroiconsHeroIcons1200+Tailwind CSS companion

Browse all: https://icon-sets.iconify.design/

Scripts Reference

ScriptSourcePath
iconify_gen.shIconify API (275k+ icons)$SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swiftSF Symbols (5k+ icons)$SKILL_DIR/scripts/generate_icons.swift

Best Practices

  • Search before generating -- browse available icons to find the best match
  • Match existing project style -- check dimensions, color, and weight of existing icons before generating new ones
  • Use Iconify for variety -- 200+ collections means you can find the exact style you need
  • Use SF Symbols for Apple consistency -- they match system UI perfectly
  • Generate directly to asset catalog -- use --output ./Assets.xcassets/icons to skip manual copying
  • Verify visually -- always preview the @2x PNG before committing

Anti-Patterns

  • Generating icons without checking existing project icon style
  • Using default colors when the project has a defined color palette
  • Generating at wrong sizes (check existing icons first)
  • Committing generated icons without visual verification

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

accessibility

無料日本語概要

Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。

  • アイコンボタンの説明を付けたいとき
  • キーボード操作とモーダルの点検
  • コントラストや操作対象の大きさの確認
affaan-m/ECC27.7万2026年10月12日 更新

agent-architecture-audit

無料日本語概要

AIエージェントの不調を、指示・記憶・ツール実行・画面表示など12の層から調べるスキル。コードやログを根拠に原因を整理し、重要度順の指摘と修正案をまとめます。

  • アプリ内だけで起きる不調を調べたいとき
  • 過去の会話が混ざる原因を調査
  • ツールの未実行や実行の誤報を確認
affaan-m/ECC27.7万2026年10月12日 更新

agent-eval

無料日本語概要

実際の開発課題で複数のコーディングエージェントを比較するスキル。成功率、取得可能なAPI費用、所要時間、繰り返し実行の安定性を測り、選定や更新後の評価に使えます。

  • 実際の開発課題でエージェントを比較
  • 新しいツールやモデルの導入前評価
  • エージェント更新後の性能確認
affaan-m/ECC27.7万2026年10月12日 更新

agent-harness-construction

無料日本語概要

AIエージェントが使うツールの種類や入出力、エラーからの復帰手順を設計・見直します。文脈の情報量も整理し、作業完了率や再試行回数で改善を評価します。

  • エージェントのツールや入力形式の設計
  • ツールの結果と次の行動を明確にしたいとき
  • 安全な再試行と停止条件を定めたいとき
affaan-m/ECC27.7万2026年10月12日 更新

agent-introspection-debugging

無料日本語概要

AIエージェントが失敗や同じ操作を繰り返す原因を、エラーと実行状況から整理します。小さな復旧操作を試し、結果と根拠を引き継げる報告にまとめるスキルです。

  • エージェントの連続失敗を診断したいとき
  • 同じツール操作のループ調査
  • 情報の蓄積による出力劣化の点検
affaan-m/ECC27.7万2026年10月5日 更新

agent-introspection-debugging

無料日本語概要

AIエージェントの失敗や同じ操作の繰り返しを記録し、原因の切り分け、小さな復旧操作、結果の報告まで進める手順を示して、根拠のある再試行につなげるスキル。

  • 同じツール操作を繰り返す原因の調査
  • 会話の肥大化による品質低下の調査
  • ファイルパスや環境の食い違いの確認
affaan-m/ECC27.7万2026年10月12日 更新

affaan-m のスキルをすべて見る

このスキルの問題を報告する