🎨 デザインコミュニティ

baoyu-article-illustrator

記事の内容を理解し、視覚的な補助が必要な箇所に、様々なスタイルでイラストを自動生成できるため、記事にイラストを追加したり、イメージを生成したりする際に役立つSkill。

📜 元の英語説明(参考)

Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids with multiple style options. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o baoyu-article-illustrator.zip https://jpskill.com/download/19380.zip && unzip -o baoyu-article-illustrator.zip && rm baoyu-article-illustrator.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19380.zip -OutFile "$d\baoyu-article-illustrator.zip"; Expand-Archive "$d\baoyu-article-illustrator.zip" -DestinationPath $d -Force; ri "$d\baoyu-article-illustrator.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して baoyu-article-illustrator.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → baoyu-article-illustrator フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

スマート記事イラストレーションスキル

記事の構造と内容を分析し、視覚補助が必要な箇所を特定し、柔軟なスタイルオプションでイラストレーションを生成します。

使用方法

# 内容に基づいてスタイルを自動選択
/baoyu-article-illustrator path/to/article.md

# スタイルを指定
/baoyu-article-illustrator path/to/article.md --style tech
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style minimal

# 他のオプションと組み合わせる
/baoyu-article-illustrator path/to/article.md --style playful

オプション

オプション	説明
`--style <name>`	イラストレーションスタイルを指定します（下記のスタイルギャラリーを参照してください）

スタイルギャラリー

1. `elegant`

洗練された、上品な、プロフェッショナルな

色: ソフトコーラル、くすんだティール、ダスティローズ、クリーム色の背景
要素: 繊細な線画、控えめなアイコン、バランスの取れた構図
最適: プロフェッショナルな記事、ソートリーダーシップ、ビジネス関連のトピック

2. `tech`

モダンな、未来的な、デジタルな

色: ディープブルー、エレクトリックシアン、パープル、暗い背景
要素: 幾何学的な形状、回路パターン、データビジュアライゼーション、技術アイコン
最適: AI、プログラミング、テクノロジー、デジタルトランスフォーメーションに関する記事

3. `warm`

フレンドリーな、親しみやすい、人間中心の

色: ウォームオレンジ、ゴールデンイエロー、テラコッタ、クリーム
要素: 丸みを帯びた形状、フレンドリーなキャラクター、太陽/光のモチーフ、ハート
最適: 自己成長、ライフスタイル、教育、人間味のある物語

4. `bold`

高コントラスト、インパクトのある、エネルギッシュな

色: 鮮やかな赤/オレンジ、ディープブラック、明るい黄色のアクセント
要素: 力強い形状、劇的なコントラスト、ダイナミックな構図
最適: 意見記事、重要な警告、行動喚起コンテンツ

5. `minimal`

非常にクリーンな、禅のような、集中した

色: 黒、白、単一のアクセントカラー
要素: 最大限の余白、単一の焦点要素、シンプルな線
最適: 哲学、ミニマリズム、集中的な説明

6. `playful`

楽しい、クリエイティブな、気まぐれな

色: パステルレインボー、明るいポップカラー、明るい背景
要素: 落書き、風変わりなキャラクター、吹き出し、絵文字スタイルのアイコン
最適: チュートリアル、初心者向けガイド、カジュアルなコンテンツ、楽しいトピック

7. `nature`

オーガニックな、穏やかな、素朴な

色: フォレストグリーン、アースブラウン、スカイブルー、サンドベージュ
要素: 植物のモチーフ、自然なテクスチャ、流れるような線、有機的な形状
最適: サステナビリティ、ウェルネス、アウトドア関連のトピック、スローライフ

8. `sketch`

生々しい、本物のような、ノートブック風の

色: 鉛筆のグレー、紙の白、時折のカラーハイライト
要素: 粗い線、スケッチの跡、手書きのメモ、矢印
最適: 進行中のアイデア、ブレインストーミング、思考プロセス

9. `notion` (デフォルト)

ミニマリストな手描き線画、知的な

色: 黒の輪郭、白の背景、1〜2色のパステルアクセント
要素: シンプルな線画の落書き、幾何学的な形状、手描きの揺らぎ、最大限の余白
最適: 知識共有、概念説明、SaaSコンテンツ、生産性に関する記事

自動スタイル選択

--styleが指定されていない場合、コンテンツを分析して最適なスタイルを選択します。

