From svg-header-image
テンプレートベースのSVGヘッダー画像生成。タイトル・サブタイトルから美しいヘッダー画像を作成。外部API不要。「ヘッダー画像作って」「タイトル画像を作って」「アイキャッチを生成」で発動。
How this skill is triggered — by the user, by Claude, or both
Slash command
/svg-header-image:svg-header-imageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
テンプレートベースでプロフェッショナルなヘッダー画像をSVGで生成。ノイズテクスチャ、グローエフェクト、コーナーアクセント等のリッチな表現を含む。外部API不要。
テンプレートベースでプロフェッショナルなヘッダー画像をSVGで生成。ノイズテクスチャ、グローエフェクト、コーナーアクセント等のリッチな表現を含む。外部API不要。
図解・フローチャートが必要なら svg-diagram または mermaid-to-webp を使用。
node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
--output <output.svg> \
--title "メインタイトル" \
[options]
| オプション | 説明 |
|---|---|
--output, -o | 出力SVGファイルパス |
--title, -t | メインタイトル |
| オプション | 説明 | デフォルト |
|---|---|---|
--subtitle, -s | サブタイトル | なし |
--theme | テーマ名 | midnight |
--theme-file | カスタムテーマJSONファイル | なし |
--badge | バッジテキスト(右上) | なし |
--category | カテゴリラベル(上部) | なし |
--width, -w | 出力幅(px) | 1920 |
--height, -h | 出力高さ(px) | 1080 |
--list-themes | テーマ一覧を表示 | - |
| テーマ | 名前 | 特徴 |
|---|---|---|
midnight | Midnight | ダークブルー系、サイバー感。デフォルト |
ocean | Ocean Deep | ブルー/シアン系、深海感 |
lavender | Lavender Dream | パープル系、幻想的 |
neon | Neon Cyber | サイバーパンク、グリッドパターン |
geometric | Bold Geometric | ダーク、幾何学的装飾 |
| テーマ | 名前 | 特徴 |
|---|---|---|
sunset | Sunset | レッド/ピンク系、情熱的 |
forest | Forest | グリーン系、自然・成長 |
| テーマ | 名前 | 特徴 |
|---|---|---|
glass | Soft Glass | ライト系、柔らかい印象 |
node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
-o header.svg \
-t "AIエージェント入門"
node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
-o header.svg \
-t "Claude Code完全ガイド" \
-s "2025年最新版" \
--badge "NEW" \
--category "TUTORIAL"
node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
-o square.svg \
-t "SNS用画像" \
-w 1080 -h 1080
{
"name": "Corporate Blue",
"type": "v3",
"bg": ["#0a1628", "#162d50", "#1e3a5f"],
"accent": ["#4da6ff", "#66b3ff", "#99ccff"],
"text": "#ffffff",
"subText": "#b0c4de"
}
node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
-o header.svg \
-t "企業プレゼン" \
--theme-file ./corporate.json --theme "Corporate Blue"
生成したSVGをWebPに変換するには svg-to-webp プラグインを使用:
node <svg-to-webp-plugin>/scripts/convert.js \
-i header.svg -o header.webp --quality 90
| エフェクト | 説明 |
|---|---|
| ノイズテクスチャ | フィルムグレイン風の質感 |
| グローエフェクト | 光の拡散効果(背景のオーブ) |
| ドロップシャドウ | テキストに深みを追加 |
| グリッドパターン | 背景に繊細なパターン |
| コーナーアクセント | 四隅の装飾線 |
npx claudepluginhub haboshi/claude-code-skills --plugin svg-header-imageGenerates code-based visual assets: SVG icons, OG image HTML templates, social banners, and icon sets. Outputs files with light/dark variants and usage instructions.
Creates, edits, reviews, and validates high-quality SVG graphics with W3C compliance, CSS independence, accessibility, and safety.
Provides HTML and CSS patterns for creating visually consistent section headers with eyebrow text, titles, badges, and optional CTAs for both dark and light themes.