image-analysis

画像分析 — 色の抽出

任意の画像ファイル（PNG、JPG、WebP、BMP、GIF）から主要な色を抽出し、構造化されたパレットを返します。スクリーンショット、Figma のエクスポート、デザインのモックアップに合わせた UI の実装に役立ちます。

使用するタイミング

• ユーザーがスクリーンショットやデザイン画像を提供し、それを実装したい場合
• ユーザーが画像から色を抽出または特定したい場合
• ユーザーが写真やモックアップからカラーパレットを取得したい場合
• ユーザーがコードの色を参照画像に合わせたい場合

仕組み

1. get-pixels を使用して画像ファイルを読み込み、生のピクセルデータを取得します
2. ピクセルデータを extract-colors に渡し、主要な色を計算します
3. 面積／目立ちやすさの順に並べたパレットを、16 進数、RGB、HSL の値と面積の占有率とともに返します

使用方法

画像のパスを最初の引数に指定して、抽出スクリプトを実行します。

bash <skill-path>/scripts/extract-colors.sh /path/to/image.png

引数：

• $1 — 画像ファイルへのパス（必須）。PNG、JPG、WebP、BMP、GIF に対応しています。

例：

# Extract colors from a screenshot
bash <skill-path>/scripts/extract-colors.sh ./screenshot.png

# Extract colors from a Figma export
bash <skill-path>/scripts/extract-colors.sh ~/Downloads/figma-design.jpg

出力

スクリプトは、目立ちやすさの順に並べた色の JSON 配列を出力します。

[
  {
    "hex": "#1a1a2e",
    "red": 26,
    "green": 26,
    "blue": 46,
    "hue": 0.6667,
    "saturation": 0.2778,
    "lightness": 0.1412,
    "area": 0.3241
  },
  {
    "hex": "#e94560",
    "red": 233,
    "green": 69,
    "blue": 96,
    "hue": 0.9724,
    "saturation": 0.7928,
    "lightness": 0.5922,
    "area": 0.1856
  }
]

フィールド	型	説明
hex	String	16 進数形式の色（例：#1a1a2e）
red	Integer	赤チャンネル（0～255）
green	Integer	緑チャンネル（0～255）
blue	Integer	青チャンネル（0～255）
hue	Number	色相（0～1）
saturation	Number	彩度（0～1）
lightness	Number	明度（0～1）
area	Number	相対的な面積／目立ちやすさ（0～1）

結果をユーザーに提示する

色を抽出した後、構造化されたパレットとして提示します。

Color Palette (sorted by prominence):

1. #1a1a2e — 32.4% (dark navy) — Primary background
2. #e94560 — 18.6% (coral red) — Accent color
3. #f5f5f5 — 15.2% (light gray) — Secondary background
...

次に、ユーザーのコードベースでこれらの色を使う方法を提案します。

• CSS カスタムプロパティ／変数
• Tailwind 設定のテーマカラー
• デザイントークンの定義
• コンポーネントのスタイルで直接使用

トラブルシューティング

「Cannot find module」エラー

スクリプトは初回実行時に依存関係（extract-colors、get-pixels）を自動インストールします。失敗した場合は、手動でインストールしてください。

cd <skill-path>/scripts && npm install

未対応の画像形式

基盤となる get-pixels ライブラリは、PNG、JPG、GIF、BMP に対応しています。それ以外の形式の場合は、先に画像を変換してください。

大きな画像の処理が遅い

extract-colors ライブラリは、デフォルトで自動的に 64,000 ピクセルにダウンサンプリングします。非常に大きな画像も十分高速に処理できますが、必要に応じてスクリプトの pixels オプションを調整できます。