コンテンツシグナル	選択されるスタイル
AI, coding, tech, digital, algorithm, data	`tech`
Personal story, emotion, growth, life, feeling	`warm`
Warning, urgent, must-read, critical, important	`bold`
Simple, zen, focus, essential, core	`minimal`
Fun, easy, beginner, tutorial, guide, how-to	`playful`
Nature, eco, wellness, health, organic, green	`nature`
Idea, thought, concept, draft, brainstorm	`sketch`
Business, professional, strategy, analysis	`elegant`
Knowledge, concept, productivity, SaaS, notion	`notion`

ファイル管理

イラストレーションは、記事と同じフォルダ内のimgs/サブディレクトリに保存されます。

path/to/
├── article.md
└── imgs/
    ├── outline.md
    ├── prompts/
    │   ├── illustration-concept-a.md
    │   ├── illustration-concept-b.md
    │   └── ...
    ├── illustration-concept-a.png
    ├── illustration-concept-b.png
    └── ...

ワークフロー

ステップ1: コンテンツの分析とスタイルの選択

記事のコンテンツを読み込みます。
--styleが指定されている場合は、そのスタイルを使用します。
それ以外の場合は、スタイルシグナルをスキャンして自動選択します。
主要な情報を抽出します。
- メイントピックとテーマ
- セクションごとの主要メッセージ
- 視覚化が必要な抽象的な概念

ステップ2: イラストレーションの配置箇所の特定

イラストレーションの3つの目的:

情報の補足: 抽象的な概念の理解を助けます。
概念の視覚化: 抽象的なアイデアを具体的なビジュアルに変換します。
想像力の誘導: 雰囲気を作り出し、読書体験を向上させます。

イラストレーションに適したコンテンツ:

視覚化が必要な抽象的な概念
図が必要なプロセス/ステップ
視覚的な表現が必要な比較
補強が必要な主要な議論
想像力の誘導が必要なシナリオ

イラストレーションの数:

主要なセクションごとに少なくとも1つの画像を検討します。
主要な議論と抽象的な概念を優先します。
原則: 少ないよりは多い方が良い

ステップ3: イラストレーションプランの生成

# イラストレーションプラン

**記事**: [記事のパス]
**スタイル**: [選択されたスタイル]
**イラストレーション数**: N枚

---

## イラストレーション1

**挿入位置**: [セクション名] / [段落の説明]
**目的**: [ここにイラストレーションが必要な理由]
**視覚コンテンツ**: [画像が示すべき内容]
**ファイル名**: illustration-[slug].png

---

## イラストレーション2
...

ステップ4: プロンプトファイルの作成

プロンプトはprompts/ディレクトリにスタイル固有の詳細とともに保存されます。

プロンプト形式:

Illustration theme: [2-3語のコンセプト]
Style: [スタイル名]

Visual composition:
- Main visual: [スタイルに合わせた説明]
- Layout: [要素の配置]
- Decorative elements: [スタイルに適した装飾要素]

Color scheme:
- Primary: [スタイルのプライマリカラー]
- Background:

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Smart Article Illustration Skill

Analyze article structure and content, identify positions requiring visual aids, and generate illustrations with flexible style options.

Usage

# Auto-select style based on content
/baoyu-article-illustrator path/to/article.md

# Specify a style
/baoyu-article-illustrator path/to/article.md --style tech
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style minimal

# Combine with other options
/baoyu-article-illustrator path/to/article.md --style playful

Options

Option	Description
`--style <name>`	Specify illustration style (see Style Gallery below)

Style Gallery

1. `elegant`

Refined, sophisticated, professional

Colors: Soft coral, muted teal, dusty rose, cream background
Elements: Delicate line work, subtle icons, balanced composition
Best for: Professional articles, thought leadership, business topics

2. `tech`

Modern, futuristic, digital

Colors: Deep blue, electric cyan, purple, dark backgrounds
Elements: Geometric shapes, circuit patterns, data visualizations, tech icons
Best for: AI, programming, technology, digital transformation articles

3. `warm`

Friendly, approachable, human-centered

Colors: Warm orange, golden yellow, terracotta, cream
Elements: Rounded shapes, friendly characters, sun/light motifs, hearts
Best for: Personal growth, lifestyle, education, human interest stories

4. `bold`

High contrast, impactful, energetic

Colors: Vibrant red/orange, deep black, bright yellow accents
Elements: Strong shapes, dramatic contrast, dynamic compositions
Best for: Opinion pieces, important warnings, call-to-action content

5. `minimal`

Ultra-clean, zen-like, focused

Colors: Black, white, single accent color
Elements: Maximum whitespace, single focal element, simple lines
Best for: Philosophy, minimalism, focused explanations

6. `playful`

Fun, creative, whimsical

Colors: Pastel rainbow, bright pops, light backgrounds
Elements: Doodles, quirky characters, speech bubbles, emoji-style icons
Best for: Tutorials, beginner guides, casual content, fun topics

7. `nature`

Organic, calm, earthy

Colors: Forest green, earth brown, sky blue, sand beige
Elements: Plant motifs, natural textures, flowing lines, organic shapes
Best for: Sustainability, wellness, outdoor topics, slow living

8. `sketch`

Raw, authentic, notebook-style

Colors: Pencil gray, paper white, occasional color highlights
Elements: Rough lines, sketch marks, handwritten notes, arrows
Best for: Ideas in progress, brainstorming, thought processes

9. `notion` (Default)

Minimalist hand-drawn line art, intellectual

Colors: Black outlines, white background, 1-2 pastel accents
Elements: Simple line doodles, geometric shapes, hand-drawn wobble, maximum whitespace
Best for: Knowledge sharing, concept explanations, SaaS content, productivity articles

Auto Style Selection

When no --style is specified, analyze content to select the best style:

Content Signals	Selected Style
AI, coding, tech, digital, algorithm, data	`tech`
Personal story, emotion, growth, life, feeling	`warm`
Warning, urgent, must-read, critical, important	`bold`
Simple, zen, focus, essential, core	`minimal`
Fun, easy, beginner, tutorial, guide, how-to	`playful`
Nature, eco, wellness, health, organic, green	`nature`
Idea, thought, concept, draft, brainstorm	`sketch`
Business, professional, strategy, analysis	`elegant`
Knowledge, concept, productivity, SaaS, notion	`notion`

File Management

Save illustrations to imgs/ subdirectory in the same folder as the article:

path/to/
├── article.md
└── imgs/
    ├── outline.md
    ├── prompts/
    │   ├── illustration-concept-a.md
    │   ├── illustration-concept-b.md
    │   └── ...
    ├── illustration-concept-a.png
    ├── illustration-concept-b.png
    └── ...

Workflow

Step 1: Analyze Content & Select Style

Read article content
If --style specified, use that style
Otherwise, scan for style signals and auto-select
Extract key information:
- Main topic and themes
- Core messages per section
- Abstract concepts needing visualization

Step 2: Identify Illustration Positions

Three Purposes of Illustrations:

Information Supplement: Help understand abstract concepts
Concept Visualization: Transform abstract ideas into concrete visuals
Imagination Guidance: Create atmosphere, enhance reading experience

Content Suitable for Illustrations:

Abstract concepts needing visualization
Processes/steps needing diagrams
Comparisons needing visual representation
Core arguments needing reinforcement
Scenarios needing imagination guidance

Illustration Count:

Consider at least 1 image per major section
Prioritize core arguments and abstract concepts
Principle: More is better than fewer

Step 3: Generate Illustration Plan

# Illustration Plan

**Article**: [article path]
**Style**: [selected style]
**Illustration Count**: N images

---

## Illustration 1

**Insert Position**: [section name] / [paragraph description]
**Purpose**: [why illustration needed here]
**Visual Content**: [what the image should show]
**Filename**: illustration-[slug].png

---

## Illustration 2
...

Step 4: Create Prompt Files

Save prompts to prompts/ directory with style-specific details.

Prompt Format:

Illustration theme: [concept in 2-3 words]
Style: [style name]

Visual composition:
- Main visual: [description matching style]
- Layout: [element positioning]
- Decorative elements: [style-appropriate decorations]

Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]

Text content (if any):
- [Any labels or captions in content language]

Style notes: [specific style characteristics]

Step 5: Generate Images

Image Generation Skill Selection:

Check available image generation skills
If multiple skills available, ask user to choose

Generation Flow:

Call selected image generation skill with prompt file and output path
Generate images sequentially
After each image, output progress: "Generated X/N"
On failure, auto-retry once
If retry fails, log reason, continue to next

Step 6: Update Article

Insert generated images at corresponding positions:

![illustration description](imgs/illustration-[slug].png)

Insertion Rules:

Insert image after corresponding paragraph
Leave one blank line before and after image
Alt text uses concise description in article's language

Step 7: Output Summary

Article Illustration Complete!

Article: [article path]
Style: [style name]
Generated: X/N images successful

Illustration Positions:
- illustration-xxx.png → After section "Section Name"
- illustration-yyy.png → After section "Another Section"
...

[If any failures]
Failed:
- illustration-zzz.png: [failure reason]

Style Reference Details

elegant

Colors: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
Background: Warm cream (#F5F0E6), soft beige
Accents: Gold (#C9A962), copper
Elements: Delicate lines, refined icons, subtle gradients, balanced whitespace

tech

Colors: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
Background: Dark gray (#1A202C), near-black (#0D1117)
Accents: Neon green (#00FF88), bright white
Elements: Circuit patterns, data nodes, geometric grids, glowing effects

warm

Colors: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
Background: Cream (#FFFAF0), soft peach (#FED7AA)
Accents: Deep brown (#744210), soft red
Elements: Rounded shapes, smiling faces, sun rays, hearts, cozy lighting

bold

Colors: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
Background: Deep black (#000000), dark charcoal
Accents: White, neon highlights
Elements: Strong shapes, exclamation marks, arrows, dramatic contrast

minimal

Colors: Pure black (#000000), white (#FFFFFF)
Background: White or off-white (#FAFAFA)
Accents: Single color (content-derived)
Elements: Single focal point, maximum negative space, thin precise lines

playful

Colors: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
Background: Light cream (#FFFBEB), soft white
Accents: Bright pops - yellow, coral, turquoise
Elements: Doodles, stars, swirls, cute characters, speech bubbles

nature

Colors: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
Accents: Sunset orange, water blue
Elements: Leaves, trees, mountains, organic flowing lines, natural textures

sketch

Colors: Pencil gray (#4A5568), paper white (#FAFAFA)
Background: Off-white paper texture (#F7FAFC)
Accents: Single highlight color (blue, red, or yellow)
Elements: Rough sketch lines, arrows, handwritten labels, crossed-out marks

notion

Colors: Black (#1A1A1A), dark gray (#4A4A4A)
Background: Pure white (#FFFFFF), off-white (#FAFAFA)
Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
Elements: Simple line doodles, hand-drawn wobble effect, geometric shapes, stick figures, maximum whitespace
Typography: Clean hand-drawn lettering, simple sans-serif labels

Notes

Illustrations serve the content: supplement information, visualize concepts
Maintain selected style consistency across all illustrations in one article
Image generation typically takes 10-30 seconds per image
Sensitive figures should use cartoon alternatives
Prompt and illustration text language should match article language

baoyu-article-illustrator

🇯🇵 日本人クリエイター向け解説

🎯 このSkillでできること

📦 インストール方法 (3ステップ)

📖 Skill本文(日本語訳)

スマート記事イラストレーションスキル

使用方法

オプション

スタイルギャラリー

1. elegant

2. tech

3. warm

4. bold

5. minimal

6. playful

7. nature

8. sketch

9. notion (デフォルト)

自動スタイル選択

ファイル管理

ワークフロー

ステップ1: コンテンツの分析とスタイルの選択

ステップ2: イラストレーションの配置箇所の特定

ステップ3: イラストレーションプランの生成

ステップ4: プロンプトファイルの作成

Smart Article Illustration Skill

Usage

Options

Style Gallery

1. elegant

2. tech

3. warm

4. bold

5. minimal

6. playful

7. nature

8. sketch

9. notion (Default)

Auto Style Selection

File Management

Workflow

Step 1: Analyze Content & Select Style

Step 2: Identify Illustration Positions

Step 3: Generate Illustration Plan

Step 4: Create Prompt Files

Step 5: Generate Images

Step 6: Update Article

Step 7: Output Summary

Style Reference Details

elegant

tech

warm

bold

minimal

playful

nature

sketch

notion

Notes

1. `elegant`

2. `tech`

3. `warm`

4. `bold`

5. `minimal`

6. `playful`

7. `nature`

8. `sketch`

9. `notion` (デフォルト)

1. `elegant`

2. `tech`

3. `warm`

4. `bold`

5. `minimal`

6. `playful`

7. `nature`

8. `sketch`

9. `notion` (Default)